Keyed DOM Reconcile

When a list re-renders — rows reordered, one removed, one inserted — a framework must transform the old DOM into the new one without blowing away and rebuilding every node. Blowing them away loses focus, scroll, input values, and animation state, and it's slow. The fix is keyed reconciliation: match old and new items by a stable key, reuse the surviving DOM nodes, and emit the minimal inserts, moves, and removals. This is the algorithm behind React's key, Vue's v-for keys, and Snabbdom.

Implement diffDomKeyedReconcile(parent, newKeys, createNode) — reorder a real DOM parent's keyed children to match newKeys, returning the operations performed.

Signature

function diffDomKeyedReconcile(parent, newKeys, createNode) {
  // returns [{ type: 'insert' | 'move' | 'remove', key }, ...]
}

Examples

// parent children (by data-key): a, b, c
diffDomKeyedReconcile(parent, ['c', 'a', 'b'], createNode);
// -> reorders to c, a, b reusing the SAME three nodes; returns move ops

// parent: a, b, c  ->  new: ['a', 'c']
diffDomKeyedReconcile(parent, ['a', 'c'], createNode);
// -> removes node 'b'; a and c untouched; returns [{ type:'remove', key:'b' }]

Notes

• Match by key, not position — each child's identity is its data-key. A key present in both lists reuses the same DOM node (preserving its content/state).
• Three operations — remove nodes whose key vanished; insert a fresh node (via createNode(key)) for a brand-new key; move reused nodes into place.
• Final order equals newKeys — after reconciling, parent's children read exactly newKeys, left to right.
• Reuse is the point — never recreate a node whose key survived; identity preservation is what keeps focus and input state alive.