chore: migrate away from event dispatcher (#12820)

web/src/lib/components/forms/api-key-secret.svelte

@@ -1,20 +1,15 @@
 <script lang="ts">
   import { copyToClipboard } from '$lib/utils';
   import { mdiKeyVariant } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { t } from 'svelte-i18n';
 
   export let secret = '';
-
-  const dispatch = createEventDispatcher<{
-    done: void;
-  }>();
-  const handleDone = () => dispatch('done');
+  export let onDone: () => void;
 </script>
 
-<FullScreenModal title={$t('api_key')} icon={mdiKeyVariant} onClose={() => handleDone()}>
+<FullScreenModal title={$t('api_key')} icon={mdiKeyVariant} onClose={onDone}>
   <div class="text-immich-primary dark:text-immich-dark-primary">
     <p class="text-sm dark:text-immich-dark-fg">
       {$t('api_key_description')}
@@ -28,6 +23,6 @@
 
   <svelte:fragment slot="sticky-bottom">
     <Button on:click={() => copyToClipboard(secret)} fullwidth>{$t('copy_to_clipboard')}</Button>
-    <Button on:click={() => handleDone()} fullwidth>{$t('done')}</Button>
+    <Button on:click={onDone} fullwidth>{$t('done')}</Button>
   </svelte:fragment>
 </FullScreenModal>

web/src/lib/components/forms/change-password-form.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import PasswordField from '../shared-components/password-field.svelte';
   import { updateMyUser } from '@immich/sdk';
   import { t } from 'svelte-i18n';
 
+  export let onSuccess: () => void;
+
   let errorMessage: string;
   let success: string;
 
@@ -23,17 +24,13 @@
     }
   }
 
-  const dispatch = createEventDispatcher<{
-    success: void;
-  }>();
-
   async function changePassword() {
     if (valid) {
       errorMessage = '';
 
       await updateMyUser({ userUpdateMeDto: { password: String(password) } });
 
-      dispatch('success');
+      onSuccess();
     }
   }
 </script>

web/src/lib/components/forms/create-user-form.svelte

@@ -5,13 +5,14 @@
   import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import { createUserAdmin } from '@immich/sdk';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import Button from '../elements/buttons/button.svelte';
   import Slider from '../elements/slider.svelte';
   import PasswordField from '../shared-components/password-field.svelte';
 
   export let onClose: () => void;
+  export let onSubmit: () => void;
+  export let onCancel: () => void;
 
   let error: string;
   let success: string;
@@ -39,10 +40,6 @@
       canCreateUser = true;
     }
   }
-  const dispatch = createEventDispatcher<{
-    submit: void;
-    cancel: void;
-  }>();
 
   async function registerUser() {
     if (canCreateUser && !isCreatingUser) {
@@ -63,7 +60,7 @@
 
         success = $t('new_user_created');
 
-        dispatch('submit');
+        onSubmit();
 
         return;
       } catch (error) {
@@ -132,7 +129,7 @@
     {/if}
   </form>
   <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={() => dispatch('cancel')}>{$t('cancel')}</Button>
+    <Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
     <Button type="submit" disabled={isCreatingUser} fullwidth form="create-new-user-form">{$t('create')}</Button>
   </svelte:fragment>
 </FullScreenModal>

web/src/lib/components/forms/edit-user-form.svelte

@@ -5,7 +5,6 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
   import { mdiAccountEditOutline } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
@@ -15,6 +14,8 @@
   export let canResetPassword = true;
   export let newPassword: string;
   export let onClose: () => void;
+  export let onResetPasswordSuccess: () => void;
+  export let onEditSuccess: () => void;
 
   let error: string;
   let success: string;
@@ -27,12 +28,6 @@
     !!quotaSize &&
     convertToBytes(Number(quotaSize), ByteUnit.GiB) > $serverInfo.diskSizeRaw;
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-    resetPasswordSuccess: void;
-    editSuccess: void;
-  }>();
-
   const editUser = async () => {
     try {
       const { id, email, name, storageLabel } = user;
@@ -46,7 +41,7 @@
         },
       });
 
-      dispatch('editSuccess');
+      onEditSuccess();
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_user'));
     }
@@ -72,7 +67,7 @@
         },
       });
 
-      dispatch('resetPasswordSuccess');
+      onResetPasswordSuccess();
     } catch (error) {
       handleError(error, $t('errors.unable_to_reset_password'));
     }

web/src/lib/components/forms/library-exclusion-pattern-form.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiFolderRemove } from '@mdi/js';
@@ -10,6 +9,9 @@
   export let exclusionPatterns: string[] = [];
   export let isEditing = false;
   export let submitText = $t('submit');
+  export let onCancel: () => void;
+  export let onSubmit: (exclusionPattern: string) => void;
+  export let onDelete: () => void = () => {};
 
   onMount(() => {
     if (isEditing) {
@@ -19,18 +21,10 @@
 
   $: isDuplicate = exclusionPattern !== null && exclusionPatterns.includes(exclusionPattern);
   $: canSubmit = exclusionPattern && !exclusionPatterns.includes(exclusionPattern);
-
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: { excludePattern: string };
-    delete: void;
-  }>();
-  const handleCancel = () => dispatch('cancel');
-  const handleSubmit = () => dispatch('submit', { excludePattern: exclusionPattern });
 </script>
 
-<FullScreenModal title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} onClose={handleCancel}>
-  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="add-exclusion-pattern-form">
+<FullScreenModal title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} onClose={onCancel}>
+  <form on:submit|preventDefault={() => onSubmit(exclusionPattern)} autocomplete="off" id="add-exclusion-pattern-form">
     <p class="py-5 text-sm">
       {$t('admin.exclusion_pattern_description')}
       <br /><br />
@@ -53,9 +47,9 @@
     </div>
   </form>
   <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={() => handleCancel()}>{$t('cancel')}</Button>
+    <Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
     {#if isEditing}
-      <Button color="red" fullwidth on:click={() => dispatch('delete')}>{$t('delete')}</Button>
+      <Button color="red" fullwidth on:click={onDelete}>{$t('delete')}</Button>
     {/if}
     <Button type="submit" disabled={!canSubmit} fullwidth form="add-exclusion-pattern-form">{submitText}</Button>
   </svelte:fragment>

web/src/lib/components/forms/library-import-path-form.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiFolderSync } from '@mdi/js';
@@ -12,6 +11,9 @@
   export let cancelText = $t('cancel');
   export let submitText = $t('save');
   export let isEditing = false;
+  export let onCancel: () => void;
+  export let onSubmit: (importPath: string | null) => void;
+  export let onDelete: () => void = () => {};
 
   onMount(() => {
     if (isEditing) {
@@ -21,18 +23,10 @@
 
   $: isDuplicate = importPath !== null && importPaths.includes(importPath);
   $: canSubmit = importPath !== '' && importPath !== null && !importPaths.includes(importPath);
-
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: { importPath: string | null };
-    delete: void;
-  }>();
-  const handleCancel = () => dispatch('cancel');
-  const handleSubmit = () => dispatch('submit', { importPath });
 </script>
 
-<FullScreenModal {title} icon={mdiFolderSync} onClose={handleCancel}>
-  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="library-import-path-form">
+<FullScreenModal {title} icon={mdiFolderSync} onClose={onCancel}>
+  <form on:submit|preventDefault={() => onSubmit(importPath)} autocomplete="off" id="library-import-path-form">
     <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
 
     <div class="my-4 flex flex-col gap-2">
@@ -47,9 +41,9 @@
     </div>
   </form>
   <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
+    <Button color="gray" fullwidth on:click={onCancel}>{cancelText}</Button>
     {#if isEditing}
-      <Button color="red" fullwidth on:click={() => dispatch('delete')}>{$t('delete')}</Button>
+      <Button color="red" fullwidth on:click={onDelete}>{$t('delete')}</Button>
     {/if}
     <Button type="submit" disabled={!canSubmit} fullwidth form="library-import-path-form">{submitText}</Button>
   </svelte:fragment>

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import LibraryImportPathForm from './library-import-path-form.svelte';
@@ -12,6 +12,8 @@
   import { t } from 'svelte-i18n';
 
   export let library: LibraryResponseDto;
+  export let onCancel: () => void;
+  export let onSubmit: (library: LibraryResponseDto) => void;
 
   let addImportPath = false;
   let editImportPath: number | null = null;
@@ -65,19 +67,6 @@
     }
   };
 
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: Partial<LibraryResponseDto>;
-  }>();
-
-  const handleCancel = () => {
-    dispatch('cancel');
-  };
-
-  const handleSubmit = () => {
-    dispatch('submit', { ...library });
-  };
-
   const handleAddImportPath = async () => {
     if (!addImportPath || !importPathToAdd) {
       return;
@@ -153,8 +142,8 @@
     submitText={$t('add')}
     bind:importPath={importPathToAdd}
     {importPaths}
-    on:submit={handleAddImportPath}
-    on:cancel={() => {
+    onSubmit={handleAddImportPath}
+    onCancel={() => {
       addImportPath = false;
       importPathToAdd = null;
     }}
@@ -168,15 +157,13 @@
     isEditing={true}
     bind:importPath={editedImportPath}
     {importPaths}
-    on:submit={handleEditImportPath}
-    on:delete={handleDeleteImportPath}
-    on:cancel={() => {
-      editImportPath = null;
-    }}
+    onSubmit={handleEditImportPath}
+    onDelete={handleDeleteImportPath}
+    onCancel={() => (editImportPath = null)}
   />
 {/if}
 
-<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-4">
+<form on:submit|preventDefault={() => onSubmit({ ...library })} autocomplete="off" class="m-4 flex flex-col gap-4">
   <table class="text-left">
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
       {#each validatedPaths as validatedPath, listIndex}
@@ -251,7 +238,7 @@
       >
     </div>
     <div class="justify-end gap-2">
-      <Button size="sm" color="gray" on:click={() => handleCancel()}>{$t('cancel')}</Button>
+      <Button size="sm" color="gray" on:click={onCancel}>{$t('cancel')}</Button>
       <Button size="sm" type="submit">{$t('save')}</Button>
     </div>
   </div>

web/src/lib/components/forms/library-rename-form.svelte

@@ -1,31 +1,20 @@
 <script lang="ts">
   import type { LibraryResponseDto } from '@immich/sdk';
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import { t } from 'svelte-i18n';
 
   export let library: Partial<LibraryResponseDto>;
-
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: Partial<LibraryResponseDto>;
-  }>();
-  const handleCancel = () => {
-    dispatch('cancel');
-  };
-
-  const handleSubmit = () => {
-    dispatch('submit', { ...library });
-  };
+  export let onCancel: () => void;
+  export let onSubmit: (library: Partial<LibraryResponseDto>) => void;
 </script>
 
-<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-2">
+<form on:submit|preventDefault={() => onSubmit({ ...library })} autocomplete="off" class="m-4 flex flex-col gap-2">
   <div class="flex flex-col gap-2">
     <label class="immich-form-label" for="path">{$t('name')}</label>
     <input class="immich-form-input" id="name" name="name" type="text" bind:value={library.name} />
   </div>
   <div class="flex w-full justify-end gap-2 pt-2">
-    <Button size="sm" color="gray" on:click={() => handleCancel()}>{$t('cancel')}</Button>
+    <Button size="sm" color="gray" on:click={onCancel}>{$t('cancel')}</Button>
     <Button size="sm" type="submit">{$t('save')}</Button>
   </div>
 </form>

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type LibraryResponseDto } from '@immich/sdk';
   import { mdiPencilOutline } from '@mdi/js';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { handleError } from '../../utils/handle-error';
   import Button from '../elements/buttons/button.svelte';
   import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
@@ -9,6 +9,8 @@
   import { t } from 'svelte-i18n';
 
   export let library: Partial<LibraryResponseDto>;
+  export let onCancel: () => void;
+  export let onSubmit: (library: Partial<LibraryResponseDto>) => void;
 
   let addExclusionPattern = false;
   let editExclusionPattern: number | null = null;
@@ -26,18 +28,6 @@
     }
   });
 
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: Partial<LibraryResponseDto>;
-  }>();
-  const handleCancel = () => {
-    dispatch('cancel');
-  };
-
-  const handleSubmit = () => {
-    dispatch('submit', library);
-  };
-
   const handleAddExclusionPattern = () => {
     if (!addExclusionPattern) {
       return;
@@ -106,10 +96,8 @@
     submitText={$t('add')}
     bind:exclusionPattern={exclusionPatternToAdd}
     {exclusionPatterns}
-    on:submit={handleAddExclusionPattern}
-    on:cancel={() => {
-      addExclusionPattern = false;
-    }}
+    onSubmit={handleAddExclusionPattern}
+    onCancel={() => (addExclusionPattern = false)}
   />
 {/if}
 
@@ -119,15 +107,13 @@
     isEditing={true}
     bind:exclusionPattern={editedExclusionPattern}
     {exclusionPatterns}
-    on:submit={handleEditExclusionPattern}
-    on:delete={handleDeleteExclusionPattern}
-    on:cancel={() => {
-      editExclusionPattern = null;
-    }}
+    onSubmit={handleEditExclusionPattern}
+    onDelete={handleDeleteExclusionPattern}
+    onCancel={() => (editExclusionPattern = null)}
   />
 {/if}
 
-<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-4">
+<form on:submit|preventDefault={() => onSubmit(library)} autocomplete="off" class="m-4 flex flex-col gap-4">
   <table class="w-full text-left">
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
       {#each exclusionPatterns as exclusionPattern, listIndex}
@@ -178,7 +164,7 @@
   </table>
 
   <div class="flex w-full justify-end gap-4">
-    <Button size="sm" color="gray" on:click={() => handleCancel()}>{$t('cancel')}</Button>
+    <Button size="sm" color="gray" on:click={onCancel}>{$t('cancel')}</Button>
     <Button size="sm" type="submit">{$t('save')}</Button>
   </div>
 </form>

web/src/lib/components/forms/library-user-picker-form.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiFolderSync } from '@mdi/js';
@@ -9,6 +8,9 @@
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { t } from 'svelte-i18n';
 
+  export let onCancel: () => void;
+  export let onSubmit: (ownerId: string) => void;
+
   let ownerId: string = $user.id;
 
   let userOptions: { value: string; text: string }[] = [];
@@ -17,25 +19,16 @@
     const users = await searchUsersAdmin({});
     userOptions = users.map((user) => ({ value: user.id, text: user.name }));
   });
-
-  const dispatch = createEventDispatcher<{
-    cancel: void;
-    submit: { ownerId: string };
-    delete: void;
-  }>();
-
-  const handleCancel = () => dispatch('cancel');
-  const handleSubmit = () => dispatch('submit', { ownerId });
 </script>
 
-<FullScreenModal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={handleCancel}>
-  <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" id="select-library-owner-form">
+<FullScreenModal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel}>
+  <form on:submit|preventDefault={() => onSubmit(ownerId)} autocomplete="off" id="select-library-owner-form">
     <p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
 
     <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
   </form>
   <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={() => handleCancel()}>{$t('cancel')}</Button>
+    <Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
     <Button type="submit" fullwidth form="select-library-owner-form">{$t('create')}</Button>
   </svelte:fragment>
 </FullScreenModal>