@json-layout/core 0.1.0

package/src/state/index.js

@@ -0,0 +1,381 @@
+// eslint-disable-next-line import/no-named-default
+import mittModule from 'mitt'
+import debug from 'debug'
+import { evalExpression, producePatchedData } from './state-node.js'
+import { createStateTree } from './state-tree.js'
+import { Display } from './utils/display.js'
+import { isGetItemsExpression, isGetItemsFetch } from '@json-layout/vocabulary'
+
+export { Display } from './utils/display.js'
+
+/**
+ * @typedef {import('./types.js').StateNode} StateNode
+ * @typedef {import('./types.js').StateTree} StateTree
+ * @typedef {import('./types.js').StatefulLayoutOptions} StatefulLayoutOptions
+ * @typedef {import('./types.js').StatefulLayoutEvents} StatefulLayoutEvents
+ * @typedef {import('./types.js').CreateStateTreeContext} CreateStateTreeContext
+ * @typedef {import('./types.js').TextFieldNode} TextFieldNode
+ * @typedef {import('./types.js').TextareaNode} TextareaNode
+ * @typedef {import('./types.js').NumberFieldNode} NumberFieldNode
+ * @typedef {import('./types.js').SliderNode} SliderNode
+ * @typedef {import('./types.js').SectionNode} SectionNode
+ * @typedef {import('./types.js').SelectNode} SelectNode
+ * @typedef {import('./types.js').CheckboxNode} CheckboxNode
+ * @typedef {import('./types.js').SwitchNode} SwitchNode
+ * @typedef {import('./types.js').ColorPickerNode} ColorPickerNode
+ * @typedef {import('./types.js').DatePickerNode} DatePickerNode
+ * @typedef {import('./types.js').DateTimePickerNode} DateTimePickerNode
+ * @typedef {import('./types.js').TimePickerNode} TimePickerNode
+ * @typedef {import('./types.js').ExpansionPanelsNode} ExpansionPanelsNode
+ * @typedef {import('./types.js').TabsNode} TabsNode
+ * @typedef {import('./types.js').VerticalTabsNode} VerticalTabsNode
+ * @typedef {import('./types.js').OneOfSelectNode} OneOfSelectNode
+ * @typedef {import('./types.js').ListNode} ListNode
+ */
+
+/** @type {(node: StateNode | undefined) => node is SectionNode} */
+export const isSection = (node) => !!node && node.layout.comp === 'section'
+
+/** @type {(node: StateNode | undefined) => node is SelectNode} */
+export const isSelect = (node) => !!node && node.layout.comp === 'select'
+
+const logDataBinding = debug('jl:data-binding')
+
+// ugly fix of modules whose default export were wrongly declared
+// @ts-ignore
+const mitt = /** @type {typeof mittModule.default} */ (mittModule)
+
+/**
+ * @param {Partial<StatefulLayoutOptions>} partialOptions
+ * @param {import('../index.js').CompiledLayout} compiledLayout
+ * @returns {StatefulLayoutOptions}
+ */
+function fillOptions (partialOptions, compiledLayout) {
+  const messages = { ...compiledLayout.messages }
+  if (partialOptions.messages) Object.assign(messages, partialOptions.messages)
+  return {
+    context: {},
+    width: 1000,
+    readOnly: false,
+    summary: false,
+    titleDepth: 2,
+    validateOn: 'input',
+    initialValidation: 'withData',
+    ...partialOptions,
+    messages
+  }
+}
+
+export class StatefulLayout {
+  /**
+   * @readonly
+   * @type {import('mitt').Emitter<StatefulLayoutEvents>}
+   */
+  events
+
+  /**
+   * @private
+   * @readonly
+   * @type {import('../index.js').CompiledLayout}
+   */
+  _compiledLayout
+  get compiledLayout () { return this._compiledLayout }
+
+  /**
+   * @private
+   * @type {StateTree}
+   */
+  // @ts-ignore
+  _stateTree
+  get stateTree () { return this._stateTree }
+
+  /**
+   * @readonly
+   * @type {import('../index.js').SkeletonTree}
+   */
+  skeletonTree
+
+  /**
+   * @private
+   * @type {Display}
+   */
+  // @ts-ignore
+  _display
+  get display () { return this._display }
+
+  /**
+   * @private
+   * @type {import('./types.js').ValidationState}
+   */
+  // @ts-ignore
+  _validationState
+  /**
+   * @returns {import('./types.js').ValidationState}
+   */
+  get validationState () {
+    return this._validationState
+  }
+
+  /**
+   * @private
+   * @param {Partial<import('./types.js').ValidationState>} validationState
+   */
+  set validationState (validationState) {
+    this._validationState = {
+      initialized: validationState.initialized ?? this._validationState.initialized ?? false,
+      validatedForm: validationState.validatedForm ?? this._validationState.validatedForm ?? false,
+      validatedChildren: validationState.validatedChildren ?? this._validationState.validatedChildren ?? []
+    }
+    this.updateState()
+  }
+
+  /**
+   * @private
+   * @type {StatefulLayoutOptions}
+   */
+  // @ts-ignore
+  _options
+  /**
+   * @returns {StatefulLayoutOptions}
+   */
+  get options () { return this._options }
+  /**
+   * @param {Partial<StatefulLayoutOptions>} options
+   */
+  set options (options) {
+    this.prepareOptions(options)
+    this.updateState()
+  }
+
+  /**
+   * @private
+   * @type {unknown}
+   */
+  _data
+  get data () { return this._data }
+  set data (data) {
+    logDataBinding('apply main data setter', data)
+    this._data = data
+    this.updateState()
+  }
+
+  /**
+   * @private
+   * @type {CreateStateTreeContext}
+   */
+  // @ts-ignore
+  _lastCreateStateTreeContext
+
+  /**
+   * @param {import("../index.js").CompiledLayout} compiledLayout
+   * @param {import("../index.js").SkeletonTree} skeletonTree
+   * @param {Partial<StatefulLayoutOptions>} options
+   * @param {unknown} data
+   */
+  constructor (compiledLayout, skeletonTree, options, data = {}) {
+    this._compiledLayout = compiledLayout
+    this.skeletonTree = skeletonTree
+    /** @type {import('mitt').Emitter<StatefulLayoutEvents>} */
+    this.events = mitt()
+    this.prepareOptions(options)
+    this._data = data
+    this.initValidationState()
+    this.activeItems = {}
+    this.updateState()
+  }
+
+  /**
+   * @private
+   * @param {Partial<StatefulLayoutOptions>} options
+   */
+  prepareOptions (options) {
+    this._options = fillOptions(options, this.compiledLayout)
+    this._display = this._display && this._display.width === this._options.width ? this._display : new Display(this._options.width)
+  }
+
+  /**
+   * @private
+   */
+  initValidationState () {
+    const initialValidation = this.options.initialValidation === 'always'
+    this._validationState = {
+      initialized: initialValidation,
+      validatedForm: initialValidation,
+      validatedChildren: []
+    }
+  }
+
+  /**
+   * @private
+   */
+  updateState () {
+    this.createStateTree()
+    if (this._data !== this._stateTree.root.data) {
+      logDataBinding('hydrating state tree changed the data, do it again', this._data, this._stateTree.root.data)
+      // this is necessary because a first hydration can add default values and change validity, etc
+      this._data = this._stateTree.root.data
+      this.createStateTree()
+    }
+    logDataBinding('emit update event', this._data, this._stateTree)
+    this.events.emit('update', this)
+  }
+
+  /**
+   * @private
+   */
+  createStateTree () {
+    /** @type {CreateStateTreeContext} */
+    const createStateTreeContext = { nodes: [], activeItems: this.activeItems }
+    this._stateTree = createStateTree(
+      createStateTreeContext,
+      this._options,
+      this._compiledLayout,
+      this.skeletonTree,
+      this._display,
+      this._data,
+      this._validationState,
+      this._stateTree
+    )
+    this._lastCreateStateTreeContext = createStateTreeContext
+    if (!this.validationState.initialized) {
+      this.validationState = { initialized: true, validatedChildren: createStateTreeContext.nodes.filter(n => n.validated).map(n => n.fullKey) }
+    }
+  }
+
+  validate () {
+    this.validationState = { validatedForm: true }
+  }
+
+  resetValidation () {
+    this.initValidationState()
+    this.updateState()
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get valid () {
+    return this.stateTree.valid
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get hasHiddenError () {
+    return this._lastCreateStateTreeContext.nodes.findIndex(node => node.error && !node.validated) !== -1
+  }
+
+  /**
+   * @param {StateNode} node
+   * @param {unknown} data
+   * @param {number} [activateKey]
+   */
+  input (node, data, activateKey) {
+    logDataBinding('received input event from node', node, data)
+    if (node.options.validateOn === 'input' && !this.validationState.validatedChildren.includes(node.fullKey)) {
+      this.validationState = { validatedChildren: this.validationState.validatedChildren.concat([node.fullKey]) }
+    }
+    if (activateKey !== undefined) {
+      this.activeItems[node.fullKey] = activateKey
+    }
+    if (node.parentFullKey === null) {
+      this.data = data
+      this.events.emit('input', this.data)
+      return
+    }
+    const parentNode = this._lastCreateStateTreeContext.nodes.find(p => p.fullKey === node.parentFullKey)
+    if (!parentNode) throw new Error(`parent with key "${node.parentFullKey}" not found`)
+    const newParentValue = producePatchedData(parentNode.data ?? {}, node, data)
+    this.input(parentNode, newParentValue)
+  }
+
+  /**
+   * @param {StateNode} node
+   */
+  blur (node) {
+    logDataBinding('received blur event from node', node)
+    if (
+      (node.options.validateOn === 'input' || node.options.validateOn === 'blur') &&
+      !this.validationState.validatedChildren.includes(node.fullKey)
+    ) {
+      this.validationState = { validatedChildren: this.validationState.validatedChildren.concat([node.fullKey]) }
+    }
+  }
+
+  /**
+   * @param {StateNode} node
+   * @returns {Promise<import('@json-layout/vocabulary').SelectItems>}
+   */
+  async getSelectItems (node) {
+    if (!isSelect(node)) throw new Error('node is not a select component')
+    if (node.layout.items) return node.layout.items
+
+    /** @type {(expression: import('@json-layout/vocabulary').Expression, data: any) => any} */
+    const evalSelectExpression = (expression, data) => {
+      return evalExpression(this.compiledLayout.expressions, expression, data, node.options, new Display(node.options.width))
+    }
+
+    let rawItems
+    if (node.layout.getItems && isGetItemsExpression(node.layout.getItems)) {
+      rawItems = evalSelectExpression(node.layout.getItems, null)
+      if (!Array.isArray(rawItems)) throw new Error('getItems expression didn\'t return an array')
+    }
+    if (node.layout.getItems && isGetItemsFetch(node.layout.getItems)) {
+      const url = evalSelectExpression(node.layout.getItems.url, null)
+      rawItems = await (await fetch(url)).json()
+    }
+
+    if (rawItems) {
+      if (node.layout.getItems?.itemsResults) {
+        rawItems = evalSelectExpression(node.layout.getItems.itemsResults, rawItems)
+      }
+      return rawItems.map((/** @type {any} */ rawItem) => {
+        if (typeof rawItem === 'object') {
+          /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
+          const item = {}
+          item.value = node.layout.getItems?.itemValue ? evalSelectExpression(node.layout.getItems.itemValue, rawItem) : (node.layout.getItems?.returnObjects ? rawItem : rawItem.value)
+          item.key = node.layout.getItems?.itemKey ? evalSelectExpression(node.layout.getItems.itemKey, rawItem) : rawItem.key
+          item.title = node.layout.getItems?.itemTitle ? evalSelectExpression(node.layout.getItems.itemTitle, rawItem) : rawItem.title
+          item.value = item.value ?? item.key
+          item.key = item.key ?? item.value + ''
+          item.title = item.title ?? item.key
+          return item
+        } else {
+          /** @type {Partial<import('@json-layout/vocabulary').SelectItem>} */
+          const item = {}
+          item.value = node.layout.getItems?.itemValue ? evalSelectExpression(node.layout.getItems.itemValue, rawItem) : rawItem
+          item.key = node.layout.getItems?.itemKey ? evalSelectExpression(node.layout.getItems.itemKey, rawItem) : item.value
+          item.title = node.layout.getItems?.itemTitle ? evalSelectExpression(node.layout.getItems.itemTitle, rawItem) : item.value
+          return item
+        }
+      })
+    }
+    throw new Error('node is missing items or getItems parameters')
+  }
+
+  /**
+   * @type {Record<string, number>}
+   */
+  activeItems
+
+  /**
+   * @param {StateNode} node
+   * @param {number} key
+   */
+  activateItem (node, key) {
+    this.activeItems[node.fullKey] = key
+    if (node.key === '$oneOf') {
+      this.input(node, node.skeleton.childrenTrees?.[key].root.defaultData)
+    } else {
+      this.updateState()
+    }
+  }
+
+  /**
+   * @param {StateNode} node
+   */
+  deactivateItem (node) {
+    delete this.activeItems[node.fullKey]
+    this.updateState()
+  }
+}

package/src/state/state-node.js

@@ -0,0 +1,317 @@
+import { isSwitchStruct, childIsCompObject, isCompositeLayout } from '@json-layout/vocabulary'
+import { produce } from 'immer'
+import { getChildDisplay } from './utils/display.js'
+import { shallowCompareArrays } from './utils/immutable.js'
+
+/**
+ * @param {unknown} data
+ * @returns {boolean}
+ */
+const isDataEmpty = (data) => {
+  if (data === '' || data === undefined) return true
+  if (Array.isArray(data) && !data.length) return true
+  if (typeof data === 'object' && !Array.isArray(data) && !!data && Object.values(data).findIndex(prop => !isDataEmpty(prop)) === -1) return true
+  return false
+}
+
+// use Immer for efficient updating with immutability and no-op detection
+/** @type {(draft: import('./types.js').StateNode, key: string | number, fullKey: string, parentFullKey: string | null, dataPath: string, parentDataPath: string | null, skeleton: import('../index.js').SkeletonNode, layout: import('@json-layout/vocabulary').CompObject, cols: number, data: unknown, error: string | undefined, validated: boolean, options: import('./types.js').StatefulLayoutOptions, children: import('../index.js').StateNode[] | undefined) => import('../index.js').StateNode} */
+const produceStateNode = produce((draft, key, fullKey, parentFullKey, dataPath, parentDataPath, skeleton, layout, cols, data, error, validated, options, children) => {
+  data = children && layout.comp !== 'list' ? produceStateNodeData(/** @type {Record<string, unknown>} */(data ?? {}), dataPath, children) : data
+  // empty data is removed and replaced by the default data
+  if (isDataEmpty(data) && skeleton.defaultData === undefined) data = undefined
+  data = skeleton.const ?? data ?? skeleton.defaultData
+
+  draft.messages = layout.messages ? produceStateNodeMessages(draft.messages || {}, layout.messages, options) : options.messages
+
+  draft.key = key
+  draft.fullKey = fullKey
+  draft.parentFullKey = parentFullKey
+  draft.dataPath = dataPath
+  draft.parentDataPath = parentDataPath
+  draft.skeleton = skeleton
+  draft.layout = layout
+  draft.options = options
+  draft.cols = cols
+  draft.data = data
+  draft.error = error
+  draft.childError = children && (children.findIndex(c => c.error || c.childError) !== -1)
+  draft.validated = validated
+  draft.children = children
+})
+
+/** @type {(draft: import('../i18n/types.js').LocaleMessages, layoutMessages: Partial<import('../i18n/types.js').LocaleMessages>, options: import('./types.js').StatefulLayoutOptions) => import('../i18n/types.js').LocaleMessages} */
+const produceStateNodeMessages = produce((draft, layoutMessages, options) => {
+  Object.assign(draft, options.messages, layoutMessages)
+})
+
+/** @type {(draft: Record<string, unknown>, parentDataPath: string, children: import('../index.js').StateNode[]) => Record<string, unknown>} */
+const produceStateNodeData = produce((draft, parentDataPath, children) => {
+  for (const child of children) {
+    if (parentDataPath === child.dataPath) {
+      if (child.data === undefined) continue
+      Object.assign(draft, child.data)
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      if (child.data === undefined) delete draft[child.key]
+      else draft[child.key] = child.data
+    }
+  }
+})
+
+/** @type {(draft: import('./types.js').StatefulLayoutOptions, parentNodeOptions: import('./types.js').StatefulLayoutOptions, nodeOptions: import('@json-layout/vocabulary').StateNodeOptions | undefined, width: number) => import('./types.js').StatefulLayoutOptions} */
+const produceNodeOptions = produce((draft, parentNodeOptions, nodeOptions = {}, width) => {
+  for (const key in parentNodeOptions) {
+    draft[key] = parentNodeOptions[key]
+  }
+  for (const key in nodeOptions) {
+    draft[key] = nodeOptions[key]
+  }
+  for (const key in draft) {
+    if (!(key in parentNodeOptions) && !(key in nodeOptions)) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete draft[key]
+    }
+  }
+  draft.width = width
+})
+
+/** @type {(draft: import('./types.js').StatefulLayoutOptions) => import('./types.js').StatefulLayoutOptions} */
+const produceReadonlyArrayItemOptions = produce((draft) => {
+  draft.readOnly = true
+  draft.summary = true
+})
+
+/** @type {(draft: import('./types.js').StatefulLayoutOptions, section: import('@json-layout/vocabulary').CompositeCompObject) => import('./types.js').StatefulLayoutOptions} */
+const produceCompositeChildrenOptions = produce((draft, section) => {
+  // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+  if (section.title && draft.titleDepth < 6) draft.titleDepth += 1
+})
+
+/**
+ * @param {import('ajv').ErrorObject} error
+ * @param {import('../index.js').SkeletonNode} skeleton
+ * @param {string} dataPath
+ * @param {string | null} parentDataPath
+ * @returns {boolean}
+ */
+const matchError = (error, skeleton, dataPath, parentDataPath) => {
+  const originalError = error.params?.errors?.[0] ?? error
+  if (parentDataPath === originalError.instancePath && originalError.params?.missingProperty === skeleton.key) return true
+  if (originalError.instancePath === dataPath && originalError.schemaPath === skeleton.pointer) return true
+  return false
+}
+
+/**
+ * @param {import('ajv').ErrorObject} error
+ * @param {import('../index.js').SkeletonNode} skeleton
+ * @param {string} dataPath
+ * @returns {boolean}
+ */
+const matchChildError = (error, skeleton, dataPath) => {
+  if (error.instancePath.startsWith(dataPath) && !(typeof skeleton.key === 'string' && skeleton.key.startsWith('$allOf'))) return true
+  return false
+}
+
+/**
+ * @param {import('../index.js').CompiledExpression[]} expressions
+ * @param {import('@json-layout/vocabulary').Expression} expression
+ * @param {any} data
+ * @param {import('./types.js').StatefulLayoutOptions} options
+ * @param {import('./utils/display.js').Display} display
+ * @returns {any}
+ */
+export function evalExpression (expressions, expression, data, options, display) {
+  if (expression.ref === undefined) throw new Error('expression was not compiled : ' + JSON.stringify(expression))
+  const compiledExpression = expressions[expression.ref]
+  // console.log(expression.expr, context, mode, display)
+  return compiledExpression(data, options, display)
+}
+
+/**
+ * @param {import('@json-layout/vocabulary').NormalizedLayout} normalizedLayout
+ * @param {import('./types.js').StatefulLayoutOptions} options
+ * @param {import('../index.js').CompiledLayout} compiledLayout
+ * @param {import('./utils/display.js').Display} display
+ * @param {unknown} data
+ * @returns {import('@json-layout/vocabulary').CompObject}
+ */
+const getCompObject = (normalizedLayout, options, compiledLayout, display, data) => {
+  if (isSwitchStruct(normalizedLayout)) {
+    for (const compObject of normalizedLayout.switch) {
+      if (!compObject.if || !!evalExpression(compiledLayout.expressions, compObject.if, data, options, display)) {
+        return compObject
+      }
+    }
+  } else {
+    return normalizedLayout
+  }
+  throw new Error('no layout matched for node')
+}
+
+/**
+ *
+ * @param {import('./types.js').CreateStateTreeContext} context
+ * @param {import('./types.js').StatefulLayoutOptions} parentOptions
+ * @param {import('../index.js').CompiledLayout} compiledLayout
+ * @param {string | number} key
+ * @param {string} fullKey
+ * @param {string | null} parentFullKey
+ * @param {string} dataPath
+ * @param {string | null} parentDataPath
+ * @param {import('../index.js').SkeletonNode} skeleton
+ * @param {import('@json-layout/vocabulary').Child | null} childDefinition
+ * @param {import('./utils/display.js').Display} parentDisplay
+ * @param {unknown} data
+ * @param {import('./types.js').ValidationState} validationState
+ * @param {import('./types.js').StateNode} [reusedNode]
+ * @returns {import('./types.js').StateNode}
+ */
+export function createStateNode (
+  context,
+  parentOptions,
+  compiledLayout,
+  key,
+  fullKey,
+  parentFullKey,
+  dataPath,
+  parentDataPath,
+  skeleton,
+  childDefinition,
+  parentDisplay,
+  data,
+  validationState,
+  reusedNode
+) {
+  const normalizedLayout = childDefinition && childIsCompObject(childDefinition)
+    ? childDefinition
+    : compiledLayout.normalizedLayouts[skeleton.pointer]
+  const layout = getCompObject(normalizedLayout, parentOptions, compiledLayout, parentDisplay, data)
+  const [display, cols] = getChildDisplay(parentDisplay, childDefinition?.cols ?? layout.cols)
+
+  const options = produceNodeOptions(
+    reusedNode?.options ?? /** @type {import('./types.js').StatefulLayoutOptions} */({}),
+    parentOptions,
+    layout.options, display.width
+  )
+
+  /** @type {import('./types.js').StateNode[] | undefined} */
+  let children
+  if (isCompositeLayout(layout)) {
+    // TODO: make this type casting safe using prior validation
+    const objectData = /** @type {Record<string, unknown>} */(data ?? {})
+    const childrenOptions = produceCompositeChildrenOptions(options, layout)
+    children = layout.children.map((child, i) => {
+      const childSkeleton = skeleton.children?.find(c => c.key === child.key) ?? skeleton
+      const isSameData = typeof child.key === 'string' && child.key.startsWith('$')
+      return createStateNode(
+        context,
+        childrenOptions,
+        compiledLayout,
+        child.key,
+        `${fullKey}/${child.key}`,
+        fullKey,
+        isSameData ? dataPath : `${dataPath}/${child.key}`,
+        dataPath,
+        childSkeleton,
+        child,
+        display,
+        isSameData ? objectData : objectData[child.key],
+        validationState,
+        reusedNode?.children?.[i]
+      )
+    })
+  }
+
+  if (key === '$oneOf' && skeleton.childrenTrees) {
+    // find the oneOf child that was either previously selected, if none were selected select the child that is valid with current data
+    /** @type {number} */
+    const activeChildTreeIndex = fullKey in context.activeItems ? context.activeItems[fullKey] : skeleton.childrenTrees?.findIndex((childTree) => compiledLayout.validates[childTree.root.pointer](data))
+    if (activeChildTreeIndex !== -1) {
+      context.activeItems[fullKey] = activeChildTreeIndex
+      const activeChildTree = skeleton.childrenTrees[activeChildTreeIndex]
+      children = [
+        createStateNode(
+          context,
+          options,
+          compiledLayout,
+          activeChildTreeIndex,
+          `${fullKey}/${activeChildTreeIndex}`,
+          fullKey,
+          dataPath,
+          dataPath,
+          activeChildTree.root,
+          null,
+          display,
+          data,
+          validationState,
+          reusedNode?.children?.[0]
+        )
+      ]
+    }
+  }
+
+  if (layout.comp === 'list') {
+    const arrayData = /** @type {unknown[]} */(data ?? [])
+    const childSkeleton = /** @type {import('../index.js').SkeletonNode} */(skeleton?.childrenTrees?.[0]?.root)
+    const listItemOptions = layout.listEditMode === 'inline' ? options : produceReadonlyArrayItemOptions(options)
+    children = arrayData.map((itemData, i) => {
+      const childFullKey = `${fullKey}/${i}`
+      return createStateNode(
+        context,
+        (layout.listEditMode === 'inline-single' && context.activeItems[fullKey] === i) ? options : listItemOptions,
+        compiledLayout,
+        i,
+        childFullKey,
+        fullKey,
+        `${dataPath}/${i}`,
+        dataPath,
+        childSkeleton,
+        null,
+        display,
+        itemData,
+        validationState,
+        reusedNode?.children?.[0]
+      )
+    })
+  }
+
+  const error = context.errors?.find(error => matchError(error, skeleton, dataPath, parentDataPath)) ?? context.errors?.find(error => matchChildError(error, skeleton, dataPath))
+  // capture errors so that they are not repeated in parent nodes
+  if (layout.comp !== 'none') {
+    if (error) context.errors = context.errors?.filter(error => !matchError(error, skeleton, dataPath, parentDataPath) && !matchChildError(error, skeleton, dataPath))
+  }
+  const validated = validationState.validatedForm ||
+    validationState.validatedChildren.includes(fullKey) ||
+    (validationState.initialized === false && options.initialValidation === 'always') ||
+    (validationState.initialized === false && options.initialValidation === 'withData' && !isDataEmpty(data))
+
+  const node = produceStateNode(
+    reusedNode ?? /** @type {import('./types.js').StateNode} */({}),
+    key,
+    fullKey,
+    parentFullKey,
+    dataPath,
+    parentDataPath,
+    skeleton,
+    layout,
+    cols,
+    data,
+    error?.message,
+    validated,
+    options,
+    children && shallowCompareArrays(reusedNode?.children, children)
+  )
+  context.nodes.push(node)
+  return node
+}
+
+/** @type {(draft: any, node: import('./types.js').StateNode, data: unknown) => any} */
+export const producePatchedData = produce((draft, node, data) => {
+  if (node.dataPath === node.parentDataPath) {
+    Object.assign(draft, data)
+  } else {
+    draft[node.key] = data
+  }
+}
+)