update to latest sveltekit demo app

dbushell · Oct 24, 2024 · 6af9e08 · 6af9e08
1 parent f0f154a
commit 6af9e08
Show file tree

Hide file tree

Showing 22 changed files with 161 additions and 128 deletions.
diff --git a/demo/.gitignore b/demo/.gitignore
@@ -1,12 +1,21 @@
-.DS_Store
 node_modules
-/build
+
+# Output
+.output
+.vercel
 /.svelte-kit
-/package
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
-.vercel
-.output
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
diff --git a/demo/README.md b/demo/README.md
@@ -9,10 +9,10 @@ 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
@@ -38,4 +38,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.
+> [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/demo/tsconfig.json → demo/jsconfig.json b/demo/tsconfig.json → demo/jsconfig.json
@@ -11,7 +11,8 @@
     "strict": true,
     "moduleResolution": "bundler"
   }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in

diff --git a/demo/package.json b/demo/package.json
@@ -1,24 +1,26 @@
 {
   "name": "demo",
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
   },
-  "dependencies": {
-    "@fontsource/fira-mono": "^5.0.8",
-    "@neoconfetti/svelte": "^2.2.1",
-    "@sveltejs/kit": "^2.0.6",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "svelte": "^4.2.8",
-    "svelte-check": "^3.6.2",
-    "sveltekit-adapter-deno": "^0.15.0",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+  "devDependencies": {
+    "@fontsource/fira-mono": "^5.0.0",
+    "@neoconfetti/svelte": "^2.0.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.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.15.0"
+  }
 }
diff --git a/demo/src/routes/styles.css → demo/src/app.css b/demo/src/routes/styles.css → demo/src/app.css
diff --git a/demo/src/app.d.ts b/demo/src/app.d.ts
@@ -1,4 +1,4 @@
-// See https://kit.svelte.dev/docs/types#app
+// See https://svelte.dev/docs/kit/types#app
 // for information about these interfaces
 declare global {
   namespace App {

diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -1,17 +1,22 @@
 <script>
 	import Header from './Header.svelte';
-	import './styles.css';
+	import '../app.css';
+
+	/** @type {{children: import('svelte').Snippet}} */
+	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>
 

diff --git a/demo/src/routes/+page.ts → demo/src/routes/+page.js b/demo/src/routes/+page.ts → demo/src/routes/+page.js
diff --git a/demo/src/routes/+page.svelte b/demo/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	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>
 

diff --git a/demo/src/routes/Counter.svelte b/demo/src/routes/Counter.svelte
@@ -1,33 +1,41 @@
-<script lang="ts">
+<script>
 	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);
 
-	function modulo(n: number, m: number) {
+	$effect(() => {
+		displayedCount.set(count);
+	});
+	let offset = $derived(modulo($displayedCount, 1));
+
+	/**
+	 * @param {number} n
+	 * @param {number} m
+	 */
+	function modulo(n, m) {
 		// handle negative numbers
 		return ((n % m) + m) % m;
 	}
 </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>

diff --git a/demo/src/routes/Header.svelte b/demo/src/routes/Header.svelte
@@ -6,7 +6,7 @@
 
 <header>
 	<div class="corner">
-		<a href="https://kit.svelte.dev">
+		<a href="https://svelte.dev/docs/kit">
 			<img src={logo} alt="SvelteKit" />
 		</a>
 	</div>

diff --git a/demo/src/routes/about/+page.ts → demo/src/routes/about/+page.js b/demo/src/routes/about/+page.ts → demo/src/routes/about/+page.js
diff --git a/demo/src/routes/about/+page.svelte b/demo/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.

diff --git a/demo/src/routes/sverdle/+page.server.ts → demo/src/routes/sverdle/+page.server.js b/demo/src/routes/sverdle/+page.server.ts → demo/src/routes/sverdle/+page.server.js
@@ -1,8 +1,8 @@
 import { fail } from "@sveltejs/kit";
 import { Game } from "./game";
-import type { Actions, PageServerLoad } from "./$types";
 
-export const load = (({ cookies }) => {
+/** @satisfies {import('./$types').PageServerLoad} */
+export const load = ({ cookies }) => {
   const game = new Game(cookies.get("sverdle"));
 
   return {
@@ -22,8 +22,9 @@ export const load = (({ cookies }) => {
      */
     answer: game.answers.length >= 6 ? game.answer : null,
   };
-}) satisfies PageServerLoad;
+};
 
+/** @satisfies {import('./$types').Actions} */
 export const actions = {
   /**
    * Modify game state in reaction to a keypress. If client-side JavaScript
@@ -43,7 +44,7 @@ export const actions = {
       game.guesses[i] += key;
     }
 
-    cookies.set("sverdle", game.toString(), { path: "" });
+    cookies.set("sverdle", game.toString(), { path: "/" });
   },
 
   /**
@@ -54,16 +55,16 @@ export const actions = {
     const game = new Game(cookies.get("sverdle"));
 
     const data = await request.formData();
-    const guess = data.getAll("guess") as string[];
+    const guess = /** @type {string[]} */ (data.getAll("guess"));
 
     if (!game.enter(guess)) {
       return fail(400, { badGuess: true });
     }
 
-    cookies.set("sverdle", game.toString(), { path: "" });
+    cookies.set("sverdle", game.toString(), { path: "/" });
   },
 
   restart: async ({ cookies }) => {
-    cookies.delete("sverdle", { path: "" });
+    cookies.delete("sverdle", { path: "/" });
   },
-} satisfies Actions;
+};