chore: update examples to use Svelte 5 (#93)

* chore: update examples to use Svelte 5

* chore: update readme files

* chore: use `$effect` instead legacy `run`

* chore: use svelte counter from new project

* chore: update pnpm to 9.12.3

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,11 +1,15 @@
 <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);
+	// svelte-ignore state_referenced_locally
+	const displayedCount = spring(count);
+
+	$effect(() => {
+		displayedCount.set(count);
+	});
+	let offset = $derived(modulo($displayedCount, 1));
 
 	function modulo(n: number, m: number) {
 		// handle negative numbers
@@ -14,20 +18,20 @@
 </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>
 	</button>
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
+			<strong>{Math.floor($displayedCount)}</strong>
 		</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>
@@ -51,12 +55,11 @@
 		border: 0;
 		background-color: transparent;
 		touch-action: manipulation;
-		color: var(--text-color);
 		font-size: 2rem;
 	}
 
 	.counter button:hover {
-		background-color: var(--secondary-color);
+		background-color: var(--color-bg-1);
 	}
 
 	svg {
@@ -67,7 +70,7 @@
 	path {
 		vector-effect: non-scaling-stroke;
 		stroke-width: 2px;
-		stroke: var(--text-color);
+		stroke: #444;
 	}
 
 	.counter-viewport {
@@ -84,7 +87,7 @@
 		width: 100%;
 		height: 100%;
 		font-weight: 400;
-		color: var(--accent-color);
+		color: var(--color-theme-1);
 		font-size: 4rem;
 		align-items: center;
 		justify-content: center;

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,11 +1,15 @@
 <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);
+	// svelte-ignore state_referenced_locally
+	const displayedCount = spring(count);
+
+	$effect(() => {
+		displayedCount.set(count);
+	});
+	let offset = $derived(modulo($displayedCount, 1));
 
 	function modulo(n: number, m: number) {
 		// handle negative numbers
@@ -14,20 +18,20 @@
 </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>
 	</button>
 
 	<div class="counter-viewport">
 		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayedCount + 1)}</strong>
+			<strong>{Math.floor($displayedCount)}</strong>
 		</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>
@@ -51,12 +55,11 @@
 		border: 0;
 		background-color: transparent;
 		touch-action: manipulation;
-		color: var(--text-color);
 		font-size: 2rem;
 	}
 
 	.counter button:hover {
-		background-color: var(--secondary-color);
+		background-color: var(--color-bg-1);
 	}
 
 	svg {
@@ -67,7 +70,7 @@
 	path {
 		vector-effect: non-scaling-stroke;
 		stroke-width: 2px;
-		stroke: var(--text-color);
+		stroke: #444;
 	}
 
 	.counter-viewport {
@@ -84,7 +87,7 @@
 		width: 100%;
 		height: 100%;
 		font-weight: 400;
-		color: var(--accent-color);
+		color: var(--color-theme-1);
 		font-size: 4rem;
 		align-items: center;
 		justify-content: center;