chore(web): migration svelte 5 syntax

immich-app · Nov 2, 2024 · f308e01 · f308e01
1 parent ffe7274
commit f308e01
Show file tree

Hide file tree

Showing 32 changed files with 187 additions and 200 deletions.
diff --git a/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte b/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
@@ -51,7 +51,7 @@
   {onCancel}
   disabled={deleteButtonDisabled}
 >
-  {#snippet promptText()}
+  {#snippet prompt()}
     <div class="flex flex-col gap-4">
       {#if forceDelete}
         <p>

diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@@ -4,6 +4,8 @@
 <!-- @migration-task Error while migrating Svelte code: Unexpected token -->
 <!-- @migration-task Error while migrating Svelte code: Unexpected token -->
 <!-- @migration-task Error while migrating Svelte code: Unexpected token -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token -->
+<!-- @migration-task Error while migrating Svelte code: Unexpected token -->
 <script lang="ts">
   import {
     notificationController,

diff --git a/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte b/web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
-  import { createBubbler, preventDefault } from 'svelte/legacy';
-
-  const bubble = createBubbler();
   import { type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { fade } from 'svelte/transition';
   import type { SettingsResetEvent, SettingsSaveEvent } from '../admin-settings';
 
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
-  import SettingInputField, {
-    SettingInputFieldType,
-  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
   import { t } from 'svelte-i18n';
+  import { SettingInputFieldType } from '$lib/constants';
 
   interface Props {
     savedConfig: SystemConfigDto;
@@ -27,7 +23,7 @@
 
 <div>
   <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
+    <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -4,6 +4,8 @@
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
   import { goto } from '$app/navigation';
   import type { OnAction } from '$lib/components/asset-viewer/actions/action';

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -448,6 +448,8 @@
   <!-- @migration-task: migrate this slot by hand, `motion-photo` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `motion-photo` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `motion-photo` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `motion-photo` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `motion-photo` is an invalid identifier -->
   <MotionPhotoAction
           slot="motion-photo"
           isPlaying={shouldPlayMotionPhoto}

diff --git a/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte b/web/src/lib/components/asset-viewer/editor/crop-tool/crop-area.svelte
@@ -4,6 +4,8 @@
 <!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <script lang="ts">
   import { onMount, afterUpdate, onDestroy, tick } from 'svelte';
   import { t } from 'svelte-i18n';

diff --git a/web/src/lib/components/elements/buttons/link-button.svelte b/web/src/lib/components/elements/buttons/link-button.svelte
@@ -14,11 +14,14 @@
   interface Props {
     color?: Color;
     children?: import('svelte').Snippet;
+    onclick?: () => void;
+    title?: string;
+    disabled?: boolean;
   }
 
   let { color = 'transparent-gray', children, ...rest }: Props = $props();
 </script>
 
-<Button size="link" {color} shadow={false} rounded="lg" onclick {...rest}>
+<Button size="link" {color} shadow={false} rounded="lg" {rest}>
   {@render children?.()}
 </Button>
diff --git a/web/src/lib/components/elements/date-input.svelte b/web/src/lib/components/elements/date-input.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
-  import type { HTMLInputAttributes } from 'svelte/elements';
-
-  
-
   interface Props {
     type: 'date' | 'datetime-local';
-    value?: $$Props['value'];
-    max?: $$Props['max'];
-    [key: string]: any
+    value?: string;
+    max?: string;
+    class: string;
+    id: string;
+    name: string;
   }
 
   let { type, value = $bindable(undefined), max = undefined, ...rest }: Props = $props();
@@ -18,8 +14,8 @@
 
   // Updating `value` directly causes the date input to reset itself or
   // interfere with user changes.
-  let updatedValue;
-  run(() => {
+  let updatedValue = $state();
+  $effect(() => {
     updatedValue = value;
   });
 </script>

diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -117,6 +117,8 @@
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <svelte:fragment slot="sticky-bottom">
     <Button fullwidth color="gray" on:click={onReject}>{$t('no')}</Button>
     <Button fullwidth on:click={() => onConfirm([personMerge1, personMerge2])}>{$t('yes')}</Button>

diff --git a/web/src/lib/components/faces-page/set-birth-date-modal.svelte b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiCake } from '@mdi/js';
@@ -16,6 +14,11 @@
   let { birthDate = $bindable(), onClose, onUpdate }: Props = $props();
 
   const todayFormatted = new Date().toISOString().split('T')[0];
+
+  const onSubmit = (event: Event) => {
+    event.preventDefault();
+    onUpdate(birthDate);
+  };
 </script>
 
 <FullScreenModal title={$t('set_date_of_birth')} icon={mdiCake} {onClose}>
@@ -25,7 +28,7 @@
     </p>
   </div>
 
-  <form onsubmit={preventDefault(() => onUpdate(birthDate))} autocomplete="off" id="set-birth-date-form">
+  <form onsubmit={(e) => onSubmit(e)} autocomplete="off" id="set-birth-date-form">
     <div class="my-4 flex flex-col gap-2">
       <DateInput
         class="immich-form-input"
@@ -37,13 +40,8 @@
       />
     </div>
   </form>
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <svelte:fragment slot="sticky-bottom">
+
+  <svelte:fragment slot="stickyBottom">
     <Button color="gray" fullwidth on:click={onClose}>{$t('cancel')}</Button>
     <Button type="submit" fullwidth form="set-birth-date-form">{$t('set')}</Button>
   </svelte:fragment>

diff --git a/web/src/lib/components/forms/api-key-form.svelte b/web/src/lib/components/forms/api-key-form.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   import { mdiKeyVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
-
   interface Props {
     apiKey: { name: string };
     title: string;
-    cancelText?: any;
-    submitText?: any;
+    cancelText?: string;
+    submitText?: string;
     onSubmit: (apiKey: { name: string }) => void;
     onCancel: () => void;
   }
@@ -23,7 +20,7 @@
     cancelText = $t('cancel'),
     submitText = $t('save'),
     onSubmit,
-    onCancel
+    onCancel,
   }: Props = $props();
 
   const handleSubmit = () => {
@@ -36,22 +33,22 @@
       });
     }
   };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    handleSubmit();
+  };
 </script>
 
 <FullScreenModal {title} icon={mdiKeyVariant} onClose={() => onCancel()}>
-  <form onsubmit={preventDefault(handleSubmit)} autocomplete="off" id="api-key-form">
+  <form {onsubmit} autocomplete="off" id="api-key-form">
     <div class="mb-4 flex flex-col gap-2">
       <label class="immich-form-label" for="name">{$t('name')}</label>
       <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
     </div>
   </form>
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <svelte:fragment slot="sticky-bottom">
+
+  <svelte:fragment slot="stickyBottom">
     <Button color="gray" fullwidth on:click={() => onCancel()}>{cancelText}</Button>
     <Button type="submit" fullwidth form="api-key-form">{submitText}</Button>
   </svelte:fragment>

diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/web/src/lib/components/forms/api-key-secret.svelte
@@ -31,6 +31,8 @@
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <svelte:fragment slot="sticky-bottom">
     <Button on:click={() => copyToClipboard(secret)} fullwidth>{$t('copy_to_clipboard')}</Button>
     <Button on:click={onDone} fullwidth>{$t('done')}</Button>

diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
@@ -151,6 +151,8 @@
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <svelte:fragment slot="sticky-bottom">
     <Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
     <Button type="submit" disabled={isCreatingUser} fullwidth form="create-new-user-form">{$t('create')}</Button>

diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/web/src/lib/components/forms/edit-album-form.svelte
@@ -74,6 +74,8 @@
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
+  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
   <svelte:fragment slot="sticky-bottom">
     <Button color="gray" fullwidth on:click={() => onCancel?.()}>{$t('cancel')}</Button>
     <Button type="submit" fullwidth disabled={isSubmitting} form="edit-album-form">{$t('ok')}</Button>

diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
-
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { AppRoute } from '$lib/constants';
   import { serverInfo } from '$lib/stores/server-info.store';
@@ -22,12 +20,12 @@
   }
 
   let {
-    user = $bindable(),
+    user,
     canResetPassword = true,
     newPassword = $bindable(),
     onClose,
     onResetPasswordSuccess,
-    onEditSuccess
+    onEditSuccess,
   }: Props = $props();
 
   let error: string;
@@ -36,10 +34,11 @@
 
   const previousQutoa = user.quotaSizeInBytes;
 
-  let quotaSizeWarning =
-    $derived(previousQutoa !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
-    !!quotaSize &&
-    convertToBytes(Number(quotaSize), ByteUnit.GiB) > $serverInfo.diskSizeRaw);
+  let quotaSizeWarning = $derived(
+    previousQutoa !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
+      !!quotaSize &&
+      convertToBytes(Number(quotaSize), ByteUnit.GiB) > $serverInfo.diskSizeRaw,
+  );
 
   const editUser = async () => {
     try {
@@ -102,10 +101,15 @@
 
     return generatedPassword;
   }
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+    await editUser();
+  };
 </script>
 
 <FullScreenModal title={$t('edit_user')} icon={mdiAccountEditOutline} {onClose}>
-  <form onsubmit={preventDefault(editUser)} autocomplete="off" id="edit-user-form">
+  <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
     <div class="my-4 flex flex-col gap-2">
       <label class="immich-form-label" for="email">{$t('email')}</label>
       <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
@@ -153,16 +157,11 @@
       <p class="ml-4 text-sm text-immich-primary">{success}</p>
     {/if}
   </form>
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <!-- @migration-task: migrate this slot by hand, `sticky-bottom` is an invalid identifier -->
-  <svelte:fragment slot="sticky-bottom">
+
+  {#snippet stickyBottom()}
     {#if canResetPassword}
       <Button color="light-red" fullwidth on:click={resetPassword}>{$t('reset_password')}</Button>
     {/if}
     <Button type="submit" fullwidth form="edit-user-form">{$t('confirm')}</Button>
-  </svelte:fragment>
+  {/snippet}
 </FullScreenModal>