chore: update examples to use Svelte 5

examples/sveltekit-ts-assets-generator/README.md

@@ -1,17 +1,17 @@
-# create-svelte
+# sv
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
 ## Creating a project
 
 If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -35,4 +35,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

examples/sveltekit-ts-assets-generator/package.json

@@ -27,18 +27,18 @@
 		"@playwright/test": "^1.37.1",
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/adapter-node": "^2.0.0",
-		"@sveltejs/kit": "^2.0.1",
+		"@sveltejs/kit": "^2.7.4",
 		"@types/cookie": "^0.6.0",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
 		"@vite-pwa/sveltekit": "workspace:*",
 		"eslint": "^8.55.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"vitest": "^2.0.5"
+		"eslint-plugin-svelte": "^2.45.1",
+		"svelte": "^5.1.9",
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vitest": "^2.1.4"
 	},
 	"type": "module",
 	"dependencies": {

examples/sveltekit-ts-assets-generator/src/lib/Counter.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
 	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;
 	}
+	$effect(() => {
+		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 +29,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>

examples/sveltekit-ts-assets-generator/src/lib/ReloadPrompt.svelte

@@ -9,15 +9,25 @@
 		needRefresh,
 		updateServiceWorker
 	} = useRegisterSW({
-		onRegistered(r) {
-			if (__RELOAD_SW__) {
-				r && setInterval(() => {
-					console.log('Checking for sw update')
-					r.update()
-				}, 20000 /* 20s for testing purposes */)
-			} else {
-				console.log(`SW Registered: ${r}`)
-			}
+		onRegisteredSW(swUrl, r) {
+			r && setInterval(async () => {
+				if (r.installing || !navigator)
+					return
+
+				if (('connection' in navigator) && !navigator.onLine)
+					return
+
+				const resp = await fetch(swUrl, {
+					cache: 'no-store',
+					headers: {
+						'cache': 'no-store',
+						'cache-control': 'no-cache',
+					},
+				})
+
+				if (resp?.status === 200)
+					await r.update()
+			}, 20000 /* 20s for testing purposes */)
 		},
 		onRegisterError(error) {
 			console.log('SW registration error', error)
@@ -28,7 +38,7 @@
 		needRefresh.set(false)
 	}
 
-	$: toast = $offlineReady || $needRefresh
+	let toast = $derived($offlineReady || $needRefresh)
 </script>
 
 {#if toast}
@@ -45,11 +55,11 @@
 			{/if}
 		</div>
 		{#if $needRefresh}
-			<button on:click={() => updateServiceWorker(true)}>
+			<button onclick={() => updateServiceWorker(true)}>
 				Reload
 			</button>
 		{/if}
-		<button on:click={close}>
+		<button onclick={close}>
 			Close
 		</button>
 	</div>

examples/sveltekit-ts-assets-generator/src/routes/+layout.svelte

@@ -3,8 +3,13 @@
 	import '../app.css';
 	import { pwaInfo } from 'virtual:pwa-info';
 	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
-	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
+	let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
 
 </script>
 
@@ -22,7 +27,7 @@
 <Header />
 
 <main>
-	<slot />
+	{@render children?.()}
 </main>
 
 <footer>

examples/sveltekit-ts/README.md

@@ -1,17 +1,17 @@
-# create-svelte
+# sv
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
 
 ## Creating a project
 
 If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm create svelte@latest
+npx sv create
 
 # create a new project in my-app
-npm create svelte@latest my-app
+npx sv create my-app
 ```
 
 ## Developing
@@ -35,4 +35,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

examples/sveltekit-ts/package.json

@@ -27,18 +27,18 @@
 		"@playwright/test": "^1.37.1",
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/adapter-node": "^2.0.0",
-		"@sveltejs/kit": "^2.0.1",
+		"@sveltejs/kit": "^2.7.4",
 		"@types/cookie": "^0.6.0",
 		"@typescript-eslint/eslint-plugin": "^6.14.0",
 		"@typescript-eslint/parser": "^6.14.0",
 		"@vite-pwa/sveltekit": "workspace:*",
 		"eslint": "^8.55.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"vitest": "^2.0.5"
+		"eslint-plugin-svelte": "^2.46.0",
+		"svelte": "^5.1.9",
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vitest": "^2.1.4"
 	},
 	"type": "module",
 	"dependencies": {

examples/sveltekit-ts/src/lib/Counter.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
 	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;
 	}
+	$effect(() => {
+		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 +29,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>

examples/sveltekit-ts/src/lib/ReloadPrompt.svelte

@@ -9,15 +9,25 @@
 		needRefresh,
 		updateServiceWorker
 	} = useRegisterSW({
-		onRegistered(r) {
-			if (__RELOAD_SW__) {
-				r && setInterval(() => {
-					console.log('Checking for sw update')
-					r.update()
-				}, 20000 /* 20s for testing purposes */)
-			} else {
-				console.log(`SW Registered: ${r}`)
-			}
+		onRegisteredSW(swUrl, r) {
+			r && setInterval(async () => {
+				if (r.installing || !navigator)
+					return
+
+				if (('connection' in navigator) && !navigator.onLine)
+					return
+
+				const resp = await fetch(swUrl, {
+					cache: 'no-store',
+					headers: {
+						'cache': 'no-store',
+						'cache-control': 'no-cache',
+					},
+				})
+
+				if (resp?.status === 200)
+					await r.update()
+			}, 20000 /* 20s for testing purposes */)
 		},
 		onRegisterError(error) {
 			console.log('SW registration error', error)
@@ -28,7 +38,7 @@
 		needRefresh.set(false)
 	}
 
-	$: toast = $offlineReady || $needRefresh
+	let toast = $derived($offlineReady || $needRefresh)
 </script>
 
 {#if toast}
@@ -45,11 +55,11 @@
 			{/if}
 		</div>
 		{#if $needRefresh}
-			<button on:click={() => updateServiceWorker(true)}>
+			<button onclick={() => updateServiceWorker(true)}>
 				Reload
 			</button>
 		{/if}
-		<button on:click={close}>
+		<button onclick={close}>
 			Close
 		</button>
 	</div>

examples/sveltekit-ts/src/routes/+layout.svelte

@@ -2,8 +2,13 @@
 	import Header from '$lib/header/Header.svelte';
 	import '../app.css';
 	import { pwaInfo } from 'virtual:pwa-info';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
 
-	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
+	let webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '')
 
 </script>
 
@@ -15,7 +20,7 @@
 <Header />
 
 <main>
-	<slot />
+	{@render children?.()}
 </main>
 
 <footer>

package.json

@@ -72,7 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "bumpp": "^9.2.0",
     "eslint": "^8.55.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
     "unbuild": "^2.0.0",
     "vite": "^5.0.10",
     "vite-plugin-pwa": ">=0.20.5 <1"