Skip to content

Commit 3171611

Browse files
wackbytewackbyte
authored
feat(hn): Svelte 5 (#561)
1 parent 28f53ef commit 3171611

File tree

14 files changed

+657
-365
lines changed

14 files changed

+657
-365
lines changed

‎pnpm-lock.yaml‎

Lines changed: 576 additions & 308 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sites/hn.svelte.dev/package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@
66
"dev": "vite dev",
77
"build": "vite build",
88
"preview": "vite preview",
9-
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
10-
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
9+
"lint": "prettier --ignore-path .gitignore --check .",
10+
"format": "prettier --ignore-path .gitignore --write .",
1111
"check": "svelte-check --tsconfig ./jsconfig.json"
1212
},
1313
"devDependencies": {
14-
"@sveltejs/adapter-vercel": "^4.0.0",
15-
"@sveltejs/kit": "^2.0.0",
16-
"prettier": "^2.7.1",
17-
"prettier-plugin-svelte": "^2.10.1",
18-
"svelte": "^4.0.5",
19-
"vite": "^5.0.0",
20-
"@sveltejs/vite-plugin-svelte": "^3.0.0"
14+
"@sveltejs/adapter-vercel": "^5.4.5",
15+
"@sveltejs/kit": "^2.7.2",
16+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
17+
"prettier": "^3.3.3",
18+
"prettier-plugin-svelte": "^3.2.7",
19+
"svelte": "^5.0.5",
20+
"typescript": "^5.6.3",
21+
"vite": "^5.4.9"
2122
},
2223
"type": "module"
23-
}
24+
}

‎sites/hn.svelte.dev/src/app.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,18 @@ html.dark {
1212

1313
body {
1414
margin: 0;
15-
font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
15+
font-family:
16+
Roboto,
17+
-apple-system,
18+
BlinkMacSystemFont,
19+
Segoe UI,
20+
Oxygen,
21+
Ubuntu,
22+
Cantarell,
23+
Fira Sans,
24+
Droid Sans,
25+
Helvetica Neue,
26+
sans-serif;
1627
font-size: 14px;
1728
line-height: 1.5;
1829
background-color: var(--bg);
@@ -26,7 +37,12 @@ body {
2637
}
2738
}
2839

29-
h1, h2, h3, h4, h5, h6 {
40+
h1,
41+
h2,
42+
h3,
43+
h4,
44+
h5,
45+
h6 {
3046
margin: 0 0 0.5em 0;
3147
font-weight: 400;
3248
line-height: 1.2;
@@ -49,4 +65,4 @@ code {
4965
body {
5066
font-size: 16px;
5167
}
52-
}
68+
}

‎sites/hn.svelte.dev/src/global.d.ts‎ renamed to ‎sites/hn.svelte.dev/src/app.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
/// <reference types="@sveltejs/kit" />
2-
31
declare global {
42
namespace App {
53
interface Error {
64
frame?: string;
75
}
86
}
97
}
8+
9+
export {};

‎sites/hn.svelte.dev/src/lib/Nav.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
2-
/** @type {string} */
3-
export let section;
2+
/** @type {{ section: string }} section */
3+
const { section } = $props();
44
</script>
55

66
<nav>

‎sites/hn.svelte.dev/src/lib/PreloadingIndicator.svelte‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script>
22
import { onMount } from 'svelte';
3-
let p = 0;
4-
let visible = false;
3+
4+
let p = $state(0);
5+
let visible = $state(false);
6+
57
onMount(() => {
68
visible = true;
79
function next() {
@@ -15,12 +17,12 @@
1517

1618
{#if visible}
1719
<div class="progress-container">
18-
<div class="progress" style="width: {p * 100}%" />
20+
<div class="progress" style="width: {p * 100}%"></div>
1921
</div>
2022
{/if}
2123

2224
{#if p >= 0.4}
23-
<div class="fade" />
25+
<div class="fade"></div>
2426
{/if}
2527

2628
<style>

‎sites/hn.svelte.dev/src/lib/ThemeToggler.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
// preserve the focus ring for keyboard users because a11y,
33
// but hide for mouse users because fugly
4-
let nice = false;
4+
let nice = $state(false);
55
66
let theme = 'light';
77
@@ -33,9 +33,9 @@
3333
aria-label="Toggle theme"
3434
title="Toggle theme"
3535
class:nice
36-
on:mousedown={() => (nice = true)}
37-
on:blur={() => (nice = false)}
38-
on:click={toggle}
36+
onmousedown={() => (nice = true)}
37+
onblur={() => (nice = false)}
38+
onclick={toggle}
3939
>
4040
toggle theme
4141

‎sites/hn.svelte.dev/src/routes/+layout.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
import ThemeToggler from '$lib/ThemeToggler.svelte';
66
import '../app.css';
77
8-
$: section = $page.url.pathname.split('/')[1];
8+
const { children } = $props();
9+
10+
const section = $derived($page.url.pathname.split('/')[1]);
911
</script>
1012

1113
<Nav {section} />
@@ -15,7 +17,7 @@
1517
{/if}
1618

1719
<main>
18-
<slot />
20+
{@render children()}
1921
</main>
2022

2123
<ThemeToggler />

‎sites/hn.svelte.dev/src/routes/[list=category]/[page]/+page.svelte‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<script>
22
import ItemSummary from './ItemSummary.svelte';
33
4-
/** @type {import('./$types').PageData} */
5-
export let data;
4+
const { data } = $props();
65
76
const PAGE_SIZE = 30;
87
9-
$: start = 1 + (data.page - 1) * PAGE_SIZE;
10-
$: next = `/${data.list}/${data.page + 1}`;
8+
const start = $derived(1 + (data.page - 1) * PAGE_SIZE);
9+
const next = $derived(`/${data.list}/${data.page + 1}`);
1110
</script>
1211

1312
<svelte:head>

‎sites/hn.svelte.dev/src/routes/[list=category]/[page]/ItemSummary.svelte‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script>
22
/**
33
* @type {{
4-
* domain?: string;
5-
* id: string;
6-
* url: string;
7-
* title: string;
8-
* type: string;
9-
* time_ago: string;
10-
* points: number;
11-
* user: string;
12-
* comments_count: number;
4+
* item: {
5+
* domain?: string;
6+
* id: string;
7+
* url: string;
8+
* title: string;
9+
* type: string;
10+
* time_ago: string;
11+
* points: number;
12+
* user: string;
13+
* comments_count: number;
14+
* };
15+
* index: number;
1316
* }}
1417
*/
15-
export let item;
16-
17-
/** @type {number} */
18-
export let index;
18+
const { item, index } = $props();
1919
</script>
2020

2121
<article>

0 commit comments

Comments
 (0)