@ditojs/admin 3.2.7 → 3.3.1

package/src/utils/DataModel.js

@@ -1,4 +1,11 @@
-import { effectScope, computed, watch, nextTick, shallowRef } from 'vue'
+import {
+  effectScope,
+  computed,
+  watch,
+  nextTick,
+  shallowRef,
+  toRaw
+} from 'vue'
 import {
   isArray,
   isPlainObject,
@@ -9,7 +16,11 @@ import {
 } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
 import { DataSchemaResolver } from './DataSchemaResolver.js'
-import { getParentDataPath } from './data.js'
+import {
+  appendDataPath,
+  getParentDataPath,
+  getRelativeDataPath
+} from './data.js'
 import { isNested } from './schema/structure.js'
 import { isEmptySchema } from './schema/lookup.js'
 import {
@@ -42,7 +53,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 `waitUntilSettled()`.
+//   pending, for a limited time, 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,
@@ -62,12 +73,12 @@ import {
 // when present. The model needs to be stopped before the component unmounts.
 
 export class DataModel {
-  // The entries of the components with computed values and the scopes of the
-  // watchers that write these values into the data, by component path:
-  computedValueRecords = new Map()
-  // The entries of the components whose options were read and the resolvers
-  // of their options, by component path, see `getOptionsResolver()`:
-  optionsRecords = new Map()
+  // The records of the components with computed values or options, by their
+  // data and name, so that they're kept when list items move, see
+  // `getComponentRecord()`. Records of components that the walk of the data
+  // doesn't visit anymore, e.g. of removed items or hidden components, are
+  // removed, see `updateComponentRecords()`:
+  componentRecords = new EntryMap()
   // The promises of the loads of data schemas and options that are pending,
   // see `waitUntilSettled()`:
   pendingLoads = new Set()
@@ -78,6 +89,9 @@ export class DataModel {
   // the snapshot is taken, which `isDirty` takes from the current data, `null`
   // once it settled, see `takeProcessedDataSnapshot()`:
   derivedValueDataPaths = null
+  // The sets of data paths of the values that the model writes while clean
+  // changes settle, one per pending `applyCleanChanges()`:
+  cleanChangesDerivedValueDataPaths = new Set()
   // The number of writes of computed values per data path in the current
   // microtask, see `isWriteLoop()`:
   computedValueWriteCounts = null
@@ -99,12 +113,12 @@ export class DataModel {
         modelSetupWatchOptions
       )
       // The entries are read through a computed property, so that the watchers
-      // of the entries can check synchronously whether their entry is still
+      // of the records can check synchronously whether their record is still
       // current, see `createComputedValueScope()`.
       this.dataEntries = computed(() => this.getDataEntries())
       watch(
-        () => this.dataEntries.value.computedValueEntries,
-        entries => this.updateComputedValueRecords(entries),
+        () => this.dataEntries.value.recordedEntries,
+        entries => this.updateComponentRecords(entries),
         modelSetupWatchOptions
       )
       // Values that go missing after the data was set up, e.g. in items that
@@ -165,8 +179,7 @@ export class DataModel {
 
   stop() {
     this.rootScope.stop()
-    this.computedValueRecords.clear()
-    this.optionsRecords.clear()
+    this.componentRecords.clear()
     this.pendingLoads.clear()
   }
 
@@ -180,10 +193,41 @@ export class DataModel {
   // 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 waitUntilSettled() {
-    while (this.hasPendingLoads) {
-      await Promise.all(this.pendingLoads)
-      await nextTick()
+  // Loads that never finish, e.g. hung requests, would block callers like
+  // `submit()` forever. After `timeout` milliseconds, the wait gives up with a
+  // warning and resolves, as the server validates the data anyway, while the
+  // loads keep running. `timeout: null` waits as long as it takes, for the
+  // model's own bookkeeping, which nothing waits for.
+  async waitUntilSettled({ timeout = settleTimeout } = {}) {
+    let timeoutId = null
+    const timedOut =
+      timeout != null
+        ? new Promise(resolve => {
+            timeoutId = setTimeout(() => resolve(true), timeout)
+          })
+        : null
+    const settled = (async () => {
+      while (this.hasPendingLoads) {
+        await Promise.all(this.pendingLoads)
+        await nextTick()
+      }
+      return false
+    })()
+    try {
+      const hasTimedOut = await (
+        timedOut
+          ? Promise.race([settled, timedOut])
+          : settled
+      )
+      if (hasTimedOut) {
+        console.warn(
+          `The data model didn't settle within ${timeout}ms, as ` +
+          `${this.pendingLoads.size} loads of data schemas or options are ` +
+          `still pending. Continuing without them.`
+        )
+      }
+    } finally {
+      clearTimeout(timeoutId)
     }
   }
 
@@ -210,7 +254,7 @@ export class DataModel {
     }
     // Let the watchers and the rendering start their loads first:
     await nextTick()
-    await this.waitUntilSettled()
+    await this.waitUntilSettled({ timeout: null })
     // Snapshots that were taken since settle by themselves.
     const isSnapshotReplaced = (
       this.derivedValueDataPaths !==
@@ -259,10 +303,14 @@ export class DataModel {
 
   // Makes clean changes to the data, which don't make it dirty, while other
   // changes still do, e.g. to apply what an action on the server already
-  // saved: Once the model settled, the values that changed in the processed
-  // data, including the values derived from the changes, are taken over into
-  // the snapshot. Arrays whose length changes are taken over as a whole, see
-  // `takeOverChangedValues()`. `makeChanges()` is called synchronously.
+  // saved: The values that `makeChanges()` changes in the processed data are
+  // compared right after it is called synchronously, so that changes made
+  // while the model settles, e.g. by the user, aren't included. Once the model
+  // settled, they are taken over into the snapshot, along with the values that
+  // the model writes in the meantime, e.g. derived from the changes. Like in
+  // `takeProcessedDataSnapshot()`, these include the values derived from
+  // other changes. Arrays whose length changes are taken over as a whole, see
+  // `takeOverChangedValues()`.
   async applyCleanChanges(makeChanges) {
     const data = this.getData()
     const hasSnapshotOfData = this.processedDataSnapshot.value?.data === data
@@ -273,25 +321,49 @@ export class DataModel {
       : null
     makeChanges()
     if (hasSnapshotOfData) {
-      // Let the watchers write the values derived from the changes first:
-      await nextTick()
-      await this.waitUntilSettled()
+      const processedDataAfterChanges = clone(
+        this.getProcessedDataForDirtyCheck()
+      )
+      const derivedValueDataPaths = new Set()
+      this.cleanChangesDerivedValueDataPaths.add(derivedValueDataPaths)
+      try {
+        // Let the watchers write the values derived from the changes first:
+        await nextTick()
+        await this.waitUntilSettled({ timeout: null })
+      } finally {
+        this.cleanChangesDerivedValueDataPaths.delete(derivedValueDataPaths)
+      }
       // 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
       if (processedDataSnapshot?.data === data && this.rootScope.active) {
         this.processedDataSnapshot.value = {
           data,
-          processedData: takeOverChangedValues(
-            processedDataSnapshot.processedData,
-            processedDataBeforeChanges,
-            this.getProcessedDataForDirtyCheck()
+          processedData: takeOverValuesAtDataPaths(
+            takeOverChangedValues(
+              processedDataSnapshot.processedData,
+              processedDataBeforeChanges,
+              processedDataAfterChanges
+            ),
+            this.getProcessedDataForDirtyCheck(),
+            derivedValueDataPaths
           )
         }
       }
     }
   }
 
+  // Records the data path of a computed value that the model writes, as
+  // derived while it settles, see `takeProcessedDataSnapshot()` and
+  // `applyCleanChanges()`. Defaults don't need to be recorded, as the processed
+  // data holds the defaults of missing values already, see `processData()`.
+  recordDerivedValueDataPath(dataPath) {
+    this.derivedValueDataPaths?.add(dataPath)
+    for (const dataPaths of this.cleanChangesDerivedValueDataPaths) {
+      dataPaths.add(dataPath)
+    }
+  }
+
   // Tracks the promise of a pending load until it settles, so that
   // `waitUntilSettled()` waits for it.
   trackPendingLoad(promise) {
@@ -316,24 +388,24 @@ export class DataModel {
 
   // Walks the data and returns the entries of `processSchemaData()` of the
   // components whose `if` doesn't evaluate to `false`: the ones with computed
-  // values, by component path, and the ones whose values are missing. Called
-  // by a computed property, so that it runs again when the data structure
-  // changes, e.g. when list items are added or removed, values go missing, or
-  // `if` conditions change.
+  // values or options, by data and name, see `componentRecords`, and the ones
+  // whose values are missing. Called by a computed property, so that it runs
+  // again when the data structure changes, e.g. when list items are added,
+  // moved or removed, values go missing, or `if` conditions change.
   getDataEntries() {
     const schema = this.getSchema()
     const data = this.getData()
-    const computedValueEntries = new Map()
+    const recordedEntries = new EntryMap()
     const entriesWithMissingValues = []
     if (data && !isEmptySchema(schema)) {
       processSchemaData(schema, data, {
         dataPath: this.dataPath,
         componentPath: this.componentPath,
-        shouldProcess: entry => this.isEntryShown(entry),
+        shouldProcess: entry => this.shouldRenderEntry(entry),
         shouldSkipSourcesWithResource: true,
         before: entry => {
-          if (hasComputedValueSource(entry.schema)) {
-            computedValueEntries.set(entry.componentPath, entry)
+          if (hasComputedValueSource(entry.schema) || entry.schema.options) {
+            recordedEntries.set(entry, entry)
           }
           if (this.shouldSetDefaultValue(entry)) {
             entriesWithMissingValues.push(entry)
@@ -342,7 +414,7 @@ export class DataModel {
         options: { component: this.component, rootData: this.rootData }
       })
     }
-    return { computedValueEntries, entriesWithMissingValues }
+    return { recordedEntries, entriesWithMissingValues }
   }
 
   // Returns whether the `if` of the entry's component doesn't evaluate to
@@ -351,7 +423,7 @@ export class DataModel {
   // `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) {
+  shouldRenderEntry(entry) {
     if (entry.schema.if === undefined) {
       return true
     }
@@ -395,68 +467,87 @@ export class DataModel {
     }
   }
 
-  // Keeps the records of the components that are still present with the same
-  // schema and data, creates records with new scopes for new ones, and stops
-  // the scopes of the others.
-  updateComputedValueRecords(entries) {
-    const previousRecords = this.computedValueRecords
-    this.computedValueRecords = new Map()
-    for (const [componentPath, entry] of entries) {
-      let computedValueRecord = previousRecords.get(componentPath)
-      if (
-        computedValueRecord?.entry.schema === entry.schema &&
-        computedValueRecord.entry.data === entry.data
-      ) {
-        previousRecords.delete(componentPath)
-      } else {
-        computedValueRecord = {
-          entry,
-          scope: this.createComputedValueScope(entry)
-        }
+  // Keeps the records of the components that are still present, with their
+  // current entries, e.g. with the data paths of items that moved, creates
+  // records for new ones, and removes the others, stopping their scopes. The
+  // scopes of records whose schema changed are replaced.
+  updateComponentRecords(entries) {
+    const previousRecords = this.componentRecords
+    this.componentRecords = new EntryMap()
+    for (const entry of entries.values()) {
+      const record = previousRecords.get(entry) ?? createComponentRecord(entry)
+      previousRecords.delete(entry)
+      if (record.entry.schema !== entry.schema) {
+        record.computedValueScope?.stop()
+        record.computedValueScope = null
       }
-      this.computedValueRecords.set(componentPath, computedValueRecord)
+      record.entry = entry
+      record.dataPath.value = entry.dataPath
+      // Add the record before its scope is created, as its watchers may read
+      // its options right away, see `getOptionsResolver()`.
+      this.componentRecords.set(entry, record)
+      if (hasComputedValueSource(entry.schema)) {
+        record.computedValueScope ??= this.createComputedValueScope(record)
+      }
+    }
+    for (const { computedValueScope } of previousRecords.values()) {
+      computedValueScope?.stop()
     }
-    for (const { scope } of previousRecords.values()) {
-      scope.stop()
+  }
+
+  // Returns the record of the component of the entry, see `componentRecords`,
+  // and creates it if the walk of the data didn't, e.g. for components that
+  // read their options before it visits them.
+  getComponentRecord(entry) {
+    let record = this.componentRecords.get(entry)
+    if (!record) {
+      record = createComponentRecord(entry)
+      this.componentRecords.set(entry, record)
     }
+    return record
   }
 
   // Creates the scope of the watchers that write the computed values of the
-  // entry into the data. Entries stop being current before their scope is
-  // stopped, as watchers that don't belong to components run in the order in
-  // which they're triggered, e.g. when list items are removed or `if`
-  // conditions change. The watchers skip these entries, see `isEntryCurrent()`.
-  createComputedValueScope(entry) {
+  // record's component into the data, with its current entry, so that the
+  // values of items that move are only computed again if their computes read
+  // their position, see `getComputedValueResult()`. Records stop being
+  // current before their scope is stopped, as watchers that don't belong to
+  // components run in the order in which they're triggered, e.g. when list
+  // items are removed or `if` conditions change. The watchers skip these
+  // records, see `isRecordCurrent()`.
+  createComputedValueScope(record) {
+    const { schema } = record.entry
     const scope = this.rootScope.run(() => effectScope())
     scope.run(() => {
-      const isEntryCurrent = computed(() => this.isEntryCurrent(entry))
-      if (entry.schema.compute) {
+      const isRecordCurrent = computed(() =>
+        this.isRecordCurrent(record, schema)
+      )
+      if (schema.compute) {
         watch(
           // Return a new object each time, so that the value is also written
           // when only the value in the data changed, e.g. through user input.
           () =>
-            isEntryCurrent.value ? this.getComputedValueResult(entry) : null,
+            isRecordCurrent.value
+              ? this.getComputedValueResult(record)
+              : null,
           computedResult => {
             if (computedResult) {
-              this.writeComputedValue(entry, computedResult.value)
+              this.writeComputedValue(record.entry, computedResult.value)
             }
           },
           modelWatchOptions
         )
       }
-      if (hasValueFromDataSchema(entry.schema)) {
-        const dataSchemaResolver = this.createDataSchemaResolver(
-          entry.schema,
-          entry
-        )
+      if (hasValueFromDataSchema(schema)) {
+        const dataSchemaResolver = this.createDataSchemaResolver(schema, record)
         watch(
           () =>
-            isEntryCurrent.value && !dataSchemaResolver.isLoading
+            isRecordCurrent.value && !dataSchemaResolver.isLoading
               ? { value: dataSchemaResolver.value }
               : null,
           resolved => {
             if (resolved) {
-              this.writeComputedValue(entry, resolved.value)
+              this.writeComputedValue(record.entry, resolved.value)
             }
           },
           modelWatchOptions
@@ -466,18 +557,21 @@ export class DataModel {
     return scope
   }
 
-  // Returns whether the model computes the value of the component at the
-  // component path, i.e. whether its walk of the data visits the component.
-  hasComputedValueEntry(componentPath) {
-    return this.dataEntries.value.computedValueEntries.has(componentPath)
+  // Returns whether the model computes the value of the component with the
+  // data and name of the entry, i.e. whether its walk of the data visits the
+  // component.
+  hasComputedValueEntry(entry) {
+    const currentEntry = this.dataEntries.value.recordedEntries.get(entry)
+    return !!currentEntry && hasComputedValueSource(currentEntry.schema)
   }
 
-  // Returns whether the entry is still one of the current entries, with the
-  // same schema and data, see `getDataEntries()`.
-  isEntryCurrent({ componentPath, schema, data }) {
-    const currentEntry =
-      this.dataEntries.value.computedValueEntries.get(componentPath)
-    return currentEntry?.schema === schema && currentEntry.data === data
+  // Returns whether the record's component is still one of the current
+  // entries, with the same schema, see `getDataEntries()`.
+  isRecordCurrent(record, schema) {
+    const currentEntry = this.dataEntries.value.recordedEntries.get(
+      record.entry
+    )
+    return currentEntry?.schema === schema
   }
 
   // Calls `schema.compute()` with the main schema component of the data, like
@@ -487,14 +581,24 @@ export class DataModel {
   // loaded, which aborts it, so that the current value is kept until they are
   // and `compute()` can rely on them. The watcher that calls it depends on the
   // options through reading them, and calls it again once they're loaded.
-  getComputedValueResult(entry) {
-    const { schema, data, name, dataPath } = entry
+  // Computes the value of the record's component. Its data path is read
+  // through the record, so that only computes that read their position are
+  // computed again when their items move, see `updateComponentRecords()`.
+  getComputedValueResult(record) {
+    const { entry } = record
+    const { schema, data, name } = entry
     try {
-      const value = computeValue(schema, data, name, dataPath, {
-        component: this.component.mainSchemaComponent ?? this.component,
-        rootData: this.rootData,
-        getOptions: schema.options ? () => this.getLoadedOptions(entry) : null
-      })
+      const value = computeValue(
+        schema,
+        data,
+        name,
+        () => record.dataPath.value,
+        {
+          component: this.component.mainSchemaComponent ?? this.component,
+          rootData: this.rootData,
+          getOptions: schema.options ? () => this.getLoadedOptions(entry) : null
+        }
+      )
       return { value }
     } catch (error) {
       if (error === optionsNotLoaded) {
@@ -505,55 +609,56 @@ export class DataModel {
   }
 
   // Returns the options of the component of the entry, or aborts the
-  // `compute()` that reads them, while they aren't loaded, see
-  // `getComputedValueResult()`.
+  // `compute()` that reads them, while they're loading, see
+  // `getComputedValueResult()`. Options that resolve to `undefined` aren't
+  // loading, e.g. when their load failed, which logs the error, or when their
+  // data path points to a missing value: `compute()` sees them as `undefined`,
+  // and falls back on `options?.…` like components do, see `OptionsMixin`.
   getLoadedOptions(entry) {
-    const options = this.getOptions(entry)
-    if (options === undefined) {
+    const resolver = this.getOptionsResolver(entry)
+    if (resolver.isLoading) {
       throw optionsNotLoaded
     }
-    return options
+    return resolver.value
   }
 
   // Returns the options of the component of the entry, resolved from
-  // `schema.options` when they're first read, `undefined` while loading.
+  // `schema.options` when they're first read, `undefined` while loading, see
+  // `getLoadedOptions()`.
   getOptions(entry) {
     return this.getOptionsResolver(entry).value
   }
 
   // Returns the resolver of the options of the component of the entry, shared
-  // by all callers with the same component path, schema and data, so that
-  // computes and the component that displays the options get the same option
-  // objects, and the options only load once.
+  // by all callers with the same data, name and options, so that computes and
+  // the component that displays the options get the same option objects, and
+  // the options only load once, also when list items move. Components that
+  // keep displaying options of records that were removed keep their own
+  // resolvers, see `OptionsMixin`.
   getOptionsResolver(entry) {
-    const { schema, data, componentPath } = entry
-    let optionsRecord = this.optionsRecords.get(componentPath)
-    if (
-      !optionsRecord ||
-      optionsRecord.entry.schema.options !== schema.options ||
-      optionsRecord.entry.data !== data
-    ) {
-      optionsRecord = {
-        entry,
-        resolver: this.createDataSchemaResolver(schema.options, entry)
-      }
-      this.optionsRecords.set(componentPath, optionsRecord)
+    const record = this.getComponentRecord(entry)
+    const { options } = entry.schema
+    if (!record.optionsResolver || record.optionsSchema !== options) {
+      record.optionsSchema = options
+      record.optionsResolver = this.createDataSchemaResolver(options, record)
     }
-    return optionsRecord.resolver
+    return record.optionsResolver
   }
 
-  createDataSchemaResolver(dataSchema, entry) {
+  // Creates the resolver of a data schema of the record's component, with the
+  // context of its current entry.
+  createDataSchemaResolver(dataSchema, record) {
     return new DataSchemaResolver(dataSchema, {
-      createContext: () => this.createEntryContext(entry),
+      createContext: () => this.createEntryContext(record.entry),
       onLoadStart: promise => this.trackPendingLoad(promise)
     })
   }
 
   // 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) {
+  writeComputedValue(entry, computedValue) {
     const { data, name } = entry
-    this.setNestedDefaultValues(entry, value)
+    const value = this.getValueWithNestedDefaultValues(entry, computedValue)
     if (!equals(value, data[name])) {
       const dataPath = this.getRelativeDataPath(entry)
       if (this.isWriteLoop(dataPath)) {
@@ -561,40 +666,71 @@ export class DataModel {
       }
       // Values written while the model settles are derived, see
       // `takeProcessedDataSnapshot()`:
-      this.derivedValueDataPaths?.add(dataPath)
+      this.recordDerivedValueDataPath(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
+  // Returns the computed value of the entry with the missing defaults of its
+  // nested values, e.g. of the items that `compute()` returns, as
+  // `setDefaultValues()` would set them once the value is written. Otherwise,
+  // the two would disagree on the value and keep replacing each other's
+  // writes. The value isn't modified, as it may be shared, e.g. a constant:
+  // The objects and arrays that hold missing values are copied, along with the
+  // ones that hold these, and the value is returned as it is when nothing is
+  // missing, keeping its identity, e.g. of options.
+  getValueWithNestedDefaultValues(entry, value) {
+    const { data, name } = entry
+    if (
+      !isPlainObject(value) && !isArray(value) ||
+      // The current value gets its defaults from `setDefaultValues()`:
+      toRaw(value) === toRaw(data[name])
+    ) {
+      return value
     }
-    // Walk the computed value in place of the current one, in a copy of the
-    // data that holds it.
+    const dataWithMissingValues = new Set()
+    this.processNestedEntries(entry, value, nestedEntry => {
+      if (this.shouldSetDefaultValue(nestedEntry)) {
+        dataWithMissingValues.add(nestedEntry.data)
+      }
+    })
+    if (dataWithMissingValues.size === 0) {
+      return value
+    }
+    const valueWithDefaults = copyContainersHolding(
+      value,
+      dataWithMissingValues
+    )
+    // Defaults may hold values with defaults of their own, which the walk
+    // visits after setting them:
+    this.processNestedEntries(entry, valueWithDefaults, nestedEntry => {
+      if (this.shouldSetDefaultValue(nestedEntry)) {
+        setDefaultValue(
+          nestedEntry.schema,
+          nestedEntry.data,
+          nestedEntry.name,
+          () => this.createEntryContext(nestedEntry)
+        )
+      }
+    })
+    return valueWithDefaults
+  }
+
+  // Walks the entries nested in `value`, as the value of the entry's
+  // component, in place of its current one in a copy of the data that holds it,
+  // and calls `handleNestedEntry()` before visiting each of them.
+  processNestedEntries(entry, value, handleNestedEntry) {
+    const { schema, data, name, dataPath } = entry
     const valueData = { ...data, [name]: value }
     processSchemaData({ components: { [name]: schema } }, valueData, {
       dataPath: isNested(schema) ? getParentDataPath(dataPath) : dataPath,
-      shouldProcess: nestedEntry => this.isEntryShown(nestedEntry),
+      shouldProcess: nestedEntry => this.shouldRenderEntry(nestedEntry),
       shouldSkipSourcesWithResource: true,
       before: nestedEntry => {
-        if (
-          nestedEntry.data !== valueData &&
-          this.shouldSetDefaultValue(nestedEntry)
-        ) {
-          setDefaultValue(
-            nestedEntry.schema,
-            nestedEntry.data,
-            nestedEntry.name,
-            () => this.createEntryContext(nestedEntry)
-          )
+        if (nestedEntry.data !== valueData) {
+          handleNestedEntry(nestedEntry)
         }
       },
       options: { component: this.component, rootData: this.rootData }
@@ -629,10 +765,10 @@ export class DataModel {
   // data, as in its processed data.
   getRelativeDataPath({ schema, name, dataPath }) {
     // The data paths of nested components include their own name.
-    const tokens = isNested(schema)
-      ? parseDataPath(dataPath)
-      : [...parseDataPath(dataPath), name]
-    return tokens.slice(parseDataPath(this.dataPath).length).join('/')
+    const valueDataPath = isNested(schema)
+      ? dataPath
+      : appendDataPath(dataPath, name)
+    return getRelativeDataPath(valueDataPath, this.dataPath)
   }
 
   // Returns the context for `if`, data schemas and options, with the component
@@ -719,6 +855,32 @@ function takeOverChangedValues(target, before, after) {
   return result
 }
 
+// Returns `value` with the plain objects and arrays in it that are one of
+// `objects` or hold one of them copied, shallowly, and the others as they are.
+// Values that occur more than once are copied at each occurrence, so that
+// setting defaults in the copies never reaches the originals. Only the values
+// that hold themselves, `ancestorValues`, are left as they are.
+function copyContainersHolding(value, objects, ancestorValues = new Set()) {
+  if (
+    !isPlainObject(value) && !isArray(value) ||
+    ancestorValues.has(value)
+  ) {
+    return value
+  }
+  ancestorValues.add(value)
+  const copyValue = () => (isArray(value) ? [...value] : { ...value })
+  let copy = objects.has(value) ? copyValue() : null
+  for (const [key, entry] of Object.entries(value)) {
+    const entryCopy = copyContainersHolding(entry, objects, ancestorValues)
+    if (entryCopy !== entry) {
+      copy ??= copyValue()
+      copy[key] = entryCopy
+    }
+  }
+  ancestorValues.delete(value)
+  return copy ?? value
+}
+
 const notFound = Symbol('notFound')
 
 // The watchers of the model that set up the data and the scopes of its
@@ -745,6 +907,66 @@ const optionsNotLoaded = Symbol('optionsNotLoaded')
 // are considered a loop, see `DataModel.isWriteLoop()`.
 const maxComputedValueWrites = 10
 
+// The milliseconds after which `DataModel.waitUntilSettled()` stops waiting
+// for pending loads, long enough for slow requests.
+const settleTimeout = 30_000
+
+// Creates the record of the component of the entry, see
+// `DataModel.componentRecords`: its current entry, the scope of the watchers
+// that write its computed values, and the resolver of its options, with the
+// options schema that it resolves, once they're read.
+function createComponentRecord(entry) {
+  return {
+    entry,
+    // The data path of the entry, read by computes, see
+    // `getComputedValueResult()`. Unlike `entry`, it's reactive, as items
+    // that move keep their records.
+    dataPath: shallowRef(entry.dataPath),
+    computedValueScope: null,
+    optionsResolver: null,
+    optionsSchema: null
+  }
+}
+
+// Holds values by the data and name of the entries of components, see
+// `DataModel.componentRecords`. The data is compared by its raw object, as it
+// may be passed through reactive proxies.
+class EntryMap {
+  valuesByData = new Map()
+
+  get({ data, name }) {
+    return this.valuesByData.get(toRaw(data))?.get(name)
+  }
+
+  set({ data, name }, value) {
+    const rawData = toRaw(data)
+    let valuesByName = this.valuesByData.get(rawData)
+    if (!valuesByName) {
+      valuesByName = new Map()
+      this.valuesByData.set(rawData, valuesByName)
+    }
+    valuesByName.set(name, value)
+  }
+
+  delete({ data, name }) {
+    const rawData = toRaw(data)
+    const valuesByName = this.valuesByData.get(rawData)
+    if (valuesByName?.delete(name) && valuesByName.size === 0) {
+      this.valuesByData.delete(rawData)
+    }
+  }
+
+  clear() {
+    this.valuesByData.clear()
+  }
+
+  *values() {
+    for (const valuesByName of this.valuesByData.values()) {
+      yield* valuesByName.values()
+    }
+  }
+}
+
 // Returns whether the schema is a source of computed values, through
 // `schema.compute()` or a data schema of the `computed` types.
 function hasComputedValueSource(schema) {