@json-layout/core 0.24.1 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-layout/core",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "description": "Compilation and state management utilities for JSON Layout.",
   "type": "module",
   "exports": {

package/src/compile/index.js

@@ -60,7 +60,7 @@ const fillOptions = (partialOptions) => {
   let ajv = partialOptions.ajv
   if (!ajv) {
     /** @type {import('ajv').Options} */
-    const ajvOpts = { allErrors: true, strict: false }
+    const ajvOpts = { allErrors: true, strict: false, verbose: true }
     if (partialOptions.ajvOptions) Object.assign(ajvOpts, partialOptions.ajvOptions)
     if (partialOptions.code) ajvOpts.code = { source: true, esm: true, lines: true }
     const newAjv = new Ajv(ajvOpts)
@@ -126,6 +126,8 @@ export function compile (_schema, partialOptions = {}) {
   const validationErrors = {}
   /** @type {Record<string, import('./types.js').SkeletonTree>} */
   const skeletonTrees = {}
+  /** @type {Record<string, import('./types.js').SkeletonNode>} */
+  const skeletonNodes = {}
 
   // makeSkeletonTree also mutates the schema (adding some error messages)
   const mainTreePointer = `${schema.$id}#`
@@ -137,6 +139,7 @@ export function compile (_schema, partialOptions = {}) {
     options,
     getJSONRef,
     skeletonTrees,
+    skeletonNodes,
     validatePointers,
     validationErrors,
     normalizedLayouts,
@@ -187,6 +190,7 @@ export function compile (_schema, partialOptions = {}) {
     schema,
     mainTree: mainTreePointer,
     skeletonTrees,
+    skeletonNodes,
     validates,
     validationErrors,
     normalizedLayouts,

package/src/compile/serialize.js

@@ -81,6 +81,7 @@ export const exportLocalizeErrors = localizeErrors;\n` + code
   ast.exports.compiledLayout = {
     mainTree: compiledLayout.mainTree,
     skeletonTrees: clone(compiledLayout.skeletonTrees),
+    skeletonNodes: clone(compiledLayout.skeletonNodes),
     normalizedLayouts: clone(compiledLayout.normalizedLayouts),
     validates: {},
     validationErrors: compiledLayout.validationErrors,

package/src/compile/skeleton-node.js

@@ -9,13 +9,13 @@ import { partialResolveRefs } from './utils/resolve-refs.js'
  * @param {import('./index.js').CompileOptions} options
  * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
  * @param {Record<string, import('./types.js').SkeletonTree>} skeletonTrees
+ * @param {Record<string, import('./types.js').SkeletonNode>} skeletonNodes
  * @param {string[]} validates
  * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
  * @param {import('@json-layout/vocabulary').Expression[]} expressions
  * @param {string | number} key
- * @param {string} currentPointer
- * @param {string | null} parentPointer
+ * @param {string} pointer
  * @param {boolean} required
  * @param {string} [condition]
  * @param {boolean} [dependent]
@@ -28,13 +28,13 @@ export function makeSkeletonNode (
   options,
   getJSONRef,
   skeletonTrees,
+  skeletonNodes,
   validates,
   validationErrors,
   normalizedLayouts,
   expressions,
   key,
-  currentPointer,
-  parentPointer,
+  pointer,
   required,
   condition,
   dependent,
@@ -42,21 +42,23 @@ export function makeSkeletonNode (
 ) {
   let schemaId = sourceSchemaId
   let schema = rawSchema
-  let pointer = currentPointer
+  let refPointer = pointer
   let refFragment
+  rawSchema.__pointer = pointer
   if (schema.$ref) {
-    [refFragment, schemaId, pointer] = getJSONRef(sourceSchemaId, schema.$ref)
-    schema = {...rawSchema, ...refFragment}
+    [refFragment, schemaId, refPointer] = getJSONRef(sourceSchemaId, schema.$ref)
+    refFragment.__pointer = refPointer
+    schema = { ...rawSchema, ...refFragment }
     delete schema.$ref
   }
-  schema = partialResolveRefs(schema, schemaId, getJSONRef)
-  const { type, nullable } = knownType ? { type: knownType, nullable: false } : getSchemaFragmentType(schema)
+  const resolvedSchema = partialResolveRefs(schema, schemaId, getJSONRef)
+  const { type, nullable } = knownType ? { type: knownType, nullable: false } : getSchemaFragmentType(resolvedSchema)
 
   // improve on ajv error messages based on ajv-errors (https://ajv.js.org/packages/ajv-errors.html)
   rawSchema.errorMessage = rawSchema.errorMessage ?? {}
   if (!normalizedLayouts[pointer]) {
     const normalizationResult = normalizeLayoutFragment(
-      /** @type {import('@json-layout/vocabulary').SchemaFragment} */(schema),
+      /** @type {import('@json-layout/vocabulary').SchemaFragment} */(resolvedSchema),
       pointer,
       options.components,
       options.markdown,
@@ -132,7 +134,7 @@ export function makeSkeletonNode (
   const node = {
     key: key ?? '',
     pointer,
-    parentPointer,
+    refPointer,
     pure,
     propertyKeys: [],
     roPropertyKeys: [],
@@ -153,72 +155,88 @@ export function makeSkeletonNode (
         node.propertyKeys.push(propertyKey)
         if (schema.properties[propertyKey].readOnly) node.roPropertyKeys.push(propertyKey)
         const dependent = schema.dependentRequired && Object.values(schema.dependentRequired).some(dependentProperties => dependentProperties.includes(propertyKey))
-        node.children.push(makeSkeletonNode(
-          schema.properties[propertyKey],
-          schemaId,
-          options,
-          getJSONRef,
-          skeletonTrees,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          propertyKey,
-          `${pointer}/properties/${propertyKey}`,
-          pointer,
-          schema.required?.includes(propertyKey),
-          undefined,
-          dependent
-        ))
+        const childPointer = `${refPointer}/properties/${propertyKey}`
+        if (!skeletonNodes[childPointer]) {
+          // @ts-ignore
+          skeletonNodes[childPointer] = 'recursing'
+          skeletonNodes[childPointer] = makeSkeletonNode(
+            schema.properties[propertyKey],
+            schemaId,
+            options,
+            getJSONRef,
+            skeletonTrees,
+            skeletonNodes,
+            validates,
+            validationErrors,
+            normalizedLayouts,
+            expressions,
+            propertyKey,
+            childPointer,
+            schema.required?.includes(propertyKey),
+            undefined,
+            dependent
+          )
+        }
+        node.children.push(childPointer)
 
         if (schema.dependentSchemas?.[propertyKey] || (schema.dependencies?.[propertyKey] && !Array.isArray(schema.dependencies[propertyKey]))) {
           const dependentSchema = schema.dependentSchemas?.[propertyKey] ?? schema.dependencies[propertyKey]
-          const dependentPointer = schema.dependentSchemas?.[propertyKey] ? `${pointer}/dependentSchemas/${propertyKey}` : `${pointer}/dependencies/${propertyKey}`
-          node.children.push(makeSkeletonNode(
-            dependentSchema,
+          const dependentPointer = schema.dependentSchemas?.[propertyKey] ? `${refPointer}/dependentSchemas/${propertyKey}` : `${refPointer}/dependencies/${propertyKey}`
+          if (!skeletonNodes[dependentPointer]) {
+            // @ts-ignore
+            skeletonNodes[dependentPointer] = 'recursing'
+            skeletonNodes[dependentPointer] = makeSkeletonNode(
+              dependentSchema,
+              schemaId,
+              options,
+              getJSONRef,
+              skeletonTrees,
+              skeletonNodes,
+              validates,
+              validationErrors,
+              normalizedLayouts,
+              expressions,
+              `$deps-${propertyKey}`,
+              dependentPointer,
+              false,
+              `data["${propertyKey}"] !== undefined`,
+              undefined,
+              'object'
+            )
+          }
+          node.children.push(dependentPointer)
+        }
+      }
+    }
+    if (schema.allOf) {
+      for (let i = 0; i < schema.allOf.length; i++) {
+        const childPointer = `${refPointer}/allOf/${i}`
+        if (!skeletonNodes[childPointer]) {
+          // @ts-ignore
+          skeletonNodes[childPointer] = 'recursing'
+          skeletonNodes[childPointer] = makeSkeletonNode(
+            schema.allOf[i],
             schemaId,
             options,
             getJSONRef,
             skeletonTrees,
+            skeletonNodes,
             validates,
             validationErrors,
             normalizedLayouts,
             expressions,
-            `$deps-${propertyKey}`,
-            dependentPointer,
-            pointer,
+            `$allOf-${i}`,
+            childPointer,
             false,
-            `data["${propertyKey}"] !== undefined`,
+            undefined,
             undefined,
             'object'
-          ))
+          )
         }
-      }
-    }
-    if (schema.allOf) {
-      node.children = node.children ?? []
-      for (let i = 0; i < schema.allOf.length; i++) {
-        const allOfNode = makeSkeletonNode(
-          schema.allOf[i],
-          schemaId,
-          options,
-          getJSONRef,
-          skeletonTrees,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          `$allOf-${i}`,
-          `${pointer}/allOf/${i}`,
-          pointer,
-          false,
-          undefined,
-          undefined,
-          'object'
-        )
-        node.propertyKeys = node.propertyKeys.concat(allOfNode.propertyKeys)
-        node.roPropertyKeys = node.roPropertyKeys.concat(allOfNode.roPropertyKeys)
-        node.children.push(allOfNode)
+        node.propertyKeys = node.propertyKeys.concat(skeletonNodes[childPointer].propertyKeys)
+        node.roPropertyKeys = node.roPropertyKeys.concat(skeletonNodes[childPointer].roPropertyKeys)
+        node.children = node.children ?? []
+        node.children.push(childPointer)
       }
     }
     if (schema.oneOf) {
@@ -256,6 +274,7 @@ export function makeSkeletonNode (
             options,
             getJSONRef,
             skeletonTrees,
+            skeletonNodes,
             validates,
             validationErrors,
             normalizedLayouts,
@@ -266,95 +285,119 @@ export function makeSkeletonNode (
         }
         childrenTrees.push(childTreePointer)
       }
+      if (!skeletonNodes[oneOfPointer]) {
+        skeletonNodes[oneOfPointer] = {
+          key: '$oneOf',
+          pointer: oneOfPointer,
+          refPointer: oneOfPointer,
+          childrenTrees,
+          pure: skeletonNodes[skeletonTrees[childrenTrees[0]]?.root].pure,
+          propertyKeys: [],
+          roPropertyKeys: []
+        }
+      }
       node.children = node.children ?? []
-      node.children.push({
-        key: '$oneOf',
-        pointer: `${pointer}/oneOf`,
-        parentPointer: pointer,
-        childrenTrees,
-        pure: skeletonTrees[childrenTrees[0]]?.root.pure,
-        propertyKeys: [],
-        roPropertyKeys: []
-      })
+      node.children.push(oneOfPointer)
 
-      schema.errorMessage.oneOf = options.messages.errorOneOf
+      rawSchema.errorMessage.oneOf = options.messages.errorOneOf
     }
     if (schema.if) {
       validates.push(`${pointer}/if`)
       if (schema.then) {
+        const childPointer = `${refPointer}/then`
+        if (!skeletonNodes[childPointer]) {
+          // @ts-ignore
+          skeletonNodes[childPointer] = 'recursing'
+          skeletonNodes[childPointer] = makeSkeletonNode(
+            schema.then,
+            schemaId,
+            options,
+            getJSONRef,
+            skeletonTrees,
+            skeletonNodes,
+            validates,
+            validationErrors,
+            normalizedLayouts,
+            expressions,
+            '$then',
+            childPointer,
+            false,
+            `validates["${pointer}/if"](data)`,
+            undefined,
+            'object'
+          )
+        }
         node.children = node.children ?? []
-        node.children.push(makeSkeletonNode(
-          schema.then,
-          schemaId,
-          options,
-          getJSONRef,
-          skeletonTrees,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          '$then',
-          `${pointer}/then`,
-          pointer,
-          false,
-          `validates["${pointer}/if"](data)`,
-          undefined,
-          'object'
-        ))
+        node.children.push(childPointer)
       }
       if (schema.else) {
+        const childPointer = `${refPointer}/else`
+        if (!skeletonNodes[childPointer]) {
+          // @ts-ignore
+          skeletonNodes[childPointer] = 'recursing'
+          skeletonNodes[childPointer] = makeSkeletonNode(
+            schema.else,
+            schemaId,
+            options,
+            getJSONRef,
+            skeletonTrees,
+            skeletonNodes,
+            validates,
+            validationErrors,
+            normalizedLayouts,
+            expressions,
+            '$else',
+            childPointer,
+            false,
+            `!validates["${pointer}/if"](data)`,
+            undefined,
+            'object'
+          )
+        }
         node.children = node.children ?? []
-        node.children.push(makeSkeletonNode(
-          schema.else,
-          schemaId,
-          options,
-          getJSONRef,
-          skeletonTrees,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          '$else',
-          `${pointer}/else`,
-          pointer,
-          false,
-          `!validates["${pointer}/if"](data)`,
-          undefined,
-          'object'
-        ))
+        node.children.push(childPointer)
       }
     }
 
     for (const propertyKey of node.propertyKeys) {
       if (schema?.required?.includes(propertyKey)) {
-        schema.errorMessage.required = schema.errorMessage.required ?? {}
-        schema.errorMessage.required[propertyKey] = options.messages.errorRequired
+        rawSchema.errorMessage.required = rawSchema.errorMessage.required ?? {}
+        rawSchema.errorMessage.required[propertyKey] = options.messages.errorRequired
       }
       if (schema.dependentRequired && Object.keys(schema.dependentRequired).includes(propertyKey)) {
-        schema.errorMessage.dependentRequired = options.messages.errorRequired
+        rawSchema.errorMessage.dependentRequired = options.messages.errorRequired
       }
     }
   }
 
   if (type === 'array' && schema.items) {
     if (Array.isArray(schema.items)) {
-      node.children = schema.items.map((/** @type {any} */ itemSchema, /** @type {number} */ i) => {
-        return makeSkeletonNode(
-          itemSchema,
-          schemaId,
-          options,
-          getJSONRef,
-          skeletonTrees,
-          validates,
-          validationErrors,
-          normalizedLayouts,
-          expressions,
-          i,
-          `${pointer}/items/${i}`,
-          pointer,
-          true
-        )
-      })
+      node.children = node.children ?? []
+      for (let i = 0; i < schema.items.length; i++) {
+        /** @type {any} */
+        const itemSchema = schema.items[i]
+        const childPointer = `${refPointer}/items/${i}`
+        if (!skeletonNodes[childPointer]) {
+          // @ts-ignore
+          skeletonNodes[childPointer] = 'recursing'
+          skeletonNodes[childPointer] = makeSkeletonNode(
+            itemSchema,
+            schemaId,
+            options,
+            getJSONRef,
+            skeletonTrees,
+            skeletonNodes,
+            validates,
+            validationErrors,
+            normalizedLayouts,
+            expressions,
+            i,
+            childPointer,
+            true
+          )
+        }
+        node.children.push(childPointer)
+      }
     } else {
       const childTreePointer = `${pointer}/items`
       if (!skeletonTrees[childTreePointer]) {
@@ -366,6 +409,7 @@ export function makeSkeletonNode (
           options,
           getJSONRef,
           skeletonTrees,
+          skeletonNodes,
           validates,
           validationErrors,
           normalizedLayouts,
@@ -378,11 +422,12 @@ export function makeSkeletonNode (
     }
   }
 
-  for (const child of node.children || []) {
+  for (const childPointer of node.children || []) {
+    const child = skeletonNodes[childPointer]
     if (!child.pure) node.pure = false
   }
   for (const childTree of node.childrenTrees || []) {
-    if (!skeletonTrees[childTree]?.root?.pure) node.pure = false
+    if (!skeletonNodes[skeletonTrees[childTree]?.root]?.pure) node.pure = false
   }
 
   return node

package/src/compile/skeleton-tree.js

@@ -9,6 +9,7 @@ import { makeSkeletonNode } from './skeleton-node.js'
  * @param {import('./index.js').CompileOptions} options
  * @param {(schemaId: string, ref: string) => [any, string, string]} getJSONRef
  * @param {Record<string, import('./types.js').SkeletonTree>} skeletonTrees
+ * @param {Record<string, import('./types.js').SkeletonNode>} skeletonNodes
  * @param {string[]} validates
  * @param {Record<string, string[]>} validationErrors
  * @param {Record<string, import('@json-layout/vocabulary').NormalizedLayout>} normalizedLayouts
@@ -23,6 +24,7 @@ export function makeSkeletonTree (
   options,
   getJSONRef,
   skeletonTrees,
+  skeletonNodes,
   validates,
   validationErrors,
   normalizedLayouts,
@@ -30,21 +32,25 @@ export function makeSkeletonTree (
   pointer,
   title
 ) {
-  const root = makeSkeletonNode(
-    schema,
-    schemaId,
-    options,
-    getJSONRef,
-    skeletonTrees,
-    validates,
-    validationErrors,
-    normalizedLayouts,
-    expressions,
-    '',
-    pointer,
-    null,
-    true
-  )
-  validates.push(root.pointer)
-  return { title, root }
+  if (!skeletonNodes[pointer]) {
+    // @ts-ignore
+    skeletonNodes[pointer] = 'recursing'
+    skeletonNodes[pointer] = makeSkeletonNode(
+      schema,
+      schemaId,
+      options,
+      getJSONRef,
+      skeletonTrees,
+      skeletonNodes,
+      validates,
+      validationErrors,
+      normalizedLayouts,
+      expressions,
+      '',
+      pointer,
+      true
+    )
+    validates.push(pointer)
+  }
+  return { title, root: pointer }
 }

package/src/compile/types.ts

@@ -41,8 +41,9 @@ export type PartialCompileOptions = Partial<Omit<CompileOptions, 'messages'>> &
 export interface CompiledLayout {
   options?: CompileOptions
   schema?: SchemaObject
-  mainTree: string,
+  mainTree: string
   skeletonTrees: Record<string, SkeletonTree>
+  skeletonNodes: Record<string, SkeletonNode>
   validates: Record<string, ValidateFunction>
   validationErrors: Record<string, string[]>
   normalizedLayouts: Record<string, NormalizedLayout>
@@ -57,7 +58,7 @@ export interface CompiledLayout {
 // it will be used to instantiate a StateLayoutTree with 1 validation context
 export interface SkeletonTree {
   title: string
-  root: SkeletonNode
+  root: string
 }
 
 // a skeleton node is a light recursive structure
@@ -65,12 +66,12 @@ export interface SkeletonTree {
 export interface SkeletonNode {
   key: string | number
   pointer: string
-  parentPointer: string | null
+  refPointer: string
   pure: boolean
   propertyKeys: string[]
   roPropertyKeys: string[]
   condition?: Expression
-  children?: SkeletonNode[] // optional children in the case of arrays and object nodes
+  children?: string[] // optional children in the case of arrays and object nodes
   childrenTrees?: string[] // other trees that can be instantiated with separate validation (for example in the case of new array items of oneOfs, etc)
   required?: boolean
   nullable?: boolean

package/src/state/state-node.js

@@ -138,6 +138,7 @@ const produceCompositeChildrenOptions = produce((draft, section) => {
 })
 
 /**
+ * should match if an error belongs to this exact node
  * @param {import('ajv').ErrorObject} error
  * @param {import('../index.js').SkeletonNode} skeleton
  * @param {string} dataPath
@@ -147,11 +148,12 @@ const produceCompositeChildrenOptions = produce((draft, section) => {
 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
+  if (originalError.instancePath === dataPath && (originalError.schemaPath === skeleton.pointer || originalError.schemaPath === skeleton.refPointer)) return true
   return false
 }
 
 /**
+ * should match if an error belongs to a child of the current node but the child was not displayed
  * @param {import('ajv').ErrorObject} error
  * @param {import('../index.js').SkeletonNode} skeleton
  * @param {string} dataPath
@@ -159,11 +161,15 @@ const matchError = (error, skeleton, dataPath, parentDataPath) => {
  * @returns {boolean}
  */
 const matchChildError = (error, skeleton, dataPath, parentDataPath) => {
+  const originalError = error.params?.errors?.[0] ?? error
   if (!(
-    error.schemaPath === skeleton.pointer ||
-    error.schemaPath.startsWith(skeleton.pointer + '/')
+    originalError.schemaPath === skeleton.pointer ||
+    originalError.schemaPath.startsWith(skeleton.pointer + '/')
+  ) && !(
+    originalError.schemaPath === skeleton.refPointer ||
+    originalError.schemaPath.startsWith(skeleton.refPointer + '/')
   )) return false
-  if (error.instancePath.startsWith(dataPath)) return true
+  if (originalError.instancePath.startsWith(dataPath)) return true
   return false
 }
 
@@ -303,7 +309,9 @@ export function createStateNode (
         ['remove', 'hide'].includes(options.readOnlyPropertiesMode) &&
         skeleton.roPropertyKeys?.includes(/** @type {string} */(childLayout.key))
       ) continue
-      const childSkeleton = skeleton.children?.find(c => c.key === childLayout.key) ?? skeleton
+      let childSkeleton = skeleton
+      const childSkeletonKey = skeleton.children?.find(c => compiledLayout.skeletonNodes[c].key === childLayout.key)
+      if (childSkeletonKey !== undefined) childSkeleton = compiledLayout.skeletonNodes[childSkeletonKey]
       if (childSkeleton.condition) {
         if (!evalExpression(compiledLayout.expressions, childSkeleton.condition, objectData, parentOptions, display, layout, compiledLayout.validates, context.rootData, parentContext)) {
           continue
@@ -337,16 +345,19 @@ export function createStateNode (
   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.activatedItems ? context.activatedItems[fullKey] : skeleton.childrenTrees?.findIndex((childTree) => compiledLayout.validates[compiledLayout.skeletonTrees[childTree].root.pointer](data))
+    const activeChildTreeIndex = fullKey in context.activatedItems ? context.activatedItems[fullKey] : skeleton.childrenTrees?.findIndex((childTree) => compiledLayout.validates[compiledLayout.skeletonTrees[childTree].root](data))
     if (activeChildTreeIndex !== -1) {
       context.errors = context.errors?.filter(error => {
         const originalError = error.params?.errors?.[0] ?? error
+        // console.log(originalError.schemaPath, skeleton.pointer, skeleton.refPointer)
         // if an item was selected, remove the oneOf error
-        if (originalError.schemaPath === skeleton.pointer && originalError.keyword === 'oneOf') return false
+        if ((originalError.schemaPath === skeleton.pointer || originalError.schemaPath === skeleton.refPointer) && originalError.keyword === 'oneOf') return false
         // also remove the errors from other children of the oneOf
         if (originalError.schemaPath.startsWith(skeleton.pointer) && !originalError.schemaPath.startsWith(skeleton.pointer + '/' + activeChildTreeIndex)) return false
+        if (originalError.schemaPath.startsWith(skeleton.refPointer) && !originalError.schemaPath.startsWith(skeleton.refPointer + '/' + activeChildTreeIndex)) return false
         return true
       })
+      // console.log(context.errors?.map(error => error.params?.errors?.[0] ?? error))
       const activeChildKey = `${fullKey}/${activeChildTreeIndex}`
       if (context.autofocusTarget === fullKey) context.autofocusTarget = activeChildKey
       const activeChildTree = compiledLayout.skeletonTrees[skeleton.childrenTrees[activeChildTreeIndex]]
@@ -360,7 +371,7 @@ export function createStateNode (
           fullKey,
           dataPath,
           dataPath,
-          activeChildTree.root,
+          compiledLayout.skeletonNodes[activeChildTree.root],
           null,
           display,
           data,
@@ -374,7 +385,7 @@ export function createStateNode (
 
   if (layout.comp === 'list') {
     const arrayData = /** @type {unknown[]} */(data ?? [])
-    const childSkeleton = /** @type {import('../index.js').SkeletonNode} */(skeleton?.childrenTrees?.[0] && compiledLayout.skeletonTrees[skeleton?.childrenTrees?.[0]]?.root)
+    const childSkeleton = /** @type {import('../index.js').SkeletonNode} */(skeleton?.childrenTrees?.[0] && compiledLayout.skeletonNodes[compiledLayout.skeletonTrees[skeleton?.childrenTrees?.[0]]?.root])
     const listItemOptions = layout.listEditMode === 'inline' ? options : produceReadonlyArrayItemOptions(options)
     children = []
     let focusChild = context.autofocusTarget === fullKey