chore: svelte 5

immich-app · Oct 25, 2024 · ace8899 · ace8899
1 parent 43d18cc
commit ace8899
Show file tree

Hide file tree

Showing 47 changed files with 197 additions and 179 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -27,10 +27,10 @@
     "@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/user-event": "^14.5.2",
@@ -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.2",
     "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
@@ -72,7 +72,7 @@
     "@photo-sphere-viewer/core": "^5.7.1",
     "@photo-sphere-viewer/equirectangular-video-adapter": "^5.7.2",
     "@photo-sphere-viewer/video-plugin": "^5.7.2",
-    "@zoom-image/svelte": "^0.2.6",
+    "@zoom-image/svelte": "^0.3.0",
     "dom-to-image": "^2.6.0",
     "handlebars": "^4.7.8",
     "intl-messageformat": "^10.5.14",
@@ -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"

diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/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;

diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/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,

diff --git a/web/src/lib/components/album-page/albums-controls.svelte b/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'),

diff --git a/web/src/lib/components/album-page/albums-list.svelte b/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: {

diff --git a/web/src/lib/components/album-page/albums-table-header.svelte b/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'),

diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/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">

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
@@ -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 &&

diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/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>

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/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}

diff --git a/web/src/lib/components/asset-viewer/download-panel.svelte b/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">

diff --git a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte b/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(() => {

diff --git a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte b/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>
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/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}

diff --git a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte b/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}
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/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}

diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/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}
diff --git a/web/src/lib/components/elements/dropdown.svelte b/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>

diff --git a/web/src/lib/components/elements/slider.svelte b/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>
 

diff --git a/web/src/lib/components/faces-page/face-thumbnail.svelte b/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}

diff --git a/web/src/lib/components/faces-page/manage-people-visibility.svelte b/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') },

diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/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}>

diff --git a/web/src/lib/components/faces-page/unmerge-face-selector.svelte b/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">

diff --git a/web/src/lib/components/forms/api-key-secret.svelte b/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">

diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/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>

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -267,14 +267,15 @@
 
         {#each current.memory.assets as asset, index}
           <a class="relative w-full py-2" href={asHref(asset)}>
-            <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
+            <span class="absolute left-0 h-[2px] w-full bg-gray-500"></span>
             {#await resetPromise}
-              <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`} />
+              <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`}
+              ></span>
             {:then}
               <span
                 class="absolute left-0 h-[2px] bg-white"
                 style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progress * 100}%`}
-              />
+              ></span>
             {/await}
           </a>
         {/each}

diff --git a/web/src/lib/components/photos-page/actions/asset-job-actions.svelte b/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
@@ -18,6 +18,7 @@
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: isAllVideos = [...getOwnedAssets()].every((asset) => asset.type === AssetTypeEnum.Video);
 
   const handleRunJob = async (name: AssetJobName) => {

diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -86,7 +86,7 @@
             </p>
             <div
               class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
-            />
+            ></div>
           </a>
         {/if}
       {/each}

diff --git a/web/src/lib/components/shared-components/album-selection-modal.svelte b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -51,12 +51,12 @@
     {#if loading}
       {#each { length: 3 } as _}
         <div class="flex animate-pulse gap-4 px-6 py-2">
-          <div class="h-12 w-12 rounded-xl bg-slate-200" />
+          <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
           <div class="flex flex-col items-start justify-center gap-2">
-            <span class="h-4 w-36 animate-pulse bg-slate-200" />
+            <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
             <div class="flex animate-pulse gap-1">
-              <span class="h-3 w-8 bg-slate-200" />
-              <span class="h-3 w-20 bg-slate-200" />
+              <span class="h-3 w-8 bg-slate-200"></span>
+              <span class="h-3 w-20 bg-slate-200"></span>
             </div>
           </div>
         </div>

diff --git a/.../lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/.../lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -52,6 +52,7 @@
     })),
   ];
 
+  // svelte-ignore reactive_declaration_non_reactive_property
   $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
   $: {
     if (!showMetadata) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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}
@@ Expand Down @@