fw-02 step 01 — Elements, mounting, reconciliation

Goal

Get spec stages 1–3 green, including the DOM-operation budget that is the virtual DOM's entire value proposition.

Tasks

  1. createElement(type, props, ...children) returning plain data. Write h('div', {id:'x'}, 'hi') by hand and look at the object.
  2. render(element, container) — mount only, no diffing. Export setDocument(doc) so the spec can inject the instrumented fake DOM.
  3. Reconciliation: same type reuses the node in place; different type replaces.
  4. The budget test. Changing one item in a 200-item list must cost ≤5 DOM operations. If you fail this you are rebuilding, not reconciling.
  5. Run the same scenario with innerHTML replacement and count operations. That number is the right-hand side of the virtual DOM's inequality.

Done when

  • Stages 1–3 green
  • Op counts recorded for reconcile vs innerHTML replacement
  • key is not rendered as a DOM attribute