Keyed Reconciliation

Vesk provides `reconcile` for efficient keyed list updates without a virtual DOM. It operates directly on the real DOM using comment markers.

reconcile

									
										import { reconcile } from '@vesk/runtime';

const update = reconcile(
  anchor,              // start comment marker node
  endAnchor,           // end comment marker node
  items,               // initial items array
  (item) => item.id,   // key function
  (item, index, effects) => {
    const el = document.createElement('li');
    el.textContent = item.name;
    anchor.parentNode.insertBefore(el, endAnchor);
  }
);

update(newItems);      // efficient patch
update([]);            // clear the list
									
								

How it works

• Comment markers (`<!--k:key-->`) are inserted as boundaries.
• On update, the reconciler diffs keys: matching keys reuse DOM nodes, new keys create them, removed keys destroy their blocks, reordered keys move nodes.
• It diffs keys, not content — O(n) for the common case.

The `For` headless component and statement-mode `for` loops both compile to keyed reconciliation; you typically don't call `reconcile` directly.