Function syncListNodes

packages/core/src/node.ts:2078–2161

* Hydrate a list node and its children. There are some assumptions about the * child nodes that are made here: * 1. The child nodes are either: * - Are scalars and their values can be exchanged. * - Are groups and should maintain node identity. * 2. The value of the list will be a 1-1 rep

(node: FormKitNode, context: FormKitContext)

 * @param node - A {@link FormKitNode | FormKitNode}
 */
function syncListNodes(node: FormKitNode, context: FormKitContext) {
  const _value = node._value
  if (!Array.isArray(_value)) return

  const newChildren: Array<FormKitNode | FormKitPlaceholderNode | null> = []
  const unused = new Set(context.children)
  const placeholderValues = new Map<unknown, number[]>()

  // 1. Iterate over the values and if the values at the same index are equal
  //    then we can reuse the node. Otherwise we add a `null` placeholder.
  _value.forEach((value, i) => {
    if (context.children[i] && context.children[i]._value === value) {
      newChildren.push(context.children[i])
      unused.delete(context.children[i])
    } else {
      newChildren.push(null)

      const indexes = placeholderValues.get(value) || []
      indexes.push(i)
      placeholderValues.set(value, indexes)
    }
  })

  // 2. If there are unused nodes, and there are null nodes in the new children
  //    then we attempt to match those irregardless of their index.
  if (unused.size && placeholderValues.size) {
    unused.forEach((child) => {
      if (placeholderValues.has(child._value)) {
        /* eslint-disable @typescript-eslint/no-non-null-assertion */
        const indexes = placeholderValues.get(child._value)!
        const index = indexes.shift()!
        /* eslint-enable @typescript-eslint/no-non-null-assertion */
        newChildren[index] = child
        unused.delete(child)
        if (!indexes.length) placeholderValues.delete(child._value)
      }
    })
  }

  // 3. If there are still unused nodes, and unused placeholders, we assign the
  //    unused nodes to the unused placeholders in order.
  // IMPORTANT: Collect empty indexes in sequential order (0, 1, 2, ...) rather
  // than iterating placeholderValues Map which groups indexes by value.
  const emptyIndexes: number[] = []
  for (let i = 0; i < newChildren.length; i++) {
    if (newChildren[i] === null) {
      emptyIndexes.push(i)
    }
  }

  while (unused.size && emptyIndexes.length) {
    const child = unused.values().next().value
    const index = emptyIndexes.shift()
    if (index === undefined || child === undefined) break
    newChildren[index] = child
    unused.delete(child)
  }