Merge pull request #7 from siyuan-note/dev

Up to date with `plugin-sample` v0.0.5

Author: frostime

README.md

@@ -178,3 +178,26 @@ The github action is included in this sample, you can use it to publish your new
             prerelease: true # change this to false
     ```
 
+
+## How to remove svelte dependencies
+
+This plugin is packaged in vite and provides a dependency on the svelte framework. However, in practice some developers may not want to use svelte and only want to use the vite package.
+
+In fact you can use this template without using svelte without any modifications at all. The compilation-related parts of the svelte compilation are loaded into the vite workflow as plugins, so even if you don't have svelte in your project, it won't matter much.
+
+If you insist on removing all svelte dependencies so that they do not pollute your workspace, you can perform the following steps. 1.
+
+1. delete the
+    ```json
+    {
+      "@sveltejs/vite-plugin-svelte": "^2.0.3",
+      "@tsconfig/svelte": "^4.0.1",
+      "svelte": "^3.57.0"
+    }
+    ```
+2. delete the `svelte.config.js` file
+3. delete the following line from the `vite.config.js` file
+    - Line 6: `import { svelte } from "@sveltejs/vite-plugin-svelte"`
+    - Line 20: `svelte(),`
+4. delete line 37 of `tsconfig.json` from `"svelte"` 5.
+5. re-run `pnpm i`

README_zh_CN.md

@@ -167,4 +167,25 @@ PR 社区集市仓库。
             prerelease: true # 把这个改为 false
     ```
 
+## 如何去掉 svelte 依赖
 
+本插件使用 vite 打包，并提供了 svelte 框架依赖。不过实际情况下可能有些开发者并不想要 svelte，只希望使用 vite 打包。
+
+实际上你可以完全不做任何修改，就可以在不使用 svelte 的前提下使用这个模板。与 svelte 编译的编译相关的部分是以插件的形式载入到 vite 的工作流中，所以即使你的项目里面没有 svelte，也不会有太大的影响。
+
+如果你执意希望删除掉所有 svelte 依赖以免它们污染你的工作空间，可以执行一下步骤:
+
+1. 删掉 package.json 中的
+    ```json
+    {
+      "@sveltejs/vite-plugin-svelte": "^2.0.3",
+      "@tsconfig/svelte": "^4.0.1",
+      "svelte": "^3.57.0"
+    }
+    ```
+2. 删掉 `svelte.config.js` 文件
+3. 删掉 `vite.config.js` 文件中的
+    - 第六行: `import { svelte } from "@sveltejs/vite-plugin-svelte"`
+    - 第二十行: `svelte(),`
+4. 删掉 `tsconfig.json` 中 37 行 `"svelte"`
+5. 重新执行 `pnpm i`

src/hello.svelte

@@ -1,11 +1,9 @@
-<!--
- * Copyright (c) 2023 frostime. All rights reserved.
- * https://github.com/frostime/sy-plugin-template-vite
--->
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
     import { version } from "./api";
     import { showMessage } from "siyuan";
+    import Typo from "./libs/b3-typography.svelte";
+
     export let name: string;
     export let i18n: any;
 
@@ -43,9 +41,10 @@
         </div>
     </div>
 
-    <div>
+    <Typo>
+        <h2>Wellcome to plugin sample with vite & svelte</h2>
         <p>{@html i18n.makesure}</p>
-    </div>
+    </Typo>
 
 </div>
 

src/index.ts

@@ -1,7 +1,3 @@
-/**
- * Copyright (c) 2023 frostime. All rights reserved.
- * https://github.com/frostime/sy-plugin-template-vite
- */
 import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan";
 import "./index.scss";
 
@@ -15,14 +11,11 @@ const DOCK_TYPE = "dock_tab";
 
 export default class SamplePlugin extends Plugin {
 
-    counter: { [key: string]: number } = {
-        hello: 0,
-    };
     private customTab: () => any;
 
     async onload() {
         showMessage("Hello SiYuan Plugin");
-        console.log(this.i18n.helloPlugin);
+        this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
 
         const topBarElement = this.addTopBar({
             icon: "iconEmoji",
@@ -79,10 +72,35 @@ export default class SamplePlugin extends Plugin {
 
     }
 
+    onLayoutReady() {
+        this.loadData(STORAGE_NAME);
+    }
+
+    onunload() {
+        console.log(this.i18n.byePlugin);
+        showMessage("Goodbye SiYuan Plugin");
+        console.log("onunload");
+    }
+
     private wsEvent({ detail }: any) {
         console.log(detail);
     }
 
+    private blockIconEvent({detail}: any) {
+        console.log(detail);
+        detail.menu.addSeparator(0);
+        const ids: string[] = [];
+        detail.blockElements.forEach((item: HTMLElement) => {
+            ids.push(item.getAttribute("data-node-id"));
+        });
+        detail.menu.addItem({
+            index: 1,
+            iconHTML: "",
+            type: "readonly",
+            label: "IDs<br>" + ids.join("<br>"),
+        });
+    }
+
     private async addMenu(rect: DOMRect) {
         const menu = new Menu("topBarSample", () => {
             console.log(this.i18n.byeMenu);
@@ -127,25 +145,79 @@ export default class SamplePlugin extends Plugin {
             }
         });
         menu.addItem({
-            icon: "iconTrashcan",
-            label: "Remove Data",
+            icon: "iconLayout",
+            label: "Open Float Layer(open help)",
             click: () => {
-                this.removeData(STORAGE_NAME);
+                this.addFloatLayer({
+                    ids: ["20230523173319-xj1l3qu", "20230523173321-55o0w2n"],
+                    defIds: ["20230523173323-imgm9tp", "20230523173324-cxu98t3"],
+                    x: window.innerWidth - 768 - 120,
+                    y: 32
+                });
             }
         });
         menu.addItem({
-            icon: "iconSelect",
-            label: "On ws-main",
+            icon: "iconTrashcan",
+            label: "Remove Data",
             click: () => {
-                this.eventBus.on("ws-main", this.wsEvent);
+                this.removeData(STORAGE_NAME).then(() => {
+                    this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
+                });
             }
         });
         menu.addItem({
-            icon: "iconClose",
-            label: "Off ws-main",
-            click: () => {
-                this.eventBus.off("ws-main", this.wsEvent);
-            }
+            icon: "iconScrollHoriz",
+            label: "Event Bus",
+            type: "submenu",
+            submenu: [{
+                icon: "iconSelect",
+                label: "On ws-main",
+                click: () => {
+                    this.eventBus.on("ws-main", this.wsEvent);
+                }
+            }, {
+                icon: "iconClose",
+                label: "Off ws-main",
+                click: () => {
+                    this.eventBus.off("ws-main", this.wsEvent);
+                }
+            }, {
+                icon: "iconSelect",
+                label: "On click-blockicon",
+                click: () => {
+                    this.eventBus.on("click-blockicon", this.blockIconEvent);
+                }
+            }, {
+                icon: "iconClose",
+                label: "Off click-blockicon",
+                click: () => {
+                    this.eventBus.off("click-blockicon", this.blockIconEvent);
+                }
+            }, {
+                icon: "iconSelect",
+                label: "On click-pdf",
+                click: () => {
+                    this.eventBus.on("click-pdf", this.wsEvent);
+                }
+            }, {
+                icon: "iconClose",
+                label: "Off click-pdf",
+                click: () => {
+                    this.eventBus.off("click-pdf", this.wsEvent);
+                }
+            }, {
+                icon: "iconSelect",
+                label: "On click-editorcontent",
+                click: () => {
+                    this.eventBus.on("click-editorcontent", this.wsEvent);
+                }
+            }, {
+                icon: "iconClose",
+                label: "Off click-editorcontent",
+                click: () => {
+                    this.eventBus.off("click-editorcontent", this.wsEvent);
+                }
+            }]
         });
         menu.addSeparator();
         menu.addItem({
@@ -181,7 +253,6 @@ export default class SamplePlugin extends Plugin {
     }
 
     private openHelloInDialog() {
-        this.counter.hello++;
         let dialog = new Dialog({
             title: "Hello World",
             content: `<div id="helloPanel"></div>`,
@@ -198,9 +269,4 @@ export default class SamplePlugin extends Plugin {
             }
         });
     }
-
-    async onunload() {
-        showMessage("Goodbye SiYuan Plugin");
-        console.log("onunload");
-    }
 }

src/libs/b3-list.svelte

@@ -0,0 +1,3 @@
+<div class="item__readme b3-typography">
+    <slot/>
+</div>