Run: npx sv migrate svelte-5

No other manual changes, just the script.

I'll merge #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,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"
   },

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"
 

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}! 

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">

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(

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>
 

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>

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>

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'}">

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>
 

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>

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

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?.()}

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 ?? ""

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(() => {

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 -->

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>