chore(docs): update svelte to v5

docs/package.json

@@ -18,13 +18,13 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "^2.5.24",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.7",
     "rimraf": "^6.0.1",
     "sass": "^1.79.4",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0",
     "svelte-check": "^4.0.4",
     "svelte-preprocess-import-assets": "^1.1.0",
     "typescript": "^5.6.2",

docs/src/lib/BreadcrumbNav.svelte

@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { page } from "$app/stores";
-  import { getBreadcrumbs } from "$lib/breadcrumbs.js";
+  import { getBreadcrumbs } from "$lib/breadcrumbs";
   import NavLink from "./NavLink.svelte";
-  $: breadcrumbs = getBreadcrumbs($page.route.id, $page.data.breadcrumbNames);
+  let breadcrumbs = $derived(getBreadcrumbs($page.route.id, $page.data.breadcrumbNames));
 </script>
 
 {#if breadcrumbs.length > 1}

docs/src/lib/Code.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module lang="ts">
   import hljs from "highlight.js/lib/core";
   import xml from "highlight.js/lib/languages/xml";
   import css from "highlight.js/lib/languages/css";
@@ -14,14 +14,14 @@
 <script>
   import "highlight.js/styles/github.css";
 
-  /** @param {string} markup */
-  const trim = (markup) => markup.replace(/^(\s*\n)+/, "").replace(/\n\s*$/, "");
+  interface Props {
+    language?: "html" | "css" | "scss" | "plaintext";
+    code?: string;
+  }
 
-  /** @type {'html' | 'css' | 'scss' | 'plaintext'} */
-  export let language = "plaintext";
-  export let code = "";
-  $: trimmed = trim(code);
-  $: highlighted = hljs.highlight(trimmed, { language }).value;
+  let { language = "plaintext", code = "" }: Props = $props();
+  let trimmed = $derived(code.replace(/^(\s*\n)+/, "").replace(/\n\s*$/, ""));
+  let highlighted = $derived(hljs.highlight(trimmed, { language }).value);
 </script>
 
 <pre><code>{@html highlighted}</code></pre>

docs/src/lib/DefaultHeader.svelte

@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import SiteNav from "$lib/SiteNav.svelte";
   import BreadcrumbNav from "$lib/BreadcrumbNav.svelte";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
 </script>
 
-<header {...$$props}>
+<header {...props}>
   <div>
     <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
     <SiteNav />

docs/src/lib/NavLink.svelte

@@ -1,12 +1,17 @@
-<script>
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
   import { page } from "$app/stores";
 
-  export let href = "";
+  interface Props {
+    children: Snippet;
+    href: string;
+  }
 
-  /** @type {"page"|undefined} */
-  $: ariaCurrent = $page.url.pathname === href ? "page" : undefined;
+  let { href = "", children, ...rest }: Props & HTMLAnchorAttributes = $props();
+  let ariaCurrent = $derived($page.url.pathname === href ? ("page" as const) : undefined);
 </script>
 
-<a {href} aria-current={ariaCurrent} {...$$restProps}>
-  <slot />
+<a {href} aria-current={ariaCurrent} {...rest}>
+  {@render children?.()}
 </a>

docs/src/lib/SideMenu.svelte

@@ -1,15 +1,17 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import { onMount } from "svelte";
-  import { browser } from "$app/environment";
-  import { initSidemenus } from "$lib/manon.js";
+  import { initSidemenus } from "$lib/manon";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
   onMount(initSidemenus);
 </script>
 
 <nav
   data-open-label="Zijbalknavigatie"
   data-close-label="Sluit zijbalknavigatie"
   aria-label="Document-navigatie"
-  {...$$props}
+  {...props}
 >
-  <slot />
+  {@render props.children?.()}
 </nav>

docs/src/lib/SiteNav.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import SiteNavLinks from "$lib/SiteNavLinks.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
 </script>
 

docs/src/lib/SiteNavLinks.svelte

@@ -1,9 +1,12 @@
-<script>
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
   import { base } from "$app/paths";
   import NavLink from "$lib/NavLink.svelte";
+
+  let props: HTMLAttributes<HTMLElement> = $props();
 </script>
 
-<ul {...$$props}>
+<ul {...props}>
   <li><NavLink href="{base}/">Home</NavLink></li>
   <li><NavLink href="{base}/components">Componenten</NavLink></li>
   <li><NavLink href="{base}/documentation">Documentatie</NavLink></li>

docs/src/lib/breadcrumbs.js → docs/src/lib/breadcrumbs.ts

@@ -1,9 +1,9 @@
-/**
- * @param {string | null} routeId
- * @param {import('./types').BreadcrumbNames} breadcrumbNames
- * @return {Array<import('./types').Breadcrumb>}
- */
-export function getBreadcrumbs(routeId, breadcrumbNames) {
+import type { Breadcrumb, BreadcrumbNames } from "./types";
+
+export function getBreadcrumbs(
+  routeId: string | null,
+  breadcrumbNames: BreadcrumbNames,
+): Array<Breadcrumb> {
   if (!routeId || !breadcrumbNames) return [];
   const breadcrumbs = [];
   let route = "";
@@ -17,19 +17,15 @@ export function getBreadcrumbs(routeId, breadcrumbNames) {
   return breadcrumbs;
 }
 
-/**
- * @return {Promise<import('./types').BreadcrumbNames>}
- */
-export async function loadBreadcrumbNames() {
+export async function loadBreadcrumbNames(): Promise<BreadcrumbNames> {
   const modules = import.meta.glob("../routes/**/+page.svelte");
-  /** @type import('./types').BreadcrumbNames */
-  const names = {};
+  const names: BreadcrumbNames = {};
   await Promise.all(
     Object.entries(modules).map(async ([key, value]) => {
       key = routeFromModulePath(key);
       if (!key) return;
       const name = (await nameFromModule(value)) || nameFromKey(key);
-      names[/** @type {import('./types').Route} */ (key)] = name;
+      names[key] = name;
     }),
   );
   return names;
@@ -40,10 +36,8 @@ const routeSegmentPattern = /\/[^+.(\/]+/g;
 /**
  * Strip the "../routes/" prefix, "/+page.svelte" suffix, and any route
  * "(group)/"s from the module path.
- * @param {string} path
- * @return {string}
  */
-function routeFromModulePath(path) {
+function routeFromModulePath(path: string): string {
   routeSegmentPattern.lastIndex = 0;
   let route = "";
   let match;
@@ -54,20 +48,12 @@ function routeFromModulePath(path) {
   return route;
 }
 
-/**
- * @param {() => Promise<any>} mod
- * @return {Promise<string>}
- */
-async function nameFromModule(mod) {
+async function nameFromModule(mod: () => Promise<any>): Promise<string> {
   const name = /** @type {any} */ (await mod()).breadcrumb;
   return typeof name === "string" ? name : "";
 }
 
-/**
- * @param {string} key
- * @return {string}
- */
-function nameFromKey(key) {
+function nameFromKey(key: string): string {
   const parts = key.split("/");
   if (parts.length < 3) return "";
   const name = parts[parts.length - 2];

docs/src/redirects.js

@@ -1,9 +1,11 @@
 /**
- * Record mapping old URLs to new URLs. The root +layout.js uses this to
+ * Record mapping old URLs to new URLs. The root +layout.ts uses this to
  * generate redirect pages for the old URLs during a build. The keys (old URLs)
  * are added to the kit.prerender.entries array in svelte.config.js to ensure
  * they are included in the build.
  *
+ * NB: this needs to be a .js file because it's imported from svelte.config.js.
+ *
  * @type {Record<string, string>}
  */
 export const redirects = {

docs/src/routes/(docs)/+layout.svelte

@@ -1,10 +1,12 @@
 <script>
   import DefaultHeader from "$lib/DefaultHeader.svelte";
   import DefaultFooter from "$lib/DefaultFooter.svelte";
+
+  let { children } = $props();
 </script>
 
 <DefaultHeader />
 
-<slot />
+{@render children?.()}
 
 <DefaultFooter />

docs/src/routes/(docs)/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Manon";
 </script>
 

docs/src/routes/(docs)/components/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Componenten";
 </script>
 

docs/src/routes/(docs)/components/accordion-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accordeon testpagina";
 </script>
 

docs/src/routes/(docs)/components/accordion/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Accordeon";
 </script>
 

docs/src/routes/(docs)/components/application-base/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Stijlkeuzes op applicatie-niveau";
 </script>
 

docs/src/routes/(docs)/components/article-content-wrapper-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Main testpagina";
 </script>
 

docs/src/routes/(docs)/components/article-content-wrapper/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Article content wrapper";
 </script>
 

docs/src/routes/(docs)/components/article-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Article testpagina";
 </script>
 

docs/src/routes/(docs)/components/article/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Artikel";
 </script>
 

docs/src/routes/(docs)/components/body-text-set/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Body text set";
 </script>
 

docs/src/routes/(docs)/components/branding-colors/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kleuren";
 </script>
 

docs/src/routes/(docs)/components/breadcrumb-bar-example/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kruimelpad voorbeeld";
 </script>
 

docs/src/routes/(docs)/components/breadcrumb-bar/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Kruimelpad - breadcrumb-bar";
 </script>
 

docs/src/routes/(docs)/components/button-base/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen (basisweergave)";
 </script>
 

docs/src/routes/(docs)/components/button-call-to-action-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Call to action" testpagina';
 </script>
 

docs/src/routes/(docs)/components/button-call-to-action/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Call to action button";
 </script>
 

docs/src/routes/(docs)/components/button-container-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen groeperen testpagina";
 </script>
 

docs/src/routes/(docs)/components/button-container/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Knoppen groeperen";
 </script>
 

docs/src/routes/(docs)/components/button-destructive-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Destructieve knop testpagina";
 </script>
 

docs/src/routes/(docs)/components/button-destructive/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Destructieve knop";
 </script>
 

docs/src/routes/(docs)/components/button-dropdown/+page.svelte

@@ -1,12 +1,12 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Dropdown button";
 </script>
 
-<script>
+<script lang="ts">
   import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
-  import { initCollapsible } from "$lib/manon.js";
+  import { initCollapsible } from "$lib/manon";
   onMount(initCollapsible);
   import SideMenu from "$lib/SideMenu.svelte";
 </script>

docs/src/routes/(docs)/components/button-ghost-test/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = '"Ghost button" testpagina';
 </script>
 

docs/src/routes/(docs)/components/button-ghost/+page.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export const breadcrumb = "Ghost button";
 </script>