Merge pull request #161 from evlim/svelte5

Svelte 5 Migration From @evlim

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_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,11 +21,14 @@
   // @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 | undefined = $state()
+  let sentEmail = $state(false)
   let sendForgotPassword = () => {
-    sendBtn.disabled = true
-    sendBtn.textContent = "Sending..."
+    if (sendBtn) {
+      sendBtn.disabled = true
+      sendBtn.textContent = "Sending..."
+    }
+
     let email = user?.email
     if (email) {
       supabase.auth
@@ -34,6 +37,10 @@
         })
         .then((d) => {
           sentEmail = d.error ? false : true
+          if (sendBtn) {
+            sendBtn.disabled = false
+            sendBtn.textContent = "Send Forgot Password"
+          }
         })
     }
   }
@@ -95,7 +102,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,34 @@
     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,26 @@
   import type { SubmitFunction } from "@sveltejs/kit"
   import "../../../../app.css"
 
-  export let data
-  export let form: FormAccountUpdateResult
+  interface User {
+    email: string
+  }
+
+  interface Profile {
+    full_name?: string
+    company_name?: string
+    website?: string
+  }
+
+  interface Props {
+    data: { user: User; profile: Profile }
+    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,13 @@
 <script>
   import { WebsiteName } from "./../../config"
   import "../../app.css"
+  /**
+   * @typedef {Object} Props
+   * @property {import('svelte').Snippet} [children]
+   */
+
+  /** @type {Props} */
+  let { children } = $props()
 </script>
 
 <div class="navbar bg-base-100 container mx-auto">
@@ -19,7 +26,7 @@
       <li class="md:mx-2"><a href="/pricing">Pricing</a></li>
       <li class="md:mx-2"><a href="/account">Account</a></li>
       <li class="md:mx-0">
-        <a href="/search">
+        <a href="/search" aria-label="Search">
           <svg
             fill="#000000"
             class="w-6 h-6"
@@ -34,8 +41,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 +58,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 +79,7 @@
 </div>
 
 <div class="">
-  <slot />
+  {@render children?.()}
 </div>
 
 <!-- Spacer grows so the footer can be at bottom on short pages -->