chore: svelte 5

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

web/package.json

@@ -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",
@@ -81,7 +81,7 @@
     "luxon": "^3.4.4",
     "socket.io-client": "^4.7.4",
     "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/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.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.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

@@ -115,5 +115,5 @@
       const remaining = currentTarget.duration - currentTarget.currentTime;
       remainingSeconds = Math.min(Math.ceil(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}>

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

@@ -119,7 +119,7 @@
   <ControlAppBar {onClose}>
     <svelte:fragment slot="leading">
       <slot name="header" />
-      <div />
+      <div></div>
     </svelte:fragment>
     <svelte:fragment slot="trailing">
       <div class="flex gap-4">

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

@@ -18,7 +18,7 @@
 
   <div class="my-4 flex flex-col gap-2">
     <!-- <label class="immich-form-label" for="secret">{ $t("api_key") }</label> -->
-    <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
+    <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret}></textarea>
   </div>
 
   <svelte:fragment slot="sticky-bottom">

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

@@ -52,7 +52,7 @@
 
         <div class="m-4 flex flex-col gap-2">
           <label class="immich-form-label" for="description">{$t('description')}</label>
-          <textarea class="immich-form-input" id="description" bind:value={description} />
+          <textarea class="immich-form-input" id="description" bind:value={description}></textarea>
         </div>
       </div>
     </div>

web/src/lib/components/i18n/__test__/format-message.spec.ts

@@ -57,15 +57,15 @@ describe('FormatMessage component', () => {
       key: 'html' as Translations,
       values: { name: 'test' },
     });
-    expect(container.innerHTML).toBe('Hello <strong>test</strong>');
+    expect(container.innerHTML.replaceAll('<!---->', '')).toBe('Hello <strong>test</strong>');
   });
 
   it('renders a message with html and plural', () => {
     const { container } = render(FormatTagB, {
       key: 'plural' as Translations,
       values: { count: 1 },
     });
-    expect(container.innerHTML).toBe('You have <strong>1 item</strong>');
+    expect(container.innerHTML.replaceAll('<!---->', '')).toBe('You have <strong>1 item</strong>');
   });
 
   it('protects agains XSS injection', () => {
@@ -85,22 +85,22 @@ describe('FormatMessage component', () => {
       key: 'plural_with_html' as Translations,
       values: { count: 10 },
     });
-    expect(container.innerHTML).toBe('You have <strong>10</strong> items');
+    expect(container.innerHTML.replaceAll('<!---->', '')).toBe('You have <strong>10</strong> items');
   });
 
   it('supports html tags inside select', () => {
     const { container } = render(FormatTagB, {
       key: 'select_with_html' as Translations,
       values: { status: true },
     });
-    expect(container.innerHTML).toBe('Item is <strong>disabled</strong>');
+    expect(container.innerHTML.replaceAll('<!---->', '')).toBe('Item is <strong>disabled</strong>');
   });
 
   it('supports html tags inside selectordinal', () => {
     const { container } = render(FormatTagB, {
       key: 'ordinal_with_html' as Translations,
       values: { count: 4 },
     });
-    expect(container.innerHTML).toBe('<strong>4th</strong> item');
+    expect(container.innerHTML.replaceAll('<!---->', '')).toBe('<strong>4th</strong> item');
   });
 });