chore: migrate away from event dispatcher (#12820)

web/src/lib/components/photos-page/actions/add-to-album.svelte

@@ -40,8 +40,8 @@
 {#if showAlbumPicker}
   <AlbumSelectionModal
     {shared}
-    on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
-    on:album={({ detail }) => handleAddToAlbum(detail)}
+    onNewAlbum={handleAddToNewAlbum}
+    onAlbumClick={handleAddToAlbum}
     onClose={handleHideAlbumPicker}
   />
 {/if}

web/src/lib/components/photos-page/actions/change-date-action.svelte

@@ -31,9 +31,5 @@
   <MenuOption text={$t('change_date')} icon={mdiCalendarEditOutline} onClick={() => (isShowChangeDate = true)} />
 {/if}
 {#if isShowChangeDate}
-  <ChangeDate
-    initialDate={DateTime.now()}
-    on:confirm={({ detail: date }) => handleConfirm(date)}
-    on:cancel={() => (isShowChangeDate = false)}
-  />
+  <ChangeDate initialDate={DateTime.now()} onConfirm={handleConfirm} onCancel={() => (isShowChangeDate = false)} />
 {/if}

web/src/lib/components/photos-page/actions/change-location-action.svelte

@@ -35,8 +35,5 @@
   />
 {/if}
 {#if isShowChangeLocation}
-  <ChangeLocation
-    on:confirm={({ detail: point }) => handleConfirm(point)}
-    on:cancel={() => (isShowChangeLocation = false)}
-  />
+  <ChangeLocation onConfirm={handleConfirm} onCancel={() => (isShowChangeLocation = false)} />
 {/if}

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -49,7 +49,7 @@
 {#if isShowConfirmation}
   <DeleteAssetDialog
     size={getOwnedAssets().size}
-    on:confirm={handleDelete}
-    on:cancel={() => (isShowConfirmation = false)}
+    onConfirm={handleDelete}
+    onCancel={() => (isShowConfirmation = false)}
   />
 {/if}

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -8,7 +8,7 @@
   import { findTotalOffset, type DateGroup, type ScrollTargetListener } from '$lib/utils/timeline-util';
   import type { AssetResponseDto } from '@immich/sdk';
   import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { onDestroy } from 'svelte';
   import { fly } from 'svelte/transition';
   import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
   import { TUNABLES } from '$lib/utils/tunables';
@@ -29,6 +29,9 @@
 
   export let onScrollTarget: ScrollTargetListener | undefined = undefined;
   export let onAssetInGrid: ((asset: AssetResponseDto) => void) | undefined = undefined;
+  export let onSelect: ({ title, assets }: { title: string; assets: AssetResponseDto[] }) => void;
+  export let onSelectAssets: (asset: AssetResponseDto) => void;
+  export let onSelectAssetCandidates: (asset: AssetResponseDto | null) => void;
 
   const componentId = generateId();
   $: bucketDate = bucket.bucketDate;
@@ -41,11 +44,6 @@
   const TITLE_HEIGHT = 51;
 
   const { selectedGroup, selectedAssets, assetSelectionCandidates, isMultiSelectState } = assetInteractionStore;
-  const dispatch = createEventDispatcher<{
-    select: { title: string; assets: AssetResponseDto[] };
-    selectAssets: AssetResponseDto;
-    selectAssetCandidates: AssetResponseDto | null;
-  }>();
 
   let isMouseOverGroup = false;
   let hoveredDateGroup = '';
@@ -65,10 +63,10 @@
     }
   };
 
-  const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => dispatch('select', { title, assets });
+  const handleSelectGroup = (title: string, assets: AssetResponseDto[]) => onSelect({ title, assets });
 
   const assetSelectHandler = (asset: AssetResponseDto, assetsInDateGroup: AssetResponseDto[], groupTitle: string) => {
-    dispatch('selectAssets', asset);
+    onSelectAssets(asset);
 
     // Check if all assets are selected in a group to toggle the group selection's icon
     let selectedAssetsInGroupCount = assetsInDateGroup.filter((asset) => $selectedAssets.has(asset)).length;
@@ -86,7 +84,7 @@
     hoveredDateGroup = groupTitle;
 
     if ($isMultiSelectState) {
-      dispatch('selectAssetCandidates', asset);
+      onSelectAssetCandidates(asset);
     }
   };
 

web/src/lib/components/photos-page/asset-grid.svelte

@@ -28,7 +28,7 @@
   import { TUNABLES } from '$lib/utils/tunables';
   import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
   import { throttle } from 'lodash-es';
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
   import Portal from '../shared-components/portal/portal.svelte';
   import Scrubber from '../shared-components/scrubber/scrubber.svelte';
   import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
@@ -64,6 +64,8 @@
   export let isShared = false;
   export let album: AlbumResponseDto | null = null;
   export let isShowDeleteConfirmation = false;
+  export let onSelect: (asset: AssetResponseDto) => void = () => {};
+  export let onEscape: () => void = () => {};
 
   let { isViewing: showAssetViewer, asset: viewingAsset, preloadAssets, gridScrollTarget } = assetViewingStore;
   const { assetSelectionCandidates, assetSelectionStart, selectedGroup, selectedAssets, isMultiSelectState } =
@@ -127,8 +129,6 @@
     },
   } = TUNABLES;
 
-  const dispatch = createEventDispatcher<{ select: AssetResponseDto; escape: void }>();
-
   const isViewportOrigin = () => {
     return viewport.height === 0 && viewport.width === 0;
   };
@@ -447,7 +447,7 @@
     const ids = await stackAssets(Array.from($selectedAssets));
     if (ids) {
       $assetStore.removeAssets(ids);
-      dispatch('escape');
+      onEscape();
     }
   };
 
@@ -471,7 +471,7 @@
     }
 
     const shortcuts: ShortcutOptions[] = [
-      { shortcut: { key: 'Escape' }, onShortcut: () => dispatch('escape') },
+      { shortcut: { key: 'Escape' }, onShortcut: onEscape },
       { shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
       { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
       { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets($assetStore, assetInteractionStore) },
@@ -539,7 +539,7 @@
     return !!nextAsset;
   };
 
-  const handleClose = async ({ detail: { asset } }: { detail: { asset: AssetResponseDto } }) => {
+  const handleClose = async ({ asset }: { asset: AssetResponseDto }) => {
     assetViewingStore.showAssetViewer(false);
     showSkeleton = true;
     $gridScrollTarget = { at: asset.id };
@@ -554,7 +554,7 @@
       case AssetAction.DELETE: {
         // find the next asset to show or close the viewer
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose({ detail: { asset: action.asset } }));
+        (await handleNext()) || (await handlePrevious()) || (await handleClose({ asset: action.asset }));
 
         // delete after find the next one
         assetStore.removeAssets([action.asset.id]);
@@ -649,7 +649,7 @@
       return;
     }
 
-    dispatch('select', asset);
+    onSelect(asset);
 
     if (singleSelect) {
       element.scrollTop = 0;
@@ -754,8 +754,8 @@
 {#if isShowDeleteConfirmation}
   <DeleteAssetDialog
     size={idsSelectedAssets.length}
-    on:cancel={() => (isShowDeleteConfirmation = false)}
-    on:confirm={() => handlePromiseError(trashOrDelete(true))}
+    onCancel={() => (isShowDeleteConfirmation = false)}
+    onConfirm={() => handlePromiseError(trashOrDelete(true))}
   />
 {/if}
 
@@ -847,9 +847,9 @@
             {onAssetInGrid}
             {bucket}
             viewport={safeViewport}
-            on:select={({ detail: group }) => handleGroupSelect(group.title, group.assets)}
-            on:selectAssetCandidates={({ detail: asset }) => handleSelectAssetCandidates(asset)}
-            on:selectAssets={({ detail: asset }) => handleSelectAssets(asset)}
+            onSelect={({ title, assets }) => handleGroupSelect(title, assets)}
+            onSelectAssetCandidates={handleSelectAssetCandidates}
+            onSelectAssets={handleSelectAssets}
           />
         {/if}
       </div>
@@ -869,9 +869,9 @@
         {isShared}
         {album}
         onAction={handleAction}
-        on:previous={handlePrevious}
-        on:next={handleNext}
-        on:close={handleClose}
+        onPrevious={handlePrevious}
+        onNext={handleNext}
+        onClose={handleClose}
       />
     {/await}
   {/if}

web/src/lib/components/photos-page/asset-select-control-bar.svelte

@@ -30,7 +30,7 @@
   });
 </script>
 
-<ControlAppBar on:close={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
+<ControlAppBar onClose={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
   <div class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
     <p class="block sm:hidden">{assets.size}</p>
     <p class="hidden sm:block">{$t('selected_count', { values: { count: assets.size } })}</p>

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import Checkbox from '$lib/components/elements/checkbox.svelte';
@@ -7,19 +6,16 @@
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
   export let size: number;
+  export let onConfirm: () => void;
+  export let onCancel: () => void;
 
   let checked = false;
 
-  const dispatch = createEventDispatcher<{
-    confirm: void;
-    cancel: void;
-  }>();
-
   const handleConfirm = () => {
     if (checked) {
       $showDeleteModal = false;
     }
-    dispatch('confirm');
+    onConfirm();
   };
 </script>
 
@@ -27,7 +23,7 @@
   title={$t('permanently_delete_assets_count', { values: { count: size } })}
   confirmText={$t('delete')}
   onConfirm={handleConfirm}
-  onCancel={() => dispatch('cancel')}
+  {onCancel}
 >
   <svelte:fragment slot="prompt">
     <p>