Consolidate list formatters

sveltia · Jul 3, 2024 · 1054eed · 1054eed
1 parent d707aa1
commit 1054eed
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 18 deletions.
diff --git a/src/lib/components/contents/details/widgets/compute/compute-editor.svelte b/src/lib/components/contents/details/widgets/compute/compute-editor.svelte
@@ -7,7 +7,7 @@
   import { TextInput } from '@sveltia/ui';
   import { entryDraft } from '$lib/services/contents/draft';
   import { getFieldDisplayValue } from '$lib/services/contents/entry';
-  import { getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -55,8 +55,7 @@
 
   $: ({ collectionName, fileName, currentValues } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
   $: valueMap = currentValues[locale];
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
 
   /**
    * Update {@link currentValue} based on the current values.

diff --git a/src/lib/components/contents/details/widgets/list/list-editor.svelte b/src/lib/components/contents/details/widgets/list/list-editor.svelte
@@ -18,7 +18,7 @@
   import { syncExpanderStates } from '$lib/services/contents/draft/editor';
   import { updateListField } from '$lib/services/contents/draft/update';
   import { getFieldDisplayValue } from '$lib/services/contents/entry';
-  import { defaultI18nConfig, getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { defaultI18nConfig, getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -86,8 +86,7 @@
   $: ({ defaultLocale } = (collectionFile ?? collection)?._i18n ?? defaultI18nConfig);
   $: isDuplicateField = locale !== defaultLocale && i18n === 'duplicate';
   $: valueMap = currentValues[locale];
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
   $: parentExpandedKeyPath = `${keyPath}#`;
   $: parentExpanded = expanderStates?._[parentExpandedKeyPath] ?? true;
 

diff --git a/src/lib/components/contents/details/widgets/list/list-preview.svelte b/src/lib/components/contents/details/widgets/list/list-preview.svelte
@@ -9,7 +9,7 @@
   import { unflatten } from 'flat';
   import FieldPreview from '$lib/components/contents/details/preview/field-preview.svelte';
   import { entryDraft } from '$lib/services/contents/draft';
-  import { getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -41,8 +41,7 @@
   } = fieldConfig);
   $: hasSubFields = !!(field ?? fields ?? types);
   $: keyPathRegex = new RegExp(`^${escapeRegExp(keyPath)}\\.\\d+`);
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
 
   $: items =
     unflatten(

diff --git a/src/lib/components/contents/details/widgets/object/object-editor.svelte b/src/lib/components/contents/details/widgets/object/object-editor.svelte
@@ -17,7 +17,7 @@
   import { syncExpanderStates } from '$lib/services/contents/draft/editor';
   import { copyDefaultLocaleValues } from '$lib/services/contents/draft/update';
   import { getFieldDisplayValue } from '$lib/services/contents/entry';
-  import { defaultI18nConfig, getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { defaultI18nConfig, getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -79,8 +79,7 @@
     ([_keyPath, value]) => !!_keyPath.startsWith(`${keyPath}.`) && value !== null,
   );
   $: canEdit = locale === defaultLocale || i18n !== false;
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
   $: parentExpandedKeyPath = `${keyPath}#`;
   $: parentExpanded = expanderStates?._[parentExpandedKeyPath] ?? true;
   $: hasVariableTypes = Array.isArray(types);

diff --git a/src/lib/components/contents/details/widgets/relation/relation-preview.svelte b/src/lib/components/contents/details/widgets/relation/relation-preview.svelte
@@ -6,7 +6,7 @@
 <script>
   import { getOptions } from '$lib/components/contents/details/widgets/relation/helper';
   import { getEntriesByCollection, getFile } from '$lib/services/contents';
-  import { getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -57,8 +57,7 @@
       return value;
     });
 
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
 </script>
 
 {#if refValues.length}

diff --git a/src/lib/components/contents/details/widgets/select/select-preview.svelte b/src/lib/components/contents/details/widgets/select/select-preview.svelte
@@ -5,7 +5,7 @@
 -->
 <script>
   import { isObjectArray } from '@sveltia/utils/object';
-  import { getCanonicalLocale } from '$lib/services/contents/i18n';
+  import { getListFormatter } from '$lib/services/contents/i18n';
 
   /**
    * @type {LocaleCode}
@@ -27,8 +27,7 @@
 
   $: ({ options, multiple } = fieldConfig);
   $: hasLabels = isObjectArray(options);
-  $: canonicalLocale = getCanonicalLocale(locale);
-  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+  $: listFormatter = getListFormatter(locale);
 
   /**
    * Get the display label by value.

diff --git a/src/lib/services/contents/i18n.js b/src/lib/services/contents/i18n.js
@@ -136,3 +136,16 @@ export const getLocaleLabel = (locale) => {
     return locale;
   }
 };
+
+/**
+ * Get a simple list formatter.
+ * @param {LocaleCode} locale - Locale code.
+ * @param {Partial<Intl.ListFormatOptions>} options - Format options.
+ * @returns {Intl.ListFormat} Formatter.
+ */
+export const getListFormatter = (locale, options = {}) =>
+  new Intl.ListFormat(getCanonicalLocale(locale), {
+    style: 'narrow',
+    type: 'conjunction',
+    ...options,
+  });