migration to Svelte 5

CriticalMoments · Oct 27, 2024 · 67a95da · 67a95da
1 parent 3571484
commit 67a95da
Show file tree

Hide file tree

Showing 26 changed files with 405 additions and 462 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -12,7 +12,11 @@
   export const ssr = true
 
   // Define all your props here
-  export let companyName: string = ""
+  interface Props {
+    companyName?: string;
+  }
+
+  let { companyName = "" }: Props = $props();
 </script>
 
 <html lang="en">

diff --git a/src/lib/emails/welcome_email_text.svelte b/src/lib/emails/welcome_email_text.svelte
@@ -8,7 +8,11 @@
   export const ssr = true
 
   // Define all your props here
-  export let companyName: string = ""
+  interface Props {
+    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
@@ -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
@@ -11,7 +11,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("billing")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -6,7 +6,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -6,7 +6,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -1,6 +1,10 @@
 <script lang="ts">
   import SettingsModule from "../settings_module.svelte"
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -7,7 +7,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $props();
   let { user, supabase } = data
 
   // True if definitely has a password, but can be false if they
@@ -21,8 +25,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 +99,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
@@ -6,7 +6,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -6,7 +6,11 @@
   let adminSection: Writable<string> = getContext("adminSection")
   adminSection.set("settings")
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -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"
@@ -22,17 +22,33 @@
   }
 
   // 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 {
+    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
@@ -1,11 +1,20 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { invalidate } from "$app/navigation"
   import { onMount } from "svelte"
 
-  export let data
+  interface Props {
+    data: any;
+    children?: import('svelte').Snippet;
+  }
+
+  let { data, children }: Props = $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 +27,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
@@ -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
@@ -2,10 +2,14 @@
   import { goto } from "$app/navigation"
   import { onMount } from "svelte"
 
-  export let data
+  interface Props {
+    data: any;
+  }
+
+  let { data }: Props = $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
@@ -1,6 +1,8 @@
 <script>
   import { WebsiteName } from "./../../config"
   import "../../app.css"
+  /** @type {{children?: import('svelte').Snippet}} */
+  let { children } = $props();
 </script>
 
 <div class="navbar bg-base-100 container mx-auto">
@@ -34,8 +36,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 +53,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 +74,7 @@
 </div>
 
 <div class="">
-  <slot />
+  {@render children?.()}
 </div>
 
 <!-- Spacer grows so the footer can be at bottom on short pages -->