feat(hn): update deps, edge based (#528)

PuruVJ · web-flow · commit 00110e513a1c · 2023-07-17T21:29:41.000-07:00
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/hn.svelte.dev/jsconfig.json b/sites/hn.svelte.dev/jsconfig.json
@@ -1,3 +1,7 @@
 {
-  "extends": "./.svelte-kit/tsconfig.json"
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"noImplicitAny": true,
+		"checkJs": true
+	}
 }
diff --git a/sites/hn.svelte.dev/package.json b/sites/hn.svelte.dev/package.json
@@ -7,16 +7,16 @@
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
+		"check": "svelte-check --tsconfig ./jsconfig.json"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@sveltejs/vite-plugin-svelte": "^2.0.2",
+		"@sveltejs/adapter-vercel": "^3.0.2",
+		"@sveltejs/kit": "^1.22.3",
 		"prettier": "^2.7.1",
-		"prettier-plugin-svelte": "^2.7.0",
-		"svelte": "^3.55.0",
-		"vite": "^4.0.1"
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"vite": "^4.4.4"
 	},
 	"type": "module"
 }
diff --git a/sites/hn.svelte.dev/src/app.html b/sites/hn.svelte.dev/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
@@ -21,7 +21,7 @@
 		</script>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-prefetch>
+	<body data-sveltekit-preload-data="hover">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/sites/hn.svelte.dev/src/global.d.ts b/sites/hn.svelte.dev/src/global.d.ts
@@ -1 +1,9 @@
 /// <reference types="@sveltejs/kit" />
+
+declare global {
+	namespace App {
+		interface Error {
+			frame?: string;
+		}
+	}
+}
diff --git a/sites/hn.svelte.dev/src/lib/Nav.svelte b/sites/hn.svelte.dev/src/lib/Nav.svelte
@@ -1,4 +1,5 @@
 <script>
+	/** @type {string} */
 	export let section;
 </script>
 
diff --git a/sites/hn.svelte.dev/src/routes/+error.svelte b/sites/hn.svelte.dev/src/routes/+error.svelte
@@ -16,13 +16,6 @@
 
 <pre>{message}</pre>
 
-{#if dev && $page.error.frame}
-	<pre>{$page.error.frame}</pre>
-{/if}
-{#if dev && $page.error.stack}
-	<pre>{$page.error.stack}</pre>
-{/if}
-
 <style>
 	h1 {
 		margin: 0 auto;
diff --git a/sites/hn.svelte.dev/src/routes/+page.js b/sites/hn.svelte.dev/src/routes/+page.js
@@ -1,6 +1,6 @@
+import { dev } from '$app/environment';
 import { redirect } from '@sveltejs/kit';
 
-/** @type {import('./$types').PageLoad} */
-export function load({ url }) {
-	throw redirect(url.hostname === 'localhost' || url.hostname === '127.0.0.1' ? 302 : 301, '/top/1');
+export function load() {
+	throw redirect(dev ? 302 : 301, '/top/1');
 }
diff --git a/sites/hn.svelte.dev/src/routes/[list=category]/[page]/+page.js b/sites/hn.svelte.dev/src/routes/[list=category]/[page]/+page.js
@@ -1,10 +1,9 @@
-/** @type {import('./$types').PageLoad} */
 export async function load({ params, fetch }) {
 	const list = params.list === 'top' ? 'news' : params.list === 'new' ? 'newest' : params.list;
 
 	return {
 		list: params.list,
 		page: +params.page,
-		items: await fetch(`https://api.hnpwa.com/v0/${list}/${params.page}.json`).then((r) => r.json())
+		items: fetch(`https://api.hnpwa.com/v0/${list}/${params.page}.json`).then((r) => r.json())
 	};
 }
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,5 +1,20 @@
 <script>
+	/**
+	 * @type {{
+	 *   domain?: string;
+	 *   id: string;
+	 *   url: string;
+	 *   title: string;
+	 *   type: string;
+	 *   time_ago: string;
+	 *   points: number;
+	 *   user: string;
+	 *   comments_count: number;
+	 * }}
+	 */
 	export let item;
+
+	/** @type {number} */
 	export let index;
 </script>
 
diff --git a/sites/hn.svelte.dev/src/routes/[list=category]/rss/+server.js b/sites/hn.svelte.dev/src/routes/[list=category]/rss/+server.js
@@ -31,9 +31,6 @@ const render = (list, items) => `<?xml version="1.0" encoding="UTF-8" ?>
 </channel>
 </rss>`;
 
-/**
- * @type {import('@sveltejs/kit').RequestHandler}
- */
 export async function GET({ params }) {
 	const list = params.list === 'top' ? 'news' : params.list === 'new' ? 'newest' : params.list;
 	const res = await fetch(`https://api.hnpwa.com/v0/${list}/1.json`);
diff --git a/sites/hn.svelte.dev/src/routes/item/[id]/+page.js b/sites/hn.svelte.dev/src/routes/item/[id]/+page.js
@@ -1,5 +1,3 @@
-/** @type {import('./$types').PageLoad} */
 export async function load({ params, fetch }) {
-	const res = await fetch(`https://api.hnpwa.com/v0/item/${params.id}.json`);
-	return await res.json();
+	return fetch(`https://api.hnpwa.com/v0/item/${params.id}.json`).then((r) => r.json());
 }
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,12 +1,27 @@
 <script>
+	/**
+	 * @type {{
+	 * deleted?: boolean;
+	 * user: string;
+	 * time_ago: number;
+	 * content: string;
+	 * comments: any[];
+	 * }}
+	 */
 	export let comment;
 
 	let hidden = false;
 </script>
 
 {#if !comment.deleted}
 	<article class="comment" class:hidden>
-		<div class="meta-bar" on:click={() => (hidden = !hidden)}>
+		<div
+			class="meta-bar"
+			role="button"
+			tabindex="0"
+			on:click={() => (hidden = !hidden)}
+			on:keyup={(e) => e.key === ' ' && (hidden = !hidden)}
+		>
 			<span class="meta">
 				<a href="/user/{comment.user}">{comment.user}</a>
 				{comment.time_ago}
diff --git a/sites/hn.svelte.dev/src/routes/rss/+server.js b/sites/hn.svelte.dev/src/routes/rss/+server.js
@@ -1,7 +1,6 @@
 import { dev } from '$app/environment';
 import { redirect } from '@sveltejs/kit';
 
-/** @type {import('@sveltejs/kit').RequestHandler} */
 export function GET() {
 	throw redirect(dev ? 301 : 302, '/top/rss');
 }
diff --git a/sites/hn.svelte.dev/src/routes/user/[name]/+page.js b/sites/hn.svelte.dev/src/routes/user/[name]/+page.js
@@ -1,7 +1,5 @@
 export const csr = false;
 
-/** @type {import('./$types').PageLoad} */
 export async function load({ params, fetch }) {
-	const res = await fetch(`https://api.hnpwa.com/v0/user/${params.name}.json`);
-	return res.json();
+	return fetch(`https://api.hnpwa.com/v0/user/${params.name}.json`).then((r) => r.json());
 }
diff --git a/sites/hn.svelte.dev/svelte.config.js b/sites/hn.svelte.dev/svelte.config.js
@@ -1,9 +1,11 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-vercel';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	kit: {
-		adapter: adapter(),
+		// new projects use adapter-auto by default
+		// we use adapter-vercel here to use more efficient edge serving
+		adapter: adapter({ runtime: 'edge' }),
 
 		inlineStyleThreshold: 5000
 	}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
`1`	`1`	`{`
`2`		`- "extends": "./.svelte-kit/tsconfig.json"`
	`2`	`+ "extends": "./.svelte-kit/tsconfig.json",`
	`3`	`+ "compilerOptions": {`
	`4`	`+ "noImplicitAny": true,`
	`5`	`+ "checkJs": true`
	`6`	`+ }`
`3`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<script>`
	`2`	`+ /** @type {string} */`
`2`	`3`	`export let section;`
`3`	`4`	`</script>`
`4`	`5`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
	`1`	`+import { dev } from '$app/environment';`
`1`	`2`	`import { redirect } from '@sveltejs/kit';`
`2`	`3`
`3`		`-/** @type {import('./$types').PageLoad} */`
`4`		`-export function load({ url }) {`
`5`		`- throw redirect(url.hostname === 'localhost' \|\| url.hostname === '127.0.0.1' ? 302 : 301, '/top/1');`
	`4`	`+export function load() {`
	`5`	`+ throw redirect(dev ? 302 : 301, '/top/1');`
`6`	`6`	`}`