Updates for deno 2 and latest sveltekit

.github/workflows/deploy.yml

@@ -19,20 +19,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Install Deno
-        uses: denoland/setup-deno@v1
+        uses: denoland/setup-deno@v2
         with:
-          deno-version: v1.x
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
+          deno-version: v2.x
 
       - name: Install step
-        run: "DENO_FUTURE=1 deno install"
+        run: "deno install"
 
       - name: Build step
-        run: "DENO_FUTURE=1 deno task build"
+        run: "deno task build"
 
       - name: Upload to Deno Deploy
         uses: denoland/deployctl@v1

README.md

@@ -3,7 +3,7 @@
 ## create project
 
 ```bash
-deno run -A npm:create-svelte@latest my-app
+deno run -A npm:sv@latest create my-app
 cd my-app
 deno add npm:@types/deno
 ```
@@ -33,19 +33,19 @@ Update `svelte.config.js`
 Install dependencies
 
 ```bash
-DENO_FUTURE=1 deno install
+deno install
 ```
 
 Run the dev server
 
 ```bash
-DENO_FUTURE=1 deno task dev
+deno task dev
 ```
 
 ## build
 
 ```bash
-DENO_FUTURE=1 deno task build
+deno task build
 ```
 
 Run production server
@@ -62,15 +62,15 @@ Svelte will be automatically selected as the framework preset
 
 Open advanced settings
 
-- Set "Install Step" to `DENO_FUTURE=1 deno install`
-- Set "Build Step" to `DENO_FUTURE=1 deno task build`
+- Set "Install Step" to `deno install`
+- Set "Build Step" to `deno task build`
 - Set "Root directory" to `build`
 - Set "Entrypoint" to `mod.ts`
 
 Alternatively, deploy from the command line:
 
 ```bash
-DENO_FUTURE=1 deno task build
+deno task build
 cd build
 deployctl deploy --project=<project-name> --entrypoint=mod.ts
 ```

package.json

@@ -1,6 +1,7 @@
 {
   "name": "deno-svelte",
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -9,16 +10,16 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@fontsource/fira-mono": "^4.5.10",
-    "@neoconfetti/svelte": "^1.0.0",
+    "@fontsource/fira-mono": "^5.0.0",
+    "@neoconfetti/svelte": "^2.0.0",
     "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/deno": "^2.0.0",
-    "svelte": "^5.0.0-next.1",
-    "sveltekit-adapter-deno": "^0.12.1",
-    "svelte-check": "^3.6.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "typescript": "^5.0.0",
     "vite": "^5.0.3"
   },
-  "type": "module"
+  "dependencies": {
+    "sveltekit-adapter-deno": "^0.16.0"
+  }
 }

src/app.d.ts

@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
 	namespace App {

src/routes/+layout.svelte

@@ -1,17 +1,21 @@
-<script>
+<script lang="ts">
 	import Header from './Header.svelte';
 	import '../app.css';
+
+	let { children } = $props();
 </script>
 
 <div class="app">
 	<Header />
 
 	<main>
-		<slot />
+		{@render children()}
 	</main>
 
 	<footer>
-		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+		<p>
+			visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
+		</p>
 	</footer>
 </div>
 

src/routes/+page.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
 	import Counter from './Counter.svelte';
 	import welcome from '$lib/images/svelte-welcome.webp';
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
+	import welcomeFallback from '$lib/images/svelte-welcome.png';
 </script>
 
 <svelte:head>
@@ -14,7 +14,7 @@
 		<span class="welcome">
 			<picture>
 				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
+				<img src={welcomeFallback} alt="Welcome" />
 			</picture>
 		</span>
 

src/routes/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>

src/routes/Header.svelte

@@ -1,12 +1,12 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/stores';
 	import logo from '$lib/images/svelte-logo.svg';
 	import github from '$lib/images/github.svg';
 </script>
 
 <header>
 	<div class="corner">
-		<a href="https://kit.svelte.dev">
+		<a href="https://svelte.dev/docs/kit">
 			<img src={logo} alt="SvelteKit" />
 		</a>
 	</div>

src/routes/about/+page.svelte

@@ -7,11 +7,11 @@
 	<h1>About this app</h1>
 
 	<p>
-		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-		following into your command line and following the prompts:
+		This is a <a href="https://svelte.dev/docs/kit">SvelteKit</a> app. You can make your own by typing
+		the following into your command line and following the prompts:
 	</p>
 
-	<pre>npm create svelte@latest</pre>
+	<pre>npx sv create</pre>
 
 	<p>
 		The page you're looking at is purely static HTML, with no client-side interactivity needed.

src/routes/sverdle/+page.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { confetti } from '@neoconfetti/svelte';
 	import { enhance } from '$app/forms';
-	import type { PageData, ActionData } from './$types';
-	import { reduced_motion } from './reduced-motion';
-
-	export let data: PageData;
+	import { confetti } from '@neoconfetti/svelte';
+	import type { ActionData, PageData } from './$types';
+	import { reducedMotion } from './reduced-motion';
 
-	export let form: ActionData;
+	interface Props {
+		data: PageData;
+		form: ActionData;
+	}
+	let { data, form = $bindable() }: Props = $props();
 
 	/** Whether or not the user has won */
-	$: won = data.answers.at(-1) === 'xxxxx';
+	let won = $derived(data.answers.at(-1) === 'xxxxx');
 
 	/** The index of the current guess */
-	$: i = won ? -1 : data.answers.length;
+	let i = $derived(won ? -1 : data.answers.length);
 
 	/** The current guess */
-	$: currentGuess = data.guesses[i] || '';
-
-	/** Whether the current guess can be submitted */
-	$: submittable = currentGuess.length === 5;
-
-	/**
-	 * A map of classnames for all letters that have been guessed,
-	 * used for styling the keyboard
-	 */
-	let classnames: Record<string, 'exact' | 'close' | 'missing'>;
-
-	/**
-	 * A map of descriptions for all letters that have been guessed,
-	 * used for adding text for assistive technology (e.g. screen readers)
-	 */
-	let description: Record<string, string>;
+	// svelte-ignore state_referenced_locally
+	let currentGuess = $state(data.guesses[i] || '');
 
-	$: {
-		classnames = {};
-		description = {};
+	$effect(() => {
+		currentGuess = data.guesses[i] || '';
+	});
 
+	/** Whether the current guess can be submitted */
+	let submittable = $derived(currentGuess.length === 5);
+
+	const { classnames, description } = $derived.by(() => {
+		/**
+		 * A map of classnames for all letters that have been guessed,
+		 * used for styling the keyboard
+		 */
+		let classnames: Record<string, 'exact' | 'close' | 'missing'> = {};
+		/**
+		 * A map of descriptions for all letters that have been guessed,
+		 * used for adding text for assistive technology (e.g. screen readers)
+		 */
+		let description: Record<string, string> = {};
 		data.answers.forEach((answer, i) => {
 			const guess = data.guesses[i];
-
 			for (let i = 0; i < 5; i += 1) {
 				const letter = guess[i];
-
 				if (answer[i] === 'x') {
 					classnames[letter] = 'exact';
 					description[letter] = 'correct';
@@ -51,13 +51,15 @@
 				}
 			}
 		});
-	}
+		return { classnames, description };
+	});
 
 	/**
 	 * Modify the game state without making a trip to the server,
 	 * if client-side JavaScript is enabled
 	 */
 	function update(event: MouseEvent) {
+		event.preventDefault();
 		const key = (event.target as HTMLButtonElement).getAttribute(
 			'data-key'
 		);
@@ -85,7 +87,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={keydown} />
+<svelte:window onkeydown={keydown} />
 
 <svelte:head>
 	<title>Sverdle</title>
@@ -95,7 +97,7 @@
 <h1 class="visually-hidden">Sverdle</h1>
 
 <form
-	method="POST"
+	method="post"
 	action="?/enter"
 	use:enhance={() => {
 		// prevent default callback from resetting the form
@@ -152,7 +154,7 @@
 				<button data-key="enter" class:selected={submittable} disabled={!submittable}>enter</button>
 
 				<button
-					on:click|preventDefault={update}
+					onclick={update}
 					data-key="backspace"
 					formaction="?/update"
 					name="key"
@@ -165,7 +167,7 @@
 					<div class="row">
 						{#each row as letter}
 							<button
-								on:click|preventDefault={update}
+								onclick={update}
 								data-key={letter}
 								class={classnames[letter]}
 								disabled={submittable}
@@ -188,7 +190,7 @@
 	<div
 		style="position: absolute; left: 50%; top: 30%"
 		use:confetti={{
-			particleCount: $reduced_motion ? 0 : undefined,
+			particleCount: $reducedMotion ? 0 : undefined,
 			force: 0.7,
 			stageWidth: window.innerWidth,
 			stageHeight: window.innerHeight,