@ape-egg/vibe 4.2.1 → 4.3.1

package/runtime/reconcile.js

@@ -1,4 +1,29 @@
+import parse, { rewriteHandler } from './parse.js';
+import hydrate from './hydrate.js';
+import affected, { ownBindingsOf } from './affected.js';
+import { findNodeByElement, addToManifest, manifestPathOf } from './manifest.js';
+import {
+  managedNodes,
+  branchNodeRegistry,
+  dispatchConditional,
+  remountBranch,
+  renderAllConditionals,
+} from './conditionals.js';
+import {
+  renderAllIterations,
+  createScopedState,
+  swapIterationTemplate,
+  rerenderIteration,
+  patchTreelessInstances,
+  instanceRange,
+  prepareTemplateComponents,
+} from './iterate.js';
+import { forceRemount, remountComponent, renderComponentTemplate } from './component.js';
+import { eachComponentIn } from './component-registry.js';
 import { parkFetchableSrc } from './iteration-utils.js';
+import { stampInstanceScopes } from './loop-scope.js';
+import { isInert } from './inert.js';
+import { findComponentIdForElement } from './utils.js';
 import {
   ITERATION_START_REGEX,
   CONDITIONAL_START_REGEX,
@@ -14,6 +39,7 @@ const isIterationStart = (n) =>
   n.nodeType === COMMENT && ITERATION_START_REGEX.test(n.textContent.trim());
 const isConditionalStart = (n) =>
   n.nodeType === COMMENT && CONDITIONAL_START_REGEX.test(n.textContent.trim());
+const isRegionStart = (n) => isIterationStart(n) || isConditionalStart(n);
 const isRegionEnd = (n) => {
   if (n.nodeType !== COMMENT) return false;
   const t = n.textContent.trim();
@@ -22,10 +48,12 @@ const isRegionEnd = (n) => {
 const isComponentWrapper = (n) =>
   n.nodeType === ELEMENT &&
   (n.tagName === 'COMPONENT' || (n.tagName === 'DIV' && n.classList?.contains('component')));
-
 const isSlotElement = (n) =>
   n.nodeType === ELEMENT &&
   (n.tagName === 'SLOT' || (n.tagName === 'DIV' && n.classList?.contains('slot')));
+const isScript = (n) => n.nodeType === ELEMENT && n.tagName === 'SCRIPT';
+
+const hasBinding = (s) => /@\[.+?\]/.test(s);
 
 const nodesMatch = (a, b) => {
   if (!a || !b) return false;
@@ -49,6 +77,19 @@ const findRealignment = (liveNodes, li, sourceNodes, si) => {
   return null;
 };
 
+const findRegionEnd = (nodes, startIdx) => {
+  let depth = 1;
+  for (let i = startIdx + 1; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (isRegionStart(n)) depth++;
+    else if (isRegionEnd(n)) {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return nodes.length - 1;
+};
+
 const trimWsEdges = (nodes) => {
   let start = 0;
   let end = nodes.length;
@@ -57,10 +98,6 @@ const trimWsEdges = (nodes) => {
   return nodes.slice(start, end);
 };
 
-const firstElementChildOf = (parent) => {
-  for (const n of parent.children || []) return n;
-  return null;
-};
 const firstElementOfNodes = (nodes) => {
   for (const n of nodes) if (n.nodeType === ELEMENT) return n;
   return null;
@@ -69,87 +106,15 @@ const findOwnSlot = (el, srcChildren) => {
   const srcFirst = firstElementOfNodes(srcChildren);
   if (!srcFirst) return null;
   for (const slot of el.querySelectorAll('slot')) {
-    const liveFirst = firstElementChildOf(slot);
-    if (liveFirst?.tagName === srcFirst.tagName) return slot;
+    if (slot.firstElementChild?.tagName === srcFirst.tagName) return slot;
   }
   return null;
 };
 
-const hasBinding = (s) => /@\[.+?\]/.test(s);
-
-const boundSourceCache = new WeakMap();
-
-const updateBoundText = (live, newSrc, parent, log) => {
-  const oldSrc = boundSourceCache.get(live);
-  boundSourceCache.set(live, newSrc);
-  if (oldSrc === undefined || oldSrc === newSrc) return;
-
-  const oldBindings = oldSrc.match(/@\[[^\]]+\]/g) || [];
-  const newBindings = newSrc.match(/@\[[^\]]+\]/g) || [];
-  if (oldBindings.length !== newBindings.length) return;
-  for (let i = 0; i < oldBindings.length; i++) {
-    if (oldBindings[i] !== newBindings[i]) return;
-  }
-
-  const oldStatic = oldSrc.split(/@\[[^\]]+\]/);
-  const newStatic = newSrc.split(/@\[[^\]]+\]/);
-
-  const liveText = live.textContent;
-  const values = [];
-  let pos = 0;
-  for (let i = 0; i < oldStatic.length - 1; i++) {
-    const before = oldStatic[i];
-    const after = oldStatic[i + 1];
-    if (liveText.slice(pos, pos + before.length) !== before) return;
-    pos += before.length;
-    let endPos;
-    if (i === oldStatic.length - 2) {
-      endPos = liveText.length - after.length;
-      if (endPos < pos || liveText.slice(endPos) !== after) return;
-    } else {
-      endPos = liveText.indexOf(after, pos);
-      if (endPos < 0) return;
-    }
-    values.push(liveText.slice(pos, endPos));
-    pos = endPos;
-  }
-
-  let result = newStatic[0];
-  for (let i = 0; i < values.length; i++) {
-    result += values[i] + newStatic[i + 1];
-  }
-  if (result === liveText) return;
-
-  live.textContent = result;
-  log.text++;
-  log.changes.push(`bound text in ${describe(parent)}: ${JSON.stringify(result.slice(0, 60))}`);
-};
-
-const findRegionEnd = (nodes, startIdx, endLimit) => {
-  const limit = endLimit ?? nodes.length;
-  let depth = 1;
-  for (let i = startIdx + 1; i < limit; i++) {
-    const n = nodes[i];
-    if (isIterationStart(n) || isConditionalStart(n)) depth++;
-    else if (isRegionEnd(n)) {
-      depth--;
-      if (depth === 0) return i;
-    }
-  }
-  return limit - 1;
-};
-
-const findElseMarker = (nodes, startIdx, endIdx) => {
-  let depth = 0;
-  for (let i = startIdx; i < endIdx; i++) {
-    const n = nodes[i];
-    if (n.nodeType !== COMMENT) continue;
-    const t = n.textContent.trim();
-    if (t.startsWith('if ') || t.startsWith('each ')) depth++;
-    else if (t === '/if' || t === '/each') depth--;
-    else if (depth === 0 && t === 'else') return i;
-  }
-  return -1;
+const rangeBetween = (from, to) => {
+  const nodes = [];
+  for (let cur = from; cur && cur !== to; cur = cur.nextSibling) nodes.push(cur);
+  return nodes;
 };
 
 const PRESERVED_ATTRS = new Set([FOUC_CLASS_OR_ATTR]);
@@ -171,150 +136,159 @@ const describe = (el) => {
   return el.tagName.toLowerCase() + id + cls;
 };
 
-const reconcileAttributes = (live, src, log) => {
-  let hasNameBinding = false;
-  for (const attr of src.attributes) {
-    if (attr.name.includes('@[')) { hasNameBinding = true; continue; }
-    if (hasBinding(attr.value)) continue;
-    const next = attr.name === 'class' ? mergeClass(attr.value, live) : attr.value;
-    if (live.getAttribute(attr.name) !== next) {
-      live.setAttribute(attr.name, next);
-      log.attr++;
-      log.changes.push(`attr ${describe(live)} [${attr.name}=${JSON.stringify(next)}]`);
-    }
-  }
-  if (hasNameBinding) return;
-  for (const attr of [...live.attributes]) {
-    if (src.hasAttribute(attr.name)) continue;
-    if (isPreservedAttr(attr.name)) continue;
-    if (src.hasAttribute('data-' + attr.name)) continue;
-    if (attr.name === 'class') {
-      const kept = [...live.classList].filter((t) => PRESERVED_CLASSES.has(t));
-      if (kept.length) live.setAttribute('class', kept.join(' '));
-      else live.removeAttribute('class');
-      log.attr++;
-      log.changes.push(`attr ${describe(live)} [class trimmed]`);
-      continue;
-    }
-    live.removeAttribute(attr.name);
-    log.attr++;
-    log.changes.push(`attr ${describe(live)} [-${attr.name}]`);
+const sameRecord = (a, b) => {
+  const ak = Object.keys(a ?? {});
+  const bk = Object.keys(b ?? {});
+  return ak.length === bk.length && ak.every((k) => a[k] === b?.[k]);
+};
+const sameList = (a, b) => {
+  const al = a ?? [];
+  const bl = b ?? [];
+  return al.length === bl.length && al.every((v, i) => v === bl[i]);
+};
+
+const childrenByNode = (tree) => {
+  const map = new Map();
+  if (!tree?.children) return map;
+  for (const key in tree.children) {
+    const child = tree.children[key];
+    if (!child || typeof child !== 'object') continue;
+    const node = child.meta?.startComment ?? child.textNode ?? child.element;
+    if (node && !map.has(node)) map.set(node, { key, tree: child });
   }
+  return map;
+};
+
+const nextKey = (tree, sample) => {
+  tree._nextChildIndex ??= Object.keys(tree.children).length;
+  return `${sample.slice(0, sample.lastIndexOf('_'))}_${tree._nextChildIndex++}`;
+};
+
+const attach = (parentTree, key, tree, parent, ctx) => {
+  const name = nextKey(parentTree, key);
+  if (tree.type === 'conditional') tree._key = name;
+  parentTree.children[name] = tree;
+  if (ctx.manifestBase === null) return;
+  const base = ctx.manifestBase ?? manifestPathOf(ctx.manifest, parent);
+  if (base !== null) addToManifest(tree, ctx.manifest, `${base}.${name}`);
 };
 
-const reconcileRange = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart, sEnd, log, insideIteration = false) => {
-  let li = liStart;
-  let si = siStart;
+const rehydrate = (tree, ctx) => {
+  const entries = ownBindingsOf(tree, ctx.state);
+  if (entries.length) hydrate(entries, ctx.state, ctx.manifest, ctx.state);
+};
+
+const mountFresh = (tree, ctx) => {
+  const entries = affected(tree, ctx.state, ctx.state);
+  if (entries.length) hydrate(entries, ctx.state, ctx.manifest, ctx.state);
+  renderAllIterations(tree, ctx.state, ctx.manifest, ctx.parentScope);
+  renderAllConditionals(tree, ctx.state, ctx.manifest, ctx.parentScope);
+};
+
+const materialize = (srcNodes, parent, ctx) => {
+  const box = document.createElement('div');
+  box._vibeComponentId = findComponentIdForElement(parent);
+  for (const n of srcNodes) box.appendChild(n.cloneNode(true));
+  prepareTemplateComponents(box, ctx.state);
+  const trees = parse(box, undefined, ctx.aliases).children;
+  return { nodes: [...box.childNodes], trees };
+};
 
-  while (li < liEnd || si < sEnd) {
-    const live = li < liEnd ? liveNodes[li] : null;
-    const src = si < sEnd ? srcNodes[si] : null;
+const adoptElement = (live, parent, oldTree, ctx) => {
+  if (!oldTree || isInert(live)) return null;
+  const tree = parse(live, undefined, ctx.aliases);
+  attach(oldTree, `${live.tagName.toLowerCase()}_0`, tree, parent, ctx);
+  return tree;
+};
+
+const reconcileList = (parent, liveNodes, srcNodes, oldTree, newTree, ctx, anchor = null) => {
+  const { log } = ctx;
+  const oldMap = childrenByNode(oldTree);
+  const newMap = childrenByNode(newTree);
+  const oldOf = (n) => oldMap.get(n)?.tree;
+  const newOf = (n) => newMap.get(n)?.tree;
+  let li = 0;
+  let si = 0;
+  let structural = 0;
+
+  const insert = (from, to, ref) => {
+    const { nodes, trees } = materialize(srcNodes.slice(from, to + 1).filter((n) => !isScript(n)), parent, ctx);
+    for (const n of nodes) {
+      if (oldTree && n.nodeType === ELEMENT) managedNodes.add(n);
+      parent.insertBefore(n, ref);
+    }
+    if (oldTree) {
+      for (const key in trees) {
+        attach(oldTree, key, trees[key], parent, ctx);
+        mountFresh(trees[key], ctx);
+      }
+    }
+    log.insert += nodes.length;
+    log.changes.push(`insert ${nodes.map(describe).join(', ')} into ${describe(parent)}`);
+    structural++;
+  };
+
+  const remove = (from, to) => {
+    for (let k = from; k <= to; k++) {
+      const n = liveNodes[k];
+      if (isScript(n)) continue;
+      const hit = oldMap.get(n);
+      if (hit && oldTree) delete oldTree.children[hit.key];
+      n.remove();
+      log.remove++;
+      log.changes.push(`remove ${describe(n)} from ${describe(parent)}`);
+    }
+    structural++;
+  };
+
+  while (li < liveNodes.length || si < srcNodes.length) {
+    const live = li < liveNodes.length ? liveNodes[li] : null;
+    const src = si < srcNodes.length ? srcNodes[si] : null;
 
     if (!live) {
-      liveParent.appendChild(srcNodes[si].cloneNode(true));
-      log.insert++;
-      log.changes.push(`insert ${describe(srcNodes[si])} into ${describe(liveParent)}`);
-      si++;
+      const end = isRegionStart(src) ? findRegionEnd(srcNodes, si) : si;
+      insert(si, end, anchor);
+      si = end + 1;
       continue;
     }
     if (!src) {
-      log.remove++;
-      log.changes.push(`remove ${describe(live)} from ${describe(liveParent)}`);
-      live.remove();
-      li++;
+      const end = isRegionStart(live) ? findRegionEnd(liveNodes, li) : li;
+      remove(li, end);
+      li = end + 1;
       continue;
     }
 
-    const srcIsScript = src?.nodeType === ELEMENT && src.tagName === 'SCRIPT';
-    const liveIsScript = live?.nodeType === ELEMENT && live.tagName === 'SCRIPT';
-    if (srcIsScript && !liveIsScript) { si++; continue; }
-    if (liveIsScript && !srcIsScript) { li++; continue; }
-
-    const liveIsRegion = isIterationStart(live) || isConditionalStart(live);
-    const srcIsRegion = isIterationStart(src) || isConditionalStart(src);
-
-    if (liveIsRegion && srcIsRegion) {
-      const liveEnd = findRegionEnd(liveNodes, li, liEnd);
-      const srcEnd = findRegionEnd(srcNodes, si, sEnd);
-      if (isConditionalStart(live) && isConditionalStart(src)) {
-        reconcileConditionalRegion(liveParent, liveNodes, li, liveEnd, srcNodes, si, srcEnd, log, insideIteration);
-      } else if (isIterationStart(live) && isIterationStart(src)) {
-        reconcileIterationRegion(liveParent, liveNodes, li, liveEnd, srcNodes, si, srcEnd, log);
-      }
+    if (isScript(src) && !isScript(live)) { si++; continue; }
+    if (isScript(live) && !isScript(src)) { li++; continue; }
+
+    const liveRegion = isRegionStart(live);
+    const srcRegion = isRegionStart(src);
+
+    if (liveRegion && srcRegion && isIterationStart(live) === isIterationStart(src)) {
+      const liveEnd = findRegionEnd(liveNodes, li);
+      const srcEnd = findRegionEnd(srcNodes, si);
+      const region = { parent, liveStart: live, srcStart: src, oldT: oldOf(live), newT: newOf(src) };
+      if (isIterationStart(live)) reconcileIteration(region, ctx);
+      else reconcileConditional(region, ctx);
       li = liveEnd + 1;
       si = srcEnd + 1;
       continue;
     }
-    if (liveIsRegion) {
-      const end = findRegionEnd(liveNodes, li, liEnd);
-      for (let k = li; k <= end; k++) {
-        log.remove++;
-        liveNodes[k].remove();
-      }
-      log.changes.push(`remove vibe region from ${describe(liveParent)}`);
+    if (liveRegion) {
+      const end = findRegionEnd(liveNodes, li);
+      remove(li, end);
       li = end + 1;
       continue;
     }
-    if (srcIsRegion) {
-      const end = findRegionEnd(srcNodes, si, sEnd);
-      for (let k = si; k <= end; k++) {
-        liveParent.insertBefore(srcNodes[k].cloneNode(true), live);
-        log.insert++;
-      }
-      log.changes.push(`insert vibe region into ${describe(liveParent)}`);
+    if (srcRegion) {
+      const end = findRegionEnd(srcNodes, si);
+      insert(si, end, live);
       si = end + 1;
       continue;
     }
 
     if (isComponentWrapper(live) && isComponentWrapper(src)) {
-      if (insideIteration) {
-        li++;
-        si++;
-        continue;
-      }
-      if (live._vibeProps && src.hasAttribute('src')) {
-        const srcProps = {};
-        for (const a of src.attributes) {
-          if (a.name === FOUC_CLASS_OR_ATTR) continue;
-          if (a.name === 'class') {
-            const kept = a.value.split(/\s+/).filter((t) => t && t !== FOUC_CLASS_OR_ATTR);
-            if (kept.length) srcProps.class = kept.join(' ');
-            continue;
-          }
-          srcProps[a.name] = a.value;
-        }
-        const liveProps = live._vibeProps;
-        const liveKeys = Object.keys(liveProps);
-        const srcKeys = Object.keys(srcProps);
-        const diff =
-          liveKeys.length !== srcKeys.length ||
-          liveKeys.some((k) => liveProps[k] !== srcProps[k]) ||
-          srcKeys.some((k) => !(k in liveProps));
-
-        if (diff) {
-          const fresh = document.createElement(src.tagName);
-          if (src.tagName === 'DIV') fresh.className = 'component';
-          for (const [name, value] of Object.entries(srcProps)) {
-            fresh.setAttribute(name, value);
-          }
-          fresh.setAttribute(FOUC_CLASS_OR_ATTR, '');
-          const slotHtml = src.innerHTML.trim();
-          fresh._vibeSlotContent = slotHtml;
-          fresh._vibePluginSlot = slotHtml;
-          live.replaceWith(fresh);
-          log.replace++;
-          log.changes.push(
-            `re-mount ${describe(live)} (prop change) live=${JSON.stringify(liveProps)} src=${JSON.stringify(srcProps)}`,
-          );
-          li++;
-          si++;
-          continue;
-        }
-      }
-
-      const srcChildren = trimWsEdges([...src.childNodes]);
-      const liveSlot = findOwnSlot(live, srcChildren);
-      if (liveSlot) reconcileChildren(liveSlot, srcChildren, log, insideIteration);
+      reconcileComponent(live, src, oldOf(live), newOf(src), ctx);
       li++;
       si++;
       continue;
@@ -327,14 +301,7 @@ const reconcileRange = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart
     }
 
     if (live.nodeType === TEXT && src.nodeType === TEXT) {
-      if (hasBinding(src.textContent)) {
-        updateBoundText(live, src.textContent, liveParent, log);
-      } else if (live.textContent !== src.textContent) {
-        live.textContent = src.textContent;
-        log.text++;
-        const preview = src.textContent.trim().slice(0, 60);
-        log.changes.push(`text in ${describe(liveParent)}: ${JSON.stringify(preview)}`);
-      }
+      reconcileText(parent, live, src, oldTree, oldOf(live), ctx);
       li++;
       si++;
       continue;
@@ -350,124 +317,356 @@ const reconcileRange = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart
       continue;
     }
 
-    if (live.nodeType === ELEMENT && src.nodeType === ELEMENT &&
-        live.tagName === src.tagName) {
-      reconcileAttributes(live, src, log);
-      reconcileChildren(live, [...src.childNodes], log, insideIteration);
+    if (live.nodeType === ELEMENT && src.nodeType === ELEMENT && live.tagName === src.tagName) {
+      reconcileElement(live, src, oldOf(live) ?? adoptElement(live, parent, oldTree, ctx), newOf(src), ctx);
       li++;
       si++;
       continue;
     }
 
     const align = findRealignment(liveNodes, li, srcNodes, si);
-    if (align && li + align.dl < liEnd && si + align.ds < sEnd) {
-      for (let i = 0; i < align.dl; i++) {
-        const n = liveNodes[li + i];
-        if (n.nodeType === ELEMENT && n.tagName === 'SCRIPT') continue;
-        log.remove++;
-        log.changes.push(`remove (extra) ${describe(n)} from ${describe(liveParent)}`);
-        n.remove();
-      }
-      const anchor = liveNodes[li + align.dl];
-      for (let i = 0; i < align.ds; i++) {
-        const n = srcNodes[si + i];
-        if (n.nodeType === ELEMENT && n.tagName === 'SCRIPT') continue;
-        log.insert++;
-        log.changes.push(`insert (new) ${describe(n)} into ${describe(liveParent)}`);
-        liveParent.insertBefore(n.cloneNode(true), anchor);
-      }
+    if (align && li + align.dl < liveNodes.length && si + align.ds < srcNodes.length) {
+      if (align.dl) remove(li, li + align.dl - 1);
+      if (align.ds) insert(si, si + align.ds - 1, liveNodes[li + align.dl]);
       li += align.dl;
       si += align.ds;
       continue;
     }
 
     log.replace++;
-    log.changes.push(`replace ${describe(live)} → ${describe(src)} in ${describe(liveParent)}`);
-    live.replaceWith(src.cloneNode(true));
+    remove(li, li);
+    insert(si, si, li + 1 < liveNodes.length ? liveNodes[li + 1] : anchor);
     li++;
     si++;
   }
-};
 
-const reconcileChildren = (liveParent, sourceNodes, log, insideIteration = false) => {
-  const liveNodes = [...liveParent.childNodes];
-  reconcileRange(liveParent, liveNodes, 0, liveNodes.length, sourceNodes, 0, sourceNodes.length, log, insideIteration);
+  return structural;
 };
 
-const reconcileConditionalRegion = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart, sEnd, log, insideIteration = false) => {
-  const elseIdx = findElseMarker(srcNodes, siStart + 1, sEnd);
-  const ifStart = siStart + 1;
-  const ifEnd = elseIdx === -1 ? sEnd : elseIdx;
-  const elseStart = elseIdx === -1 ? sEnd : elseIdx + 1;
-  const elseEnd = sEnd;
+const reconcileText = (parent, live, src, oldTree, oldT, ctx) => {
+  const { log } = ctx;
+  const template = src.textContent;
+  let tree = oldT;
+  if (!tree && oldTree) {
+    tree = { parsed: live.textContent, element: parent, textNode: live, children: {} };
+    attach(oldTree, 'text_0', tree, parent, ctx);
+  }
+  if (tree) {
+    if (tree.parsed !== template) {
+      tree.parsed = template;
+      rehydrate(tree, ctx);
+      log.text++;
+      log.changes.push(`text in ${describe(parent)}: ${JSON.stringify(template.trim().slice(0, 60))}`);
+    }
+    if (hasBinding(template)) return;
+  } else if (hasBinding(template)) {
+    return;
+  }
+  if (live.textContent !== src.textContent) {
+    live.textContent = src.textContent;
+    if (!tree) {
+      log.text++;
+      log.changes.push(`text in ${describe(parent)}: ${JSON.stringify(template.trim().slice(0, 60))}`);
+    }
+  }
+};
 
-  let liveFirstEl = null;
-  for (let i = liStart + 1; i < liEnd; i++) {
-    if (liveNodes[i].nodeType === ELEMENT) { liveFirstEl = liveNodes[i]; break; }
+const reconcileAttributes = (live, src, oldT, newT, ctx) => {
+  const { log } = ctx;
+  let srcHasNameBinding = false;
+  for (const attr of src.attributes) {
+    if (attr.name.includes('@[')) { srcHasNameBinding = true; continue; }
+    if (attr.name.startsWith(DEFER_ATTR_PREFIX) || hasBinding(attr.value)) continue;
+    let next = attr.name === 'class' ? mergeClass(attr.value, live) : attr.value;
+    if (attr.name.startsWith('on')) next = rewriteHandler(next, ctx.detached ? null : live, ctx.aliases);
+    if (live.getAttribute(attr.name) !== next) {
+      live.setAttribute(attr.name, next);
+      log.attr++;
+      log.changes.push(`attr ${describe(live)} [${attr.name}=${JSON.stringify(next)}]`);
+    }
   }
-  if (!liveFirstEl) return;
-
-  let chosenStart = -1;
-  let chosenEnd = -1;
-  for (let i = ifStart; i < ifEnd; i++) {
-    if (srcNodes[i].nodeType === ELEMENT) {
-      if (srcNodes[i].tagName === liveFirstEl.tagName) {
-        chosenStart = ifStart; chosenEnd = ifEnd;
+  if (!srcHasNameBinding) {
+    for (const attr of [...live.attributes]) {
+      if (src.hasAttribute(attr.name)) continue;
+      if (isPreservedAttr(attr.name)) continue;
+      if (src.hasAttribute('data-' + attr.name) || src.hasAttribute(DEFER_ATTR_PREFIX + attr.name)) continue;
+      if (newT?.attributes?.[attr.name] !== undefined) continue;
+      if (attr.name === 'class') {
+        const kept = [...live.classList].filter((t) => PRESERVED_CLASSES.has(t));
+        if (kept.length) live.setAttribute('class', kept.join(' '));
+        else live.removeAttribute('class');
+        log.attr++;
+        log.changes.push(`attr ${describe(live)} [class trimmed]`);
+        continue;
       }
-      break;
+      live.removeAttribute(attr.name);
+      live._vibeBoundAttrs?.delete(attr.name);
+      log.attr++;
+      log.changes.push(`attr ${describe(live)} [-${attr.name}]`);
     }
   }
-  if (chosenStart === -1) {
-    for (let i = elseStart; i < elseEnd; i++) {
-      if (srcNodes[i].nodeType === ELEMENT) {
-        if (srcNodes[i].tagName === liveFirstEl.tagName) {
-          chosenStart = elseStart; chosenEnd = elseEnd;
-        }
-        break;
-      }
+
+  if (!oldT || !newT) return;
+  if (sameRecord(oldT.attributes, newT.attributes) && sameList(oldT.nameBindings, newT.nameBindings)) return;
+  for (const nb of oldT.nameBindings ?? []) {
+    if (newT.nameBindings?.includes(nb)) continue;
+    const produced = live._vibeNameBindings?.get(nb);
+    if (produced) {
+      live.removeAttribute(produced);
+      live._vibeNameBindings.delete(nb);
     }
   }
-  if (chosenStart === -1) return;
+  if (newT.attributes) oldT.attributes = newT.attributes;
+  else delete oldT.attributes;
+  if (newT.nameBindings) oldT.nameBindings = newT.nameBindings;
+  else delete oldT.nameBindings;
+  rehydrate(oldT, ctx);
+  log.attr++;
+  log.changes.push(`bound attrs ${describe(live)} ${JSON.stringify(newT.attributes ?? {})}`);
+};
 
-  reconcileRange(
-    liveParent, liveNodes,
-    liStart + 1, liEnd,
-    srcNodes, chosenStart, chosenEnd,
-    log,
-    insideIteration,
-  );
+const reconcileRawHost = (live, src, oldT, ctx) => {
+  const textTree = Object.values(oldT.children).find((c) => c.textNode);
+  const srcText = src.childNodes.length === 1 && src.firstChild.nodeType === TEXT ? src.firstChild : null;
+  if (textTree && srcText) {
+    if (textTree.parsed !== srcText.textContent) {
+      textTree.parsed = srcText.textContent;
+      rehydrate(textTree, ctx);
+      ctx.log.text++;
+      ctx.log.changes.push(`raw html in ${describe(live)}: ${JSON.stringify(srcText.textContent.trim().slice(0, 60))}`);
+    }
+    return true;
+  }
+  for (const key in oldT.children) delete oldT.children[key];
+  live.textContent = '';
+  live._vibeRawHtml = false;
+  live._vibeRawHtmlValue = undefined;
+  return false;
+};
+
+const reconcileElement = (live, src, oldT, newT, ctx) => {
+  reconcileAttributes(live, src, oldT, newT, ctx);
+  if (isScript(live)) return;
+  if (live._vibeRawHtml && oldT && reconcileRawHost(live, src, oldT, ctx)) return;
+  reconcileList(live, [...live.childNodes], [...src.childNodes], oldT, newT, ctx);
+};
+
+const propsOf = (src) => {
+  const props = {};
+  for (const a of src.attributes) {
+    if (a.name !== 'src' && a.name !== 'key' && !a.name.startsWith(DEFER_ATTR_PREFIX)) props[a.name] = a.value;
+  }
+  return props;
 };
 
-const reconcileIterationRegion = (liveParent, liveNodes, liStart, liEnd, srcNodes, siStart, sEnd, log) => {
-  const tplEls = [];
-  for (let i = siStart + 1; i < sEnd; i++) {
-    if (srcNodes[i].nodeType === ELEMENT) tplEls.push(srcNodes[i]);
+const propsDiffer = (live, srcProps) => {
+  const liveProps = live._vibeRemountProps ?? {};
+  const exprs = live._vibeIterPropExprs ?? [];
+  for (const k of new Set([...Object.keys(liveProps), ...Object.keys(srcProps)])) {
+    if (liveProps[k] === srcProps[k]) continue;
+    const bound = srcProps[k]?.match(/^@\[(.+)\]$/);
+    if (bound && exprs.some((e) => e.attrName === k && e.expr === bound[1])) continue;
+    return true;
+  }
+  return false;
+};
+
+const reconcileComponent = (live, src, oldT, newT, ctx) => {
+  if (live._vibeMountedSrc === undefined) {
+    if (!live.hasAttribute('src')) reconcileElement(live, src, oldT, newT, ctx);
+    return;
+  }
+  if (live.hasAttribute('src')) return;
+  const { log } = ctx;
+  const srcProps = propsOf(src);
+  const literalSrc = src.getAttribute('src');
+  const srcChanged = !!literalSrc && !hasBinding(literalSrc) && literalSrc !== live._vibeMountedSrc;
+  if (srcChanged || propsDiffer(live, srcProps)) {
+    live._vibeRemountProps = srcProps;
+    live._vibeSlotContent = src.innerHTML.trim();
+    if (srcChanged) remountComponent(live, literalSrc);
+    else forceRemount(live);
+    log.replace++;
+    log.changes.push(`re-mount ${describe(live)} (${srcChanged ? 'src' : 'props'} changed)`);
+    return;
   }
-  if (!tplEls.length) return;
-
-  let instanceIdx = 0;
-  for (let i = liStart + 1; i < liEnd; i++) {
-    const liveEl = liveNodes[i];
-    if (liveEl.nodeType !== ELEMENT) continue;
-    const tplEl = tplEls[instanceIdx % tplEls.length];
-    instanceIdx++;
-    if (liveEl.tagName !== tplEl.tagName) continue;
-    reconcileAttributes(liveEl, tplEl, log);
-    reconcileChildren(liveEl, [...tplEl.childNodes], log, true);
+  if (oldT && newT && !sameRecord(oldT.attributes, newT.attributes)) {
+    if (newT.attributes) oldT.attributes = newT.attributes;
+    else delete oldT.attributes;
+    rehydrate(oldT, ctx);
+    log.attr++;
+    log.changes.push(`bound attrs ${describe(live)} ${JSON.stringify(newT.attributes ?? {})}`);
   }
+  const srcChildren = trimWsEdges([...src.childNodes]);
+  const liveSlot = findOwnSlot(live, srcChildren);
+  if (!liveSlot) return;
+  const wrapperTree = oldT ?? live._vibeTree ?? null;
+  reconcileList(liveSlot, [...liveSlot.childNodes], srcChildren, findNodeByElement(wrapperTree, liveSlot), newT, ctx);
 };
 
-export const reconcile = (target, source) => {
-  const live = typeof target === 'string' ? document.querySelector(target) : target;
-  if (!live) return Promise.resolve({ text: 0, attr: 0, insert: 0, remove: 0, replace: 0, changes: [] });
+const ITERATION_HEADER = ['arrayPath', 'itemAlias', 'indexAlias', 'keyExpr'];
+
+const reconcileIteration = ({ parent, liveStart, srcStart, oldT, newT }, ctx) => {
+  if (!oldT || !newT) return;
+  const { log } = ctx;
+  const headerChanged = ITERATION_HEADER.some((k) => oldT.meta[k] !== newT.meta[k]);
+  const templateChanged = oldT.meta.template.element.innerHTML !== newT.meta.template.element.innerHTML;
+  if (!headerChanged && !templateChanged) return;
+
+  liveStart.textContent = srcStart.textContent;
+  swapIterationTemplate(oldT, newT.meta);
+  if (!oldT.runtime.templateRemoved) return;
+
+  if (headerChanged) {
+    rerenderIteration(oldT, ctx.state, ctx.manifest, ctx.parentScope);
+    log.replace++;
+    log.changes.push(`re-render iteration ${oldT.meta.arrayPath} (header changed)`);
+    return;
+  }
+
+  const instances = oldT.runtime.instances;
+  if (!instances.length) return;
+  const { itemAlias, indexAlias, scopeAliases } = oldT.meta;
+  const rowBase = { ...ctx, aliases: new Set(scopeAliases), detached: true, manifestBase: null };
+
+  if (!instances[0].tree) {
+    patchTreelessInstances(oldT, ctx.state, ctx.manifest, ctx.parentScope, (liveRow, freshRow) =>
+      reconcileElement(liveRow, freshRow, null, null, rowBase),
+    );
+    log.changes.push(`patch ${instances.length} rows of ${oldT.meta.arrayPath}`);
+    return;
+  }
+
+  for (let i = 0; i < instances.length; i++) {
+    const inst = instances[i];
+    const item = inst.liveItem !== undefined ? inst.liveItem : inst.item;
+    const locals = { [itemAlias]: item, [indexAlias]: inst.index };
+    const rowCtx = {
+      ...rowBase,
+      state: createScopedState(ctx.state, locals, ctx.parentScope),
+      parentScope: { ...ctx.parentScope, ...locals },
+    };
+    const { nodes, anchor } = instanceRange(oldT, i);
+    if (!nodes.length) continue;
+    const before = nodes[0].previousSibling;
+    const tpl = materialize([...oldT.meta.template.element.childNodes], parent, rowCtx);
+    const structural = reconcileList(parent, nodes, tpl.nodes, inst.tree, { children: tpl.trees }, rowCtx, anchor);
+    if (structural) {
+      inst.clonedNodes = rangeBetween(before ? before.nextSibling : parent.firstChild, anchor);
+      inst.element = inst.clonedNodes.find((n) => n.nodeType === ELEMENT) ?? inst.element;
+    }
+  }
+  stampInstanceScopes(oldT, ctx.parentScope);
+  log.changes.push(`patch ${instances.length} rows of ${oldT.meta.arrayPath}`);
+};
 
+const branchHtml = (branch) => branch?.element.innerHTML ?? null;
+
+const reconcileConditional = ({ parent, liveStart, srcStart, oldT, newT }, ctx) => {
+  if (!oldT || !newT) return;
+  const { log } = ctx;
+  const oldBranches = oldT.meta.branches;
+  const newBranches = newT.meta.branches;
+  const exprChanged = oldT.meta.expression !== newT.meta.expression;
+  const templateChanged =
+    branchHtml(oldBranches.if) !== branchHtml(newBranches.if) ||
+    branchHtml(oldBranches.else) !== branchHtml(newBranches.else);
+  if (!exprChanged && !templateChanged) return;
+
+  const side =
+    oldT.runtime.activeBranch === oldBranches.if ? 'if' :
+    oldT.runtime.activeBranch === oldBranches.else ? 'else' : null;
+  liveStart.textContent = srcStart.textContent;
+  oldT.meta.expression = newT.meta.expression;
+  oldT.meta.branches = newBranches;
+  if (side) {
+    oldT.runtime.activeBranch = newBranches[side];
+    if (oldT.runtime.activeInstance) oldT.runtime.activeInstance.branch = newBranches[side];
+  }
+  if (!oldT.runtime.templateRemoved) return;
+
+  const before = oldT.runtime.activeInstance;
+  if (side && !newBranches[side]) remountBranch(oldT, ctx.state, ctx.manifest, ctx.parentScope);
+  else dispatchConditional(oldT, ctx.state, ctx.manifest, ctx.parentScope);
+  const active = oldT.runtime.activeInstance;
+  if (active !== before) {
+    log.replace++;
+    log.changes.push(`re-mount branch of if ${oldT.meta.expression}`);
+    return;
+  }
+  if (!active || !templateChanged) return;
+
+  const parentPath = ctx.manifestBase === null ? null : manifestPathOf(ctx.manifest, parent);
+  const branchCtx = {
+    ...ctx,
+    detached: true,
+    manifestBase: parentPath === null ? null : `${parentPath}.${oldT._key}`,
+  };
+  const { endComment } = oldT.meta;
+  const tpl = materialize([...oldT.runtime.activeBranch.element.childNodes], parent, branchCtx);
+  const nodes = rangeBetween(liveStart.nextSibling, endComment);
+  const structural = reconcileList(parent, nodes, tpl.nodes, active.parsedTree, { children: tpl.trees }, branchCtx, endComment);
+  if (structural) {
+    active.nodes = rangeBetween(liveStart.nextSibling, endComment);
+    active.nodes.forEach((n, i) => {
+      branchNodeRegistry.set(n, { nodes: active.nodes, index: i });
+      if (n.nodeType !== ELEMENT) return;
+      managedNodes.add(n);
+      if (oldT.meta.scopeAliases?.length) n.__vibeScope = ctx.state;
+    });
+  }
+  for (const key in oldT.children) delete oldT.children[key];
+  for (const key in active.parsedTree?.children ?? {}) oldT.children[key] = active.parsedTree.children[key];
+  log.changes.push(`patch branch of if ${oldT.meta.expression}`);
+};
+
+const scopeAround = (el) => {
+  for (let n = el; n; n = n.parentNode) if (n.__vibeScope) return n.__vibeScope;
+  return null;
+};
+
+const contextFor = (live, manifest, log) => {
+  const root = manifest.__live;
+  const overlay = scopeAround(live);
+  return {
+    manifest,
+    log,
+    state: overlay ? createScopedState(root, overlay) : root,
+    parentScope: overlay ?? {},
+    aliases: new Set(Object.keys(overlay ?? {})),
+    detached: !!overlay && live._vibeMountedSrc === undefined,
+    manifestBase: overlay ? null : undefined,
+  };
+};
+
+export const reconcile = (target, source, manifest) => {
+  const live = typeof target === 'string' ? document.querySelector(target) : target;
   const log = { text: 0, attr: 0, insert: 0, remove: 0, replace: 0, changes: [] };
+  if (!live) return Promise.resolve(log);
+
   const tpl = document.createElement('template');
   tpl.innerHTML = typeof source === 'string' ? source : source.outerHTML;
   parkFetchableSrc(tpl.content);
-  reconcileChildren(live, [...tpl.content.childNodes], log);
+  const box = document.createElement('div');
+  box._vibeComponentId = findComponentIdForElement(live);
+  box.append(...tpl.content.childNodes);
+
+  const ctx = contextFor(live, manifest, log);
+  const newTree = parse(box, undefined, ctx.aliases);
+  const oldTree = live._vibeTree ?? findNodeByElement(manifest.__tree, live);
+  reconcileList(live, [...live.childNodes], [...box.childNodes], oldTree, newTree, ctx);
 
   return new Promise((resolve) => {
     requestAnimationFrame(() => requestAnimationFrame(() => resolve(log)));
   });
 };
+
+export const refreshComponent = (el, rawHtml, manifest) => {
+  const componentIds = [];
+  eachComponentIn(el, (node, id) => {
+    if (!componentIds.includes(id)) componentIds.push(id);
+  });
+  const html = renderComponentTemplate(rawHtml, el._vibeRemountProps ?? {}, el._vibeSlotContent ?? '', { componentIds });
+  el._vibeRawSource = rawHtml;
+  return reconcile(el, html, manifest);
+};