Migrate to Runes, part 1

src/lib/components/assets/assets-page.svelte

@@ -27,7 +27,9 @@
   const routeRegex =
     /^\/assets(?:\/(?<folderPath>[/\-\w]+))?(?:\/(?<fileName>[^/]+\.[A-Za-z0-9]+))?$/;
 
-  $: selectedAssetFolderLabel = getFolderLabelByPath($selectedAssetFolder?.internalPath);
+  const selectedAssetFolderLabel = $derived(
+    getFolderLabelByPath($selectedAssetFolder?.internalPath),
+  );
 
   /**
    * Navigate to the asset list or asset details page given the URL hash.

src/lib/components/assets/details/asset-details-overlay.svelte

@@ -3,44 +3,24 @@
   import { isTextFileType } from '@sveltia/utils/file';
   import DOMPurify from 'isomorphic-dompurify';
   import { marked } from 'marked';
-  import { onMount, tick } from 'svelte';
+  import { tick } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { getAssetBlob, isMediaKind, overlaidAsset, showAssetOverlay } from '$lib/services/assets';
   import EmptyState from '$lib/components/common/empty-state.svelte';
   import InfoPanel from '$lib/components/assets/shared/info-panel.svelte';
   import AssetPreview from '$lib/components/assets/shared/asset-preview.svelte';
   import Toolbar from '$lib/components/assets/details/toolbar.svelte';
 
-  /**
-   * A reference to the wrapper element.
-   * @type {HTMLElement}
-   */
-  let wrapper;
-  /**
-   * A reference to the group element.
-   * @type {HTMLElement}
-   */
-  let group;
-  /**
-   * @type {boolean}
-   */
-  let hiding = false;
-  /**
-   * @type {boolean}
-   */
-  let hidden = true;
-  /**
-   * @type {Blob | undefined}
-   */
-  let blob;
-
-  $: ({ kind, blobURL, name } = $overlaidAsset || /** @type {Asset} */ ({}));
+  /** @type {HTMLElement | undefined} */
+  let wrapper = $state();
+  /** @type {HTMLElement | undefined} */
+  let group = undefined;
+  let hiding = $state(false);
+  let hidden = $state(true);
+  /** @type {Blob | undefined} */
+  let blob = $state();
 
-  $: (async () => {
-    if ($overlaidAsset) {
-      blob = await getAssetBlob($overlaidAsset);
-    }
-  })();
+  const { kind, blobURL, name } = $derived($overlaidAsset ?? /** @type {Asset} */ ({}));
 
   /**
    * Move focus to the wrapper once the overlay is loaded.
@@ -49,22 +29,34 @@
     // Wait until `inert` is updated
     await tick();
 
-    group.tabIndex = 0;
-    group.focus();
+    if (group) {
+      group.tabIndex = 0;
+      group.focus();
+    }
   };
 
-  onMount(() => {
-    group = /** @type {HTMLElement} */ (wrapper.querySelector('[role="group"]'));
+  $effect(() => {
+    if ($overlaidAsset) {
+      (async () => {
+        blob = await getAssetBlob($overlaidAsset);
+      })();
+    }
+  });
 
-    group.addEventListener('transitionend', () => {
-      if (!$showAssetOverlay) {
-        hiding = false;
-        hidden = true;
-      }
-    });
+  $effect(() => {
+    if (wrapper && !group) {
+      group = /** @type {HTMLElement} */ (wrapper.querySelector('[role="group"]'));
+
+      group.addEventListener('transitionend', () => {
+        if (!$showAssetOverlay) {
+          hiding = false;
+          hidden = true;
+        }
+      });
+    }
   });
 
-  $: {
+  $effect(() => {
     if (wrapper) {
       if ($showAssetOverlay) {
         hiding = false;
@@ -74,7 +66,7 @@
         hiding = true;
       }
     }
-  }
+  });
 </script>
 
 <div

src/lib/components/assets/details/edit-asset-dialog.svelte

@@ -4,19 +4,16 @@
   import { editingAsset, getAssetBlob, showAssetOverlay } from '$lib/services/assets';
   import { saveAssets } from '$lib/services/assets/data';
 
-  /** @type {Asset | undefined} */
-  $: asset = $editingAsset;
-
-  /** @type {boolean} */
-  let open = false;
+  const asset = $derived($editingAsset);
+  let open = $state(false);
   /** @type {Blob | undefined} */
-  let blob = undefined;
+  let blob = $state();
   /** @type {string | undefined} */
-  let originalValue = undefined;
+  let originalValue = $state();
   /** @type {string | undefined} */
-  let currentValue = undefined;
+  let currentValue = $state();
   /** @type {boolean | 'mixed'} */
-  let wrap = false;
+  let wrap = $state(false);
 
   /**
    * Initialize the state.
@@ -54,17 +51,17 @@
     }
   };
 
-  $: {
+  $effect(() => {
     if (asset && blob === undefined) {
       initState();
     }
-  }
+  });
 
-  $: {
+  $effect(() => {
     if (!$showAssetOverlay) {
       open = false;
     }
-  }
+  });
 </script>
 
 <Dialog

src/lib/components/assets/details/rename-asset-dialog.svelte

@@ -11,32 +11,35 @@
     showAssetOverlay,
   } from '$lib/services/assets';
 
-  /** @type {Asset | undefined} */
-  $: asset = $renamingAsset;
-
   const componentId = generateUUID('short');
 
-  /** @type {boolean} */
-  let open = false;
-  /** @type {string | undefined} */
-  let dirname = '';
-  /** @type {string} */
-  let filename = '';
-  /** @type {string | undefined} */
-  let extension = '';
-  /** @type {string} */
-  let newName = '';
+  let open = $state(false);
+  /** @type {{ dirname?: string, filename: string, extension?: string }} */
+  let pathInfo = $state({ filename: '' });
+  let newName = $state('');
   /** @type {string[]} */
-  let otherNames = [];
+  let otherNames = $state([]);
   /** @type {Entry[]} */
-  let usedEntries = [];
+  let usedEntries = $state([]);
+
+  const asset = $derived($renamingAsset);
+  const { dirname, filename, extension } = $derived(pathInfo);
+
+  const error = $derived.by(() => {
+    if (!newName.trim()) return 'empty';
+    if (newName.includes('/')) return 'character';
+    if (otherNames.includes(`${newName}${extension ? `.${extension}` : ''}`)) return 'duplicate';
+    return undefined;
+  });
+
+  const invalid = $derived(!!error);
 
   /**
    * Initialize the state.
    */
   const initState = async () => {
     if (asset) {
-      ({ dirname, filename, extension } = getPathInfo(asset.path));
+      pathInfo = getPathInfo(asset.path);
       newName = filename;
       otherNames = getAssetsByDirName(/** @type {string} */ (dirname))
         .map((a) => a.name)
@@ -46,28 +49,18 @@
     }
   };
 
-  $: {
+  $effect(() => {
     if (asset) {
       initState();
     }
-  }
+  });
 
-  $: {
+  $effect(() => {
     if (!$showAssetOverlay) {
       open = false;
       $renamingAsset = undefined;
     }
-  }
-
-  $: error = (() => {
-    if (!newName.trim()) return 'empty';
-    if (newName.includes('/')) return 'character';
-    if (otherNames.includes(`${newName}${extension ? `.${extension}` : ''}`)) return 'duplicate';
-
-    return undefined;
-  })();
-
-  $: invalid = !!error;
+  });
 </script>
 
 <Dialog

src/lib/components/assets/details/toolbar.svelte

@@ -8,7 +8,7 @@
   import { goBack } from '$lib/services/app/navigation';
   import { overlaidAsset, selectedAssetFolder } from '$lib/services/assets';
 
-  $: assets = $overlaidAsset ? [$overlaidAsset] : [];
+  const assets = $derived($overlaidAsset ? [$overlaidAsset] : []);
 </script>
 
 <Toolbar variant="primary" aria-label={$_('primary')}>

src/lib/components/assets/list/asset-list-item.svelte

@@ -6,15 +6,20 @@
   import { listedAssets } from '$lib/services/assets/view';
 
   /**
-   * @type {Asset}
+   * @typedef {object} Props
+   * @property {Asset} asset - Asset.
+   * @property {ViewType} viewType - View type.
    */
-  export let asset;
-  /**
-   * @type {ViewType}
-   */
-  export let viewType;
 
-  $: ({ name, kind } = asset);
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    asset,
+    viewType,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { name, kind } = $derived(asset);
 
   /**
    * Update the asset selection.

src/lib/components/assets/list/asset-list.svelte

@@ -10,9 +10,9 @@
   import { globalAssetFolder, selectedAssetFolder, uploadingAssets } from '$lib/services/assets';
   import { assetGroups, currentView, listedAssets } from '$lib/services/assets/view';
 
-  $: viewType = $currentView.type;
+  const viewType = $derived($currentView.type);
   // Can’t upload assets if collection assets are saved at entry-relative paths
-  $: uploadDisabled = !!$selectedAssetFolder?.entryRelative;
+  const uploadDisabled = $derived(!!$selectedAssetFolder?.entryRelative);
 </script>
 
 <ListContainer aria-label={$_('asset_list')}>

src/lib/components/assets/list/primary-sidebar.svelte

@@ -12,17 +12,17 @@
   import { getFolderLabelByCollection } from '$lib/services/assets/view';
   import { getCollection } from '$lib/services/contents/collection';
 
-  $: numberFormatter = Intl.NumberFormat($appLocale ?? undefined);
+  const numberFormatter = $derived(Intl.NumberFormat($appLocale ?? undefined));
 
-  $: folders = [
+  const folders = $derived([
     {
       collectionName: '*',
       internalPath: undefined,
       publicPath: undefined,
       entryRelative: false,
     },
     ...$allAssetFolders,
-  ];
+  ]);
 </script>
 
 <div role="none" class="primary-sidebar">

src/lib/components/assets/list/primary-toolbar.svelte

@@ -10,7 +10,11 @@
   import { focusedAsset, selectedAssetFolder, selectedAssets } from '$lib/services/assets';
   import { getFolderLabelByPath, listedAssets } from '$lib/services/assets/view';
 
-  $: assets = $selectedAssets.length ? $selectedAssets : $focusedAsset ? [$focusedAsset] : [];
+  const assets = $derived.by(() => {
+    if ($selectedAssets.length) return $selectedAssets;
+    if ($focusedAsset) return [$focusedAsset];
+    return [];
+  });
 </script>
 
 <Toolbar variant="primary" aria-label={$_('folder')}>

src/lib/components/assets/list/secondary-sidebar.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={true} />
+
 <script>
   import { Group } from '@sveltia/ui';
   import { _ } from 'svelte-i18n';

src/lib/components/assets/list/secondary-toolbar.svelte

@@ -8,8 +8,8 @@
   import { assetKinds, selectedAssets } from '$lib/services/assets';
   import { assetGroups, currentView, listedAssets, sortFields } from '$lib/services/assets/view';
 
-  $: hasListedAssets = !!$listedAssets.length;
-  $: hasMultipleAssets = $listedAssets.length > 1;
+  const hasListedAssets = $derived(!!$listedAssets.length);
+  const hasMultipleAssets = $derived($listedAssets.length > 1);
 </script>
 
 <Toolbar variant="secondary" aria-label={$_('asset_list')}>