Patchchildren

As explained in Build a Frontend Web Framework (From Scratch)

A book-specific function that applies the differences between the child collections of two virtual nodes to the corresponding DOM content.

patchChildren applies the difference between two virtual-node child collections to their corresponding DOM content. It extracts children, computes an ordered diff, and processes additions, removals, moves, and unchanged positions. section 8.2.6

Implementation responsibilities:

• Extract children from both nodes, recursively flattening fragment children and using an empty array when children are absent. section 8.2.6
• Call arraysDiffSequence with areNodesEqual to identify operations transforming the old collection into the new one. section 8.2.6

Reordering a child

For a move operation, retrieve the old child and its DOM element, insert it before the target child node, then patch it against the new virtual child.

Figure 8.14 Patching the children of a node

Use the flow diagram to follow how child differences become mount, destroy, move, or recursive patch operations. section 8.2.6

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes

Explains recursive extraction, array diffing, and four DOM operations, while omitting production-level optimization details.

Examples

Uses fragment flattening and add, remove, move, and noop child operations with focused JavaScript listings and figures.

What it assumes

Assumes virtual nodes, DOM elements, patchDOM, node equality, mounting, destruction, and arraysDiffSequence are available.

What you can do after

Build it from scratch by extracting children, generating a diff sequence, and applying each operation to the DOM.

How it connects

Connects virtual DOM, DOM reconciliation, fragments, array diffing, node equality, mounting, destruction, and recursive patching.

liveBookmanning.com

Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

• insertBeforeuses · A DOM Node method that inserts a new node immediately before a specified reference node in the same parent.
• reconciliationused by · Reconciliation is the process of comparing related states, records, or outputs to identify differences and, when needed, resolve them or bring them into agreement.

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.