Must destroy svelte

src/hello.svelte

@@ -5,6 +5,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { version } from "./api";
+    import { showMessage } from "siyuan";
     export let name: string;
 
     let time;
@@ -21,6 +22,14 @@
         time = new Date();
     }, 1000);
 
+    setInterval(async () => {
+        ver = await version();
+        showMessage(
+            `Hello ${name} v${ver}`,
+            5000
+        );
+    }, 10000);
+
 </script>
 
 <div id="hello">

src/index.ts

@@ -9,6 +9,10 @@ import "./index.scss";
 
 export default class SamplePlugin extends Plugin {
 
+    counter: { [key: string]: number } = {
+        hello: 0,
+    };
+
     async onload() {
         console.log("onload");
         showMessage("Hello World");
@@ -25,22 +29,32 @@ export default class SamplePlugin extends Plugin {
         let dialog = new Dialog({
             title: "SettingPannel",
             content: `<div id="SettingPanel"></div>`,
-            width: "600px"
+            width: "600px",
+            destroyCallback: (options) => {
+                console.log("destroyCallback", options);
+                //You must destroy the component when the dialog is closed
+                pannel.$destroy();
+            }
         });
-        new SettingPannel({
+        let pannel = new SettingPannel({
             target: dialog.element.querySelector("#SettingPanel"),
         });
     }
 
     private openHelloDialog() {
+        this.counter.hello++;
         let dialog = new Dialog({
             title: "Hello World",
             content: `<div id="helloPanel"></div>`,
+            destroyCallback(options) {
+                //You must destroy the component when the dialog is closed
+                hello.$destroy();
+            },
         });
-        new Hello({
+        let hello = new Hello({
             target: dialog.element.querySelector("#helloPanel"),
             props: {
-                name: this.i18n.name,
+                name: `[${this.counter.hello}]${this.i18n.name}`,
             }
         });
     }

src/libs/setting-panel.svelte

@@ -1,7 +1,13 @@
 <script>
-    import { } from "os";
     import SettingItem from "./setting-item.svelte";
     import { showMessage } from "siyuan";
+    import { onMount, onDestroy } from 'svelte';
+    onMount(() => {
+        showMessage("Setting panel opened");
+    });
+    onDestroy(() => {
+        showMessage("Setting panel closed");
+    });
 </script>
 
 <!--
@@ -10,6 +16,17 @@ with the same UI style in SiYuan
 -->
 
 <div class="config__tab-container">
+    <div data-type="Header" class="fn__flex b3-label">
+        <div class="fn_flex-1">
+            <h4>This setting panel is provided by a svelte component</h4>
+            <div class="b3-label__text">
+                <span class="fn__flex-1">
+                    See:
+                    <pre style="display: inline">/lib/setting-pannel.svelte</pre>
+                </span>
+            </div>
+        </div>
+    </div>
     <SettingItem
         type="checkbox"
         title="Checkbox"
@@ -17,7 +34,9 @@ with the same UI style in SiYuan
         settingKey="Checkbox"
         settingValue={true}
         on:changed={(event) => {
-            showMessage(`Checkbox changed: ${event.detail.key} = ${event.detail.value}`);
+            showMessage(
+                `Checkbox changed: ${event.detail.key} = ${event.detail.value}`
+            );
         }}
     />
     <SettingItem
@@ -28,7 +47,9 @@ with the same UI style in SiYuan
         settingValue=""
         placeholder="Input something"
         on:changed={(event) => {
-            showMessage(`Input changed: ${event.detail.key} = ${event.detail.value}`);
+            showMessage(
+                `Input changed: ${event.detail.key} = ${event.detail.value}`
+            );
         }}
     />
     <SettingItem
@@ -53,7 +74,9 @@ with the same UI style in SiYuan
             right: "Right",
         }}
         on:changed={(event) => {
-            showMessage(`Select changed: ${event.detail.key} = ${event.detail.value}`);
+            showMessage(
+                `Select changed: ${event.detail.key} = ${event.detail.value}`
+            );
         }}
     />
     <SettingItem
@@ -68,7 +91,9 @@ with the same UI style in SiYuan
             step: 1,
         }}
         on:changed={(event) => {
-            showMessage(`Slide changed: ${event.detail.key} = ${event.detail.value}`);
+            showMessage(
+                `Slide changed: ${event.detail.key} = ${event.detail.value}`
+            );
         }}
     />
 </div>