@ditojs/admin 3.2.4 → 3.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/main/packages/admin",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "32147a4ee71f5bca6c051af04be9c15a16f37567"
+  "gitHead": "f149113bc95317c74b17f4af56ccfebed789c47b"
 }

package/src/components/DitoDialog.vue

@@ -182,7 +182,7 @@ export default DitoComponent.component('DitoDialog', {
 
     async submit() {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       this.resolve(this.dialogData)
     },
 

package/src/components/DitoForm.vue

@@ -465,7 +465,7 @@ export default DitoComponent.component('DitoForm', {
 
     async submit(button, { validate = true, closeForm = false } = {}) {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       if (validate && !this.validateAll()) {
         return false
       }

package/src/mixins/DitoMixin.js

@@ -497,17 +497,6 @@ export default {
         : parentComponentPath
     },
 
-    // Waits for the pending loads of the data model, e.g. before submitting,
-    // showing the spinner in the header in the meantime, like requests do.
-    async waitForPendingLoadsOf(dataModel) {
-      this.rootComponent.registerLoading(true)
-      try {
-        await dataModel.waitForPendingLoads()
-      } finally {
-        this.rootComponent.registerLoading(false)
-      }
-    },
-
     notify(options) {
       this.rootComponent.notify(options)
     },
@@ -626,16 +615,25 @@ export default {
             // data changes register, e.g. for `processedItem`, and the form
             // model writes the values that it derives from the data.
             // NOTE: The result of `handleListeners()` is returned as expected.
-            this.waitForDataModel().then(handleListeners)
+            this.waitUntilDataModelSettled().then(handleListeners)
           : handleListeners()
       }
     },
 
     // Waits until the data model settled: its loads finished, and it wrote the
-    // values that it derives from the data.
-    async waitForDataModel() {
+    // values that it derives from the data, e.g. before submitting. Shows the
+    // spinner in the header while loads are pending, like requests do.
+    async waitUntilDataModelSettled() {
       await this.$nextTick()
-      await this.dataModel?.waitForPendingLoads()
+      const { dataModel } = this
+      if (dataModel?.hasPendingLoads) {
+        this.rootComponent.registerLoading(true)
+        try {
+          await dataModel.waitUntilSettled()
+        } finally {
+          this.rootComponent.registerLoading(false)
+        }
+      }
     },
 
     emitSchemaEvent(event, params) {

package/src/utils/DataModel.js

@@ -9,12 +9,13 @@ import {
 } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
 import { DataSchemaResolver } from './DataSchemaResolver.js'
+import { getParentDataPath } from './data.js'
 import { isNested } from './schema/structure.js'
 import { isEmptySchema } from './schema/lookup.js'
 import {
   getSchemaValue,
   shouldSetDefaultValue,
-  getDefaultValue,
+  setDefaultValue,
   initializeData,
   computeValue,
   hasValueFromDataSchema,
@@ -41,7 +42,7 @@ import {
 //   displays them, see `getOptions()`. Both get the same option objects, and
 //   computes that read options only run once they are loaded.
 // - Submitting waits for the loads of data schemas and options that are still
-//   pending, see `waitForPendingLoads()`.
+//   pending, see `waitUntilSettled()`.
 // - The data is dirty when its processed data differs from a snapshot taken
 //   when the data was set up, saved or applied, see `isDirty`. The values that
 //   the model derives until it settled, e.g. from loaded options, don't count,
@@ -68,7 +69,7 @@ export class DataModel {
   // of their options, by component path, see `getOptionsResolver()`:
   optionsRecords = new Map()
   // The promises of the loads of data schemas and options that are pending,
-  // see `waitForPendingLoads()`:
+  // see `waitUntilSettled()`:
   pendingLoads = new Set()
   // The data that the snapshot was taken of, and its processed data to compare
   // with in `isDirty`, see `takeProcessedDataSnapshot()`:
@@ -77,6 +78,9 @@ export class DataModel {
   // the snapshot is taken, which `isDirty` takes from the current data, `null`
   // once it settled, see `takeProcessedDataSnapshot()`:
   derivedValueDataPaths = null
+  // The number of writes of computed values per data path in the current
+  // microtask, see `isWriteLoop()`:
+  computedValueWriteCounts = null
 
   // `getSchema()` and `getData()` return the schema and the data that the
   // model handles. `getSourceSchema()` returns the schema of the source that
@@ -166,12 +170,18 @@ export class DataModel {
     this.pendingLoads.clear()
   }
 
+  // Whether loads of data schemas or options are pending, see
+  // `waitUntilSettled()`.
+  get hasPendingLoads() {
+    return this.pendingLoads.size > 0
+  }
+
   // Waits for the pending loads of data schemas and options, including the
   // ones that they cause, e.g. options that depend on computed values that
   // depend on loaded options, and for the watchers to write the resulting
   // computed values into the data.
-  async waitForPendingLoads() {
-    while (this.pendingLoads.size > 0) {
+  async waitUntilSettled() {
+    while (this.hasPendingLoads) {
       await Promise.all(this.pendingLoads)
       await nextTick()
     }
@@ -180,7 +190,7 @@ export class DataModel {
   // Takes the snapshot of the processed data that `isDirty` compares with,
   // when the data is set up, saved or applied. Until the model settled, i.e.
   // the pending loads finished and the computed values that depend on them are
-  // written into the data, see `waitForPendingLoads()`, the values that the
+  // written into the data, see `waitUntilSettled()`, the values that the
   // model writes are recorded in `derivedValueDataPaths` and don't count, as
   // they're derived from the data, e.g. from loaded options. Once settled, they
   // are taken over into the snapshot, so that changes made in the meantime,
@@ -200,7 +210,7 @@ export class DataModel {
     }
     // Let the watchers and the rendering start their loads first:
     await nextTick()
-    await this.waitForPendingLoads()
+    await this.waitUntilSettled()
     // Snapshots that were taken since settle by themselves.
     const isSnapshotReplaced = (
       this.derivedValueDataPaths !==
@@ -265,7 +275,7 @@ export class DataModel {
     if (hasSnapshotOfData) {
       // Let the watchers write the values derived from the changes first:
       await nextTick()
-      await this.waitForPendingLoads()
+      await this.waitUntilSettled()
       // Take the changes over into the current snapshot of the data, which may
       // have been replaced in the meantime, e.g. once the model settled.
       const processedDataSnapshot = this.processedDataSnapshot.value
@@ -283,7 +293,7 @@ export class DataModel {
   }
 
   // Tracks the promise of a pending load until it settles, so that
-  // `waitForPendingLoads()` waits for it.
+  // `waitUntilSettled()` waits for it.
   trackPendingLoad(promise) {
     this.pendingLoads.add(promise)
     promise.finally(() => this.pendingLoads.delete(promise))
@@ -339,16 +349,23 @@ export class DataModel {
   // `false`. Unlike `shouldRenderSchema()`, it doesn't evaluate the components
   // of sections and tabs, as the walk of the data visits them anyway, see
   // `getDataEntries()`, which leads to the same entries.
+  // An `if` that fails only affects its own component, which is treated as
+  // shown, not the walk of all others, which would stop computing them.
   isEntryShown(entry) {
-    return (
-      entry.schema.if === undefined ||
-      getSchemaValue('if', {
+    if (entry.schema.if === undefined) {
+      return true
+    }
+    try {
+      return getSchemaValue('if', {
         type: Boolean,
         schema: entry.schema,
         context: this.createEntryContext(entry),
         default: true
       })
-    )
+    } catch (error) {
+      console.error(error)
+      return true
+    }
   }
 
   // Returns whether the value of the entry is missing and needs its default.
@@ -371,7 +388,7 @@ export class DataModel {
     for (const entry of entries) {
       if (this.shouldSetDefaultValue(entry)) {
         const { schema, data, name } = entry
-        data[name] = getDefaultValue(schema, () =>
+        setDefaultValue(schema, data, name, () =>
           this.createEntryContext(entry)
         )
       }
@@ -532,18 +549,82 @@ export class DataModel {
     })
   }
 
+  // Writes the computed value into the data, with the defaults of its nested
+  // values, unless it equals the value in the data.
   writeComputedValue(entry, value) {
     const { data, name } = entry
+    this.setNestedDefaultValues(entry, value)
     if (!equals(value, data[name])) {
+      const dataPath = this.getRelativeDataPath(entry)
+      if (this.isWriteLoop(dataPath)) {
+        return
+      }
       // Values written while the model settles are derived, see
       // `takeProcessedDataSnapshot()`:
-      this.derivedValueDataPaths?.add(this.getRelativeDataPath(entry))
+      this.derivedValueDataPaths?.add(dataPath)
       // Access `data[name]` directly to update the value without calling
       // `parse()`, see `ValueMixin`:
       data[name] = value
     }
   }
 
+  // Sets the missing defaults of the values nested in the computed value of
+  // the entry, e.g. of the items that `compute()` returns, as
+  // `setDefaultValues()` would once the value is written. Otherwise, the two
+  // would disagree on the value and keep replacing each other's writes.
+  setNestedDefaultValues(entry, value) {
+    const { schema, data, name, dataPath } = entry
+    if (!isPlainObject(value) && !isArray(value)) {
+      return
+    }
+    // Walk the computed value in place of the current one, in a copy of the
+    // data that holds it.
+    const valueData = { ...data, [name]: value }
+    processSchemaData({ components: { [name]: schema } }, valueData, {
+      dataPath: isNested(schema) ? getParentDataPath(dataPath) : dataPath,
+      shouldProcess: nestedEntry => this.isEntryShown(nestedEntry),
+      shouldSkipSourcesWithResource: true,
+      before: nestedEntry => {
+        if (
+          nestedEntry.data !== valueData &&
+          this.shouldSetDefaultValue(nestedEntry)
+        ) {
+          setDefaultValue(
+            nestedEntry.schema,
+            nestedEntry.data,
+            nestedEntry.name,
+            () => this.createEntryContext(nestedEntry)
+          )
+        }
+      },
+      options: { component: this.component, rootData: this.rootData }
+    })
+  }
+
+  // Returns whether the computed value at the data path was written too often
+  // in the current microtask, which happens when the sources of the value keep
+  // disagreeing on it, e.g. two computes. Reports the data path once, instead
+  // of letting the writes loop endlessly.
+  isWriteLoop(dataPath) {
+    if (!this.computedValueWriteCounts) {
+      this.computedValueWriteCounts = new Map()
+      queueMicrotask(() => {
+        this.computedValueWriteCounts = null
+      })
+    }
+    const count = (this.computedValueWriteCounts.get(dataPath) ?? 0) + 1
+    this.computedValueWriteCounts.set(dataPath, count)
+    if (count === maxComputedValueWrites + 1) {
+      console.error(
+        new Error(
+          `The computed value at '${dataPath}' keeps changing, as its ` +
+          `sources disagree on it. It isn't written anymore in this update.`
+        )
+      )
+    }
+    return count > maxComputedValueWrites
+  }
+
   // Returns the data path of the value of the entry, relative to the model's
   // data, as in its processed data.
   getRelativeDataPath({ schema, name, dataPath }) {
@@ -660,6 +741,10 @@ const modelWatchOptions = { immediate: true, flush: 'post' }
 // `DataModel.getComputedValueResult()`.
 const optionsNotLoaded = Symbol('optionsNotLoaded')
 
+// The number of writes of a computed value in one microtask after which they
+// are considered a loop, see `DataModel.isWriteLoop()`.
+const maxComputedValueWrites = 10
+
 // Returns whether the schema is a source of computed values, through
 // `schema.compute()` or a data schema of the `computed` types.
 function hasComputedValueSource(schema) {

package/src/utils/schema/data.js

@@ -110,6 +110,17 @@ export function getDefaultValue(schema, context) {
     : clone(defaultValue)
 }
 
+// Sets the value of the component described by `schema` and `name` in `data`
+// to its default. Types without values, e.g. buttons, have no default, and
+// don't get a key in the data, which would make the data differ from data
+// without it, e.g. from items that `compute()` returns.
+export function setDefaultValue(schema, data, name, context) {
+  const value = getDefaultValue(schema, context)
+  if (value !== undefined) {
+    data[name] = value
+  }
+}
+
 export function shouldExcludeValue(schema, context) {
   const excludeValue =
     schema.exclude !== undefined
@@ -207,7 +218,7 @@ export function initializeData(schema, data = {}, component, {
       { shouldSetDefaultsOfComponentsWithCompute }
     )
     if (shouldSetDefault) {
-      data[name] = getDefaultValue(schema, context)
+      setDefaultValue(schema, data, name, context)
     }
     if (hasItemsNumberedByOrderKey(schema) && isArray(data[name])) {
       updateOrder(schema, data[name])