Skip to content

Commit 1872060

Browse files
authored
docs: Update content script UI examples to use Svelte v5 (#1342)
1 parent 2615e29 commit 1872060

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

docs/guide/essentials/content-scripts.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ export default defineContentScript({
200200
```ts [Svelte]
201201
// entrypoints/example-ui.content/index.ts
202202
import App from './App.svelte';
203+
import { mount, unmount } from 'svelte';
203204

204205
export default defineContentScript({
205206
matches: ['<all_urls>'],
@@ -210,14 +211,13 @@ export default defineContentScript({
210211
anchor: 'body',
211212
onMount: (container) => {
212213
// Create the Svelte app inside the UI container
213-
const app = new App({
214+
mount(App, {
214215
target: container,
215216
});
216-
return app;
217217
},
218218
onRemove: (app) => {
219219
// Destroy the app when the UI is removed
220-
app.$destroy();
220+
unmount(app);
221221
},
222222
});
223223

@@ -381,6 +381,7 @@ export default defineContentScript({
381381
// 1. Import the style
382382
import './style.css';
383383
import App from './App.svelte';
384+
import { mount, unmount } from 'svelte';
384385

385386
export default defineContentScript({
386387
matches: ['<all_urls>'],
@@ -395,14 +396,13 @@ export default defineContentScript({
395396
anchor: 'body',
396397
onMount: (container) => {
397398
// Create the Svelte app inside the UI container
398-
const app = new App({
399+
mount(App, {
399400
target: container,
400401
});
401-
return app;
402402
},
403-
onRemove: (app) => {
403+
onRemove: () => {
404404
// Destroy the app when the UI is removed
405-
app?.$destroy();
405+
unmount(app);
406406
},
407407
});
408408

0 commit comments

Comments
 (0)