Svelte 5 migration (#146)

* initial svelte 5 migration * fix some issues * remove dependency on deprecated AppShell * linting * fix type * update node version * fix chips * fix deprecation warning * fix pull to refresh * attempt to form a valid image url * fix dockerfile warnings * fix layout and pull to refresh issues * add padding to drawer * fix item hash when in non secure context * rearrange dockerfile so it caches more often * fix layout again * fix settings not being reactive * update more components to svelte 5 * fix setup wizard * update svelte and node types * fix types on stepper components * fix reactivity on create account form * copy component from skeleton to fix typing
cmintey · Nov 8, 2024 · 310154c · 310154c
1 parent d3f1451
commit 310154c
Show file tree

Hide file tree

Showing 76 changed files with 1,143 additions and 711 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,21 +1,22 @@
-FROM node:lts-slim as build
+FROM node:lts-slim AS build
 
 WORKDIR /usr/src/app
 
-COPY ./ .
 RUN apt-get update \
     && apt-get install -y --no-install-recommends build-essential python3 openssl git \
     && rm -rf /var/lib/apt/lists/*
+
+COPY ./ .
 RUN npm i -g pnpm@latest-9
 RUN pnpm i --frozen-lockfile
 RUN pnpm prisma generate
 RUN pnpm run build
 RUN pnpm prune --prod
 
-FROM node:lts-slim as app
+FROM node:lts-slim AS app
 
-ENV NODE_ENV production
-ENV BODY_SIZE_LIMIT 5000000
+ENV NODE_ENV=production
+ENV BODY_SIZE_LIMIT=5000000
 
 WORKDIR /usr/src/app
 
@@ -42,7 +43,7 @@ RUN chmod +x entrypoint.sh
 VOLUME /usr/src/app/uploads
 VOLUME /usr/src/app/data
 
-ENV DEFAULT_CURRENCY USD
-ENV TOKEN_TIME 72
+ENV DEFAULT_CURRENCY=USD
+ENV TOKEN_TIME=72
 
 ENTRYPOINT [ "sh", "entrypoint.sh" ]
diff --git a/package.json b/package.json
@@ -22,11 +22,11 @@
         "@skeletonlabs/tw-plugin": "^0.4.0",
         "@sveltejs/adapter-node": "^5.2.9",
         "@sveltejs/kit": "^2.8.0",
-        "@sveltejs/vite-plugin-svelte": "^3.1.2",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "@tailwindcss/forms": "^0.5.9",
         "@types/eslint": "^9.6.1",
         "@types/metascraper": "^5.14.3",
-        "@types/node": "^20.17.6",
+        "@types/node": "^22.9.0",
         "@types/nodemailer": "^6.4.16",
         "@types/pulltorefreshjs": "^0.1.7",
         "@vite-pwa/sveltekit": "^0.6.6",
@@ -40,7 +40,7 @@
         "prettier-plugin-svelte": "^3.2.7",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "pulltorefreshjs": "^0.1.22",
-        "svelte": "^4.2.19",
+        "svelte": "^5.1.12",
         "svelte-check": "^4.0.5",
         "svelte-dnd-action": "^0.9.52",
         "svelte-preprocess": "^6.0.3",
@@ -78,5 +78,10 @@
     },
     "engines": {
         "node": "^22"
+    },
+    "pnpm": {
+        "overrides": {
+            "tough-cookie": "5.0.0"
+        }
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -22,6 +22,6 @@
         %sveltekit.head%
     </head>
     <body data-theme="theme">
-        <div class="h-full overflow-hidden">%sveltekit.body%</div>
+        <div>%sveltekit.body%</div>
     </body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -105,7 +105,7 @@
 
 html,
 body {
-    @apply h-full overflow-hidden;
+    @apply h-full;
 }
 
 a:not(.unstyled):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(

diff --git a/src/lib/components/Alert.svelte b/src/lib/components/Alert.svelte
@@ -1,21 +1,26 @@
 <script lang="ts">
     type AlertType = "info" | "warning" | "error";
-    export let title: string | null = null;
-    export let type: AlertType;
+    interface Props {
+        title?: string | null;
+        type: AlertType;
+        children?: import("svelte").Snippet;
+    }
+
+    let { title = null, type, children }: Props = $props();
 
     const icon = type === "info" ? "information-circle" : "warning";
     const variant = type === "info" ? "primary" : type === "warning" ? "warning" : "error";
 </script>
 
 <aside class="alert variant-ghost-{variant} mb-2">
     <div class="alert-message flex flex-row items-center space-x-4 space-y-0">
-        <span><iconify-icon class="text-4xl" icon="ion:{icon}" /></span>
+        <span><iconify-icon class="text-4xl" icon="ion:{icon}"></iconify-icon></span>
         <div>
             {#if title}
                 <span class="text-xl font-bold">{title}</span>
             {/if}
             <p>
-                <slot />
+                {@render children?.()}
             </p>
         </div>
     </div>

diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
     import { Avatar } from "@skeletonlabs/skeleton";
 
-    export let user: {
-        name: string;
-        picture?: string | null;
-    };
+    interface Props {
+        user: {
+            name: string;
+            picture?: string | null;
+        };
+        [key: string]: any;
+    }
+
+    let { ...props }: Props = $props();
 </script>
 
 <Avatar
     style="height:100%"
     background="bg-primary-400-500-token"
-    initials={user?.name.split(" ").reduce((x, y) => x + y.at(0), "")}
-    src={user.picture ? `/api/assets/${user.picture}` : ""}
-    {...$$props}
+    initials={props.user?.name.split(" ").reduce((x, y) => x + y.at(0), "")}
+    src={props.user.picture ? `/api/assets/${props.user.picture}` : ""}
+    {...props}
 />
diff --git a/src/lib/components/BackButton.svelte b/src/lib/components/BackButton.svelte
@@ -3,7 +3,11 @@
     import { page } from "$app/stores";
     import logo from "$lib/assets/logo.png";
 
-    export let label = "Back";
+    interface Props {
+        label?: string;
+    }
+
+    let { label = "Back" }: Props = $props();
     const disabledUrls = [
         "/login",
         "/signup",
@@ -15,8 +19,8 @@
         "/lists"
     ];
 
-    let documentTitle: string | undefined;
-    let disabled = true;
+    let documentTitle: string | undefined = $state();
+    let disabled = $state(true);
 
     afterNavigate(() => {
         documentTitle = document?.title;
@@ -30,8 +34,8 @@
         <span class="text-primary-900-50-token text-2xl font-bold md:text-3xl">Wishlist</span>
     </a>
 {:else}
-    <button class="btn w-fit p-0" type="button" on:click={() => history.back()}>
-        <iconify-icon icon="ion:arrow-back" />
+    <button class="btn w-fit p-0" onclick={() => history.back()} type="button">
+        <iconify-icon icon="ion:arrow-back"></iconify-icon>
         <span class="text-xl">{documentTitle || label}</span>
     </button>
 {/if}
diff --git a/src/lib/components/Backdrop.svelte b/src/lib/components/Backdrop.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
     import { ProgressRadial } from "@skeletonlabs/skeleton";
 
-    export let text: string;
+    interface Props {
+        text: string;
+    }
+
+    let { text }: Props = $props();
 </script>
 
 <div

diff --git a/src/lib/components/CreateAccountForm.svelte b/src/lib/components/CreateAccountForm.svelte
@@ -2,13 +2,17 @@
     import { page } from "$app/stores";
     import PasswordInput from "$lib/components/PasswordInput.svelte";
 
-    export let hideActions = false;
+    interface Props {
+        hideActions?: boolean;
+    }
 
-    let data = $page.data;
-    let formData = $page.form;
+    let { hideActions = false }: Props = $props();
 
-    let password = "";
-    let passwordConfirm = "";
+    let data = $derived($page.data);
+    let formData = $derived($page.form);
+
+    let password = $state("");
+    let passwordConfirm = $state("");
 </script>
 
 <div class="bg-surface-100-800-token ring-outline-token flex flex-col space-y-4 p-4 rounded-container-token">

diff --git a/src/lib/components/CurrencyInput.svelte b/src/lib/components/CurrencyInput.svelte
@@ -4,27 +4,43 @@
     import { onMount } from "svelte";
     import { getToastStore } from "@skeletonlabs/skeleton";
 
-    export let value: number | null = null;
-    export let locale: string = "en-US";
-    export let currency: string = "USD";
-    export let name: string;
-    export let id: string;
-    export let disabled: boolean = false;
+    interface Props {
+        value?: number | null;
+        locale?: string;
+        currency?: string;
+        name: string;
+        id: string;
+        disabled?: boolean;
+    }
+
+    let {
+        value = $bindable(null),
+        locale = "en-US",
+        currency = $bindable("USD"),
+        name,
+        id,
+        disabled = false
+    }: Props = $props();
 
     const toastStore = getToastStore();
-    let formatter = getFormatter(currency, locale);
-    let localeConfig = getLocaleConfig(formatter);
-    let maximumFractionDigits = formatter.resolvedOptions().maximumFractionDigits || 2;
+    let formatter = $derived(getFormatter(currency, locale));
+    let localeConfig = $derived(getLocaleConfig(formatter));
+    let maximumFractionDigits = $derived(formatter.resolvedOptions().maximumFractionDigits || 2);
     let inputtedValue = value !== null ? value.toString() : "";
-    let displayValue = inputtedValue;
-    let inputElement: HTMLInputElement | undefined;
-    let isMounted = false;
+    let displayValue = $state(inputtedValue);
+    let inputElement: HTMLInputElement | undefined = $state();
+    let isMounted = $state(false);
     let previousCurrency = currency;
 
     onMount(() => {
         isMounted = true;
     });
 
+    $effect(() => {
+        if (isMounted && document.activeElement !== inputElement && value !== null)
+            displayValue = formatter.format(value);
+    });
+
     // Checks if the key pressed is allowed
     const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
         const isDeletion = event.key === "Backspace" || event.key === "Delete";
@@ -96,14 +112,6 @@
         }
         previousCurrency = currency;
     };
-
-    $: formatter = getFormatter(currency, locale);
-    $: {
-        if (isMounted && document.activeElement !== inputElement && value !== null)
-            displayValue = formatter.format(value);
-    }
-    $: console.log(value);
-    $: console.log(displayValue);
 </script>
 
 <div class="input-group grid-cols-[auto_1fr_auto]">
@@ -120,19 +128,19 @@
             autocomplete="off"
             {disabled}
             inputmode={maximumFractionDigits > 0 ? "decimal" : "numeric"}
+            onblur={handleBlur}
+            onfocus={handleFocus}
+            onkeydown={handleKeyDown}
             placeholder={formatter.format(0)}
             type="text"
             bind:value={displayValue}
-            on:keydown={handleKeyDown}
-            on:blur={handleBlur}
-            on:focus={handleFocus}
         />
     </div>
     <input id="currency" name="currency" type="hidden" bind:value={currency} />
     <input
         class="border-surface-400-500-token w-[8ch] border-l uppercase focus:border-surface-400-500-token"
         maxlength="3"
+        onchange={validateCurrency}
         value={currency}
-        on:change={validateCurrency}
     />
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,7 +105,7 @@ @@
     html,
     body {
-        @apply h-full overflow-hidden;
+        @apply h-full;
     }
     a:not(.unstyled):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(
@@ Expand Down @@