Inside keyed DOM reconciliation

Inside keyed DOM reconciliation An architecture diagram generated by Archify. many.values · Sink delivers each array · Architecture component many.values Sink delivers each array reconcile · validate keys; build next ranges · Architecture component reconcile validate keys; build next ranges diff(order, next, …) · insert, move and remove ranges · Architecture component diff(order, next, …) insert, move and remove ranges makeEntry · new RefSubject + child Scope · Architecture component makeEntry new RefSubject + child Scope RefSubject.set · changed retained value · Architecture component RefSubject.set changed retained value range.dispose · Scope.close, forked in parent · Architecture component range.dispose Scope.close, forked in parent next array ordered ranges new key changed value removed range Legend Client code

A reorder retains the child

  • • The entry keeps its RefSubject, Scope and live DOM range.
  • • One keyed-range diff performs collection placement.

Removal and replacement differ

  • • Removal detaches immediately; the parent owns async cleanup.
  • • A child replacing its own output may use diffChildren.