From 187206062e53c73e0ce8d0d77b835b6d7b9cf84e Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Wed, 8 Jan 2025 13:51:46 +0800
Subject: [PATCH] docs: Update content script UI examples to use Svelte v5
 (#1342)

---
 docs/guide/essentials/content-scripts.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/guide/essentials/content-scripts.md b/docs/guide/essentials/content-scripts.md
index 86e346bb7..83d2a135f 100644
--- a/docs/guide/essentials/content-scripts.md
+++ b/docs/guide/essentials/content-scripts.md
@@ -200,6 +200,7 @@ export default defineContentScript({
 ```ts [Svelte]
 // entrypoints/example-ui.content/index.ts
 import App from './App.svelte';
+import { mount, unmount } from 'svelte';
 
 export default defineContentScript({
   matches: ['<all_urls>'],
@@ -210,14 +211,13 @@ export default defineContentScript({
       anchor: 'body',
       onMount: (container) => {
         // Create the Svelte app inside the UI container
-        const app = new App({
+        mount(App, {
           target: container,
         });
-        return app;
       },
       onRemove: (app) => {
         // Destroy the app when the UI is removed
-        app.$destroy();
+        unmount(app);
       },
     });
 
@@ -381,6 +381,7 @@ export default defineContentScript({
 // 1. Import the style
 import './style.css';
 import App from './App.svelte';
+import { mount, unmount } from 'svelte';
 
 export default defineContentScript({
   matches: ['<all_urls>'],
@@ -395,14 +396,13 @@ export default defineContentScript({
       anchor: 'body',
       onMount: (container) => {
         // Create the Svelte app inside the UI container
-        const app = new App({
+        mount(App, {
           target: container,
         });
-        return app;
       },
-      onRemove: (app) => {
+      onRemove: () => {
         // Destroy the app when the UI is removed
-        app?.$destroy();
+        unmount(app);
       },
     });