Fix #111 - Add experimental compute widget

Author: kyoshino

src/lib/components/contents/details/editor/field-editor.svelte

@@ -89,7 +89,7 @@
   $: validity = validities[locale][keyPath];
 
   $: fieldLabel = label || fieldName;
-  $: readonly = i18n === 'duplicate' && locale !== defaultLocale;
+  $: readonly = (i18n === 'duplicate' && locale !== defaultLocale) || widgetName === 'compute';
   $: invalid = validity?.valid === false;
 </script>
 

src/lib/components/contents/details/widgets/compute/compute-editor.svelte

@@ -0,0 +1,96 @@
+<!--
+  @component
+  Implement the editor for the experimental Compute widget.
+-->
+<script>
+  import { TextInput } from '@sveltia/ui';
+  import { entryDraft } from '$lib/services/contents/editor';
+  import { getFieldDisplayValue } from '$lib/services/contents/entry';
+  import { getCanonicalLocale } from '$lib/services/contents/i18n';
+
+  /**
+   * @type {LocaleCode}
+   */
+  export let locale;
+  /**
+   * @type {string}
+   */
+  // svelte-ignore unused-export-let
+  export let keyPath;
+  /**
+   * @type {string}
+   */
+  export let fieldId;
+  /**
+   * @type {string}
+   */
+  // svelte-ignore unused-export-let
+  export let fieldLabel;
+  /**
+   * @type {ComputeField}
+   */
+  export let fieldConfig;
+  /**
+   * @type {string}
+   */
+  export let currentValue;
+  /**
+   * @type {boolean}
+   */
+  export let readonly = false;
+  /**
+   * @type {boolean}
+   */
+  export let required = false;
+  /**
+   * @type {boolean}
+   */
+  export let invalid = false;
+
+  $: ({
+    // Widget-specific options
+    value: valueTemplate = '',
+  } = fieldConfig);
+
+  $: ({ collectionName, fileName, currentValues } = $entryDraft ?? /** @type {EntryDraft} */ ({}));
+  $: valueMap = currentValues[locale];
+  $: canonicalLocale = getCanonicalLocale(locale);
+  $: listFormatter = new Intl.ListFormat(canonicalLocale, { style: 'narrow', type: 'conjunction' });
+
+  /**
+   * Update {@link currentValue} based on the current values.
+   */
+  const updateCurrentValue = () => {
+    const newValue = valueTemplate.replaceAll(/{{fields\.(.+?)}}/g, (_match, _fieldName) => {
+      const value = getFieldDisplayValue({
+        collectionName,
+        fileName,
+        valueMap,
+        keyPath: _fieldName,
+        locale,
+      });
+
+      return Array.isArray(value) ? listFormatter.format(value) : String(value);
+    });
+
+    // Make sure to avoid infinite loops
+    if (currentValue !== newValue) {
+      currentValue = newValue;
+    }
+  };
+
+  $: {
+    void valueMap;
+    updateCurrentValue();
+  }
+</script>
+
+<TextInput
+  value={currentValue}
+  flex
+  {readonly}
+  {required}
+  {invalid}
+  aria-labelledby="{fieldId}-label"
+  aria-errormessage="{fieldId}-error"
+/>

src/lib/components/contents/details/widgets/index.js

@@ -2,6 +2,7 @@ import BooleanEditor from '$lib/components/contents/details/widgets/boolean/bool
 import BooleanPreview from '$lib/components/contents/details/widgets/boolean/boolean-preview.svelte';
 import ColorEditor from '$lib/components/contents/details/widgets/color/color-editor.svelte';
 import ColorPreview from '$lib/components/contents/details/widgets/color/color-preview.svelte';
+import ComputeEditor from '$lib/components/contents/details/widgets/compute/compute-editor.svelte';
 import DateTimeEditor from '$lib/components/contents/details/widgets/date-time/date-time-editor.svelte';
 import DateTimePreview from '$lib/components/contents/details/widgets/date-time/date-time-preview.svelte';
 import FileEditor from '$lib/components/contents/details/widgets/file/file-editor.svelte';
@@ -31,6 +32,7 @@ import UuidPreview from '$lib/components/contents/details/widgets/uuid/uuid-prev
 export const editors = {
   boolean: BooleanEditor,
   color: ColorEditor,
+  compute: ComputeEditor,
   datetime: DateTimeEditor,
   file: FileEditor,
   image: FileEditor, // alias
@@ -51,6 +53,7 @@ export const editors = {
 export const previews = {
   boolean: BooleanPreview,
   color: ColorPreview,
+  compute: StringPreview, // alias
   datetime: DateTimePreview,
   file: FilePreview,
   image: FilePreview, // alias

src/lib/services/contents/editor.js

@@ -770,7 +770,7 @@ const validateEntry = () => {
         }
       }
 
-      if (!['object', 'list', 'hidden'].includes(widgetName)) {
+      if (!['object', 'list', 'hidden', 'compute'].includes(widgetName)) {
         if (_required && (value === undefined || value === '' || (multiple && !value.length))) {
           valueMissing = true;
         }

src/lib/typedefs.js

@@ -409,6 +409,17 @@
  * @typedef {CommonFieldProps & ColorFieldProps} ColorField
  */
 
+/**
+ * Compute field properties.
+ * @typedef {object} ComputeFieldProps
+ * @property {string} value Value template, like `posts-{{fields.slug}}`.
+ */
+
+/**
+ * Compute field definition.
+ * @typedef {CommonFieldProps & ComputeFieldProps} ComputeField
+ */
+
 /**
  * DateTime field properties.
  * @typedef {object} DateTimeFieldProps