liveBook · Manning

Extractchildren

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

A book-specific recursive function that produces a flat child-node array by expanding fragment nodes.

extractChildren produces a flat child-node array for DOM patching. It hides fragment nodes while preserving the order of their descendants, including descendants nested inside other fragments. section 8.2.6

Implement it with three small responsibilities:

  • When a child is a fragment, recursively extract its children and spread them into the result. section 8.2.6

Nested fragments

Given a node containing an ordinary child and a fragment whose contents include another fragment, extractChildren returns one flat array of ordinary descendants. patchChildren can then compare old and new arrays with arraysDiffSequence. section 8.2.6

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

How deep it goes
Defines a recursive JavaScript implementation and stops short of completing the surrounding diff operations.
Examples
Uses absent children, ordinary children, and recursively nested fragment nodes as implementation cases.
What you can do after
Build it from scratch as a small recursive helper that flattens virtual-DOM children for comparison.
How it connects
Connects fragment nodes with virtual DOM reconciliation, child-array diffing, and patchChildren.

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.