Upgrade to Svelte 5.0

.github/workflows/nodejs.yml

@@ -30,12 +30,12 @@ jobs:
       #  uses: nrwl/nx-set-shas@v3
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
       - uses: pnpm/[email protected]
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 9
+          version: 10
           run_install: false
       - name: Get pnpm version
         id: pnpm-version
@@ -72,12 +72,12 @@ jobs:
       #  uses: nrwl/nx-set-shas@v3
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
       - uses: pnpm/[email protected]
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 9
+          version: 10
           run_install: false
       - name: Get pnpm version
         id: pnpm-version
@@ -115,12 +115,12 @@ jobs:
 #      - uses: actions/checkout@v3
 #      - uses: actions/setup-node@v3
 #        with:
-#          node-version: '20'
+#          node-version: '22'
 #      - uses: pnpm/[email protected]
 #        name: Install pnpm
 #        id: pnpm-install
 #        with:
-#          version: 9
+#          version: 10
 #          run_install: false
 #      - name: Get pnpm version
 #        id: pnpm-version

.gitignore

@@ -370,3 +370,6 @@ size-plugin.json
 size-plugin-ssr.json
 
 .parcel-cache
+
+.nx/cache
+.nx/workspace-data

apps/svelte-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-kit-demo",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -12,27 +12,27 @@
     "format": "prettier --plugin=\"prettier-plugin-svelte\" --write ."
   },
   "devDependencies": {
-    "@fontsource/fira-mono": "^5.0.13",
-    "@sveltejs/adapter-auto": "^3.2.1",
-    "@sveltejs/kit": "^2.5.10",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "@tsparticles/engine": "^3.4.0",
+    "@fontsource/fira-mono": "^5.2.5",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/kit": "^2.20.5",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tsparticles/engine": "^3.8.1",
     "@tsparticles/svelte": "workspace:^",
-    "@types/cookie": "^0.6.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.39.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.3",
-    "svelte": "^4.2.17",
-    "svelte-check": "^3.7.1",
-    "svelte-preprocess": "^5.1.4",
-    "tslib": "^2.6.2",
-    "tsparticles": "^3.4.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "@types/cookie": "^1.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-svelte": "^3.5.1",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte": "^5.25.10",
+    "svelte-check": "^4.1.5",
+    "svelte-preprocess": "^6.0.3",
+    "tslib": "^2.8.1",
+    "tsparticles": "^3.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6"
   },
   "type": "module"
 }

apps/svelte-kit/src/routes/+layout.svelte

@@ -1,13 +1,18 @@
-<script>
+<script lang="ts">
 	import Header from './Header.svelte';
 	import './styles.css';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 </script>
 
 <div class="app">
 	<Header />
 
 	<main>
-		<slot />
+		{@render children?.()}
 	</main>
 
 	<footer>

apps/svelte-kit/src/routes/+page.svelte

@@ -61,8 +61,10 @@
     {#await ParticlesConstructor}
         <p>Loading...</p>
     {:then component}
-        <svelte:component this={component} id="tsparticles"
-                          options="{particlesConfig}"/>
+        {@const SvelteComponent = component}
+        <SvelteComponent id="tsparticles"
+                          options="{particlesConfig}"
+                          style="z-index: -1"/>
     {:catch error}
         <p>Something went wrong: {error.message}</p>
     {/await}

apps/svelte-kit/src/routes/Counter.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { spring } from 'svelte/motion';
 
-	let count = 0;
+	let count = $state(0);
 
 	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
 
 	function modulo(n: number, m: number) {
 		// handle negative numbers
 		return ((n % m) + m) % m;
 	}
+	run(() => {
+		displayed_count.set(count);
+	});
+	let offset = $derived(modulo($displayed_count, 1));
 </script>
 
 <div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+	<button onclick={() => (count -= 1)} aria-label="Decrease the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5" />
 		</svg>
@@ -27,7 +31,7 @@
 		</div>
 	</div>
 
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+	<button onclick={() => (count += 1)} aria-label="Increase the counter by one">
 		<svg aria-hidden="true" viewBox="0 0 1 1">
 			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
 		</svg>

apps/svelte-kit/src/routes/Header.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import logo from '$lib/images/svelte-logo.svg';
 	import github from '$lib/images/github.svg';
 </script>
@@ -16,10 +16,10 @@
 			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 		</svg>
 		<ul>
-			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+			<li aria-current={page.url.pathname === '/' ? 'page' : undefined}>
 				<a href="/">Home</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+			<li aria-current={page.url.pathname === '/about' ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
 		</ul>

apps/svelte/.gitignore

@@ -1,4 +1,24 @@
-/node_modules/
-/public/build/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?