chore: svelte enable svelte_referenced_localy

web/package.json

@@ -9,7 +9,7 @@
     "build:stats": "BUILD_STATS=true vite build",
     "package": "svelte-kit package",
     "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'state_referenced_locally:ignore'",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings",
     "check:typescript": "tsc --noEmit",
     "check:watch": "pnpm run check:svelte --watch",
     "check:code": "pnpm run format && pnpm run lint && pnpm run check:svelte && pnpm run check:typescript",

web/src/lib/components/album-page/AlbumViewer.svelte

@@ -30,7 +30,7 @@
 
   let { sharedLink }: Props = $props();
 
-  const album = sharedLink.album as AlbumResponseDto;
+  const album = $derived(sharedLink.album as AlbumResponseDto);
 
   let { slideshowState, slideshowNavigation } = slideshowStore;
 

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

@@ -53,7 +53,8 @@
   let activityHeight: number = $state(0);
   let chatHeight: number = $state(0);
   let divHeight = $derived(innerHeight - activityHeight);
-  let previousAssetId: string | undefined = $state(assetId);
+  // svelte-ignore state_referenced_locally
+  let previousAssetId = $state(assetId);
   let message = $state('');
   let isSendingMessage = $state(false);
   const isAlbumOwner = $derived(albumUsers[0].user.id === authManager.user.id);

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

@@ -16,7 +16,7 @@
   }
 
   let { asset, onAction, preAction }: Props = $props();
-  const isLocked = asset.visibility === AssetVisibility.Locked;
+  const isLocked = $derived(asset.visibility === AssetVisibility.Locked);
 
   const toggleLockedVisibility = async () => {
     const isConfirmed = await modalManager.showDialog({

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

@@ -29,7 +29,7 @@
     class: className,
   }: Props = $props();
 
-  let remainingSeconds = $state(durationInSeconds);
+  let remainingSeconds = $derived(durationInSeconds);
   let loading = $state(true);
   let error = $state(false);
   let player: HTMLVideoElement | undefined = $state();

web/src/lib/components/maintenance/MaintenanceBackupsList.svelte

@@ -18,7 +18,7 @@
 
   let props: Props = $props();
 
-  let backups = $state(props.backups ?? []);
+  let backups = $derived(props.backups ?? []);
 
   async function reloadBackups() {
     const result = await listDatabaseBackups();

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -31,6 +31,7 @@
 
   const { data }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let { sharedLink, passwordRequired, key, slug, meta } = $state(data);
   let { title, description } = $state(meta);
   let isOwned = $derived(authManager.authenticated && authManager.user.id === sharedLink?.userId);

web/src/lib/components/shared-components/EmptyPlaceholder.svelte

@@ -14,9 +14,9 @@
 
   let width = $derived(fullWidth ? 'w-full' : 'w-1/2');
 
-  const hoverClasses = onClick
-    ? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25`
-    : '';
+  const hoverClasses = $derived(
+    onClick ? `border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25` : '',
+  );
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->

web/src/lib/components/shared-components/context-menu/MenuOption.svelte

@@ -36,12 +36,15 @@
     onClick();
   };
 
-  if (shortcut && !shortcutLabel) {
-    shortcutLabel = computeShortcutLabel(shortcut);
-  }
-  const bindShortcutIfSet = shortcut
-    ? (n: HTMLElement) => bindShortcut(n, { shortcut, onShortcut: onClick })
-    : () => {};
+  $effect(() => {
+    if (shortcut && !shortcutLabel) {
+      shortcutLabel = computeShortcutLabel(shortcut);
+    }
+  });
+
+  const bindShortcutIfSet = $derived(
+    shortcut ? (n: HTMLElement) => bindShortcut(n, { shortcut, onShortcut: onClick }) : () => {},
+  );
 </script>
 
 <svelte:document use:bindShortcutIfSet />

web/src/lib/components/shared-components/progress-bar/ProgressBar.svelte

@@ -37,7 +37,7 @@
     await play();
   };
 
-  let progress = setDuration(duration);
+  let progress = $derived(setDuration(duration));
 
   $effect(() => {
     handlePromiseError(onChange(duration));

web/src/lib/components/shared-components/settings/SettingAccordionState.svelte

@@ -25,7 +25,10 @@
   }
 
   let { queryParam, state = writable(getParamValues(queryParam)), children }: Props = $props();
-  setAccordionState(state);
+
+  $effect.pre(() => {
+    setAccordionState(state);
+  });
 
   const searchParams = new SvelteURLSearchParams(page.url.searchParams);
 

web/src/lib/components/shared-components/tree/Breadcrumbs.svelte

@@ -13,7 +13,7 @@
 
   const { node, getLink, title, icon }: Props = $props();
 
-  const rootLink = getLink('');
+  const rootLink = $derived(getLink(''));
   const isRoot = $derived(node.parent === null);
   const parentLink = $derived(getLink(node.parent ? node.parent.path : ''));
   const parents = $derived(node.parents);

web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte

@@ -122,7 +122,9 @@
     }
   });
 
+  // svelte-ignore state_referenced_locally
   const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
+  // svelte-ignore state_referenced_locally
   const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
 
   const handleOpenDateModal = async () => {

web/src/lib/modals/AlbumEditModal.svelte

@@ -13,7 +13,9 @@
 
   let { album, onClose }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let albumName = $state(album.albumName);
+  // svelte-ignore state_referenced_locally
   let description = $state(album.description);
 
   const onSubmit = async () => {

web/src/lib/modals/ApiKeyUpdateModal.svelte

@@ -20,8 +20,10 @@
       ? Object.values(Permission).filter((permission) => permission !== Permission.All)
       : permissions;
 
+  // svelte-ignore state_referenced_locally
   let name = $state(apiKey.name);
-  let selectedPermissions = $state<Permission[]>(mapPermissions(apiKey.permissions));
+  // svelte-ignore state_referenced_locally
+  let selectedPermissions = $state(mapPermissions(apiKey.permissions));
 
   const onSubmit = async () => {
     const success = await handleUpdateApiKey(apiKey, {

web/src/lib/modals/AssetChangeDateModal.svelte

@@ -20,9 +20,11 @@
 
   let { initialDate = DateTime.now(), initialTimeZone, timezoneInput = true, asset, onClose }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS"));
   const timezones = $derived(getTimezones(selectedDate));
 
+  // svelte-ignore state_referenced_locally
   let selectedOption = $state(getPreferredTimeZone(initialDate, initialTimeZone, getTimezones(selectedDate)));
 
   const onSubmit = async () => {

web/src/lib/modals/AssetSelectionChangeDateModal.svelte

@@ -23,6 +23,7 @@
 
   let showRelative = $state(false);
   let selectedDuration = $state(0);
+  // svelte-ignore state_referenced_locally
   let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS"));
   const timezones = $derived(getTimezones(selectedDate));
   // svelte-ignore state_referenced_locally

web/src/lib/modals/GeolocationPointPickerModal.svelte

@@ -45,8 +45,11 @@
     return { lat: latitude, lng: longitude };
   });
 
-  let point = $state<LatLng | undefined>(initialPoint ?? assetPoint);
+  // svelte-ignore state_referenced_locally
+  let point = $state(initialPoint ?? assetPoint);
+  // svelte-ignore state_referenced_locally
   let zoom = $state(point ? 12.5 : 1);
+  // svelte-ignore state_referenced_locally
   let center = $state(point ?? geolocationManager.lastPoint);
 
   $effect(() => {

web/src/lib/modals/LibraryExclusionPatternEditModal.svelte

@@ -12,6 +12,7 @@
   };
 
   const { library, exclusionPattern: oldValue, onClose }: Props = $props();
+  // svelte-ignore state_referenced_locally
   let newValue = $state(oldValue);
 
   const onSubmit = async () => {

web/src/lib/modals/LibraryFolderEditModal.svelte

@@ -13,6 +13,7 @@
 
   const { library, folder: oldValue, onClose }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let newValue = $state(oldValue);
 
   const onSubmit = async () => {

web/src/lib/modals/MapSettingsModal.svelte

@@ -12,6 +12,7 @@
   };
 
   let { settings: initialValues, onClose }: Props = $props();
+  // svelte-ignore state_referenced_locally
   let settings = $state(initialValues);
 
   let customDateRange = $state(!!settings.dateAfter || !!settings.dateBefore);

web/src/lib/modals/SearchFilterModal.svelte

@@ -95,6 +95,7 @@
     };
   };
 
+  // svelte-ignore state_referenced_locally
   let filter: SearchFilter = $state(asFilter(searchQuery));
 
   const resetForm = () => {

web/src/lib/modals/TagCreateModal.svelte

@@ -12,6 +12,7 @@
 
   const { onClose, baseTag }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let tagValue = $state(baseTag?.path ? `${baseTag.path}/` : '');
 
   const onSubmit = async () => {

web/src/lib/modals/TagEditModal.svelte

@@ -14,6 +14,7 @@
 
   const { tag, onClose }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   let tagColor = $state(tag.color ?? '');
 
   const onSubmit = async () => {

web/src/routes/(user)/explore/+page.svelte

@@ -24,7 +24,7 @@
   };
 
   let places = $derived(getFieldItems(data.items, 'exifInfo.city'));
-  let people = $state(data.response.people);
+  let people = $derived(data.response.people);
 
   let hasPeople = $derived(data.response.total > 0);
 

web/src/routes/(user)/people/+page.svelte

@@ -36,7 +36,7 @@
   let searchName = $state('');
   let newName = $state('');
   let currentPage = $state(1);
-  let nextPage = $state(data.people.hasNextPage ? 2 : null);
+  let nextPage = $derived(data.people.hasNextPage ? 2 : null);
   let personMerge1 = $state<PersonResponseDto>();
   let personMerge2 = $state<PersonResponseDto>();
   let potentialMergePeople: PersonResponseDto[] = $state([]);

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/UnmergeFaceSelector.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -14,7 +15,6 @@
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
   import FaceThumbnail from './FaceThumbnail.svelte';
   import PeopleList from './PeopleList.svelte';
 
@@ -39,11 +39,9 @@
 
   let peopleToNotShow = $derived(selectedPerson ? [personAssets, selectedPerson] : [personAssets]);
 
-  const selectedPeople: AssetFaceUpdateItem[] = [];
-
-  for (const assetId of assetIds) {
-    selectedPeople.push({ assetId, personId: personAssets.id });
-  }
+  const selectedPeople = $derived<AssetFaceUpdateItem[]>(
+    assetIds.map((assetId) => ({ assetId, personId: personAssets.id })),
+  );
 
   onMount(async () => {
     const data = await getAllPeople({ withHidden: false });

web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte

@@ -15,16 +15,16 @@
 
   let { data }: Props = $props();
 
-  const sharedLink = $state(data.sharedLink);
+  const sharedLink = $derived(data.sharedLink);
 
-  let description = $state(sharedLink.description ?? '');
-  let allowDownload = $state(sharedLink.allowDownload);
-  let allowUpload = $state(sharedLink.allowUpload);
-  let showMetadata = $state(sharedLink.showMetadata);
-  let password = $state(sharedLink.password ?? '');
-  let slug = $state(sharedLink.slug ?? '');
-  let shareType = sharedLink.album ? SharedLinkType.Album : SharedLinkType.Individual;
-  let expiresAt = $state(sharedLink.expiresAt);
+  let description = $derived(sharedLink.description ?? '');
+  let allowDownload = $derived(sharedLink.allowDownload);
+  let allowUpload = $derived(sharedLink.allowUpload);
+  let showMetadata = $derived(sharedLink.showMetadata);
+  let password = $derived(sharedLink.password ?? '');
+  let slug = $derived(sharedLink.slug ?? '');
+  let shareType = $derived(sharedLink.album ? SharedLinkType.Album : SharedLinkType.Individual);
+  let expiresAt = $derived(sharedLink.expiresAt);
 
   const onClose = async () => {
     await goto(Route.sharedLinks());

web/src/routes/(user)/utilities/large-files/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -18,7 +18,7 @@
 
   let { data }: Props = $props();
 
-  let assets = $state(data.assets);
+  let assets = $derived(data.assets);
   let asset = $derived(data.asset);
 
   $effect(() => {

web/src/routes/(user)/utilities/workflows/+page.svelte

@@ -37,12 +37,13 @@
 
   let { data }: Props = $props();
 
-  let workflows = $state<WorkflowResponseDto[]>(data.workflows);
+  let workflows = $derived<WorkflowResponseDto[]>(data.workflows);
 
   const expandedWorkflows = new SvelteSet<string>();
   const pluginFilterLookup = new SvelteMap<string, PluginFilterResponseDto>();
   const pluginActionLookup = new SvelteMap<string, PluginFilterResponseDto>();
 
+  // svelte-ignore state_referenced_locally
   for (const plugin of data.plugins) {
     for (const filter of plugin.filters ?? []) {
       pluginFilterLookup.set(filter.id, { ...filter });

web/src/routes/(user)/utilities/workflows/[workflowId]/+page.svelte

@@ -63,11 +63,16 @@
 
   let { data }: Props = $props();
 
+  // svelte-ignore state_referenced_locally
   const triggers = data.triggers;
+  // svelte-ignore state_referenced_locally
   const filters = data.plugins.flatMap((plugin) => plugin.filters);
+  // svelte-ignore state_referenced_locally
   const actions = data.plugins.flatMap((plugin) => plugin.actions);
 
+  // svelte-ignore state_referenced_locally
   let previousWorkflow = data.workflow;
+  // svelte-ignore state_referenced_locally
   let editWorkflow = $state(data.workflow);
 
   let viewMode: 'visual' | 'json' = $state('visual');

web/src/routes/admin/library-management/(list)/new/+page.svelte

@@ -15,7 +15,7 @@
   const { data }: Props = $props();
 
   let ownerId: string = $state(authManager.user.id);
-  const users = $state(data.allUsers);
+  const users = $derived(data.allUsers);
 
   const onClose = async () => {
     await goto(Route.libraries());

web/src/routes/admin/library-management/[id]/edit/+page.svelte

@@ -13,8 +13,8 @@
 
   let { data }: Props = $props();
 
-  const library = $state(data.library);
-  let name = $state(library.name);
+  const library = $derived(data.library);
+  let name = $derived(library.name);
 
   const onClose = async () => {
     await goto(Route.viewLibrary(library));

web/src/routes/admin/users/(list)/+layout.svelte

@@ -32,7 +32,7 @@
 
   let { children, data }: Props = $props();
 
-  let users: UserAdminResponseDto[] = $state(data.users);
+  let users: UserAdminResponseDto[] = $derived(data.users);
 
   const onUpdate = async (user: UserAdminResponseDto) => {
     const index = users.findIndex(({ id }) => id === user.id);