feat(hn): Svelte 5 (#561)

sveltejs · Oct 22, 2024 · 3171611 · 3171611
1 parent 28f53ef
commit 3171611
Show file tree

Hide file tree

Showing 14 changed files with 657 additions and 365 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/hn.svelte.dev/package.json b/sites/hn.svelte.dev/package.json
@@ -6,18 +6,19 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+		"lint": "prettier --ignore-path .gitignore --check .",
+		"format": "prettier --ignore-path .gitignore --write .",
 		"check": "svelte-check --tsconfig ./jsconfig.json"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^4.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"prettier": "^2.7.1",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"vite": "^5.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0"
+		"@sveltejs/adapter-vercel": "^5.4.5",
+		"@sveltejs/kit": "^2.7.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.7",
+		"svelte": "^5.0.5",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.9"
 	},
 	"type": "module"
-}
+}
diff --git a/sites/hn.svelte.dev/src/app.css b/sites/hn.svelte.dev/src/app.css
@@ -12,7 +12,18 @@ html.dark {
 
 body {
 	margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+	font-family:
+		Roboto,
+		-apple-system,
+		BlinkMacSystemFont,
+		Segoe UI,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		Fira Sans,
+		Droid Sans,
+		Helvetica Neue,
+		sans-serif;
 	font-size: 14px;
 	line-height: 1.5;
 	background-color: var(--bg);
@@ -26,7 +37,12 @@ body {
 	}
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	margin: 0 0 0.5em 0;
 	font-weight: 400;
 	line-height: 1.2;
@@ -49,4 +65,4 @@ code {
 	body {
 		font-size: 16px;
 	}
-}
+}
diff --git a/sites/hn.svelte.dev/src/global.d.ts → sites/hn.svelte.dev/src/app.d.ts b/sites/hn.svelte.dev/src/global.d.ts → sites/hn.svelte.dev/src/app.d.ts
@@ -1,9 +1,9 @@
-/// <reference types="@sveltejs/kit" />
-
 declare global {
 	namespace App {
 		interface Error {
 			frame?: string;
 		}
 	}
 }
+
+export {};
diff --git a/sites/hn.svelte.dev/src/lib/Nav.svelte b/sites/hn.svelte.dev/src/lib/Nav.svelte
@@ -1,6 +1,6 @@
 <script>
-	/** @type {string} */
-	export let section;
+	/** @type {{ section: string }} section */
+	const { section } = $props();
 </script>
 
 <nav>

diff --git a/sites/hn.svelte.dev/src/lib/PreloadingIndicator.svelte b/sites/hn.svelte.dev/src/lib/PreloadingIndicator.svelte
@@ -1,7 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
-	let p = 0;
-	let visible = false;
+
+	let p = $state(0);
+	let visible = $state(false);
+
 	onMount(() => {
 		visible = true;
 		function next() {
@@ -15,12 +17,12 @@
 
 {#if visible}
 	<div class="progress-container">
-		<div class="progress" style="width: {p * 100}%" />
+		<div class="progress" style="width: {p * 100}%"></div>
 	</div>
 {/if}
 
 {#if p >= 0.4}
-	<div class="fade" />
+	<div class="fade"></div>
 {/if}
 
 <style>

diff --git a/sites/hn.svelte.dev/src/lib/ThemeToggler.svelte b/sites/hn.svelte.dev/src/lib/ThemeToggler.svelte
@@ -1,7 +1,7 @@
 <script>
 	// preserve the focus ring for keyboard users because a11y,
 	// but hide for mouse users because fugly
-	let nice = false;
+	let nice = $state(false);
 
 	let theme = 'light';
 
@@ -33,9 +33,9 @@
 	aria-label="Toggle theme"
 	title="Toggle theme"
 	class:nice
-	on:mousedown={() => (nice = true)}
-	on:blur={() => (nice = false)}
-	on:click={toggle}
+	onmousedown={() => (nice = true)}
+	onblur={() => (nice = false)}
+	onclick={toggle}
 >
 	toggle theme
 

diff --git a/sites/hn.svelte.dev/src/routes/+layout.svelte b/sites/hn.svelte.dev/src/routes/+layout.svelte
@@ -5,7 +5,9 @@
 	import ThemeToggler from '$lib/ThemeToggler.svelte';
 	import '../app.css';
 
-	$: section = $page.url.pathname.split('/')[1];
+	const { children } = $props();
+
+	const section = $derived($page.url.pathname.split('/')[1]);
 </script>
 
 <Nav {section} />
@@ -15,7 +17,7 @@
 {/if}
 
 <main>
-	<slot />
+	{@render children()}
 </main>
 
 <ThemeToggler />

diff --git a/sites/hn.svelte.dev/src/routes/[list=category]/[page]/+page.svelte b/sites/hn.svelte.dev/src/routes/[list=category]/[page]/+page.svelte
@@ -1,13 +1,12 @@
 <script>
 	import ItemSummary from './ItemSummary.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	const { data } = $props();
 
 	const PAGE_SIZE = 30;
 
-	$: start = 1 + (data.page - 1) * PAGE_SIZE;
-	$: next = `/${data.list}/${data.page + 1}`;
+	const start = $derived(1 + (data.page - 1) * PAGE_SIZE);
+	const next = $derived(`/${data.list}/${data.page + 1}`);
 </script>
 
 <svelte:head>

diff --git a/sites/hn.svelte.dev/src/routes/[list=category]/[page]/ItemSummary.svelte b/sites/hn.svelte.dev/src/routes/[list=category]/[page]/ItemSummary.svelte
@@ -1,21 +1,21 @@
 <script>
 	/**
 	 * @type {{
-	 *   domain?: string;
-	 *   id: string;
-	 *   url: string;
-	 *   title: string;
-	 *   type: string;
-	 *   time_ago: string;
-	 *   points: number;
-	 *   user: string;
-	 *   comments_count: number;
+	 *   item: {
+	 *     domain?: string;
+	 *     id: string;
+	 *     url: string;
+	 *     title: string;
+	 *     type: string;
+	 *     time_ago: string;
+	 *     points: number;
+	 *     user: string;
+	 *     comments_count: number;
+	 *   };
+	 *   index: number;
 	 * }}
 	 */
-	export let item;
-
-	/** @type {number} */
-	export let index;
+	const { item, index } = $props();
 </script>
 
 <article>

diff --git a/sites/hn.svelte.dev/src/routes/item/[id]/+page.svelte b/sites/hn.svelte.dev/src/routes/item/[id]/+page.svelte
@@ -1,8 +1,7 @@
 <script>
 	import Comment from './Comment.svelte';
 
-	/** @type {import('./$types').PageData} */
-	export let data;
+	const { data } = $props();
 </script>
 
 <svelte:head>

diff --git a/sites/hn.svelte.dev/src/routes/item/[id]/Comment.svelte b/sites/hn.svelte.dev/src/routes/item/[id]/Comment.svelte
@@ -1,14 +1,17 @@
 <script>
+	import Comment from "./Comment.svelte";
+
 	/**
-	 * @type {{
-	 * deleted?: boolean;
-	 * user: string;
-	 * time_ago: number;
-	 * content: string;
-	 * comments: any[];
-	 * }}
+	 * @typedef {object} CommentData
+	 * @property {boolean} [deleted]
+	 * @property {string} user
+	 * @property {number} time_ago
+	 * @property {string} content
+	 * @property {CommentData[]} comments
 	 */
-	export let comment;
+
+	/** @type {{ comment: CommentData }} */
+	const { comment } = $props();
 </script>
 
 {#if !comment.deleted}
@@ -30,7 +33,7 @@
 			{#if comment.comments.length > 0}
 				<ul class="children">
 					{#each comment.comments as child}
-						<li><svelte:self comment={child} /></li>
+						<li><Comment comment={child} /></li>
 					{/each}
 				</ul>
 			{/if}

diff --git a/sites/hn.svelte.dev/src/routes/user/[name]/+page.svelte b/sites/hn.svelte.dev/src/routes/user/[name]/+page.svelte
@@ -1,6 +1,5 @@
 <script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+	const { data } = $props();
 </script>
 
 <svelte:head>

diff --git a/sites/hn.svelte.dev/svelte.config.js b/sites/hn.svelte.dev/svelte.config.js
@@ -2,6 +2,9 @@ import adapter from '@sveltejs/adapter-vercel';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
+	compilerOptions: {
+		runes: true
+	},
 	kit: {
 		// new projects use adapter-auto by default
 		// we use adapter-vercel here to use more efficient edge serving