Migrate from Svelte 4 to Svelte 5

package.json

@@ -15,7 +15,7 @@
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.20.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^4.0.4",
 		"@types/eslint": "^9.6.1",
 		"eslint": "^9.23.0",
 		"eslint-plugin-svelte": "^2.46.1",
@@ -24,8 +24,8 @@
 		"rehype-external-links": "^3.0.0",
 		"remark-emoji": "^4.0.1",
 		"remark-gfm": "^4.0.1",
-		"svelte": "^4.2.19",
+		"svelte": "^5.25.3",
-		"svelte-check": "^3.8.6",
+		"svelte-check": "^4.1.5",
 		"tslib": "^2.8.1",
 		"typescript": "^5.8.2",
 		"vite": "^5.4.15"

src/lib/components/ArticleHeader.svelte

@@ -1,45 +1,45 @@
 <script>
     import DateTime from "./DateTime.svelte";
-    import { page } from "$app/stores";
+    import { page } from "$app/state";
 </script>
 
 <svelte:head>
-    {#if $page.data.header}
+    {#if page.data.header}
-        <meta property="og:image" content={$page.data.header} />
+        <meta property="og:image" content={page.data.header} />
-        {#if $page.data.header_alt}
+        {#if page.data.header_alt}
-            <meta property="og:image:alt" content={$page.data.header_alt} />
+            <meta property="og:image:alt" content={page.data.header_alt} />
         {/if}
-        <meta property="og:description" content={$page.data.description} />
+        <meta property="og:description" content={page.data.description} />
     {/if}
 </svelte:head>
 
 <header id="main-content">
-    {#if $page.data.header}
+    {#if page.data.header}
         <figure>
             <img
-                src={$page.data.header}
+                src={page.data.header}
-                alt={$page.data.header_alt || "header"}
+                alt={page.data.header_alt || "header"}
                 class="header"
             />
-            {#if $page.data.header_caption}
+            {#if page.data.header_caption}
-                <figcaption>{$page.data.header_caption}</figcaption>
+                <figcaption>{page.data.header_caption}</figcaption>
             {/if}
         </figure>
     {/if}
 
     <hgroup>
-        <h1>{$page.data.title}</h1>
+        <h1>{page.data.title}</h1>
-        <p>{$page.data.description}</p>
+        <p>{page.data.description}</p>
     </hgroup>
 
-    {#if $page.data.published}
+    {#if page.data.published}
         <p>
             <small>
                 Published:
-                <DateTime datetime={$page.data.published} display="date" />
+                <DateTime datetime={page.data.published} display="date" />
-                {#if $page.data.edited}
+                {#if page.data.edited}
                     &bull; Last edited:
-                    <DateTime datetime={$page.data.edited} display="dateTime" />
+                    <DateTime datetime={page.data.edited} display="dateTime" />
                 {/if}
             </small>
         </p>

src/lib/components/DateTime.svelte

@@ -1,12 +1,18 @@
 <script>
     import { browser } from "$app/environment";
 
-    /** @type string | undefined */
+    
-    export let datetime = undefined;
+    
-    /** @type "date" | "dateTime" | "time" */
+    
-    export let display = "date";
+    /**
-    /** @type string | undefined */
+     * @typedef {Object} Props
-    export let timeZone = undefined;
+     * @property {any} [datetime]
+     * @property {string} [display]
+     * @property {any} [timeZone]
+     */
+
+    /** @type {Props} */
+    let { datetime = undefined, display = "date", timeZone = undefined } = $props();
 
     const date = datetime ? Date.parse(datetime) : Date.now();
 

src/lib/components/Navbar.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { page } from "$app/stores";
+    import { page } from "$app/state";
     import links from "../../data/links.json";
 </script>
 
@@ -9,7 +9,7 @@
         <img src="/favicon.png" alt="a black cat with large eyes" />
         <a href="/">pancakes</a>
     </span>
-    {#if $page.url.pathname !== "/"}
+    {#if page.url.pathname !== "/"}
         <ul class="links">
             {#each links as link}
                 {#if link.href && !link.mainOnly}

src/routes/+layout.svelte

@@ -1,9 +1,16 @@
 <script>
     import { browser } from "$app/environment";
-    import { page } from "$app/stores";
+    import { page } from "$app/state";
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
     import "./style.css";
+    /**
+     * @typedef {Object} Props
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { children } = $props();
 
     const green = browser
         ? window.localStorage.getItem("green") === "true"
@@ -15,16 +22,16 @@
         <link rel="stylesheet" href="/assets/green.css" />
     {/if}
     <title>
-        {$page.data.title ? $page.data.title + " | pancakes" : "pancakes"}
+        {page.data.title ? page.data.title + " | pancakes" : "pancakes"}
     </title>
-    <meta name="description" content={$page.data.description || "🐈‍⬛"} />
+    <meta name="description" content={page.data.description || "🐈‍⬛"} />
     <meta property="og:site_name" content="pancakes" />
     <meta
         property="og:url"
-        content={"https://pancakes.gay" + $page.url.pathname}
+        content={"https://pancakes.gay" + page.url.pathname}
     />
-    <meta property="og:title" content={$page.data.title || "pancakes"} />
+    <meta property="og:title" content={page.data.title || "pancakes"} />
-    {#if $page.data.header}
+    {#if page.data.header}
         <meta property="og:type" content="article" />
     {:else}
         <meta property="og:type" content="website" />
@@ -35,6 +42,6 @@
 
 <Navbar />
 
-<slot />
+{@render children?.()}
 
 <Footer />

src/routes/+page.svelte

@@ -5,7 +5,7 @@
 
     const pages = getPages();
 
-    let ntfyLock = false;
+    let ntfyLock = $state(false);
     async function sendNtfyMessage() {
         if (ntfyLock) return;
         ntfyLock = true;
@@ -396,7 +396,7 @@
     </p>
 
     <input
-        on:input={updateNtfyCharCount}
+        oninput={updateNtfyCharCount}
         type="text"
         id="ntfy-message"
         name="ntfy-message"
@@ -408,7 +408,7 @@
         128
     </label>
     <br />
-    <button on:click={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
+    <button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
 </main>
 
 <style>

src/routes/[slug]/+page.svelte

@@ -2,8 +2,14 @@
     import ArticleHeader from "$lib/components/ArticleHeader.svelte";
     import { error } from "@sveltejs/kit";
 
-    /** @type {import("./$types").PageData} */
+    
-    export let data;
+    /**
+     * @typedef {Object} Props
+     * @property {import("./$types").PageData} data
+     */
+
+    /** @type {Props} */
+    let { data } = $props();
 
     // hopefully this will get my attention
     if (!data.title) error(500, "there is no title dumbass");
@@ -13,5 +19,5 @@
 <article id="main-content">
     <ArticleHeader />
 
-    <svelte:component this={data.content} />
+    <data.content />
 </article>