@ape-egg/vibe 1.8.0 → 1.9.0

package/runtime/iterate.js

@@ -2,17 +2,125 @@ import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
-import { resolveThisPath } from './utils.js';
+import { resolveThisPath, evalInScope } from './utils.js';
 import { managedNodes } from './conditionals.js';
-
-// Fast path for iteration rendering (opt-in via window.__VIBE_FAST_ITERATION__)
-// See: _vibe-compiled-iteration-batch.js for implementation details
-// This is a preview of what Vibe Compiled (Phase 2) will do automatically
-import * as fastPath from './_vibe-compiled-iteration-batch.js';
+import { BINDING_REGEX } from './constants.js';
 
 // Pre-compiled iteration optimization (production)
 import * as compiled from './pre-compiled-iterations.js';
 
+// Runtime batch-render helpers for full-replacement of simple templates.
+// Build an HTML string via template-literal compilation, then parse once —
+// avoids per-item clone/parse/hydrate in the hot path.
+// Only used for templates without nested <!-- each --> / <!-- if -->.
+const batchParseTemplate = document.createElement('template');
+
+// innerHTML serialization encodes <, >, &, ", ' inside attribute values.
+// Decode them back before wrapping @[expr] in ${...} for the template literal.
+const decodeEntities = (s) => s
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>')
+  .replace(/&quot;/g, '"')
+  .replace(/&#39;/g, "'")
+  .replace(/&amp;/g, '&');
+
+const hasNestedStructures = (tree) => {
+  if (!tree || !tree.children) return false;
+  for (const key in tree.children) {
+    const child = tree.children[key];
+    if (!child) continue;
+    if (child.type === 'iteration' || child.type === 'conditional') return true;
+    if (hasNestedStructures(child)) return true;
+  }
+  return false;
+};
+
+const canUseBatchRender = (template) =>
+  !hasNestedStructures(template) && template.element.children.length <= 1;
+
+const compileBatchFn = (template, itemAlias, indexAlias, stateKeys) => {
+  const templateHtml = template.element.innerHTML.trim();
+  const escaped = templateHtml.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+  const code = escaped.replace(BINDING_REGEX, (_, expr) => '${' + decodeEntities(expr) + '}');
+
+  return new Function(
+    'arr',
+    ...stateKeys,
+    `
+      let html = '';
+      const len = arr.length;
+      for (let ${indexAlias} = 0; ${indexAlias} < len; ${indexAlias}++) {
+        const ${itemAlias} = arr[${indexAlias}];
+        html += \`${code}\`;
+      }
+      return html;
+    `,
+  );
+};
+
+// For <component src> elements inside an iteration instance, evaluate any
+// `@[expr]` attribute bindings against the iteration's scoped state and replace
+// them with the resolved literal value. Component[src] attributes intentionally
+// bypass hydrate (parse.js) so they reach processComponent as bindings — but
+// bindings that depend on iteration-local vars (item, index) can't resolve later
+// when processComponent inlines the component, since by then iteration scope is gone.
+// Only called from iteration code paths; conditionals don't need this because their
+// branch content is registered in the global manifest and reacts to state updates.
+const resolveIterationComponentProps = (nodes, scopedState) => {
+  for (let n = 0; n < nodes.length; n++) {
+    const node = nodes[n];
+    if (node.nodeType !== 1) continue;
+    const components = node.matches?.('component[src], div.component[src]')
+      ? [node, ...node.querySelectorAll('component[src], div.component[src]')]
+      : [...node.querySelectorAll('component[src], div.component[src]')];
+    for (let i = 0; i < components.length; i++) {
+      const el = components[i];
+      const attrs = el.attributes;
+      for (let j = 0; j < attrs.length; j++) {
+        const attr = attrs[j];
+        if (attr.name === 'src') continue;
+        const match = attr.value.match(/^@\[(.+)\]$/);
+        if (!match) continue;
+        try {
+          const value = evalInScope(match[1], scopedState, el);
+          if (value !== undefined) {
+            el.setAttribute(attr.name, String(value));
+          }
+        } catch {
+          // Leave binding raw — processComponent will handle it as a binding
+        }
+      }
+    }
+  }
+};
+
+const renderBatch = (iterationNode, array, state, parent, endComment) => {
+  const { itemAlias, indexAlias, template } = iterationNode.meta;
+
+  if (!iterationNode.runtime.batchFn) {
+    const stateKeys = Object.keys(state);
+    iterationNode.runtime.batchFn = compileBatchFn(template, itemAlias, indexAlias, stateKeys);
+    iterationNode.runtime.stateKeys = stateKeys;
+  }
+
+  const { batchFn, stateKeys } = iterationNode.runtime;
+  const stateValues = stateKeys.map((k) => state[k]);
+  const html = batchFn(array, ...stateValues);
+
+  batchParseTemplate.innerHTML = html;
+  const frag = batchParseTemplate.content;
+  const kids = frag.children;
+
+  const arrayLen = array.length;
+  const instances = new Array(arrayLen);
+  for (let i = 0; i < arrayLen; i++) {
+    instances[i] = { element: kids[i], item: array[i], index: i };
+  }
+
+  parent.insertBefore(frag, endComment);
+  iterationNode.runtime.instances = instances;
+};
+
 /**
  * Find a comment node with matching text content in the given nodes.
  */
@@ -159,6 +267,18 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
     }
   }
 
+  // Preserve raw slot content of nested <component src> elements before renderAllConditionals /
+  // renderAllIterations runs on this branch/iteration instance — those paths strip <!-- if -->
+  // and <!-- each --> templates from the live DOM, so by the time processComponent reads
+  // el.innerHTML (next microtask, when MutationObserver fires) the inactive branch templates
+  // would be gone. cloneNode(true) does not copy expando JS properties, so we must (re)capture
+  // _vibeSlotContent on every clone.
+  const components = parseContainer.querySelectorAll('component[src], div.component[src]');
+  for (let i = 0; i < components.length; i++) {
+    const el = components[i];
+    if (el._vibeSlotContent === undefined) el._vibeSlotContent = el.innerHTML;
+  }
+
   if (useCachedTree) {
     // Fast path: map cached tree structure onto cloned DOM (no regex, no DOM walking)
     tree = cloneTreeWithElements(cachedTree, parseContainer);
@@ -313,10 +433,12 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
 
   const parent = startComment.parentNode;
 
-  // Handle this.property for component-scoped arrays
-  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
-
-  const array = resolvePath(state, resolvedArrayPath);
+  // Evaluate the array expression — supports state paths (items),
+  // window globals (window.fights), method calls (items.filter(...)),
+  // and inline literals (['a', 'b']). Falls back to resolvePath for
+  // simple paths that evalInScope might miss in scoped contexts.
+  const resolvedExpr = resolveThisPath(arrayPath, startComment.parentElement);
+  const array = evalInScope(resolvedExpr, state, startComment.parentElement) ?? resolvePath(state, resolvedExpr);
   if (!Array.isArray(array) || array.length === 0) {
     iterationNode.runtime.instances = [];
     return;
@@ -347,6 +469,9 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     // Clone, parse, hydrate
     const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
 
+    // Pre-resolve <component src> binding props against iteration scope (see helper comment)
+    resolveIterationComponentProps(clonedNodes, scopedState);
+
     // Collect nodes in DocumentFragment (single DOM insertion at end)
     for (let j = 0; j < clonedNodes.length; j++) {
       frag.appendChild(clonedNodes[j]);
@@ -381,11 +506,10 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
 
   const { arrayPath, template, startComment, endComment } = iterationNode.meta;
 
-  // Handle this.property for component-scoped arrays
-  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
+  const resolvedExpr = resolveThisPath(arrayPath, startComment.parentElement);
 
-  const stateOldArray = resolvePath(oldState, resolvedArrayPath) || [];
-  const newArray = resolvePath(newState, resolvedArrayPath) || [];
+  const stateOldArray = evalInScope(resolvedExpr, oldState, startComment.parentElement) ?? resolvePath(oldState, resolvedExpr) ?? [];
+  const newArray = evalInScope(resolvedExpr, newState, startComment.parentElement) ?? resolvePath(newState, resolvedExpr) ?? [];
 
   // Use instances (what's actually rendered) as ground truth for old array
   // when oldState disagrees with the rendered count.
@@ -457,7 +581,7 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
 // Bulk replacement: clear all DOM and re-render from scratch
 // Used when arrays share no common keys (avoids O(n²) LCS)
 const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
-  const { itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+  const { template, startComment, endComment } = iterationNode.meta;
   const parent = startComment.parentNode;
 
   // Clear all existing DOM between comments using Range (single operation)
@@ -475,8 +599,8 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
 
   // For simple templates (no nested iterations/conditionals, single root element),
   // use batch string rendering: one string concatenation loop + one innerHTML parse
-  if (fastPath.canUseFastPath(template) && template.element.children.length <= 1) {
-    fastPath.renderFast(iterationNode, newArray, state, parent, endComment);
+  if (canUseBatchRender(template)) {
+    renderBatch(iterationNode, newArray, state, parent, endComment);
     const instances = iterationNode.runtime.instances;
     for (let i = 0; i < instances.length; i++) {
       if (instances[i].element?.nodeType === 1) managedNodes.add(instances[i].element);
@@ -484,135 +608,173 @@ const bulkReplace = (iterationNode, newArray, state, manifest, parentScope) => {
     return;
   }
 
-  // Complex templates: clone, parse, hydrate each item with DocumentFragment batching
+  // Complex templates: build each instance, batch-append into a DocumentFragment,
+  // finalize (mark managed + render nested), then commit to the DOM in one
+  // parent.insertBefore call.
   const instances = [];
-  const templateNodes = template.element.childNodes;
   const frag = document.createDocumentFragment();
-
   for (let i = 0; i < newArray.length; i++) {
-    const item = newArray[i];
-    const localVars = { [itemAlias]: item, [indexAlias]: i };
-    const scopedState = createScopedState(state, localVars, parentScope);
-    const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
-
-    for (let j = 0; j < clonedNodes.length; j++) {
-      frag.appendChild(clonedNodes[j]);
-      if (clonedNodes[j].nodeType === 1) managedNodes.add(clonedNodes[j]);
-    }
-
-    if (tree) {
-      const nestedScope = { ...parentScope, ...localVars };
-      renderAllIterations(tree, scopedState, manifest, nestedScope);
-      _renderAllConditionals(tree, scopedState, manifest, nestedScope);
-    }
-
-    instances.push({ element, tree, item, index: i, clonedNodes, scopedState });
+    const built = buildInstance(iterationNode, newArray[i], i, state, parentScope);
+    for (let j = 0; j < built.clonedNodes.length; j++) frag.appendChild(built.clonedNodes[j]);
+    finalizeInstance(built, manifest, parentScope);
+    instances.push({
+      element: built.element, tree: built.tree, item: newArray[i], index: i,
+      clonedNodes: built.clonedNodes, scopedState: built.scopedState,
+    });
   }
-
   parent.insertBefore(frag, endComment);
   iterationNode.runtime.instances = instances;
 };
 
-// Add a new instance at the specified index
-const addInstance = (iterationNode, item, index, state, manifest, parentScope) => {
-  const { itemAlias, indexAlias, template, startComment, endComment } = iterationNode.meta;
+// Find an instance's canonical in-DOM anchor (the first of its cloned nodes
+// that still lives directly under the iteration's parent). Nested primitives
+// inside the iteration template — <!-- if -->, <!-- each -->, <component> —
+// can move/replace cloned nodes between iteration renders (inactive branches
+// get hoisted into template containers; component[src] wrappers get swapped
+// for processed wrappers). Any of those mutations make `clonedNodes[0]` a
+// stale reference to a node no longer under the iteration parent. Callers use
+// this anchor instead of trusting `clonedNodes[0]` directly, so that
+// insert-before / move operations always resolve against the iteration's real
+// DOM slot.
+const findInstanceAnchor = (instance, iterationParent) => {
+  const nodes = instance.clonedNodes || (instance.element ? [instance.element] : []);
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i]?.parentNode === iterationParent) return nodes[i];
+  }
+  return null;
+};
 
-  const localVars = { [itemAlias]: item, [indexAlias]: index };
-  const scopedState = createScopedState(state, localVars, parentScope);
-  const templateNodes = [...template.element.childNodes];
+// Resolve the reference node for `parent.insertBefore(..., ref)` at a given
+// logical iteration index. Walks later instances until it finds one with a
+// live anchor under the iteration parent; falls back to `endComment` when no
+// later instance has any node currently mounted in the iteration.
+const resolveInsertBefore = (iterationNode, index, parent) => {
+  const { instances } = iterationNode.runtime;
+  for (let i = index; i < instances.length; i++) {
+    const anchor = findInstanceAnchor(instances[i], parent);
+    if (anchor) return anchor;
+  }
+  return iterationNode.meta.endComment;
+};
 
-  const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
+// Detach every DOM node belonging to a logical instance, including content
+// mounted by nested primitives (conditional branches, nested each rows,
+// fetched component wrappers) that isn't tracked in `instance.clonedNodes`.
+// Walks iteration-parent siblings from this instance's anchor up to the next
+// instance's anchor / endComment, so anything in between — clones, mounted
+// branches, swapped-in component wrappers — all gets detached. Also sweeps
+// any clonedNodes that were hoisted out of the iteration parent (e.g. into a
+// sibling conditional's template container).
+const detachInstanceDom = (iterationNode, index, parent) => {
+  const instance = iterationNode.runtime.instances[index];
+  const { endComment } = iterationNode.meta;
+  const anchor = findInstanceAnchor(instance, parent);
+  const nextAnchor = resolveInsertBefore(iterationNode, index + 1, parent);
+
+  if (anchor) {
+    let cur = anchor;
+    // endComment caps the walk even if nextAnchor ordering is ever
+    // corrupted — iteration DOM is bounded by startComment / endComment.
+    while (cur && cur !== nextAnchor && cur !== endComment) {
+      const nextSibling = cur.nextSibling;
+      parent.removeChild(cur);
+      cur = nextSibling;
+    }
+  }
 
-  // Find insertion point
-  const insertBefore =
-    index < iterationNode.runtime.instances.length
-      ? iterationNode.runtime.instances[index].clonedNodes?.[0] ||
-        iterationNode.runtime.instances[index].element
-      : endComment;
+  const nodes = instance.clonedNodes || (instance.element ? [instance.element] : []);
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n && n.parentNode && n.parentNode !== parent) n.parentNode.removeChild(n);
+  }
+};
 
-  // Insert cloned nodes
-  clonedNodes.forEach((node) => startComment.parentNode.insertBefore(node, insertBefore));
+// Build a fresh instance's DOM + tree + scope from the iteration template.
+// Pure function — no DOM insertion, no side effects on iteration state.
+// Callers decide where the clones go (iteration parent, DocumentFragment).
+const buildInstance = (iterationNode, item, index, state, parentScope) => {
+  const { itemAlias, indexAlias, template } = iterationNode.meta;
+  const localVars = { [itemAlias]: item, [indexAlias]: index };
+  const scopedState = createScopedState(state, localVars, parentScope);
+  const built = initializeBlock([...template.element.childNodes], scopedState, template);
+  resolveIterationComponentProps(built.clonedNodes, scopedState);
+  return { ...built, scopedState, localVars };
+};
 
-  // Recursively render nested iterations and conditionals
+// After a built instance's clones are placed in the DOM (directly or via a
+// fragment), mark element clones as managed so the page-level MutationObserver
+// skips them in processMutations, then fire nested iteration/conditional
+// renders. Without the managed mark those clones would be re-parsed + hydrated
+// on top of the internal render, duplicating every nested branch.
+const finalizeInstance = (built, manifest, parentScope) => {
+  const { clonedNodes, tree, scopedState, localVars } = built;
+  for (let i = 0; i < clonedNodes.length; i++) {
+    if (clonedNodes[i].nodeType === 1) managedNodes.add(clonedNodes[i]);
+  }
   if (tree) {
     const nestedScope = { ...parentScope, ...localVars };
     renderAllIterations(tree, scopedState, manifest, nestedScope);
     _renderAllConditionals(tree, scopedState, manifest, nestedScope);
   }
+};
 
-  iterationNode.runtime.instances.splice(index, 0, { element, tree, item, index, clonedNodes });
+const addInstance = (iterationNode, item, index, state, manifest, parentScope) => {
+  const parent = iterationNode.meta.startComment.parentNode;
+  const built = buildInstance(iterationNode, item, index, state, parentScope);
+  const insertBefore = resolveInsertBefore(iterationNode, index, parent);
+  for (let i = 0; i < built.clonedNodes.length; i++) parent.insertBefore(built.clonedNodes[i], insertBefore);
+  finalizeInstance(built, manifest, parentScope);
+  iterationNode.runtime.instances.splice(index, 0, {
+    element: built.element, tree: built.tree, item, index, clonedNodes: built.clonedNodes,
+  });
 };
 
-// Remove an instance at the specified index
 const removeInstance = (iterationNode, index) => {
   if (index < 0 || index >= iterationNode.runtime.instances.length) return;
-
-  const instance = iterationNode.runtime.instances[index];
-
-  // Remove all cloned nodes from DOM
-  (instance.clonedNodes || [instance.element]).forEach((node) =>
-    node?.parentNode?.removeChild(node),
-  );
-
+  const parent = iterationNode.meta.startComment.parentNode;
+  if (parent) detachInstanceDom(iterationNode, index, parent);
   iterationNode.runtime.instances.splice(index, 1);
 };
 
-// Move an instance from one position to another
 const moveInstance = (iterationNode, fromIndex, toIndex) => {
   if (fromIndex === toIndex) return;
-  if (fromIndex < 0 || fromIndex >= iterationNode.runtime.instances.length) return;
-  if (toIndex < 0 || toIndex >= iterationNode.runtime.instances.length) return;
-
-  const instance = iterationNode.runtime.instances[fromIndex];
-  const nodes = instance.clonedNodes || [instance.element];
-  const parent = nodes[0]?.parentNode;
-
-  iterationNode.runtime.instances.splice(fromIndex, 1);
-  iterationNode.runtime.instances.splice(toIndex, 0, instance);
+  const { instances } = iterationNode.runtime;
+  if (fromIndex < 0 || fromIndex >= instances.length) return;
+  if (toIndex < 0 || toIndex >= instances.length) return;
+  const parent = iterationNode.meta.startComment.parentNode;
 
-  // Find new insertion point
-  const nextInstance = iterationNode.runtime.instances[toIndex + 1];
-  const insertBefore = nextInstance
-    ? nextInstance.clonedNodes?.[0] || nextInstance.element
-    : iterationNode.meta.endComment;
+  const instance = instances[fromIndex];
+  instances.splice(fromIndex, 1);
+  instances.splice(toIndex, 0, instance);
 
-  // Move all nodes
-  nodes.forEach((node) => parent.insertBefore(node, insertBefore));
+  const insertBefore = resolveInsertBefore(iterationNode, toIndex + 1, parent);
+  const nodes = instance.clonedNodes || [instance.element];
+  // Re-insert only nodes currently under the iteration parent — those hoisted
+  // into nested-conditional template containers stay there so we don't
+  // double-count branch content.
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n?.parentNode === parent) parent.insertBefore(n, insertBefore);
+  }
 };
 
-// Update an instance with new item data
 const updateInstance = (iterationNode, index, newItem, state, manifest, parentScope = {}) => {
   if (index < 0 || index >= iterationNode.runtime.instances.length) return;
-
-  const { itemAlias, indexAlias, template } = iterationNode.meta;
+  const parent = iterationNode.meta.startComment.parentNode;
   const instance = iterationNode.runtime.instances[index];
 
-  const localVars = { [itemAlias]: newItem, [indexAlias]: index };
-  const scopedState = createScopedState(state, localVars, parentScope);
-  const templateNodes = [...template.element.childNodes];
-
-  const { element, tree, clonedNodes } = initializeBlock(templateNodes, scopedState, template);
-
-  // Remove old nodes, insert new ones in same position
-  const oldNodes = instance.clonedNodes || [instance.element];
-  const insertBefore = oldNodes[oldNodes.length - 1]?.nextSibling;
-  const parent = oldNodes[0]?.parentNode;
-
-  oldNodes.forEach((node) => node?.parentNode?.removeChild(node));
-  clonedNodes.forEach((node) => parent.insertBefore(node, insertBefore));
-
-  // Recursively render nested iterations and conditionals
-  if (tree) {
-    const nestedScope = { ...parentScope, ...localVars };
-    renderAllIterations(tree, scopedState, manifest, nestedScope);
-    _renderAllConditionals(tree, scopedState, manifest, nestedScope);
-  }
+  // Build fresh first, then detach old — keeps the old DOM as a stable
+  // anchor reference until we know how the new nodes are shaped.
+  const built = buildInstance(iterationNode, newItem, index, state, parentScope);
+  detachInstanceDom(iterationNode, index, parent);
+  const insertBefore = resolveInsertBefore(iterationNode, index + 1, parent);
+  for (let i = 0; i < built.clonedNodes.length; i++) parent.insertBefore(built.clonedNodes[i], insertBefore);
+  finalizeInstance(built, manifest, parentScope);
 
-  // Update instance
-  instance.element = element;
-  instance.tree = tree;
+  instance.element = built.element;
+  instance.tree = built.tree;
   instance.item = newItem;
-  instance.clonedNodes = clonedNodes;
+  instance.clonedNodes = built.clonedNodes;
 };
 
 export default {

package/runtime/manifest.js

@@ -1,5 +1,6 @@
 const recursive = (tree, results, tagChain) => {
-  results[tagChain.join('.')] = tree.element;
+  const path = tagChain.join('.');
+  results[path] = tree.element;
 
   if (tree.children && Object.keys(tree.children).length > 0) {
     Object.keys(tree.children).forEach((tag) => {

package/runtime/parse.js

@@ -8,6 +8,66 @@ import {
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 
+// Walks up the DOM for the nearest component wrapper tagged by component.js.
+// Used to rewrite `this.property` in event handlers to the component's state path.
+const findComponentIdForElement = (element) => {
+  if (!element?.closest) return null;
+  const wrapper = element.closest('[data-vibe-component-id]');
+  return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
+};
+
+// Single source of truth for reading attribute/name bindings off an element.
+// Called from both the root handler and recursive() so they can't drift. Any
+// element classified as a fetched component (`<component src>` or
+// `<div class="component" src>`) returns nulls — its attributes are props
+// owned by processComponent and must stay raw; hydrating them would coerce
+// objects to "[object Object]" or strip boolean-like attrs to empty.
+const captureAttributeBindings = (element) => {
+  const nodeName = element.nodeName;
+  const isFetchedComponent =
+    (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
+    element.hasAttribute?.('src');
+
+  if (isFetchedComponent || !element.attributes || element.attributes.length === 0) {
+    return { attributes: null, nameBindings: null };
+  }
+
+  const attributes = {};
+  const nameBindings = [];
+
+  for (let j = 0; j < element.attributes.length; j++) {
+    const attr = element.attributes[j];
+    BINDING_REGEX.lastIndex = 0;
+
+    // Attribute name itself contains a binding (e.g. <icon @[section.icon]>).
+    if (BINDING_REGEX.test(attr.name)) {
+      nameBindings.push(attr.name);
+      continue;
+    }
+
+    // Rewrite `this.property` inside event handlers to the component's state path.
+    if (attr.name.startsWith('on') && attr.value.includes('this.')) {
+      const componentId = findComponentIdForElement(element);
+      if (componentId) {
+        const rewritten = attr.value.replace(/\bthis\.(\w+)/g, (match, prop) => {
+          return DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`;
+        });
+        element.setAttribute(attr.name, rewritten);
+      }
+    }
+
+    BINDING_REGEX.lastIndex = 0;
+    if (BINDING_REGEX.test(attr.value)) {
+      attributes[attr.name] = attr.value;
+    }
+  }
+
+  return {
+    attributes: Object.keys(attributes).length > 0 ? attributes : null,
+    nameBindings: nameBindings.length > 0 ? nameBindings : null,
+  };
+};
+
 const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
     const { nodeName, textContent } = element;
@@ -196,59 +256,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
     const elementForBindings = isTextNode ? element.parentElement : element;
     const textNodeRef = isTextNode ? element : null; // Store reference to actual text node
 
-    // Check for attribute bindings
-    const attributes = {};
-    const nameBindings = [];
-
-    // Skip hydrating attributes on fetched components - they need to be passed raw
-    const isFetchedComponent =
-      (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
-      element.hasAttribute('src');
-
-    if (element.attributes && !isFetchedComponent) {
-      for (let j = 0; j < element.attributes.length; j++) {
-        const attr = element.attributes[j];
-        // Reset lastIndex before test - BINDING_REGEX has 'g' flag which persists state
-        BINDING_REGEX.lastIndex = 0;
-
-        // Check if attribute name contains binding (e.g., @[section.icon])
-        if (BINDING_REGEX.test(attr.name)) {
-          nameBindings.push(attr.name);
-          continue; // Don't process as regular attribute
-        }
-
-        // Rewrite event handlers with this. to use component state
-        if (attr.name.startsWith('on') && attr.value.includes('this.')) {
-          const componentId = findComponentIdForElement(element);
-          if (componentId) {
-            // Rewrite this.property to $['componentId'].property, but skip DOM properties
-            const rewritten = attr.value.replace(/\bthis\.(\w+)/g, (match, prop) => {
-              return DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`;
-            });
-            element.setAttribute(attr.name, rewritten);
-          }
-        }
-
-        // Check if attribute value contains binding
-        BINDING_REGEX.lastIndex = 0;
-        if (BINDING_REGEX.test(attr.value)) {
-          attributes[attr.name] = attr.value;
-        }
-      }
-    }
-
-    // Helper to find component ID for an element
-    // Looks for nearest ancestor with data-vibe-component-id
-    function findComponentIdForElement(element) {
-      if (!element) return null;
-
-      // Find nearest component wrapper (tagged by component.js)
-      const wrapper = element.closest('[data-vibe-component-id]');
-      return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
-    }
-    const hasAttributeBindings = Object.keys(attributes).length > 0;
-    const hasNameBindings = nameBindings.length > 0;
-
+    const { attributes, nameBindings } = captureAttributeBindings(element);
     const hasChildren = childNodes.length;
 
     if (hasChildren) {
@@ -259,8 +267,8 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         parsed,
         element: elementForBindings,
         children: recursive(iteratableChildren, undefined, new Set(), stats),
-        ...(hasAttributeBindings && { attributes }),
-        ...(hasNameBindings && { nameBindings }),
+        ...(attributes && { attributes }),
+        ...(nameBindings && { nameBindings }),
         ...(textNodeRef && { textNode: textNodeRef }),
       };
     } else {
@@ -268,8 +276,8 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         parsed: innerHTML || textContent,
         element: elementForBindings,
         children: {},
-        ...(hasAttributeBindings && { attributes }),
-        ...(hasNameBindings && { nameBindings }),
+        ...(attributes && { attributes }),
+        ...(nameBindings && { nameBindings }),
         ...(textNodeRef && { textNode: textNodeRef }),
       };
     }
@@ -282,29 +290,7 @@ export default (root, rootKey = undefined) => {
   const { childNodes } = root;
   const stats = { skipped: 0 };
 
-  // Check for attribute bindings on the root element itself (only if element has attributes)
-  let attributes = null;
-  let nameBindings = null;
-  if (root.attributes && root.attributes.length > 0) {
-    for (let j = 0; j < root.attributes.length; j++) {
-      const attr = root.attributes[j];
-      BINDING_REGEX.lastIndex = 0;
-
-      // Check if attribute name contains binding
-      if (BINDING_REGEX.test(attr.name)) {
-        if (!nameBindings) nameBindings = [];
-        nameBindings.push(attr.name);
-        continue;
-      }
-
-      // Check if attribute value contains binding
-      BINDING_REGEX.lastIndex = 0;
-      if (BINDING_REGEX.test(attr.value)) {
-        if (!attributes) attributes = {};
-        attributes[attr.name] = attr.value;
-      }
-    }
-  }
+  const { attributes, nameBindings } = captureAttributeBindings(root);
 
   return {
     // html: root.outerHTML,