Migrate to Svelte 5 (#135)

* migrate to Svelte 5

* npm-test.yml add install-e2e: npx playwright install chromium

nodejs-gh-pages.yml drop custom install-cmd

* fix build

* fix playwright tests

* 2 new in site/tests/site.test.ts

- Add test for 404 page handling
- Add test for page metadata (title, description, OG tags)

Author: janosh

.github/workflows/gh-pages.yml

@@ -12,4 +12,3 @@ jobs:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
     with:
       working-directory: site
-      install-cmd: npm install -f

.github/workflows/test.yml

@@ -12,3 +12,4 @@ jobs:
     uses: janosh/workflows/.github/workflows/npm-test.yml@main
     with:
       working-directory: site
+      install-e2e: npx playwright install chromium

.pre-commit-config.yaml

@@ -54,7 +54,7 @@ repos:
         stages: [pre-commit, commit-msg]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.19.0
+    rev: v9.20.1
     hooks:
       - id: eslint
         types: [file]

site/package.json

@@ -17,31 +17,31 @@
     "test": "playwright test tests/*.test.ts"
   },
   "devDependencies": {
-    "@iconify/svelte": "^4.0.2",
-    "@playwright/test": "^1.47.1",
+    "@iconify/svelte": "^4.2.0",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-yaml": "^4.1.2",
-    "@stylistic/eslint-plugin": "^3.0.1",
-    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.28",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.10.0",
-    "eslint-plugin-svelte": "^2.44.0",
+    "@stylistic/eslint-plugin": "^4.0.1",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.17.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.20.1",
+    "eslint-plugin-svelte": "^2.46.1",
     "js-yaml": "^4.1.0",
-    "marked": "^14.1.2",
-    "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "puppeteer": "^23.3.1",
+    "marked": "^15.0.7",
+    "prettier": "^3.5.1",
+    "prettier-plugin-svelte": "^3.3.3",
+    "puppeteer": "^24.2.1",
     "sharp": "^0.33.5",
-    "svelte": "4.2.19",
-    "svelte-check": "^4.0.2",
-    "svelte-multiselect": "^10.3.0",
-    "svelte-preprocess": "^6.0.2",
-    "svelte-zoo": "^0.4.11",
-    "svelte2tsx": "^0.7.19",
-    "typescript": "5.6.2",
-    "typescript-eslint": "^8.6.0",
-    "vite": "^5.4.6"
+    "svelte": "^5.20.2",
+    "svelte-check": "^4.1.4",
+    "svelte-multiselect": "11.0.0-rc.1",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-zoo": "^0.4.17",
+    "svelte2tsx": "^0.7.34",
+    "typescript": "5.7.3",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.1.1"
   },
   "keywords": [
     "sveltekit",

site/src/lib/ContributorList.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { RepoContributor } from '$lib'
 
-  export let contributors: RepoContributor[]
+  interface Props {
+    contributors: RepoContributor[]
+  }
+
+  let { contributors }: Props = $props()
 </script>
 
 <ul class="contributors">

site/src/lib/Filters.svelte

@@ -10,9 +10,13 @@
     tag_filter_mode,
   } from './stores'
 
-  export let tags: [string, number][]
-  export let contributors: [string, number][]
-  export let sort_order: `asc` | `desc` = `desc`
+  interface Props {
+    tags: [string, number][]
+    contributors: [string, number][]
+    sort_order?: `asc` | `desc`
+  }
+
+  let { tags, contributors, sort_order = $bindable(`desc`) }: Props = $props()
 </script>
 
 <div class="filters">
@@ -23,10 +27,12 @@
       placeholder="Filter by tag..."
       bind:selected={$filter_tags}
     >
-      <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;"></span>
-        {option.count}
-      </span>
+      {#snippet option({ option })}
+        <span style="display: flex;">
+          {option.label} <span style="flex: 1;"></span>
+          {option.count}
+        </span>
+      {/snippet}
     </MultiSelect>
     {#if $filter_tags.length > 1}
       <RadioButtons bind:selected={$tag_filter_mode} options={[`all`, `any`]} />
@@ -38,10 +44,12 @@
       placeholder="Filter by contributor..."
       bind:selected={$filter_contributors}
     >
-      <span slot="option" let:option style="display: flex;">
-        {option.label} <span style="flex: 1;"></span>
-        {option.count}
-      </span>
+      {#snippet option({ option })}
+        <span style="display: flex;">
+          {option.label} <span style="flex: 1;"></span>
+          {option.count}
+        </span>
+      {/snippet}
     </MultiSelect>
     {#if $filter_contributors.length > 1}
       <RadioButtons bind:selected={$contributor_filter_mode} options={[`all`, `any`]} />

site/src/lib/Person.svelte

@@ -2,9 +2,13 @@
   import Icon from '@iconify/svelte'
   import type { Contributor } from '.'
 
-  export let person: Contributor
+  interface Props {
+    person: Contributor
+  }
+
+  let { person }: Props = $props()
 
-  $: ({ name, twitter, github, url, avatar } = person)
+  let { name, twitter, github, url, avatar } = $derived(person)
 </script>
 
 <span>

site/src/lib/Screenshot.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
   import { dev } from '$app/environment'
 
-  export let title: string
-  // width/height used only for aspect ratio to avoid content shift on img load
-  export let width = 800
-  export let height = 600
-  export let style = ``
-  export let resolution: `.small` | `` = ``
+  interface Props {
+    title: string
+    // width/height used only for aspect ratio to avoid content shift on img load
+    width?: number
+    height?: number
+    style?: string
+    resolution?: `.small` | ``
+  }
+
+  let { title, width = 800, height = 600, style = ``, resolution = `` }: Props = $props()
 
-  const titleToSlug = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
+  const slugify = (title: string) => title.toLowerCase().replaceAll(` `, `-`)
 
   const base = `https://raw.githubusercontent.com/janosh/awesome-sveltekit/main/site/static`
-  $: src = `${dev ? `` : base}/screenshots/${titleToSlug(title)}${resolution}.avif`
+  let src = $derived(`${dev ? `` : base}/screenshots/${slugify(title)}${resolution}.avif`)
 </script>
 
 <img {src} alt="Screenshot of {title}" {width} {height} {style} />

site/src/lib/SiteDetails.svelte

@@ -4,24 +4,30 @@
   import { Tooltip } from 'svelte-zoo'
   import { Person, Screenshot, type Site } from '.'
 
-  export let site: Site
+  interface Props {
+    site: Site
+  }
+
+  let { site }: Props = $props()
 
-  $: ({ title, url, tags, uses, contributors, date_created, repo_stars } = site)
+  let { title, url, tags, uses, contributors, date_created, repo_stars } = $derived(site)
 
-  $: days_since_created = Math.floor(
-    (Date.now() - date_created.getTime()) / (1000 * 60 * 60 * 24)
+  let days_since_created = $derived(
+    Math.floor((Date.now() - date_created.getTime()) / (1000 * 60 * 60 * 24)),
   )
 
-  $: tools = uses.map((tool) => {
-    const href = uses_links[tool.toLowerCase()]
-    if (!href) {
-      console.error(`Unknown tool: ${tool}`)
-    } else if (!href.startsWith(`https`)) {
-      // all tools should have an https URL
-      throw `All tool URLs should use HTTPS: ${tool} has href: ${href}`
-    }
-    return [tool, href]
-  })
+  let tools = $derived(
+    uses.map((tool) => {
+      const href = uses_links[tool.toLowerCase()]
+      if (!href) {
+        console.error(`Unknown tool: ${tool}`)
+      } else if (!href.startsWith(`https`)) {
+        // all tools should have an https URL
+        throw `All tool URLs should use HTTPS: ${tool} has href: ${href}`
+      }
+      return [tool, href]
+    }),
+  )
 </script>
 
 <section>
@@ -48,7 +54,7 @@
     <hr />
     <p class="flex">
       <Icon icon="octicon:star" />&emsp;Stars
-      <span style="flex: 1" />
+      <span style="flex: 1"></span>
       <a href="{site.repo}/stargazers">{repo_stars.toLocaleString()}</a>
     </p>
   {/if}
@@ -72,7 +78,7 @@
           {/each}
         </ol>
       {:else}
-        <span style="flex: 1" />
+        <span style="flex: 1"></span>
         <Person person={contributors[0]} />
       {/if}
     </div>
@@ -81,7 +87,7 @@
     <hr />
     <p class="flex">
       <Icon icon="octicon:project" />&emsp;Project started on
-      <span style="flex: 1" />
+      <span style="flex: 1"></span>
       <Tooltip
         text="{days_since_created} days ago"
         min_width="max-content"

site/src/lib/SiteList.svelte

@@ -7,9 +7,13 @@
   import type { Site } from '.'
   import { SitePreview } from '.'
 
-  export let sites: Site[]
+  interface Props {
+    sites: Site[]
+  }
+
+  let { sites }: Props = $props()
 
-  let active_idx = -1
+  let active_idx = $state(-1)
 
   function handle_keyup(event: KeyboardEvent) {
     if (event.key === `Enter` && active_idx >= 0) {
@@ -29,7 +33,7 @@
   }
 </script>
 
-<svelte:window on:keyup={handle_keyup} />
+<svelte:window onkeyup={handle_keyup} />
 
 <ol use:highlight_matches={{ query: $search, css_class: `highlight-match` }}>
   {#each sites as site, idx (site.url)}
@@ -56,7 +60,7 @@
     border-radius: 1ex;
     padding: 10pt;
   }
-  ol > :is(li:hover, li.active) {
+  ol > :is(:global(li:hover, li.active)) {
     transform: scale(1.01);
     background-color: rgba(255, 255, 255, 0.05);
   }

site/src/lib/SitePreview.svelte

@@ -4,10 +4,13 @@
   import { Screenshot } from '.'
   import { filter_tags } from './stores'
 
-  export let site: Site
-  export let idx: number = 0
-  export let tags: boolean = false
-  export let style: string | null = null
+  interface Props {
+    site: Site
+    idx?: number
+    tags?: boolean
+    style?: string | null
+  }
+  let { site, idx = 0, tags = false, style = null }: Props = $props()
 </script>
 
 <a href={site.slug} {style}>

site/src/routes/+error.svelte

@@ -3,7 +3,7 @@
   import { homepage, name } from '$site/package.json'
   import Icon from '@iconify/svelte'
 
-  let online: boolean
+  let online: boolean = $state(true)
 </script>
 
 <svelte:head>

site/src/routes/+layout.svelte

@@ -5,8 +5,12 @@
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
   import sites from '../sites.yml'
+  interface Props {
+    children?: import('svelte').Snippet
+  }
 
-  let innerWidth: number
+  let { children }: Props = $props()
+  let innerWidth: number = $state(0)
 
   const actions = sites.map(({ title, slug }) => {
     return { label: title, action: () => goto(slug) }
@@ -23,4 +27,4 @@
   <base target="_{innerWidth > 600 ? `blank` : `self`}" />
 </svelte:head>
 
-<slot />
+{@render children?.()}