From 130940667eedc2941fc216031e5d30b9eddc65d0 Mon Sep 17 00:00:00 2001
From: scosman <scosman@users.noreply.github.com>
Date: Fri, 1 Nov 2024 16:03:20 -0400
Subject: [PATCH] Run: npx sv migrate svelte-5

No other manual changes, just the script.

I'll merge https://github.com/CriticalMoments/CMSaasStarter/pull/161 into here, I just want to be able to CR the changes in that branch separate from the automatic changes by this command.
---
 package.json                                  | 16 +++----
 src/lib/emails/welcome_email_html.svelte      |  1 +
 src/lib/emails/welcome_email_text.svelte      |  9 +++-
 .../(admin)/account/(menu)/+layout.svelte     | 17 ++++---
 .../account/(menu)/billing/+page.svelte       |  2 +-
 .../account/(menu)/settings/+page.svelte      |  2 +-
 .../(menu)/settings/change_email/+page.svelte |  2 +-
 .../change_email_subscription/+page.svelte    |  2 +-
 .../settings/change_password/+page.svelte     |  8 ++--
 .../settings/delete_account/+page.svelte      |  2 +-
 .../(menu)/settings/edit_profile/+page.svelte |  2 +-
 .../(menu)/settings/settings_module.svelte    | 45 +++++++++++++------
 src/routes/(admin)/account/+layout.svelte     | 12 +++--
 .../account/create_profile/+page.svelte       | 10 +++--
 .../(admin)/account/sign_out/+page.svelte     |  4 +-
 src/routes/(marketing)/+layout.svelte         | 13 ++++--
 .../(marketing)/blog/(posts)/+layout.svelte   | 15 ++++---
 .../(marketing)/contact_us/+page.svelte       |  6 +--
 src/routes/(marketing)/login/+layout.svelte   |  9 +++-
 .../login/forgot_password/+page.svelte        |  2 +-
 .../(marketing)/login/sign_in/+page.svelte    |  2 +-
 .../(marketing)/login/sign_up/+page.svelte    |  2 +-
 .../(marketing)/pricing/pricing_module.svelte | 20 ++++++---
 src/routes/(marketing)/search/+page.svelte    | 26 ++++++-----
 src/routes/+layout.svelte                     |  7 ++-
 25 files changed, 152 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index 1013222e..8a19e805 100644
--- a/package.json
+++ b/package.json
@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/glob": "^8.1.0",
     "@types/html-to-text": "^9.0.4",
@@ -28,19 +28,19 @@
     "daisyui": "^4.7.3",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.45.1",
     "fuse.js": "^7.0.0",
     "glob": "^10.4.5",
     "html-to-text": "^9.0.5",
     "jsdom": "^24.1.1",
     "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
+    "prettier": "^3.1.0",
+    "prettier-plugin-svelte": "^3.2.6",
     "super-sitemap": "^0.15.1",
-    "svelte": "^4.2.19",
-    "svelte-check": "^3.4.3",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^5.5.0",
     "vite": "^5.4.8",
     "vitest": "^1.0.0"
   },
diff --git a/src/lib/emails/welcome_email_html.svelte b/src/lib/emails/welcome_email_html.svelte
index 2dbfb0c2..6b55b82b 100644
--- a/src/lib/emails/welcome_email_html.svelte
+++ b/src/lib/emails/welcome_email_html.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: `<tr>` is invalid inside `<table>` -->
 <script lang="ts">
   import { WebsiteBaseUrl } from "../../config"
 
diff --git a/src/lib/emails/welcome_email_text.svelte b/src/lib/emails/welcome_email_text.svelte
index b25da5a1..a03ff612 100644
--- a/src/lib/emails/welcome_email_text.svelte
+++ b/src/lib/emails/welcome_email_text.svelte
@@ -7,8 +7,13 @@
   // must be set to true to render email on server
   export const ssr = true
 
-  // Define all your props here
-  export let companyName: string = ""
+  
+  interface Props {
+    // Define all your props here
+    companyName?: string;
+  }
+
+  let { companyName = "" }: Props = $props();
 </script>
 
 Welcome to {companyName}! 
diff --git a/src/routes/(admin)/account/(menu)/+layout.svelte b/src/routes/(admin)/account/(menu)/+layout.svelte
index de559a3c..6d1c981b 100644
--- a/src/routes/(admin)/account/(menu)/+layout.svelte
+++ b/src/routes/(admin)/account/(menu)/+layout.svelte
@@ -3,10 +3,15 @@
   import { writable } from "svelte/store"
   import { setContext } from "svelte"
   import { WebsiteName } from "../../../../config"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
   const adminSectionStore = writable("")
   setContext("adminSection", adminSectionStore)
-  let adminSection: string
+  let adminSection: string = $state()
   adminSectionStore.subscribe((value) => {
     adminSection = value
   })
@@ -47,12 +52,12 @@
       </div>
     </div>
     <div class="container px-6 lg:px-12 py-3 lg:py-6">
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 
   <div class="drawer-side">
-    <label for="admin-drawer" class="drawer-overlay" />
+    <label for="admin-drawer" class="drawer-overlay"></label>
     <ul
       class="menu menu-lg p-4 w-80 min-h-full bg-base-100 lg:border-r text-primary"
     >
@@ -68,7 +73,7 @@
         <a
           href="/account"
           class={adminSection === "home" ? "active" : ""}
-          on:click={closeDrawer}
+          onclick={closeDrawer}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -90,7 +95,7 @@
         <a
           href="/account/billing"
           class={adminSection === "billing" ? "active" : ""}
-          on:click={closeDrawer}
+          onclick={closeDrawer}
         >
           <svg
             class="h-5 w-5"
@@ -109,7 +114,7 @@
         <a
           href="/account/settings"
           class={adminSection === "settings" ? "active" : ""}
-          on:click={closeDrawer}
+          onclick={closeDrawer}
         >
           <svg class="h-5 w-5" viewBox="0 0 24 24" stroke="none" fill="none">
             <g id="Interface / Settings">
diff --git a/src/routes/(admin)/account/(menu)/billing/+page.svelte b/src/routes/(admin)/account/(menu)/billing/+page.svelte
index 97f2e5a7..806221d1 100644
--- a/src/routes/(admin)/account/(menu)/billing/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/billing/+page.svelte
@@ -11,7 +11,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("billing")
 
-  export let data
+  let { data } = $props();
 
   let currentPlanId = data.currentPlanId ?? defaultPlanId
   let currentPlanName = pricingPlans.find(
diff --git a/src/routes/(admin)/account/(menu)/settings/+page.svelte b/src/routes/(admin)/account/(menu)/settings/+page.svelte
index 2e2ae5b7..15527a6e 100644
--- a/src/routes/(admin)/account/(menu)/settings/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/+page.svelte
@@ -6,7 +6,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  let { data } = $props();
   let { profile, user } = data
 </script>
 
diff --git a/src/routes/(admin)/account/(menu)/settings/change_email/+page.svelte b/src/routes/(admin)/account/(menu)/settings/change_email/+page.svelte
index cbc6e1b4..af38e50d 100644
--- a/src/routes/(admin)/account/(menu)/settings/change_email/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/change_email/+page.svelte
@@ -6,7 +6,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  let { data } = $props();
 
   let { user } = data
 </script>
diff --git a/src/routes/(admin)/account/(menu)/settings/change_email_subscription/+page.svelte b/src/routes/(admin)/account/(menu)/settings/change_email_subscription/+page.svelte
index 8cd35a05..26404d59 100644
--- a/src/routes/(admin)/account/(menu)/settings/change_email_subscription/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/change_email_subscription/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import SettingsModule from "../settings_module.svelte"
-  export let data
+  let { data } = $props();
   let { profile } = data
   let unsubscribed = profile?.unsubscribed
 </script>
diff --git a/src/routes/(admin)/account/(menu)/settings/change_password/+page.svelte b/src/routes/(admin)/account/(menu)/settings/change_password/+page.svelte
index e87ebf14..ab3edd17 100644
--- a/src/routes/(admin)/account/(menu)/settings/change_password/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/change_password/+page.svelte
@@ -7,7 +7,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  let { data } = $props();
   let { user, supabase } = data
 
   // True if definitely has a password, but can be false if they
@@ -21,8 +21,8 @@
   // @ts-expect-error: we ignore because Supabase does not maintain an AMR typedef
   let usingOAuth = user?.amr?.find((x) => x.method === "oauth") ? true : false
 
-  let sendBtn: HTMLButtonElement
-  let sentEmail = false
+  let sendBtn: HTMLButtonElement = $state()
+  let sentEmail = $state(false)
   let sendForgotPassword = () => {
     sendBtn.disabled = true
     sendBtn.textContent = "Sending..."
@@ -95,7 +95,7 @@
       <button
         class="btn btn-outline btn-wide {sentEmail ? 'hidden' : ''}"
         bind:this={sendBtn}
-        on:click={sendForgotPassword}
+        onclick={sendForgotPassword}
         >Send Set Password Email
       </button>
       <div class="success alert alert-success {sentEmail ? '' : 'hidden'}">
diff --git a/src/routes/(admin)/account/(menu)/settings/delete_account/+page.svelte b/src/routes/(admin)/account/(menu)/settings/delete_account/+page.svelte
index 473380e8..bed955b7 100644
--- a/src/routes/(admin)/account/(menu)/settings/delete_account/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/delete_account/+page.svelte
@@ -6,7 +6,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  let { data } = $props();
   let { session } = data
 </script>
 
diff --git a/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte b/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte
index 243ec1b6..8e490e41 100644
--- a/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/edit_profile/+page.svelte
@@ -6,7 +6,7 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  let { data } = $props();
 
   let { profile } = data
 </script>
diff --git a/src/routes/(admin)/account/(menu)/settings/settings_module.svelte b/src/routes/(admin)/account/(menu)/settings/settings_module.svelte
index 2370e5e3..b73972bd 100644
--- a/src/routes/(admin)/account/(menu)/settings/settings_module.svelte
+++ b/src/routes/(admin)/account/(menu)/settings/settings_module.svelte
@@ -9,8 +9,8 @@
   }
 
   // Page state
-  let loading = false
-  let showSuccess = false
+  let loading = $state(false)
+  let showSuccess = $state(false)
 
   type Field = {
     inputType?: string // default is "text"
@@ -21,18 +21,35 @@
     maxlength?: number
   }
 
-  // Module context
-  export let editable = false
-  export let dangerous = false
-  export let title: string = ""
-  export let message: string = ""
-  export let fields: Field[]
-  export let formTarget: string = ""
-  export let successTitle = "Success"
-  export let successBody = ""
-  export let editButtonTitle: string | null = null
-  export let editLink: string | null = null
-  export let saveButtonTitle: string = "Save"
+  
+  interface Props {
+    // Module context
+    editable?: boolean;
+    dangerous?: boolean;
+    title?: string;
+    message?: string;
+    fields: Field[];
+    formTarget?: string;
+    successTitle?: string;
+    successBody?: string;
+    editButtonTitle?: string | null;
+    editLink?: string | null;
+    saveButtonTitle?: string;
+  }
+
+  let {
+    editable = false,
+    dangerous = false,
+    title = "",
+    message = "",
+    fields,
+    formTarget = "",
+    successTitle = "Success",
+    successBody = "",
+    editButtonTitle = null,
+    editLink = null,
+    saveButtonTitle = "Save"
+  }: Props = $props();
 
   const handleSubmit: SubmitFunction = () => {
     loading = true
diff --git a/src/routes/(admin)/account/+layout.svelte b/src/routes/(admin)/account/+layout.svelte
index 468d5fde..87e5656c 100644
--- a/src/routes/(admin)/account/+layout.svelte
+++ b/src/routes/(admin)/account/+layout.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { invalidate } from "$app/navigation"
   import { onMount } from "svelte"
 
-  export let data
+  let { data, children } = $props();
 
-  let { supabase, session } = data
-  $: ({ supabase, session } = data)
+  let { supabase, session } = $state(data)
+  run(() => {
+    ({ supabase, session } = data)
+  });
 
   onMount(() => {
     const { data } = supabase.auth.onAuthStateChange((event, _session) => {
@@ -18,4 +22,4 @@
   })
 </script>
 
-<slot />
+{@render children?.()}
diff --git a/src/routes/(admin)/account/create_profile/+page.svelte b/src/routes/(admin)/account/create_profile/+page.svelte
index b45b4043..79e3b62f 100644
--- a/src/routes/(admin)/account/create_profile/+page.svelte
+++ b/src/routes/(admin)/account/create_profile/+page.svelte
@@ -3,12 +3,16 @@
   import type { SubmitFunction } from "@sveltejs/kit"
   import "../../../../app.css"
 
-  export let data
-  export let form: FormAccountUpdateResult
+  interface Props {
+    data: any;
+    form: FormAccountUpdateResult;
+  }
+
+  let { data, form }: Props = $props();
 
   let { user, profile } = data
 
-  let loading = false
+  let loading = $state(false)
   let fullName: string = profile?.full_name ?? ""
   let companyName: string = profile?.company_name ?? ""
   let website: string = profile?.website ?? ""
diff --git a/src/routes/(admin)/account/sign_out/+page.svelte b/src/routes/(admin)/account/sign_out/+page.svelte
index 71826b82..3f2da843 100644
--- a/src/routes/(admin)/account/sign_out/+page.svelte
+++ b/src/routes/(admin)/account/sign_out/+page.svelte
@@ -2,10 +2,10 @@
   import { goto } from "$app/navigation"
   import { onMount } from "svelte"
 
-  export let data
+  let { data } = $props();
 
   let { supabase } = data
-  let message = "Signing out...."
+  let message = $state("Signing out....")
 
   // on mount, sign out
   onMount(() => {
diff --git a/src/routes/(marketing)/+layout.svelte b/src/routes/(marketing)/+layout.svelte
index 54b2d302..a468cbad 100644
--- a/src/routes/(marketing)/+layout.svelte
+++ b/src/routes/(marketing)/+layout.svelte
@@ -1,6 +1,11 @@
 <script>
   import { WebsiteName } from "./../../config"
   import "../../app.css"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <div class="navbar bg-base-100 container mx-auto">
@@ -34,8 +39,8 @@
       </li>
     </ul>
     <div class="dropdown dropdown-end sm:hidden">
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y_label_has_associated_control -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <label tabindex="0" class="btn btn-ghost btn-circle">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -51,7 +56,7 @@
           /></svg
         >
       </label>
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         tabindex="0"
         class="menu menu-lg dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 font-bold"
@@ -72,7 +77,7 @@
 </div>
 
 <div class="">
-  <slot />
+  {@render children?.()}
 </div>
 
 <!-- Spacer grows so the footer can be at bottom on short pages -->
diff --git a/src/routes/(marketing)/blog/(posts)/+layout.svelte b/src/routes/(marketing)/blog/(posts)/+layout.svelte
index 56e85268..1eb165e1 100644
--- a/src/routes/(marketing)/blog/(posts)/+layout.svelte
+++ b/src/routes/(marketing)/blog/(posts)/+layout.svelte
@@ -3,6 +3,11 @@
   import { error } from "@sveltejs/kit"
   import { sortedBlogPosts, type BlogPost } from "./../posts"
   import { WebsiteName } from "../../../../config"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
   function getCurrentPost(url: string): BlogPost {
     let searchPost: BlogPost | null = null
@@ -17,7 +22,7 @@
     }
     return searchPost
   }
-  $: currentPost = getCurrentPost($page.url.pathname)
+  let currentPost = $derived(getCurrentPost($page.url.pathname))
 
   function buildLdJson(post: BlogPost) {
     return {
@@ -28,11 +33,11 @@
       dateModified: post.parsedDate?.toISOString(),
     }
   }
-  $: jsonldScript = `<script type="application/ld+json">${
+  let jsonldScript = $derived(`<script type="application/ld+json">${
     JSON.stringify(buildLdJson(currentPost)) + "<"
-  }/script>`
+  }/script>`)
 
-  $: pageUrl = $page.url.origin + $page.url.pathname
+  let pageUrl = $derived($page.url.origin + $page.url.pathname)
 </script>
 
 <svelte:head>
@@ -67,5 +72,5 @@
     })}
   </div>
   <h1>{currentPost.title}</h1>
-  <slot />
+  {@render children?.()}
 </article>
diff --git a/src/routes/(marketing)/contact_us/+page.svelte b/src/routes/(marketing)/contact_us/+page.svelte
index 195bb21d..e7d86b5f 100644
--- a/src/routes/(marketing)/contact_us/+page.svelte
+++ b/src/routes/(marketing)/contact_us/+page.svelte
@@ -2,9 +2,9 @@
   import { enhance, applyAction } from "$app/forms"
   import type { SubmitFunction } from "@sveltejs/kit"
 
-  let errors: { [fieldName: string]: string } = {}
-  let loading = false
-  let showSuccess = false
+  let errors: { [fieldName: string]: string } = $state({})
+  let loading = $state(false)
+  let showSuccess = $state(false)
 
   const formFields = [
     {
diff --git a/src/routes/(marketing)/login/+layout.svelte b/src/routes/(marketing)/login/+layout.svelte
index 9e5239c1..41ebbe79 100644
--- a/src/routes/(marketing)/login/+layout.svelte
+++ b/src/routes/(marketing)/login/+layout.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  let isEurope = false
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
+  let isEurope = $state(false)
   try {
     isEurope = Intl.DateTimeFormat()
       .resolvedOptions()
@@ -13,7 +18,7 @@
   class="text-center content-center max-w-lg mx-auto min-h-[70vh] pb-12 flex items-center place-content-center"
 >
   <div class="flex flex-col w-64 lg:w-80">
-    <slot />
+    {@render children?.()}
     <div class="mt-8 {isEurope ? 'block' : 'hidden'}">
       🍪 Logging in uses Cookies 🍪
     </div>
diff --git a/src/routes/(marketing)/login/forgot_password/+page.svelte b/src/routes/(marketing)/login/forgot_password/+page.svelte
index a8baa1fe..deefa740 100644
--- a/src/routes/(marketing)/login/forgot_password/+page.svelte
+++ b/src/routes/(marketing)/login/forgot_password/+page.svelte
@@ -2,7 +2,7 @@
   import { Auth } from "@supabase/auth-ui-svelte"
   import { sharedAppearance, oauthProviders } from "../login_config"
 
-  export let data
+  let { data } = $props();
 </script>
 
 <svelte:head>
diff --git a/src/routes/(marketing)/login/sign_in/+page.svelte b/src/routes/(marketing)/login/sign_in/+page.svelte
index 6457d880..d303e238 100644
--- a/src/routes/(marketing)/login/sign_in/+page.svelte
+++ b/src/routes/(marketing)/login/sign_in/+page.svelte
@@ -5,7 +5,7 @@
   import { onMount } from "svelte"
   import { page } from "$app/stores"
 
-  export let data
+  let { data } = $props();
   let { supabase } = data
 
   onMount(() => {
diff --git a/src/routes/(marketing)/login/sign_up/+page.svelte b/src/routes/(marketing)/login/sign_up/+page.svelte
index 15b9c512..e96fa22f 100644
--- a/src/routes/(marketing)/login/sign_up/+page.svelte
+++ b/src/routes/(marketing)/login/sign_up/+page.svelte
@@ -2,7 +2,7 @@
   import { Auth } from "@supabase/auth-ui-svelte"
   import { sharedAppearance, oauthProviders } from "../login_config"
 
-  export let data
+  let { data } = $props();
 </script>
 
 <svelte:head>
diff --git a/src/routes/(marketing)/pricing/pricing_module.svelte b/src/routes/(marketing)/pricing/pricing_module.svelte
index 5cb25ecc..ee1f31f4 100644
--- a/src/routes/(marketing)/pricing/pricing_module.svelte
+++ b/src/routes/(marketing)/pricing/pricing_module.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
   import { pricingPlans } from "./pricing_plans"
 
-  // Module context
-  export let highlightedPlanId: string = ""
-  export let callToAction: string
-  export let currentPlanId: string = ""
-  export let center = true
+  
+  interface Props {
+    // Module context
+    highlightedPlanId?: string;
+    callToAction: string;
+    currentPlanId?: string;
+    center?: boolean;
+  }
+
+  let {
+    highlightedPlanId = "",
+    callToAction,
+    currentPlanId = "",
+    center = true
+  }: Props = $props();
 </script>
 
 <div
diff --git a/src/routes/(marketing)/search/+page.svelte b/src/routes/(marketing)/search/+page.svelte
index 775b98e0..05f82ec8 100644
--- a/src/routes/(marketing)/search/+page.svelte
+++ b/src/routes/(marketing)/search/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { page } from "$app/stores"
   import { browser } from "$app/environment"
   import { onMount } from "svelte"
@@ -16,10 +18,10 @@
     threshold: 0.3,
   }
 
-  let fuse: Fuse<Result> | undefined
+  let fuse: Fuse<Result> | undefined = $state()
 
-  let loading = true
-  let error = false
+  let loading = $state(true)
+  let error = $state(false)
   onMount(async () => {
     try {
       const response = await fetch("/search/api.json")
@@ -48,23 +50,23 @@
       path: string
     }
   }
-  let results: Result[] = []
+  let results: Result[] = $state([])
 
   // searchQuery is $page.url.hash minus the "#" at the beginning if present
-  let searchQuery = decodeURIComponent($page.url.hash.slice(1) ?? "")
-  $: {
+  let searchQuery = $state(decodeURIComponent($page.url.hash.slice(1) ?? ""))
+  run(() => {
     if (fuse) {
       results = fuse.search(searchQuery)
     }
-  }
+  });
   // Update the URL hash when searchQuery changes so the browser can bookmark/share the search results
-  $: {
+  run(() => {
     if (browser && window.location.hash.slice(1) !== searchQuery) {
       goto("#" + searchQuery, { keepFocus: true })
     }
-  }
+  });
 
-  let focusItem = 0
+  let focusItem = $state(0)
   function onKeyDown(event: KeyboardEvent) {
     if (event.key === "Escape") {
       searchQuery = ""
@@ -84,7 +86,7 @@
   }
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
 <svelte:head>
   <title>Search</title>
@@ -108,7 +110,7 @@
       class="grow"
       placeholder="Search"
       bind:value={searchQuery}
-      on:focus={() => (focusItem = 0)}
+      onfocus={() => (focusItem = 0)}
       aria-label="Search input"
     />
   </label>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a9e8d25d..c6e4c96d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,11 @@
   import { navigating } from "$app/stores"
   import { expoOut } from "svelte/easing"
   import { slide } from "svelte/transition"
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 {#if $navigating}
@@ -18,4 +23,4 @@
     in:slide={{ delay: 100, duration: 12000, axis: "x", easing: expoOut }}
   ></div>
 {/if}
-<slot />
+{@render children?.()}