Improve nested list/object performance

kyoshino · kyoshino · commit a2f93ded700c · 2026-08-06T18:13:11.000-04:00
Fix #628 Fix #877
diff --git a/src/lib/components/contents/details/editor/copy-menu-items.svelte b/src/lib/components/contents/details/editor/copy-menu-items.svelte
@@ -4,6 +4,7 @@
 
   import { entryDraft } from '$lib/services/contents/draft';
   import { copyFromLocale } from '$lib/services/contents/draft/update/copy';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getLocaleLabel } from '$lib/services/contents/i18n';
   import { translator } from '$lib/services/integrations/translators';
 
@@ -38,11 +39,11 @@
   const isMenuDisabled = async ({ sourceLanguage, targetLanguage }) =>
     !$entryDraft?.currentLocales[targetLanguage] ||
     !$entryDraft.currentLocales[sourceLanguage] ||
-    (!!keyPath && !$state.snapshot($entryDraft.currentValues[sourceLanguage])[keyPath]) ||
+    (!!keyPath && !getValueMapSnapshot($entryDraft, sourceLanguage)[keyPath]) ||
     (!translate &&
       !!keyPath &&
-      $state.snapshot($entryDraft.currentValues[sourceLanguage])[keyPath] ===
-        $state.snapshot($entryDraft.currentValues[targetLanguage])[keyPath]) ||
+      getValueMapSnapshot($entryDraft, sourceLanguage)[keyPath] ===
+        getValueMapSnapshot($entryDraft, targetLanguage)[keyPath]) ||
     (translate && !(await $translator?.availability({ sourceLanguage, targetLanguage })));
 </script>
 
diff --git a/src/lib/components/contents/details/editor/field-editor.svelte b/src/lib/components/contents/details/editor/field-editor.svelte
@@ -19,6 +19,7 @@
     resolveOriginalKeyPath,
     revertChanges,
   } from '$lib/services/contents/draft/update/revert';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import {
     getCurrentValue,
     getFieldKind,
@@ -152,7 +153,7 @@
   const canCopy = $derived(!inEditorComponent && canTranslate && otherLocales.length);
   const canRevert = $derived(!inEditorComponent && !(canDuplicate && locale !== defaultLocale));
   const keyPathRegex = $derived(new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+$`));
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale] ?? {}));
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const customFieldType = $derived(customFieldTypeRegistry.get(fieldType));
   const currentValue = $derived(
     getCurrentValue({
diff --git a/src/lib/components/contents/details/fields/code/code-editor.svelte b/src/lib/components/contents/details/fields/code/code-editor.svelte
@@ -10,6 +10,7 @@
   import { getContext, untrack } from 'svelte';
 
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
 
   /**
    * @import { FieldEditorContext, FieldEditorProps } from '$lib/types/private';
@@ -48,7 +49,7 @@
     output_code_only: outputCodeOnly = false,
     keys: outputKeys = { code: 'code', lang: 'lang' },
   } = $derived(fieldConfig);
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const codeKeyPath = $derived(`${keyPath}.${outputKeys.code}`);
   const langKeyPath = $derived(`${keyPath}.${outputKeys.lang}`);
 
diff --git a/src/lib/components/contents/details/fields/code/code-preview.svelte b/src/lib/components/contents/details/fields/code/code-preview.svelte
@@ -6,6 +6,7 @@
 -->
 <script>
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
 
   /**
    * @import { FieldEditorProps } from '$lib/types/private';
@@ -33,7 +34,7 @@
     output_code_only: outputCodeOnly = false,
     keys: outputKeys = { code: 'code', lang: 'lang' },
   } = $derived(fieldConfig);
-  const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale));
   const codeKeyPath = $derived(`${keyPath}.${outputKeys.code}`);
   const langKeyPath = $derived(`${keyPath}.${outputKeys.lang}`);
   const code = $derived(outputCodeOnly ? currentValue : valueMap[codeKeyPath]);
diff --git a/src/lib/components/contents/details/fields/compute/compute-editor.svelte b/src/lib/components/contents/details/fields/compute/compute-editor.svelte
@@ -10,6 +10,7 @@
   import { replaceTemplateTags } from '$lib/services/common/template';
   import { applyTransformations, parseTransformations } from '$lib/services/common/transformations';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getFieldDisplayValue } from '$lib/services/contents/entry/fields';
   import { getListFormatter } from '$lib/services/contents/i18n';
   import { isNumeric } from '$lib/services/utils/number';
@@ -46,7 +47,7 @@
   const isIndexFile = $derived($entryDraft?.isIndexFile ?? false);
   const collectionName = $derived($entryDraft?.collectionName ?? '');
   const fileName = $derived($entryDraft?.fileName);
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const listFormatter = $derived(getListFormatter(locale));
 
   /**
diff --git a/src/lib/components/contents/details/fields/file/file-editor.svelte b/src/lib/components/contents/details/fields/file/file-editor.svelte
@@ -18,6 +18,7 @@
   import FileEditorItem from '$lib/components/contents/details/fields/file/file-editor-item.svelte';
   import UploadButton from '$lib/components/contents/details/fields/file/upload-button.svelte';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { checkDuplicates } from '$lib/services/contents/fields/file/duplicates.svelte';
   import {
     getAssetLibraryFolderMap,
@@ -287,7 +288,7 @@
       return;
     }
 
-    const valueMap = $state.snapshot($entryDraft[valueStoreKey][locale]);
+    const valueMap = getValueMapSnapshot($entryDraft, locale, valueStoreKey);
     /** @type {string[]} */
     const updatedValue = [];
 
diff --git a/src/lib/components/contents/details/fields/key-value/key-value-editor.svelte b/src/lib/components/contents/details/fields/key-value/key-value-editor.svelte
@@ -12,6 +12,7 @@
 
   import ValidationError from '$lib/components/contents/details/editor/validation-error.svelte';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import {
     getPairs,
     savePairs,
@@ -152,7 +153,7 @@
   };
 
   $effect(() => {
-    void [$state.snapshot($entryDraft?.[valueStoreKey][locale])];
+    void [getValueMapSnapshot($entryDraft, locale, valueStoreKey)];
 
     untrack(() => {
       updatePairs();
diff --git a/src/lib/components/contents/details/fields/key-value/key-value-preview.svelte b/src/lib/components/contents/details/fields/key-value/key-value-preview.svelte
@@ -10,6 +10,7 @@
   import { untrack } from 'svelte';
 
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getPairs } from '$lib/services/contents/fields/key-value/helpers';
 
   /**
@@ -58,7 +59,7 @@
 
   $effect(() => {
     if ($entryDraft) {
-      void [$state.snapshot($entryDraft.currentValues[locale])];
+      void [getValueMapSnapshot($entryDraft, locale)];
 
       untrack(() => {
         updatePairs();
diff --git a/src/lib/components/contents/details/fields/list/list-editor-complex.svelte b/src/lib/components/contents/details/fields/list/list-editor-complex.svelte
@@ -32,6 +32,7 @@
   import { entryDraft } from '$lib/services/contents/draft';
   import { getDefaultValues } from '$lib/services/contents/draft/defaults';
   import { updateListField } from '$lib/services/contents/draft/update/list';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import {
     getInitialExpanderState,
     syncExpanderStates,
@@ -103,7 +104,7 @@
   const fileName = $derived($entryDraft?.fileName);
   const { defaultLocale } = $derived((collectionFile ?? collection)?._i18n ?? DEFAULT_I18N_CONFIG);
   const isDuplicateField = $derived(locale !== defaultLocale && i18n === 'duplicate');
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const parentExpandedKeyPath = $derived(`${keyPath}#`);
   const parentExpanded = $derived($entryDraft?.expanderStates?._[parentExpandedKeyPath] ?? true);
   /** @type {Record<string, any>[]} */
diff --git a/src/lib/components/contents/details/fields/list/list-preview-complex.svelte b/src/lib/components/contents/details/fields/list/list-preview-complex.svelte
@@ -13,6 +13,7 @@
   import Subsection from '$lib/components/contents/details/fields/object/subsection.svelte';
   import FieldPreview from '$lib/components/contents/details/preview/field-preview.svelte';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getListFieldInfo } from '$lib/services/contents/fields/list/helpers';
 
   /**
@@ -50,7 +51,7 @@
   const items = $derived(
     unflatten(
       Object.fromEntries(
-        Object.entries($state.snapshot($entryDraft?.currentValues[locale]) ?? {})
+        Object.entries(getValueMapSnapshot($entryDraft, locale))
           .filter(([_keyPath]) => keyPathRegex.test(_keyPath))
           .map(([_keyPath, value]) => [`${fieldName}${_keyPath.slice(keyPath.length)}`, value]),
       ),
diff --git a/src/lib/components/contents/details/fields/object/object-editor.svelte b/src/lib/components/contents/details/fields/object/object-editor.svelte
@@ -16,6 +16,7 @@
   import { entryDraft, i18nAutoDupEnabled } from '$lib/services/contents/draft';
   import { getDefaultValues } from '$lib/services/contents/draft/defaults';
   import { copyDefaultLocaleValues } from '$lib/services/contents/draft/update/locale';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import {
     getInitialExpanderState,
     syncExpanderStates,
@@ -73,7 +74,7 @@
   const collectionFile = $derived($entryDraft?.collectionFile);
   const fileName = $derived($entryDraft?.fileName);
   const { defaultLocale } = $derived((collectionFile ?? collection)?._i18n ?? DEFAULT_I18N_CONFIG);
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const getFieldArgs = $derived({ collectionName, fileName, valueMap, isIndexFile });
   const hasValues = $derived(
     Object.entries(valueMap).some(
diff --git a/src/lib/components/contents/details/fields/object/object-preview.svelte b/src/lib/components/contents/details/fields/object/object-preview.svelte
@@ -10,6 +10,7 @@
   import Subsection from '$lib/components/contents/details/fields/object/subsection.svelte';
   import FieldPreview from '$lib/components/contents/details/preview/field-preview.svelte';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
 
   /**
    * @import { FieldPreviewProps } from '$lib/types/private';
@@ -38,7 +39,7 @@
 
   const { fields } = $derived(/** @type {ObjectFieldWithSubFields} */ (fieldConfig));
   const { types, typeKey = 'type' } = $derived(/** @type {ObjectFieldWithTypes} */ (fieldConfig));
-  const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale));
   const hasValues = $derived(
     Object.entries(valueMap).some(
       ([_keyPath, value]) => !!_keyPath.startsWith(`${keyPath}.`) && !!value,
diff --git a/src/lib/components/contents/details/fields/rich-text/editor-component.svelte b/src/lib/components/contents/details/fields/rich-text/editor-component.svelte
@@ -12,6 +12,7 @@
   import { entryDraft } from '$lib/services/contents/draft';
   import { getDefaultValues } from '$lib/services/contents/draft/defaults';
   import { validateFields } from '$lib/services/contents/draft/validate/fields';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
 
   /**
    * @import {
@@ -121,7 +122,7 @@
 
     return unflatten(
       Object.fromEntries(
-        Object.entries($state.snapshot($entryDraft[valueStoreKey][locale] ?? {}))
+        Object.entries(getValueMapSnapshot($entryDraft, locale, valueStoreKey))
           .filter(([key]) => key.startsWith(keyPathPrefix))
           .map(([key, value]) => [key.replace(keyPathPrefix, ''), value]),
       ),
diff --git a/src/lib/components/contents/details/fields/rich-text/rich-text-editor.svelte b/src/lib/components/contents/details/fields/rich-text/rich-text-editor.svelte
@@ -18,6 +18,7 @@
   import { customComponentRegistry } from '$lib/services/api/registries';
   import { cmsConfig } from '$lib/services/config';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getField } from '$lib/services/contents/entry/fields';
   import {
     getAssetLibraryFolderMap,
@@ -107,7 +108,7 @@
   const isIndexFile = $derived($entryDraft?.isIndexFile ?? false);
   const collectionName = $derived($entryDraft?.collectionName ?? '');
   const fileName = $derived($entryDraft?.fileName);
-  const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale, valueStoreKey));
   const buttons = $derived(
     [
       ..._buttons,
diff --git a/src/lib/components/contents/details/fields/select/select-multiple.svelte b/src/lib/components/contents/details/fields/select/select-multiple.svelte
@@ -43,7 +43,7 @@
   const updateList = (manipulate) => {
     // Avoid an error while navigating pages
     if ($entryDraft) {
-      Object.keys($state.snapshot($entryDraft[valueStoreKey]) ?? {}).forEach((_locale) => {
+      Object.keys($entryDraft[valueStoreKey] ?? {}).forEach((_locale) => {
         if (!(i18n !== 'duplicate' && _locale !== locale)) {
           updateListField({ locale: _locale, valueStoreKey, keyPath, manipulate });
         }
diff --git a/src/lib/components/contents/details/pane-body.svelte b/src/lib/components/contents/details/pane-body.svelte
@@ -36,7 +36,7 @@
   const { syncScrolling } = $derived($entryEditorSettings ?? {});
   const locale = $derived($thisPane?.locale);
   const mode = $derived($thisPane?.mode);
-  const hasContent = $derived(!!locale && !!$state.snapshot($entryDraft?.currentValues[locale]));
+  const hasContent = $derived(!!locale && !!$entryDraft?.currentValues[locale]);
   const labelOptions = $derived({
     values: { locale: locale ? (getLocaleLabel(locale) ?? locale) : '' },
   });
diff --git a/src/lib/components/contents/details/pane-header.svelte b/src/lib/components/contents/details/pane-header.svelte
@@ -12,6 +12,7 @@
   import { entryDraft, filterRealValues } from '$lib/services/contents/draft';
   import { toggleLocale } from '$lib/services/contents/draft/update/locale';
   import { revertChanges } from '$lib/services/contents/draft/update/revert';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { getEntryPreviewURL, getEntryRepoBlobURL } from '$lib/services/contents/entry';
   import { getLocaleLabel } from '$lib/services/contents/i18n';
   import { DEFAULT_I18N_CONFIG } from '$lib/services/contents/i18n/config';
@@ -60,7 +61,7 @@
       !equal(
         originalValues[$thisPane.locale],
         // Exclude internal properties from the comparison
-        filterRealValues($state.snapshot($entryDraft?.currentValues[$thisPane.locale]) ?? {}),
+        filterRealValues(getValueMapSnapshot($entryDraft, $thisPane.locale)),
       ),
   );
   const canPreview = $derived($entryDraft?.canPreview ?? true);
@@ -113,7 +114,7 @@
                 label={_(
                   isLocaleEnabled
                     ? 'disable_x_locale'
-                    : $state.snapshot($entryDraft?.currentValues[$thisPane.locale])
+                    : $entryDraft?.currentValues[$thisPane.locale]
                       ? 'reenable_x_locale'
                       : 'enable_x_locale',
                   { values: { locale: localeLabel } },
diff --git a/src/lib/components/contents/details/preview/field-preview.svelte b/src/lib/components/contents/details/preview/field-preview.svelte
@@ -4,6 +4,7 @@
   import { CustomPreview, previews } from '$lib/components/contents/details/fields';
   import { customFieldTypeRegistry } from '$lib/services/api/registries';
   import { entryDraft } from '$lib/services/contents/draft';
+  import { getValueMapSnapshot } from '$lib/services/contents/draft/value-map.svelte';
   import { highlightEditorField } from '$lib/services/contents/editor/fields';
   import { getCurrentValue, isFieldMultiple } from '$lib/services/contents/entry/fields';
   import { DEFAULT_I18N_CONFIG } from '$lib/services/contents/i18n/config';
@@ -39,7 +40,7 @@
   const isList = $derived(fieldType === 'list' || multiple);
   const collection = $derived($entryDraft?.collection);
   const collectionFile = $derived($entryDraft?.collectionFile);
-  const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale] ?? {}));
+  const valueMap = $derived(getValueMapSnapshot($entryDraft, locale));
   const { i18nEnabled, defaultLocale } = $derived(
     (collectionFile ?? collection)?._i18n ?? DEFAULT_I18N_CONFIG,
   );
diff --git a/src/lib/services/contents/draft/value-map.svelte.js b/src/lib/services/contents/draft/value-map.svelte.js
@@ -0,0 +1,57 @@
+import { entryDraft } from '$lib/services/contents/draft';
+
+/**
+ * @import {
+ * DraftValueStoreKey,
+ * EntryDraft,
+ * FlattenedEntryContent,
+ * InternalLocaleCode,
+ * } from '$lib/types/private';
+ */
+
+/**
+ * Cache of value map snapshots for the current entry draft, keyed by value store key and locale.
+ * This is intentionally a plain `Map`, not a `SvelteMap`: it’s a memo of the store’s current value,
+ * and making it reactive would add a spurious dependency to every field editor that reads it.
+ * @type {Map<string, FlattenedEntryContent>}
+ */
+// eslint-disable-next-line svelte/prefer-svelte-reactivity
+const snapshotCache = new Map();
+
+// Any mutation of the draft ends up calling `entryDraft.set()` — including a nested one made
+// through the `$entryDraft` store in a component, which Svelte compiles to a store mutation — so
+// clearing the cache here keeps the snapshots exactly as fresh as a per-component `$derived`.
+entryDraft.subscribe(() => {
+  snapshotCache.clear();
+});
+
+/**
+ * Get a snapshot of the flattened entry content for the given locale, detached from the Proxy in
+ * {@link EntryDraft}. The result is cached and shared between callers until the draft is updated
+ * next. The editor renders one component per field, and each of them needs the whole content to
+ * resolve variable types and list items, so snapshotting it separately in every component is
+ * prohibitively expensive for large entries.
+ * @param {EntryDraft | null | undefined} draft Entry draft.
+ * @param {InternalLocaleCode} locale Locale code.
+ * @param {DraftValueStoreKey} [valueStoreKey] Key to read the values from.
+ * @returns {FlattenedEntryContent} Flattened entry content. An empty object if unavailable.
+ */
+export const getValueMapSnapshot = (draft, locale, valueStoreKey = 'currentValues') => {
+  if (!draft) {
+    return {};
+  }
+
+  const cacheKey = `${valueStoreKey}\n${locale}`;
+  const cached = snapshotCache.get(cacheKey);
+
+  if (cached) {
+    return cached;
+  }
+
+  /** @type {FlattenedEntryContent} */
+  const snapshot = $state.snapshot(draft[valueStoreKey]?.[locale]) ?? {};
+
+  snapshotCache.set(cacheKey, snapshot);
+
+  return snapshot;
+};
diff --git a/src/lib/services/contents/draft/value-map.test.js b/src/lib/services/contents/draft/value-map.test.js
diff --git a/src/lib/services/contents/editor/fields.js b/src/lib/services/contents/editor/fields.js
diff --git a/src/lib/services/contents/editor/fields.test.js b/src/lib/services/contents/editor/fields.test.js
