feat: 📦 Update svelte to version 5.

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Test
+name: Check and build
 
 on:
     push:
@@ -10,13 +10,13 @@ jobs:
     test:
         runs-on: ubuntu-latest
         steps:
-            - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
               with:
-                  node-version: 18
+                  node-version: 20
             # Install dependencies
             - run: npm ci
+            # Check
+            - run: npm run check
             # Build
             - run: npm run build
-            # Test
-            - run: npm run check

README.md

@@ -34,10 +34,8 @@ $ npm run build
 
 ## Load unpacked extensions
 
-[Getting Started Tutorial](https://developer.chrome.com/docs/extensions/mv3/getstarted/)
+[Getting Started Tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked)
 
 1. Open the Extension Management page by navigating to `chrome://extensions`.
 2. Enable Developer Mode by clicking the toggle switch next to `Developer mode`.
 3. Click the `LOAD UNPACKED` button and select the `/dist` directory.
-
-![Example](https://wd.imgix.net/image/BhuKGJaIeLNPW9ehns59NfwqKxF2/vOu7iPbaapkALed96rzN.png?auto=format&w=571)

package.json

@@ -10,18 +10,17 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "check": "svelte-check --tsconfig ./tsconfig.json"
+        "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
     },
     "devDependencies": {
         "@crxjs/vite-plugin": "2.0.0-beta.26",
-        "@sveltejs/vite-plugin-svelte": "2.4.5",
-        "@tsconfig/svelte": "5.0.2",
-        "@types/chrome": "0.0.243",
-        "svelte": "4.2.0",
-        "svelte-check": "3.5.0",
-        "svelte-preprocess": "5.0.4",
-        "tslib": "2.6.2",
-        "typescript": "5.2.2",
-        "vite": "4.2.3"
+        "@sveltejs/vite-plugin-svelte": "4.0.0",
+        "@tsconfig/svelte": "5.0.4",
+        "@types/chrome": "0.0.279",
+        "svelte": "5.0.5",
+        "svelte-check": "4.0.5",
+        "tslib": "2.8.0",
+        "typescript": "5.6.3",
+        "vite": "5.4.10"
     }
 }

src/background/index.ts

@@ -1,11 +1,10 @@
-import { get } from "svelte/store";
 import { count } from "../storage";
 
 // Background service workers
 // https://developer.chrome.com/docs/extensions/mv3/service_workers/
 
 chrome.runtime.onInstalled.addListener(() => {
-    console.log(get(count));
+    count.subscribe(console.log);
 });
 
 // NOTE: If you want to toggle the side panel from the extension's action button,

src/components/Options.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-    import { onMount } from "svelte";
     import { type Writable } from "svelte/store";
 
-    export let count: Writable<number>;
+    interface Props {
+        count: Writable<number>;
+    }
 
-    onMount(() => {
-        console.log(`Options onMount count=${$count}`);
-    });
+    let { count }: Props = $props();
 </script>
 
 <div class="container">
     <p>Current count: <b>{$count}</b></p>
     <div>
-        <button on:click={() => ($count -= 1)}>-</button>
-        <button on:click={() => ($count += 1)}>+</button>
+        <button onclick={() => ($count -= 1)}>-</button>
+        <button onclick={() => ($count += 1)}>+</button>
     </div>
 </div>
 

src/content/index.ts

@@ -1,4 +1,4 @@
-import { get } from "svelte/store";
+import { mount } from "svelte";
 import Overlay from "../components/Overlay.svelte";
 import { count } from "../storage";
 
@@ -9,7 +9,7 @@ import { count } from "../storage";
 import "./styles.css";
 
 // Some JS on the page
-console.log(`CONTENT: ${get(count)}`);
+count.subscribe(console.log);
 
 // Some svelte component on the page
-new Overlay({ target: document.body });
+mount(Overlay, { target: document.body });

src/options/index.ts

@@ -1,3 +1,4 @@
+import { mount } from "svelte";
 import Options from "../components/Options.svelte";
 import { count } from "../storage";
 
@@ -8,10 +9,7 @@ function render() {
     const target = document.getElementById("app");
 
     if (target) {
-        new Options({
-            target,
-            props: { count },
-        });
+        mount(Options, { target, props: { count } });
     }
 }
 

src/popup/index.ts

@@ -1,3 +1,4 @@
+import { mount } from "svelte";
 import Options from "../components/Options.svelte";
 import { count } from "../storage";
 
@@ -8,10 +9,7 @@ function render() {
     const target = document.getElementById("app");
 
     if (target) {
-        new Options({
-            target,
-            props: { count },
-        });
+        mount(Options, { target, props: { count } });
     }
 }
 

src/sidepanel/index.ts

@@ -1,3 +1,4 @@
+import { mount } from "svelte";
 import Options from "../components/Options.svelte";
 import { count } from "../storage";
 
@@ -8,10 +9,7 @@ function render() {
     const target = document.getElementById("app");
 
     if (target) {
-        new Options({
-            target,
-            props: { count },
-        });
+        mount(Options, { target, props: { count } });
     }
 }
 

src/storage.ts

@@ -1,4 +1,4 @@
-import { writable, type Writable } from 'svelte/store';
+import { writable, type Writable } from "svelte/store";
 
 /**
  * Creates a persistent Svelte store backed by Chrome's sync storage.
@@ -27,7 +27,7 @@ export function persistentStore<T>(key: string, initialValue: T): Writable<T> {
 
     function watchChrome() {
         chrome.storage.sync.onChanged.addListener((changes) => {
-            if (!(Object.hasOwn(changes, key))) return;
+            if (!Object.hasOwn(changes, key)) return;
 
             const value = changes[key].newValue as T;
             if (storeValueQueue.length > 0 && value === storeValueQueue[0]) {
@@ -42,10 +42,7 @@ export function persistentStore<T>(key: string, initialValue: T): Writable<T> {
 
     // Initialize the store with the value from Chrome storage
     chrome.storage.sync.get(key).then((result) => {
-        let value = Object.hasOwn(result, key) ? result[key] : initialValue;
-        if (!Object.hasOwn(result, key)) {
-            console.log(`Persistent store: couldn't find key [${key}] in chrome storage. Default to initial value [${initialValue}]`)
-        }
+        const value = Object.hasOwn(result, key) ? result[key] : initialValue;
         chromeValueQueue.push(value);
         store.set(value);
         watchStore();
@@ -55,4 +52,4 @@ export function persistentStore<T>(key: string, initialValue: T): Writable<T> {
     return store;
 }
 
-export const count = persistentStore("count", 10);
+export const count = persistentStore("count", 10);

tsconfig.json

@@ -13,8 +13,10 @@
          */
         "allowJs": true,
         "checkJs": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "moduleDetection": "force"
     },
-    "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+    "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+    // https://github.com/vitejs/vite/issues/18139
     "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,10 +1,13 @@
-// vite tsconfig
 {
     "compilerOptions": {
         "composite": true,
+        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
         "skipLibCheck": true,
         "module": "ESNext",
-        "moduleResolution": "bundler"
+        "moduleResolution": "bundler",
+        "strict": true,
+        "noEmit": true,
+        "noUncheckedSideEffectImports": true
     },
     "include": ["vite.config.ts", "src/manifest.config.ts", "package.json"]
 }