chore: svelte 5 (#58)

immich-app · Dec 19, 2024 · b47f9c9 · b47f9c9
1 parent 29beb7a
commit b47f9c9
Show file tree

Hide file tree

Showing 7 changed files with 818 additions and 974 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,33 +15,33 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.2",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.6",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "^9.0.0",
     "@types/luxon": "^3.4.2",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.36.0",
+    "eslint-plugin-svelte": "^2.45.1",
     "globals": "^15.0.0",
     "postcss": "^8.4.39",
     "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.1.5",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.4",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0-alpha.20",
-    "vite": "^5.0.3",
-    "vitest": "^2.0.0"
+    "typescript": "^5.5.0",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^5.4.4",
+    "vitest": "^2.0.5"
   },
   "type": "module",
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@unovis/svelte": "^1.4.3-beta.0",
-    "@unovis/ts": "^1.4.3-beta.0",
+    "@unovis/svelte": "1.5.0-beta.3",
+    "@unovis/ts": "1.5.0-beta.3",
     "luxon": "^3.5.0"
   }
 }
diff --git a/frontend/src/lib/components/button.svelte b/frontend/src/lib/components/button.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export type Type = 'button' | 'submit' | 'reset';
   export type Color =
     | 'primary'
@@ -18,19 +18,39 @@
 </script>
 
 <script lang="ts">
-  export let type: Type = 'button';
-  export let color: Color = 'primary';
-  export let size: Size = 'base';
-  export let rounded: Rounded = '3xl';
-  export let shadow: Shadow = 'md';
-  export let disabled = false;
-  export let fullwidth = false;
-  export let border = false;
-  export let title: string | undefined = '';
-  export let form: string | undefined = undefined;
+  import { createBubbler } from 'svelte/legacy';
 
-  let className = '';
-  export { className as class };
+  const bubble = createBubbler();
+
+  interface Props {
+    type?: Type;
+    color?: Color;
+    size?: Size;
+    rounded?: Rounded;
+    shadow?: Shadow;
+    disabled?: boolean;
+    fullwidth?: boolean;
+    border?: boolean;
+    title?: string | undefined;
+    form?: string | undefined;
+    class?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    type = 'button',
+    color = 'primary',
+    size = 'base',
+    rounded = '3xl',
+    shadow = 'md',
+    disabled = false,
+    fullwidth = false,
+    border = false,
+    title = '',
+    form = undefined,
+    class: className = '',
+    children,
+  }: Props = $props();
 
   const colorClasses: Record<Color, string> = {
     primary:
@@ -67,9 +87,9 @@
   {disabled}
   {title}
   {form}
-  on:click
-  on:focus
-  on:blur
+  onclick={bubble('click')}
+  onfocus={bubble('focus')}
+  onblur={bubble('blur')}
   class="{className} inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
     color
   ]} {sizeClasses[size]}"
@@ -80,5 +100,5 @@
   class:w-full={fullwidth}
   class:border
 >
-  <slot />
+  {@render children?.()}
 </button>
diff --git a/frontend/src/lib/components/card.svelte b/frontend/src/lib/components/card.svelte
@@ -4,7 +4,12 @@
   import { mdiAlertCircleOutline, mdiCheckCircleOutline } from '@mdi/js';
   import { fade } from 'svelte/transition';
 
-  export let status: 'loading' | 'success' | 'error' | undefined = undefined;
+  interface Props {
+    status?: 'loading' | 'success' | 'error' | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let { status = undefined, children }: Props = $props();
 </script>
 
 <div
@@ -24,5 +29,5 @@
     {/if}
   </div>
 
-  <slot />
+  {@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/icon.svelte b/frontend/src/lib/components/icon.svelte
@@ -1,19 +1,35 @@
 <script lang="ts">
   import type { AriaRole } from 'svelte/elements';
 
-  export let size: string | number = '1em';
-  export let color = 'currentColor';
-  export let path: string;
-  export let title: string | null = null;
-  export let desc = '';
-  export let flipped = false;
-  let className = '';
-  export { className as class };
-  export let viewBox = '0 0 24 24';
-  export let role: AriaRole = 'img';
-  export let ariaHidden: boolean | undefined = undefined;
-  export let ariaLabel: string | undefined = undefined;
-  export let ariaLabelledby: string | undefined = undefined;
+  interface Props {
+    size?: string | number;
+    color?: string;
+    path: string;
+    title?: string | null;
+    desc?: string;
+    flipped?: boolean;
+    class?: string;
+    viewBox?: string;
+    role?: AriaRole;
+    ariaHidden?: boolean | undefined;
+    ariaLabel?: string | undefined;
+    ariaLabelledby?: string | undefined;
+  }
+
+  let {
+    size = '1em',
+    color = 'currentColor',
+    path,
+    title = null,
+    desc = '',
+    flipped = false,
+    class: className = '',
+    viewBox = '0 0 24 24',
+    role = 'img',
+    ariaHidden = undefined,
+    ariaLabel = undefined,
+    ariaLabelledby = undefined,
+  }: Props = $props();
 </script>
 
 <svg

diff --git a/frontend/src/lib/components/loading-spinner.svelte b/frontend/src/lib/components/loading-spinner.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let size: string = '24';
+  interface Props {
+    size?: string;
+  }
+
+  let { size = '24' }: Props = $props();
 </script>
 
 <div>

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
   import '$lib/app.css';
   import { backendUrl } from '$lib/environment';
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
   console.log(`Backend URL: ${backendUrl}`);
 </script>
 
 <section class="h-full flex flex-col align-center gap-2 max-w-screen-lg mx-auto bg-white pb-36">
-  <slot />
+  {@render children?.()}
 </section>