@ape-egg/vibe 1.8.0 → 1.9.1

package/runtime/iterate.js

@@ -2,17 +2,178 @@ 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;
+};
+
+// Batch render template-literal-interpolates `@[expr]` as `${expr}` — that
+// stringifies object/array values, which breaks `<component src>` props that
+// rely on resolveIterationComponentProps to stash non-primitives in the
+// registry. Templates carrying any `<component src>` go through the
+// clone+hydrate path instead.
+const hasComponentSrc = (templateEl) =>
+  !!templateEl.querySelector?.('component[src], div.component[src]');
+
+const canUseBatchRender = (template) =>
+  !hasNestedStructures(template) &&
+  template.element.children.length <= 1 &&
+  !hasComponentSrc(template.element);
+
+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;
+    `,
+  );
+};
+
+// Registry for non-primitive iteration prop snapshots. Lives on `window` (not
+// on `$`) so it doesn't pollute user-visible state enumeration, but is still
+// reachable from binding expressions because `window` is in evalInScope's
+// known-globals list. Each entry is freed when the owning component element
+// is detached (see releaseOrphanedIterationProps).
+let __vibeIterPropCounter = 0;
+const ensureIterPropsRegistry = () => {
+  if (!window.__vibeIterProps) window.__vibeIterProps = {};
+  return window.__vibeIterProps;
+};
+
+// Walk a removed subtree and free any iteration-prop registry slots stashed
+// on `<component>` elements inside it. Called from the mutation-observer
+// cleanup path after DOM detachment.
+export const releaseOrphanedIterationProps = (nodes) => {
+  if (!window.__vibeIterProps) return;
+  for (const node of nodes) {
+    if (node.nodeType !== 1) continue;
+    const free = (el) => {
+      const ids = el._vibeIterPropIds;
+      if (!ids) return;
+      for (const id of ids) delete window.__vibeIterProps[id];
+      el._vibeIterPropIds = null;
+    };
+    free(node);
+    node.querySelectorAll?.('[data-vibe-iter-prop]').forEach(free);
+  }
+};
+
+// 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 value. Primitives stringify into the attribute as
+// before. Non-primitives (objects, arrays) snapshot into the registry and the
+// attribute becomes a binding into that slot — preserving live object/array
+// access for the child component's template (`@[prop.x]`,
+// `<!-- each prop as item -->`, etc.).
+//
+// 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) continue;
+          if (value === null || (typeof value !== 'object' && typeof value !== 'function')) {
+            el.setAttribute(attr.name, String(value));
+          } else {
+            const registry = ensureIterPropsRegistry();
+            const id = `_p${__vibeIterPropCounter++}`;
+            registry[id] = value;
+            el.setAttribute(attr.name, `@[window.__vibeIterProps.${id}]`);
+            el.setAttribute('data-vibe-iter-prop', '');
+            (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
+          }
+        } 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 +320,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 +486,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 +522,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 +559,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 +634,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 +652,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 +661,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 { instances } = iterationNode.runtime;
+  if (fromIndex < 0 || fromIndex >= instances.length) return;
+  if (toIndex < 0 || toIndex >= instances.length) return;
+  const parent = iterationNode.meta.startComment.parentNode;
 
-  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);
-
-  // 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) => {