From c48394aa6e8e7f79e6aed281b7e83dc288ca1c6f Mon Sep 17 00:00:00 2001 From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com> Date: Mon, 26 Oct 2026 12:00:17 +0100 Subject: [PATCH] refactor(web): use declaration tags instead of @const (#32639) (cherry picked from commit c6d1e15c77c5f3786b26b292def27247b258cde5) --- pnpm-lock.yaml | 10 +++++----- web/eslint.config.js | 1 + web/package.json | 4 ++-- web/src/lib/components/CalendarHeatmap.svelte | 8 +++++--- .../lib/components/SchemaAlbumPicker.svelte | 2 +- .../lib/components/SchemaConfiguration.svelte | 2 +- .../lib/components/album-page/AlbumCard.svelte | 3 ++- .../album-page/AlbumCardGroup.svelte | 4 ++-- .../components/album-page/AlbumsTable.svelte | 4 ++-- .../components/asset-viewer/AssetViewer.svelte | 3 +-- .../asset-viewer/AssetViewerNavBar.svelte | 4 ++-- .../components/asset-viewer/DetailPanel.svelte | 4 ++-- .../asset-viewer/DetailPanelPeople.svelte | 6 ++++-- .../components/asset-viewer/PhotoViewer.svelte | 7 ++++--- .../editor/transform-tool/CropArea.svelte | 4 ++-- .../faces-page/PersonSidePanel.svelte | 4 ++-- .../gallery-viewer/GalleryViewer.svelte | 2 +- .../search-bar/SearchHistorySection.svelte | 2 +- .../search-bar/SearchPeopleSection.svelte | 8 ++++---- .../search-bar/SearchTagsSection.svelte | 2 +- .../lib/components/timeline/AssetLayout.svelte | 4 ++-- web/src/lib/components/timeline/Month.svelte | 5 ++--- .../lib/components/timeline/Timeline.svelte | 18 ++++++++---------- web/src/lib/elements/Dropdown.svelte | 4 ++-- web/src/lib/elements/StarRating.svelte | 6 +++--- web/src/lib/modals/AssetTagModal.svelte | 2 +- web/src/lib/modals/PeopleFilterModal.svelte | 2 +- web/src/lib/modals/PeoplePickerModal.svelte | 2 +- web/src/lib/modals/ServerAboutModal.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/MapTimelinePanel.svelte | 4 ++-- .../[[assetId=id]]/MemoryViewer.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 2 +- .../routes/(user)/people/manage/+page.svelte | 2 +- .../(user)/photos/[[assetId=id]]/+page.svelte | 4 ++-- .../(user)/places/PlacesCardGroup.svelte | 2 +- .../[[assetId=id]]/+page.svelte | 4 ++-- .../[[assetId=id]]/+page.svelte | 4 ++-- .../[[assetId=id]]/+page.svelte | 2 +- .../user-settings/SharingSettings.svelte | 12 +++++++----- .../(user)/user-settings/UserApiKeyList.svelte | 2 +- .../user-settings/UserPasskeyList.svelte | 2 +- web/src/routes/(user)/workflows/+page.svelte | 2 +- .../(list)/LibraryTableRow.svelte | 2 +- .../library-management/[id]/+layout.svelte | 4 ++-- web/src/routes/admin/queues/QueueCard.svelte | 6 ++---- web/src/routes/admin/queues/QueuePanel.svelte | 2 +- .../server-status/ServerStatisticsPanel.svelte | 4 ++-- 52 files changed, 102 insertions(+), 99 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f2d829d56..5a2df71a0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1177,8 +1177,8 @@ importers: specifier: ^5.5.6 version: 5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1)))(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1))(prettier@3.9.9) eslint-plugin-svelte: - specifier: ^3.12.4 - version: 3.23.0(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1))(svelte@5.57.1(@typescript-eslint/types@8.70.1)) + specifier: ^3.23.1 + version: 3.23.1(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1))(svelte@5.57.1(@typescript-eslint/types@8.70.1)) eslint-plugin-unicorn: specifier: ^75.0.0 version: 75.0.0(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1)) @@ -7821,8 +7821,8 @@ packages: eslint-config-prettier: optional: true - eslint-plugin-svelte@3.23.0: - resolution: {integrity: sha512-n9jRklDqy0+W834568a4ZIZTK7DHXxvvHHxxGP8nNq7N//pOZMubttskHOquyGgfTR4Z05q2NdGNlsTpIEA48w==} + eslint-plugin-svelte@3.23.1: + resolution: {integrity: sha512-+w86Jlx4IRUuuvtqD6j4njql+akx+81JnpvbN5de3AV5iq2SexvST/Jr51CiTlKeY0i+vhoKjPO/ywFKIP75sA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} peerDependencies: eslint: ^8.57.1 || ^9.0.0 || ^10.0.0 @@ -21185,7 +21185,7 @@ snapshots: '@types/eslint': 9.6.1 eslint-config-prettier: 10.1.8(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1)) - eslint-plugin-svelte@3.23.0(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1))(svelte@5.57.1(@typescript-eslint/types@8.70.1)): + eslint-plugin-svelte@3.23.1(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1))(svelte@5.57.1(@typescript-eslint/types@8.70.1)): dependencies: '@eslint-community/eslint-utils': 4.10.1(eslint@10.11.0(jiti@2.7.0)(supports-color@8.1.1)) '@jridgewell/sourcemap-codec': 1.6.0 diff --git a/web/eslint.config.js b/web/eslint.config.js index 8d54fef10..048f42d3a 100644 --- a/web/eslint.config.js +++ b/web/eslint.config.js @@ -164,6 +164,7 @@ export default defineConfig( '@typescript-eslint/switch-exhaustiveness-check': ['error', { considerDefaultExhaustiveForUnions: true }], 'svelte/button-has-type': 'error', 'object-shorthand': ['error', 'always'], + 'svelte/no-at-const-tags': 'error', 'svelte/no-navigation-without-resolve': 'off', 'unicorn/prefer-early-return': 'off', 'unicorn/prefer-ternary': 'off', diff --git a/web/package.json b/web/package.json index 69870f79d..9855cca44 100644 --- a/web/package.json +++ b/web/package.json @@ -36,8 +36,8 @@ "@photo-sphere-viewer/resolution-plugin": "^5.14.0", "@photo-sphere-viewer/settings-plugin": "^5.14.0", "@photo-sphere-viewer/video-plugin": "^5.14.0", - "@tanstack/svelte-query": "^6.3.2", "@simplewebauthn/browser": "14.0.0", + "@tanstack/svelte-query": "^6.3.2", "@types/geojson": "^7946.0.16", "@zoom-image/core": "^0.43.0", "@zoom-image/svelte": "^0.3.0", @@ -101,7 +101,7 @@ "eslint-plugin-better-tailwindcss": "^4.5.0", "eslint-plugin-compat": "^7.0.0", "eslint-plugin-prettier": "^5.5.6", - "eslint-plugin-svelte": "^3.12.4", + "eslint-plugin-svelte": "^3.23.1", "eslint-plugin-unicorn": "^75.0.0", "factory.ts": "^1.4.1", "globals": "^17.0.0", diff --git a/web/src/lib/components/CalendarHeatmap.svelte b/web/src/lib/components/CalendarHeatmap.svelte index f2882c63b..7e4a1b5a0 100644 --- a/web/src/lib/components/CalendarHeatmap.svelte +++ b/web/src/lib/components/CalendarHeatmap.svelte @@ -70,9 +70,11 @@ {#each data.series as day, idx (day.date)} - {@const date = DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString( - { month: 'short', day: 'numeric' }, - { locale: $locale }, + {const date = $derived( + DateTime.fromISO(day.date, { zone: 'utc' }).toLocaleString( + { month: 'short', day: 'numeric' }, + { locale: $locale }, + ), )}
{:else} - {@const albumId = albumIds[0]} + {const albumId = $derived(albumIds[0])} {#if albumId} (albumIds = [])} /> {:else} diff --git a/web/src/lib/components/SchemaConfiguration.svelte b/web/src/lib/components/SchemaConfiguration.svelte index c4e20081d..738051135 100644 --- a/web/src/lib/components/SchemaConfiguration.svelte +++ b/web/src/lib/components/SchemaConfiguration.svelte @@ -92,7 +92,7 @@ {$t('unsupported_field_type')} diff --git a/web/src/lib/components/album-page/AlbumCard.svelte b/web/src/lib/components/album-page/AlbumCard.svelte index 58aefab95..ea1683f67 100644 --- a/web/src/lib/components/album-page/AlbumCard.svelte +++ b/web/src/lib/components/album-page/AlbumCard.svelte @@ -23,6 +23,8 @@ preload = false, contextMenuItems, }: Props = $props(); + + const owner = $derived(album.albumUsers[0].user);
{$t('owned')}

{:else} diff --git a/web/src/lib/components/album-page/AlbumCardGroup.svelte b/web/src/lib/components/album-page/AlbumCardGroup.svelte index 68d982968..5eae00bb5 100644 --- a/web/src/lib/components/album-page/AlbumCardGroup.svelte +++ b/web/src/lib/components/album-page/AlbumCardGroup.svelte @@ -66,8 +66,8 @@ {#if !isCollapsed}
{#each albums as album, index (album.id)} - {@const { Edit, Share, Download, Leave, Delete } = getAlbumActions($t, album)} - {@const items = [Edit, Share, Download, Leave, Delete]} + {const { Edit, Share, Download, Leave, Delete } = $derived(getAlbumActions($t, album))} + {const items = $derived([Edit, Share, Download, Leave, Delete])} {:else} {#each groupedAlbums as albumGroup (albumGroup.id)} - {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)} - {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'} + {const isCollapsed = $derived(isAlbumGroupCollapsed($albumViewSettings, albumGroup.id))} + {const iconRotation = $derived(isCollapsed ? 'rotate-0' : 'rotate-90')} diff --git a/web/src/lib/components/asset-viewer/AssetViewer.svelte b/web/src/lib/components/asset-viewer/AssetViewer.svelte index 4873b0b41..7753fe79d 100644 --- a/web/src/lib/components/asset-viewer/AssetViewer.svelte +++ b/web/src/lib/components/asset-viewer/AssetViewer.svelte @@ -649,10 +649,9 @@ {/if} {#if stack && withStacked && !assetViewerManager.isShowEditor && $slideshowState === SlideshowState.None} - {@const stackedAssets = stack.assets}
- {#each stackedAssets as stackedAsset (stackedAsset.id)} + {#each stack.assets as stackedAsset (stackedAsset.id)}
{#if album} - {@const { SetCover } = getAlbumAssetActions($t, album, asset)} + {const { SetCover } = $derived(getAlbumAssetActions($t, album, asset))} {/if} {#if person} - {@const { SetFeaturedPhoto } = getPersonAssetActions($t, person, asset)} + {const { SetFeaturedPhoto } = $derived(getPersonAssetActions($t, person, asset))} {/if} diff --git a/web/src/lib/components/asset-viewer/DetailPanel.svelte b/web/src/lib/components/asset-viewer/DetailPanel.svelte index 345b3f8ef..a0e48e8f5 100644 --- a/web/src/lib/components/asset-viewer/DetailPanel.svelte +++ b/web/src/lib/components/asset-viewer/DetailPanel.svelte @@ -186,7 +186,7 @@ {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP

{/if} - {@const { width, height } = getDimensions(asset.exifInfo)} + {const { width, height } = $derived(getDimensions(asset.exifInfo))}

{width} × {height}

{/if} {#if asset.exifInfo?.fileSizeInByte} @@ -295,8 +295,8 @@ onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))} > {#snippet popup({ marker })} - {@const { lat, lon } = marker}
+ {const { lat, lon } = $derived(marker)} {lat.toPrecision(6)}, {lon.toPrecision(6)} {#each visiblePeople as person (person.id)} - {@const personFaces = faceManager.facesByPersonId.get(person.id) ?? []} - {@const isHighlighted = personFaces.some((f) => assetViewerManager.highlightedFaces.some((b) => b.id === f.id))} + {const personFaces = $derived(faceManager.facesByPersonId.get(person.id) ?? [])} + {const isHighlighted = $derived( + personFaces.some((f) => assetViewerManager.highlightedFaces.some((b) => b.id === f.id)), + )}
{#each boundingBoxes as boundingbox (boundingbox.id)} - {@const isActive = assetViewerManager.highlightedFaces.some((f) => f.id === boundingbox.id)} + {const isActive = $derived(assetViewerManager.highlightedFaces.some((f) => f.id === boundingbox.id))}
assetViewerManager.clearHighlightedFaces()} > {#if isActive && boundingbox.name} - {@const labelAbove = + {const labelAbove = $derived( boundingbox.top + boundingbox.height + faceLabelOffset > overlaySize.height && - boundingbox.top >= faceLabelOffset} + boundingbox.top >= faceLabelOffset, + )} {#each edges as edge (edge)} - {@const rotatedEdge = rotateBoundary(edges, edge, transformManager.normalizedRotation / 90)} + {const rotatedEdge = $derived(rotateBoundary(edges, edge, transformManager.normalizedRotation / 90))}
{:else} {#each peopleWithFaces as face, index (face.id)} - {@const personName = face.person ? face.person.name : $t('face_unassigned')} - {@const isHighlighted = assetViewerManager.highlightedFaces.some((b) => b.id === face.id)} + {const personName = face.person ? face.person.name : $t('face_unassigned')} + {const isHighlighted = $derived(assetViewerManager.highlightedFaces.some((b) => b.id === face.id))}
{#each assets as asset, index (asset.id + '-' + index)} {#if isInOrNearViewport(index)} - {@const currentAsset = toTimelineAsset(asset)}
+ {const currentAsset = toTimelineAsset(asset)} { diff --git a/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte b/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte index 4776f2804..096f6e24c 100644 --- a/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte +++ b/web/src/lib/components/shared-components/search-bar/SearchHistorySection.svelte @@ -100,9 +100,9 @@
{#each filteredSearchTerms as savedSearchTerm, i (i)} - {@const index = showClearAll ? i + 1 : i}
+ {const index = $derived(showClearAll ? i + 1 : i)}
{:then people} {#if people && people.length > 0} - {@const peopleList = showAllPeople - ? filterPeople(people, name) - : filterPeople(people, name).slice(0, numberOfPeople)} -
{$t('people_search_description')} + {const peopleList = $derived( + showAllPeople ? filterPeople(people, name) : filterPeople(people, name).slice(0, numberOfPeople), + )} + {#each selectedTags as tagId (tagId)} - {@const tag = tagMap[tagId]} + {const tag = $derived(tagMap[tagId])} {#if tag}