Migrate to Runes, part 3

sveltia · Dec 22, 2024 · 811d23f · 811d23f
1 parent f2706b9
commit 811d23f
Show file tree

Hide file tree

Showing 22 changed files with 430 additions and 355 deletions.
diff --git a/src/lib/components/contents/contents-page.svelte b/src/lib/components/contents/contents-page.svelte
@@ -23,6 +23,8 @@
   const routeRegex =
     /^\/collections\/(?<_collectionName>[^/]+)(?:\/(?<routeType>new|entries))?(?:\/(?<subPath>.+?))?$/;
 
+  const MainContent = $derived($selectedCollection?.files ? FileList : EntryList);
+
   /**
    * Navigate to the content list or content details page given the URL hash.
    * @todo Show Not Found page.
@@ -165,7 +167,7 @@
           <SecondaryToolbar />
         {/snippet}
         {#snippet mainContent()}
-          <svelte:component this={$selectedCollection?.files ? FileList : EntryList} />
+          <MainContent />
         {/snippet}
         {#snippet secondarySidebar()}
           <SecondarySidebar />

diff --git a/src/lib/components/contents/details/backup-feedback.svelte b/src/lib/components/contents/details/backup-feedback.svelte
@@ -4,26 +4,28 @@
   import { backupToastState, restoreDialogState } from '$lib/services/contents/draft/backup';
   import { showContentOverlay } from '$lib/services/contents/draft/editor';
 
-  $: now = new Date();
-  $: ({ resolve, timestamp } = $restoreDialogState);
-  $: sameYear = now.getUTCFullYear() === timestamp?.getUTCFullYear();
-  $: sameMonth = sameYear && now.getUTCMonth() === timestamp?.getUTCMonth();
-  $: sameDay = sameMonth && now.getUTCDate() === timestamp?.getUTCDate();
-  $: datetime = timestamp?.toLocaleString($appLocale ?? undefined, {
-    year: sameYear ? undefined : 'numeric',
-    month: sameDay ? undefined : 'short',
-    day: sameDay ? undefined : 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-  });
+  const now = $derived(new Date());
+  const { resolve, timestamp } = $derived($restoreDialogState);
+  const sameYear = $derived(now.getUTCFullYear() === timestamp?.getUTCFullYear());
+  const sameMonth = $derived(sameYear && now.getUTCMonth() === timestamp?.getUTCMonth());
+  const sameDay = $derived(sameMonth && now.getUTCDate() === timestamp?.getUTCDate());
+  const datetime = $derived(
+    timestamp?.toLocaleString($appLocale ?? undefined, {
+      year: sameYear ? undefined : 'numeric',
+      month: sameDay ? undefined : 'short',
+      day: sameDay ? undefined : 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    }),
+  );
 
-  $: {
+  $effect(() => {
     if (!$showContentOverlay && $restoreDialogState.show) {
       // Close the dialog when the Content Editor is closed
       $restoreDialogState.show = false;
       resolve?.();
     }
-  }
+  });
 </script>
 
 <ConfirmationDialog

diff --git a/src/lib/components/contents/details/content-details-overlay.svelte b/src/lib/components/contents/details/content-details-overlay.svelte
@@ -22,39 +22,38 @@
   import { defaultI18nConfig, getLocaleLabel } from '$lib/services/contents/i18n';
 
   /**
+   * A reference to the group element.
    * @type {HTMLElement | undefined}
    */
-  let leftPaneContentArea;
-  /**
-   * @type {HTMLElement | undefined}
-   */
-  let rightPaneContentArea;
-  /**
-   * @type {boolean}
-   */
+  let group = undefined;
   let restoring = false;
 
-  $: ({ editor: { preview: showPreviewPane = true } = {} } =
-    $siteConfig ?? /** @type {SiteConfig} */ ({}));
-  $: ({ collection, collectionFile, originalEntry } =
-    $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: entryId =
-    originalEntry?.id ?? [collection?.name ?? '-', collectionFile?.name ?? '-'].join('/');
-  $: ({ showPreview } = $entryEditorSettings ?? {});
-  $: ({ i18nEnabled, locales, defaultLocale } =
-    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
-  $: canPreview = (collectionFile ?? collection)?.editor?.preview ?? showPreviewPane;
-  $: paneStateKey = collectionFile?.name
-    ? [collection?.name, collectionFile.name].join('|')
-    : collection?.name;
-
-  $: {
-    if (paneStateKey) {
-      // Reset the editor panes
-      $editorLeftPane = null;
-      $editorRightPane = null;
-    }
-  }
+  let hiding = $state(false);
+  let hidden = $state(true);
+  /** @type {HTMLElement | undefined} */
+  let wrapper = $state();
+  /** @type {HTMLElement | undefined} */
+  let leftPaneContentArea = $state();
+  /** @type {HTMLElement | undefined} */
+  let rightPaneContentArea = $state();
+
+  const { editor: { preview: showPreviewPane = true } = {} } = $derived(
+    $siteConfig ?? /** @type {SiteConfig} */ ({}),
+  );
+  const { collection, collectionFile, originalEntry } = $derived(
+    $entryDraft ?? /** @type {EntryDraft} */ ({}),
+  );
+  const entryId = $derived(
+    originalEntry?.id ?? [collection?.name ?? '-', collectionFile?.name ?? '-'].join('/'),
+  );
+  const { showPreview } = $derived($entryEditorSettings ?? {});
+  const { i18nEnabled, locales, defaultLocale } = $derived(
+    (collectionFile ?? collection)?._i18n ?? defaultI18nConfig,
+  );
+  const canPreview = $derived((collectionFile ?? collection)?.editor?.preview ?? showPreviewPane);
+  const paneStateKey = $derived(
+    collectionFile?.name ? [collection?.name, collectionFile.name].join('|') : collection?.name,
+  );
 
   /**
    * Restore the pane state from IndexedDB.
@@ -108,12 +107,6 @@
     }
   };
 
-  $: {
-    void showPreview;
-    void canPreview;
-    switchPanes();
-  }
-
   /**
    * Save the pane state to IndexedDB.
    */
@@ -131,44 +124,21 @@
     }));
   };
 
-  $: {
-    void $editorLeftPane;
-    void $editorRightPane;
-    savePanes();
-  }
-
-  /**
-   * 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;
-
   /**
    * Move focus to the wrapper once the overlay is loaded.
    */
   const moveFocus = async () => {
     // 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"]'));
+    group = /** @type {HTMLElement} */ (wrapper?.querySelector('[role="group"]'));
 
     group.addEventListener('transitionend', () => {
       if (!$showContentOverlay) {
@@ -179,7 +149,27 @@
     });
   });
 
-  $: {
+  $effect(() => {
+    if (paneStateKey) {
+      // Reset the editor panes
+      $editorLeftPane = null;
+      $editorRightPane = null;
+    }
+  });
+
+  $effect(() => {
+    void showPreview;
+    void canPreview;
+    switchPanes();
+  });
+
+  $effect(() => {
+    void $editorLeftPane;
+    void $editorRightPane;
+    savePanes();
+  });
+
+  $effect(() => {
     if (wrapper) {
       if (!$showContentOverlay) {
         hiding = true;
@@ -192,7 +182,7 @@
         resetBackupToastState();
       }
     }
-  }
+  });
 </script>
 
 <div

diff --git a/src/lib/components/contents/details/editor/copy-menu-items.svelte b/src/lib/components/contents/details/editor/copy-menu-items.svelte
@@ -7,37 +7,38 @@
   import { translator } from '$lib/services/integrations/translators';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
+   * @property {LocaleCode[]} otherLocales - Other locales.
+   * @property {FieldKeyPath} [keyPath] - Field key path.
+   * @property {boolean} [translate] - Whether to translate the field.
    */
-  export let locale;
-  /**
-   * @type {LocaleCode[]}
-   */
-  export let otherLocales;
-  /**
-   * @type {FieldKeyPath}
-   */
-  export let keyPath = '';
-  /**
-   * @type {boolean}
-   */
-  export let translate = false;
 
-  $: ({ currentLocales = {}, currentValues = {} } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
-  $: ({ getSourceLanguage, getTargetLanguage } = $translator);
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    otherLocales,
+    keyPath = '',
+    translate = false,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const { getSourceLanguage, getTargetLanguage } = $derived($translator);
 </script>
 
 {#each otherLocales as otherLocale}
   <MenuItem
     label={$_(translate ? 'translate_from_x' : 'copy_from_x', {
       values: { locale: getLocaleLabel(otherLocale) },
     })}
-    disabled={!currentLocales[locale] ||
-      !currentLocales[otherLocale] ||
-      (keyPath && !currentValues[otherLocale][keyPath]) ||
+    disabled={!$entryDraft?.currentLocales[locale] ||
+      !$entryDraft?.currentLocales[otherLocale] ||
+      (keyPath && !$entryDraft?.currentValues[otherLocale][keyPath]) ||
       (!translate &&
         keyPath &&
-        currentValues[otherLocale][keyPath] === currentValues[locale][keyPath]) ||
+        $entryDraft?.currentValues[otherLocale][keyPath] ===
+          $entryDraft?.currentValues[locale][keyPath]) ||
       (translate && (!getSourceLanguage(locale) || !getTargetLanguage(otherLocale)))}
     onclick={() => {
       copyFromLocale(otherLocale, locale, { keyPath, translate });

diff --git a/src/lib/components/contents/details/editor/entry-editor.svelte b/src/lib/components/contents/details/editor/entry-editor.svelte
@@ -4,13 +4,19 @@
   import { entryDraft } from '$lib/services/contents/draft';
 
   /**
-   * @type {LocaleCode}
+   * @typedef {object} Props
+   * @property {LocaleCode} locale - Current pane’s locale.
    */
-  export let locale;
 
-  $: ({ collection, collectionFile } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    locale,
+    /* eslint-enable prefer-const */
+  } = $props();
 
-  $: fields = collectionFile?.fields ?? collection?.fields ?? [];
+  const { collection, collectionFile } = $derived($entryDraft ?? /** @type {EntryDraft} */ ({}));
+  const fields = $derived(collectionFile?.fields ?? collection?.fields ?? []);
 </script>
 
 {#each fields as fieldConfig (fieldConfig.name)}