chore: svelte 5 🎉

web/package.json

@@ -8,7 +8,7 @@
     "build:stats": "BUILD_STATS=true vite build",
     "package": "svelte-kit package",
     "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore'",
     "check:typescript": "tsc --noEmit",
     "check:watch": "npm run check:svelte -- --watch",
     "check:code": "npm run format && npm run lint && npm run check:svelte && npm run check:typescript",
@@ -27,12 +27,12 @@
     "@eslint/js": "^9.8.0",
     "@faker-js/faker": "^9.0.0",
     "@socket.io/component-emitter": "^3.1.0",
-    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/adapter-static": "^3.0.5",
     "@sveltejs/enhanced-img": "^0.3.0",
-    "@sveltejs/kit": "^2.5.18",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/svelte": "^5.2.0",
+    "@testing-library/svelte": "^5.2.4",
     "@testing-library/user-event": "^14.5.2",
     "@types/dom-to-image": "^2.6.7",
     "@types/justified-layout": "^4.1.4",
@@ -55,7 +55,7 @@
     "prettier-plugin-sort-json": "^4.0.0",
     "prettier-plugin-svelte": "^3.2.6",
     "rollup-plugin-visualizer": "^5.12.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.1.5",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
@@ -79,9 +79,9 @@
     "justified-layout": "^4.1.0",
     "lodash-es": "^4.17.21",
     "luxon": "^3.4.4",
-    "socket.io-client": "^4.7.4",
+    "socket.io-client": "~4.7.5",
     "svelte-gestures": "^5.0.4",
-    "svelte-i18n": "^4.0.0",
+    "svelte-i18n": "^4.0.1",
     "svelte-local-storage-store": "^0.6.4",
     "svelte-maplibre": "^0.9.13",
     "thumbhash": "^0.1.1"

web/src/lib/__mocks__/animate.mock.ts

@@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { vi } from 'vitest';
+
+export const getAnimateMock = () =>
+  vi.fn().mockImplementation(() => {
+    let onfinish: (() => void) | null = null;
+    void tick().then(() => onfinish?.());
+
+    return {
+      set onfinish(fn: () => void) {
+        onfinish = fn;
+      },
+      cancel() {
+        onfinish = null;
+      },
+    };
+  });

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -14,14 +14,14 @@
     mdiPlay,
     mdiSelectionSearch,
   } from '@mdi/js';
-  import { type ComponentType } from 'svelte';
+  import { type Component } from 'svelte';
   import { t } from 'svelte-i18n';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
 
   export let title: string;
   export let subtitle: string | undefined;
-  export let description: ComponentType | undefined;
+  export let description: Component | undefined;
   export let jobCounts: JobCountsDto;
   export let queueStatus: QueueStatusDto;
   export let icon: string;

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -19,7 +19,7 @@
     mdiTagFaces,
     mdiVideo,
   } from '@mdi/js';
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@@ -30,7 +30,7 @@
   interface JobDetails {
     title: string;
     subtitle?: string;
-    description?: ComponentType;
+    description?: Component;
     allText?: string;
     refreshText?: string;
     missingText: string;
@@ -56,6 +56,7 @@
     await handleCommand(jobId, dto);
   };
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
     [JobName.ThumbnailGeneration]: {
       icon: mdiFileJpgBox,

web/src/lib/components/album-page/albums-controls.svelte

@@ -87,6 +87,7 @@
     }
   }
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: {
     if (selectedGroupOption.id === AlbumGroupBy.None) {
       groupIcon = mdiFolderRemoveOutline;
@@ -96,8 +97,10 @@
     }
   }
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: sortIcon = $albumViewSettings.sortOrder === SortOrder.Desc ? mdiArrowDownThin : mdiArrowUpThin;
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: albumFilterNames = ((): Record<AlbumFilter, string> => {
     return {
       [AlbumFilter.All]: $t('all'),
@@ -106,6 +109,7 @@
     };
   })();
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: albumSortByNames = ((): Record<AlbumSortBy, string> => {
     return {
       [AlbumSortBy.Title]: $t('sort_title'),
@@ -117,6 +121,7 @@
     };
   })();
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: albumGroupByNames = ((): Record<AlbumGroupBy, string> => {
     return {
       [AlbumGroupBy.None]: $t('group_no'),

web/src/lib/components/album-page/albums-list.svelte

@@ -135,6 +135,7 @@
   let isOpen = false;
 
   // Step 1: Filter between Owned and Shared albums, or both.
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: {
     switch (userSettings.filter) {
       case AlbumFilter.Owned: {

web/src/lib/components/album-page/albums-table-header.svelte

@@ -13,7 +13,7 @@
       $albumViewSettings.sortOrder = option.defaultOrder;
     }
   };
-
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: albumSortByNames = ((): Record<AlbumSortBy, string> => {
     return {
       [AlbumSortBy.Title]: $t('sort_title'),

web/src/lib/components/asset-viewer/activity-viewer.svelte

@@ -293,7 +293,7 @@
               class="h-[18px] {disabled
                 ? 'cursor-not-allowed'
                 : ''} w-full max-h-56 pr-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
-            />
+            ></textarea>
           </div>
           {#if isSendingMessage}
             <div class="flex items-end place-items-center pb-2 ml-0">

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts

@@ -15,13 +15,31 @@ describe('AssetViewerNavBar component', () => {
     showShareButton: false,
     onZoomImage: () => {},
     onCopyImage: () => {},
+    onAction: () => {},
+    onRunJob: () => {},
+    onPlaySlideshow: () => {},
+    onShowDetail: () => {},
+    onClose: () => {},
   };
 
+  beforeAll(() => {
+    Element.prototype.animate = vi.fn().mockImplementation(() => ({
+      cancel: () => {},
+    }));
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn(() => ({ observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() })),
+    );
+  });
+
   afterEach(() => {
-    vi.resetAllMocks();
     resetSavedUser();
   });
 
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
   it('shows back button', () => {
     const asset = assetFactory.build({ isTrashed: false });
     const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -61,6 +61,7 @@
 
   const sharedLink = getSharedLink();
   $: isOwner = $user && asset.ownerId === $user?.id;
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: showDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
   // $: showEditorButton =
   //   isOwner &&

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -598,7 +598,7 @@
 
             {#if stackedAsset.id == asset.id}
               <div class="w-full flex place-items-center place-content-center">
-                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
+                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
               </div>
             {/if}
           </div>

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -154,7 +154,7 @@
         <div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
           <p>
             {#if $user?.isAdmin}
-              <p>{$t('admin.asset_offline_description')}</p>
+              {$t('admin.asset_offline_description')}
             {:else}
               {$t('asset_offline_description')}
             {/if}

web/src/lib/components/asset-viewer/download-panel.svelte

@@ -32,7 +32,7 @@
             </div>
             <div class="flex place-items-center gap-2">
               <div class="h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`} />
+                <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`}></div>
               </div>
               <p class="min-w-[4em] whitespace-nowrap text-right">
                 <span class="text-immich-primary">

web/src/lib/components/asset-viewer/editor/editor-panel.svelte

@@ -23,6 +23,7 @@
   export let onClose: () => void;
 
   let selectedType: string = editTypes[0].name;
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: selectedTypeObj = editTypes.find((t) => t.name === selectedType) || editTypes[0];
 
   setTimeout(() => {

web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte

@@ -55,4 +55,4 @@
   });
 </script>
 
-<div class="h-full w-full mb-0" bind:this={container} />
+<div class="h-full w-full mb-0" bind:this={container}></div>

web/src/lib/components/asset-viewer/photo-viewer.spec.ts

@@ -1,3 +1,4 @@
+import { getAnimateMock } from '$lib/__mocks__/animate.mock';
 import PhotoViewer from '$lib/components/asset-viewer/photo-viewer.svelte';
 import * as utils from '$lib/utils';
 import { AssetMediaSize } from '@immich/sdk';
@@ -24,6 +25,10 @@ describe('PhotoViewer component', () => {
     getAssetThumbnailUrlSpy = vi.spyOn(utils, 'getAssetThumbnailUrl');
   });
 
+  beforeEach(() => {
+    Element.prototype.animate = getAnimateMock();
+  });
+
   afterEach(() => {
     vi.resetAllMocks();
   });

web/src/lib/components/asset-viewer/photo-viewer.svelte

@@ -193,7 +193,7 @@
         <div
           class="absolute border-solid border-white border-[3px] rounded-lg"
           style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        />
+        ></div>
       {/each}
     </div>
   {/if}

web/src/lib/components/assets/thumbnail/__test__/image-thumbnail.spec.ts

@@ -3,9 +3,9 @@ import { render } from '@testing-library/svelte';
 
 describe('ImageThumbnail component', () => {
   beforeAll(() => {
-    Object.defineProperty(HTMLImageElement.prototype, 'complete', {
-      value: true,
-    });
+    Element.prototype.animate = vi.fn().mockImplementation(() => ({
+      cancel: () => {},
+    }));
   });
 
   it('shows thumbhash while image is loading', () => {

web/src/lib/components/assets/thumbnail/image-thumbnail.svelte

@@ -96,5 +96,5 @@
     class:rounded-full={circle}
     draggable="false"
     out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-  />
+  ></canvas>
 {/if}

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -218,6 +218,7 @@
           href={currentUrlReplaceAssetId(asset.id)}
           on:click={(evt) => evt.preventDefault()}
           tabindex={0}
+          aria-label="Thumbnail URL"
         >
         </a>
       {/if}
@@ -255,12 +256,12 @@
         <div
           class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
           class:rounded-xl={selected}
-        />
+        ></div>
 
         <!-- Outline on focus -->
         <div
           class="absolute size-full group-focus-visible:outline outline-4 -outline-offset-4 outline-immich-primary"
-        />
+        ></div>
 
         <!-- Favorite asset star -->
         {#if !isSharedLink() && asset.isFavorite}
@@ -339,7 +340,7 @@
           class="absolute top-0 h-full w-full bg-immich-primary opacity-40"
           in:fade={{ duration: 100 }}
           out:fade={{ duration: 100 }}
-        />
+        ></div>
       {/if}
     </div>
   {/if}

web/src/lib/components/assets/thumbnail/video-thumbnail.svelte

@@ -113,7 +113,10 @@
     }}
     on:timeupdate={({ currentTarget }) => {
       const remaining = currentTarget.duration - currentTarget.currentTime;
-      remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
+      remainingSeconds = Math.min(
+        Math.ceil(Number.isNaN(remaining) ? Number.POSITIVE_INFINITY : remaining),
+        durationInSeconds,
+      );
     }}
-  />
+  ></video>
 {/if}

web/src/lib/components/elements/dropdown.svelte

@@ -102,7 +102,7 @@
               {renderedOption.title}
             </p>
           {:else}
-            <div />
+            <div></div>
             <p class="justify-self-start">
               {renderedOption.title}
             </p>

web/src/lib/components/elements/slider.svelte

@@ -28,11 +28,11 @@
   {#if disabled}
     <span
       class="slider slider-disabled cursor-not-allowed border border-transparent before:border before:border-transparent"
-    />
+    ></span>
   {:else}
     <span
       class="slider slider-enabled cursor-pointer border-2 border-transparent before:border-2 before:border-transparent peer-focus-visible:outline before:peer-focus-visible:outline peer-focus-visible:dark:outline-gray-200 before:peer-focus-visible:dark:outline-gray-200 peer-focus-visible:outline-gray-600 before:peer-focus-visible:outline-gray-600 peer-focus-visible:dark:border-black before:peer-focus-visible:dark:border-black peer-focus-visible:border-white before:peer-focus-visible:border-white"
-    />
+    ></span>
   {/if}
 </label>
 

web/src/lib/components/faces-page/face-thumbnail.svelte

@@ -36,14 +36,14 @@
     class:hover:opacity-100={selectable}
     class:rounded-full={circle}
     class:rounded-lg={!circle}
-  />
+  ></div>
 
   {#if selected}
     <div
       class="absolute left-0 top-0 h-full w-full bg-blue-500/80"
       class:rounded-full={circle}
       class:rounded-lg={!circle}
-    />
+    ></div>
   {/if}
 
   {#if person.name}

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -44,6 +44,8 @@
     return personIsHidden;
   };
 
+  // svelte-ignore reactive_declaration_non_reactive_property
+  // svelte-ignore reactive_declaration_module_script_dependency
   $: toggleButtonOptions = ((): Record<ToggleVisibility, { icon: string; label: string }> => {
     return {
       [ToggleVisibility.HIDE_ALL]: { icon: mdiEyeOff, label: $t('hide_all_people') },

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -102,7 +102,7 @@
       {:else}
         {$t('merge_people')}
       {/if}
-      <div />
+      <div></div>
     </svelte:fragment>
     <svelte:fragment slot="trailing">
       <Button size={'sm'} disabled={!hasSelection} on:click={handleMerge}>