Update svelte template to use Svelte 5

[Extarys]

Summary

Svelte 5 is out and the svelte template should be updated to use the latest version.

Is your feature request related to a bug/issue?

No

Alternatives

Manually trying to update results in packing error when building:

In dev mode, the popup cannot be loaded

    "devDependencies": {
        "@sveltejs/vite-plugin-svelte": "^3.1.1",
        "@tsconfig/svelte": "^5.0.4",
        "@types/webextension-polyfill": "^0.10.7",
        "svelte": "^5.0.3",
        "svelte-check": "^3.8.6",
        "tslib": "^2.6.3",
        "typescript": "^5.3.2",
        "vite": "^5.4.9",
        "vite-plugin-web-extension": "^4.1.6",
        "webextension-polyfill": "^0.10.0"
    }

(Testing with firefox)

Additional Context

I believe I have the cors issue in dev mode even without the changes (fresh template) with svelte-ts.

[m-krebs]

Did you try to use npx sv migrate svelte-5 script? With that I have no issues using Svelte 5.

[Extarys]

Nope, I didn't :joy: Thanks, I'll give it a try :+1:

[m-krebs]

To be fair, it's the first time svelte has a migration script :)

[Extarys]

It's working flawlessly. Future readers:

Side note I'll investigate how to fix but: Firefox manifest config adapted for v3

{
    "{{chrome}}.manifest_version": 3,
    "{{firefox}}.manifest_version": 3,
    "icons": {
        "16": "icon/16.png",
        "32": "icon/32.png",
        "48": "icon/48.png",
        "96": "icon/96.png",
        "128": "icon/128.png"
    },
    "{{chrome}}.action": {
        "default_popup": "src/popup.html"
    },
    "{{firefox}}.action": {
        "default_popup": "src/popup.html"
    },
    "background": {
        "{{chrome}}.service_worker": "src/background.ts",
        "{{firefox}}.scripts": ["src/background.ts"],
        "{{firefox}}.type": "module"
    },
}

For firefox though we get Content-Security-Policy: The page’s settings blocked a script (script-src-elem) at http://localhost:5173/src/popup.ts from being executed because it violates the following directive: “script-src 'self'”.

I'll close as it's easy enough to update this ourselves with the svelte script :D

[Extarys]

Oops, trying to fix the firefox specific issue above, I found that we need to run `vite build --watch (https://github.com/crxjs/chrome-extension-tools/issues/882), but trying to build throws:

$ vite build
vite v5.4.9 building for production...

Build Steps
  1. Building src/popup.html indvidually
  2. Building src/background.ts indvidually

Building src/popup.html (1/2)
vite v5.4.9 building for production...
✓ 29 modules transformed.
x Build failed in 238ms
✓ 0 modules transformed.
x Build failed in 274ms
error during build:
[web-extension:manifest] src/popup.ts (2:9): "mount" is not exported by "node_modules/svelte/src/runtime/index.js", imported by "src/popup.ts".
file: Monorepo/apps/webext-paladin/src/popup.ts:2:9

1: import Popup from './pages/Popup.svelte'
2: import { mount } from "svelte";
            ^
3: 
4: mount(Popup, { target: document.body });

file: Monorepo/apps/webext/src/popup.ts:2:9

1: import Popup from './pages/Popup.svelte'
2: import { mount } from "svelte";
            ^
3: 
4: mount(Popup, { target: document.body });

src/popup.ts (2:9): "mount" is not exported by "node_modules/svelte/src/runtime/index.js", imported by "src/popup.ts".
file: Monorepo/apps/webext-paladin/src/popup.ts:2:9

1: import Popup from './pages/Popup.svelte'
2: import { mount } from "svelte";
            ^
3: 
4: mount(Popup, { target: document.body });

    at getRollupError (file://Monorepo/node_modules/rollup/dist/es/shared/parseAst.js:395:41)
    at error (file://Monorepo/node_modules/rollup/dist/es/shared/parseAst.js:391:42)
    at Module.error (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:15535:16)
    at Module.traceVariable (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:15984:29)
    at ModuleScope.findVariable (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:13770:39)
    at Identifier.bind (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:5035:40)
    at CallExpression.bind (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:2855:23)
    at CallExpression.bind (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:11235:15)
    at ExpressionStatement.bind (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:2855:23)
    at Program.bind (file://Monorepo/node_modules/rollup/dist/es/shared/node-entry.js:2851:28)

Did you notice anything like this while testing after running the svelte 5 migration script @aklinker1 ?

[Extarys]

Welp, this will turn into a wiki :joy:

Ok, so the migration script broke stuff it seems Current popup.ts:

import Popup from './pages/Popup.svelte'
import { mount } from "svelte";

mount(Popup, { target: document.body });

Should be kept as the original from the template:

import Popup from "./pages/Popup.svelte";

new Popup({ target: document.body });

And for firefox, we need to do the following for dev mode: "dev:ff": "NODE_ENV=development vite build --watch

[m-krebs]

Maybe I misunderstood your last point, but it looks like you want to keep the popup.ts the same as the template one? Because if that's so, then why is the reason to use svelte 5 syntax? If it's something else you mean, I apologize.

In #216 I updated the svelte-js/ts templates to match the new svelte 5 syntax.

The error before, with mount is not expoorted should be solved by running your prefered npm install command, to replace the node modules of svelte with the new ones.

[Extarys]

Oh, l did remove node_modules and reinstalled but I still had the error. But the new runes syntax also throws error so that should have been a clue that something was wrong.

I deleted bun cache and node_modules, and replaced the popup.ts with the one provided and now it appears to be working. <3 Thank you Sensei for your time and patience :pray:

[m-krebs]

You're welcome, we are all on the same journey :)