@ape-egg/vibe 1.6.0 → 1.7.0

package/runtime/component.js

@@ -36,7 +36,9 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
 
   if (componentElements.length === 0) {
-    if (onComplete) onComplete();
+    // Defer onComplete to give user code a chance to register listeners
+    // This is important when all components are pre-compiled (no src attributes)
+    if (onComplete) queueMicrotask(() => onComplete());
     return;
   }
 
@@ -50,7 +52,8 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       // Process next component
       processComponent(rootElement, onComplete, config);
     } else {
-      if (onComplete) onComplete();
+      // Defer onComplete to give user code a chance to register listeners
+      if (onComplete) queueMicrotask(() => onComplete());
     }
     return;
   }
@@ -131,21 +134,21 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
           const thisRegex = /@\[this\.(\w+)\]/g;
 
           // Rewrite in text nodes
-          Array.from(element.childNodes).forEach(node => {
+          Array.from(element.childNodes).forEach((node) => {
             if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('@[this.')) {
               node.textContent = node.textContent.replace(thisRegex, `@[${componentId}.$1]`);
             }
           });
 
           // Rewrite in attributes
-          Array.from(element.attributes || []).forEach(attr => {
+          Array.from(element.attributes || []).forEach((attr) => {
             if (attr.value.includes('@[this.')) {
               attr.value = attr.value.replace(thisRegex, `@[${componentId}.$1]`);
             }
           });
 
           // Recurse into children
-          Array.from(element.children).forEach(child => {
+          Array.from(element.children).forEach((child) => {
             rewriteThisBindings(child);
           });
         };
@@ -195,9 +198,10 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       // Check if element still has a parent (might have been removed during fetch)
       if (el.parentNode) {
         // Create clean wrapper element (preserve tag type: component or div.component)
-        const newWrapper = el.tagName === 'DIV'
-          ? document.createElement('div')
-          : document.createElement('component');
+        const newWrapper =
+          el.tagName === 'DIV'
+            ? document.createElement('div')
+            : document.createElement('component');
 
         if (el.tagName === 'DIV') {
           newWrapper.className = 'component';
@@ -207,16 +211,8 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
         el.replaceWith(newWrapper);
         debugLog(PHASE_FETCH, src, debug);
 
-        // Force immediate processing of the mutation (MutationObserver is async, but we need sync)
-        // Use microtask to process right after replaceWith completes
-        if (config._forceSync && config._processMutations && config._observer) {
-          Promise.resolve().then(() => {
-            const pending = config._observer.takeRecords();
-            if (pending.length > 0) {
-              config._processMutations(pending);
-            }
-          });
-        }
+        // Let MutationObserver handle the mutation naturally
+        // It will call processMutations, which will call processComponent for the next component
       }
     })
     .catch((error) => {

package/runtime/index.js

@@ -18,6 +18,7 @@ import {
   PHASE_UPDATE,
   PHASE_MUTATE,
   PHASE_HYPERSPEED,
+  PHASE_READY,
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 import { processComponent, abortComponentFetch } from './component.js';
@@ -70,12 +71,12 @@ const shouldProcessNode = (node) => {
 // Navigate tree using dot notation (handles .children at each level)
 const navigateTree = (tree, path) => {
   if (!path) return tree;
-  return path.split('.').reduce((node, key) => node?.children?.[key], tree);
+  return path.split('.').filter(k => k).reduce((node, key) => node?.children?.[key], tree);
 };
 
 // Get or create a node in the tree at the given path
 const ensureNode = (tree, path) => {
-  const keys = path.split('.');
+  const keys = path.split('.').filter(k => k);
   return keys.reduce((node, key) => {
     if (!node.children[key]) {
       node.children[key] = { children: {} };
@@ -497,6 +498,7 @@ const main = (s, config = {}, stringSelector = '') => {
   const hooks = {
     afterUpdate: [],
     afterDomMutation: [],
+    ready: [],
   };
 
   // Extract plain values from proxy (removes proxy wrappers)
@@ -950,6 +952,15 @@ const main = (s, config = {}, stringSelector = '') => {
     if (shouldCleanup(rootElement)) {
       cleanup(rootElement, debug);
       cleanupExecuted = true;
+
+      // Fire ready hook after cleanup completes
+      hooks.ready.forEach((callback) => {
+        try {
+          callback();
+        } catch (error) {
+          console.error('[vibe] Error in ready hook:', error);
+        }
+      });
     }
   };
 

package/runtime/iterate.js

@@ -16,9 +16,10 @@ import * as compiled from './pre-compiled-iterations.js';
  * Find a comment node with matching text content in the given nodes.
  */
 const findComment = (nodes, text) => {
+  const trimmedText = text.trim();
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
-    if (node.nodeType === 8 && node.textContent.trim() === text.trim()) {
+    if (node.nodeType === 8 && node.textContent.trim() === trimmedText) {
       return node;
     }
   }
@@ -36,9 +37,16 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
     parsed: originalTree.parsed,
     element: clonedRoot,
     children: {},
-    ...(originalTree.attributes && { attributes: originalTree.attributes }),
   };
 
+  // Avoid spread operator for performance
+  if (originalTree.attributes) {
+    cloned.attributes = originalTree.attributes;
+  }
+  if (originalTree.nameBindings) {
+    cloned.nameBindings = originalTree.nameBindings;
+  }
+
   if (!originalTree.children) return cloned;
 
   const clonedChildNodes = clonedRoot?.childNodes;
@@ -130,26 +138,42 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   let clonedNodes = [];
   let firstElement = null;
 
-  // Always use slow path: clone and parse from scratch
-  // TODO: Re-enable fast path once cloneTreeWithElements properly handles nested conditionals
+  // TEMPORARY: Disable fast path to test if it's causing duplication
+  let canUseFastPath = false;
 
   // Create a container for parsing (to capture all nodes including comment nodes like <!-- if -->)
   const parseContainer = document.createElement('div');
 
-  // Clone all template nodes into the container
-  for (let i = 0; i < templateNodes.length; i++) {
-    const cloned = templateNodes[i].cloneNode(true);
-    parseContainer.appendChild(cloned);
-    if (!firstElement && cloned.nodeType === 1) {
-      firstElement = cloned;
+  if (canUseFastPath) {
+    // Fast path: clone template nodes and map to cached tree structure
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      parseContainer.appendChild(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
+    }
+    tree = cloneTreeWithElements(cachedTree, parseContainer);
+  } else {
+    // Slow path: clone and parse from scratch
+    for (let i = 0; i < templateNodes.length; i++) {
+      const cloned = templateNodes[i].cloneNode(true);
+      parseContainer.appendChild(cloned);
+      if (!firstElement && cloned.nodeType === 1) {
+        firstElement = cloned;
+      }
     }
+    // Parse the entire container (includes all nodes + conditionals)
+    tree = parse(parseContainer);
   }
 
-  // Parse the entire container (includes all nodes + conditionals)
-  tree = parse(parseContainer);
-
   // Extract the cloned nodes from the container (these are the same nodes the tree references)
-  clonedNodes = Array.from(parseContainer.childNodes);
+  // Avoid Array.from for performance
+  const childNodes = parseContainer.childNodes;
+  clonedNodes = [];
+  for (let i = 0; i < childNodes.length; i++) {
+    clonedNodes.push(childNodes[i]);
+  }
 
   // If no firstElement found, use parseContainer as fallback
   if (!firstElement) {
@@ -271,6 +295,21 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     return;
   }
 
+  // Fallback check: If markers are lost (e.g., comment nodes replaced by component loading),
+  // check actual DOM state between comments for hydrated nodes
+  let currentNode = startComment.nextSibling;
+  while (currentNode && currentNode !== endComment) {
+    if (currentNode.nodeType === 1) {
+      // Element node
+      const html = currentNode.outerHTML || '';
+      // If node doesn't have any @[...] syntax, it's been hydrated
+      if (!html.includes('@[')) {
+        return; // Already rendered
+      }
+    }
+    currentNode = currentNode.nextSibling;
+  }
+
   // Remove template nodes from DOM on first render
   if (!iterationNode.runtime.templateRemoved) {
     let node = startComment.nextSibling;
@@ -361,7 +400,16 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   // Compiled path: Use pre-compiled batch function when available
   if (compiled.canUseCompiled(iterationNode)) {
     const compiledMeta = compiled.getCompiledMeta(iterationNode);
-    if (compiled.updateCompiled(iterationNode, newArray, newState, compiledMeta, startComment, endComment)) {
+    if (
+      compiled.updateCompiled(
+        iterationNode,
+        newArray,
+        newState,
+        compiledMeta,
+        startComment,
+        endComment,
+      )
+    ) {
       return;
     }
     // Fall through to runtime path if compiled failed

package/runtime/parse.js

@@ -12,7 +12,7 @@ const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
     const { nodeName, textContent } = element;
     if (['#comment'].includes(nodeName)) {
-      return `${s}${nodeName === '#comment' ? `asd` : textContent}`;
+      return s;
     }
     const name = nodeName.startsWith('#') ? nodeName.slice(1) : nodeName;
     const innerNodeIdentifier = `${name}_${i}`.toLowerCase();
@@ -77,8 +77,9 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
               },
             },
             // Preserve runtime data from previous parse if it exists (stored on startComment by iterate.js)
+            // Only restore if the comment node is still connected to the DOM (not replaced by component loading)
             // @ts-ignore - custom property added by iterate.js
-            runtime: element.__vibeIterationRuntime || {
+            runtime: (element.isConnected && element.__vibeIterationRuntime) || {
               instances: [],
               templateRemoved: false,
             },

package/runtime/pre-compiled-manifest.js

@@ -43,7 +43,7 @@ export const buildHyperspeedManifest = (parsedTree) => {
     }
 
     // Check if parsed string contains bindings - split into array
-    if (typeof node.parsed === 'string' && node.parsed.includes('@[')) {
+    if (typeof node.parsed === "string" && node.parsed.includes("@[")) {
       const parsedArray = splitByMarkers(node.parsed);
       if (parsedArray) {
         result.hyperspeedRestoration = {
@@ -53,10 +53,10 @@ export const buildHyperspeedManifest = (parsedTree) => {
     }
 
     // Check for attribute bindings
-    if (node.attributes && typeof node.attributes === 'object') {
+    if (node.attributes && typeof node.attributes === "object") {
       const attrBindings = {};
       for (const [key, value] of Object.entries(node.attributes)) {
-        if (typeof value === 'string' && value.includes('@[')) {
+        if (typeof value === "string" && value.includes("@[")) {
           attrBindings[key] = value;
         }
       }
@@ -69,7 +69,7 @@ export const buildHyperspeedManifest = (parsedTree) => {
     }
 
     // For iterations, extract template as HTML string
-    if (node.type === 'iteration' && node.meta?.template?.element) {
+    if (node.type === "iteration" && node.meta?.template?.element) {
       const templateElement = node.meta.template.element;
       if (templateElement && templateElement.innerHTML) {
         if (!result.hyperspeedRestoration) {
@@ -80,7 +80,7 @@ export const buildHyperspeedManifest = (parsedTree) => {
     }
 
     // For conditionals, extract branch templates as HTML strings
-    if (node.type === 'conditional' && node.meta?.branches) {
+    if (node.type === "conditional" && node.meta?.branches) {
       const trueBranch = node.meta.branches.true?.element;
       const falseBranch = node.meta.branches.false?.element;
 
@@ -98,7 +98,7 @@ export const buildHyperspeedManifest = (parsedTree) => {
     }
 
     // Recursively process children (skip runtime-only nodes)
-    if (node.children && typeof node.children === 'object') {
+    if (node.children && typeof node.children === "object") {
       for (const [key, childNode] of Object.entries(node.children)) {
         result.children[key] = walkNode(childNode);
       }
@@ -116,8 +116,8 @@ export const buildHyperspeedManifest = (parsedTree) => {
         element: null,
         parsed: [],
         children: walkNode(parsedTree).children, // Use children directly
-      }
-    }
+      },
+    },
   };
 };
 
@@ -135,8 +135,22 @@ const detectHyperspeed = async () => {
   hyperspeedDetectionAttempted = true;
 
   try {
-    const pagePath = window.location.pathname;
-    const pathSegments = pagePath.split('/').filter(s => s);
+    let pagePath = window.location.pathname;
+
+    // Normalize path: handle directory URLs and missing extensions
+    if (pagePath.endsWith("/")) {
+      // /compiled/ -> /compiled/index.html
+      pagePath = pagePath + "index.html";
+    } else if (!pagePath.includes(".")) {
+      // /compiled/mypage -> /compiled/mypage.html
+      const lastSlash = pagePath.lastIndexOf("/");
+      const lastSegment = pagePath.substring(lastSlash + 1);
+      if (lastSegment && !lastSegment.includes(".")) {
+        pagePath = pagePath + ".html";
+      }
+    }
+
+    const pathSegments = pagePath.split("/").filter((s) => s);
 
     if (pathSegments.length === 0) return null;
 
@@ -151,9 +165,11 @@ const detectHyperspeed = async () => {
     // Strategy 1: vibe-hyperspeed at the same level as parent directory
     // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
     if (dirSegments.length >= 1) {
-      const subPath = dirSegments.slice(1).join('/'); // Everything after first dir
-      const baseDir = '/' + dirSegments[0]; // First directory segment
-      possiblePaths.push(`${baseDir}/vibe-hyperspeed/${subPath ? subPath + '/' : ''}${fileName}.manifest.js`);
+      const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
+      const baseDir = "/" + dirSegments[0]; // First directory segment
+      possiblePaths.push(
+        `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
+      );
     }
 
     // Strategy 2: vibe-hyperspeed at web root (original behavior)
@@ -163,8 +179,10 @@ const detectHyperspeed = async () => {
     // Strategy 3: vibe-hyperspeed relative to immediate parent
     // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
     if (dirSegments.length > 0) {
-      const relativePath = dirSegments.join('/');
-      possiblePaths.push(`/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`);
+      const relativePath = dirSegments.join("/");
+      possiblePaths.push(
+        `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
+      );
     }
 
     // Try each possible path
@@ -173,7 +191,7 @@ const detectHyperspeed = async () => {
         const module = await import(manifestPath);
         hyperspeedData = {
           manifest: module.default,
-          path: manifestPath
+          path: manifestPath,
         };
         return hyperspeedData;
       } catch (e) {
@@ -203,7 +221,11 @@ const detectHyperspeed = async () => {
  * @param {Object} subtree - The matching subtree from manifest (e.g., manifest.children.body)
  * @param {Object} fullManifest - The full manifest (unused now, kept for compatibility)
  */
-export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest = null) => {
+export const restoreMarkersFromManifest = (
+  rootElement,
+  subtree,
+  fullManifest = null,
+) => {
   const walkTree = (tree, element) => {
     if (!tree || !element) return;
 
@@ -213,17 +235,25 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
     if (restoration) {
       // Restore text content with markers if parsed contains bindings
       if (restoration.parsed && Array.isArray(restoration.parsed)) {
-        const hasBindings = restoration.parsed.some(item =>
-          typeof item === 'string' && item.includes('@[')
+        const hasBindings = restoration.parsed.some(
+          (item) => typeof item === "string" && item.includes("@["),
         );
 
         if (hasBindings) {
           // Reconstruct original content with markers
-          const originalContent = restoration.parsed.join('');
+          let originalContent = restoration.parsed.join("");
+
+          // Transform component-scoped bindings back to this. format
+          // Compiler transforms @[this.count] → @[_c0.count] for stamping
+          // Runtime expects @[this.count], so transform back
+          originalContent = originalContent.replace(/@\[_c\d+\./g, "@[this.");
 
           // For text nodes, update parent's innerHTML
           // For elements with children, update only text nodes
-          if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
+          if (
+            element.childNodes.length === 1 &&
+            element.childNodes[0].nodeType === 3
+          ) {
             // Single text node - replace it
             element.childNodes[0].textContent = originalContent;
           } else if (element.childNodes.length === 0) {
@@ -239,7 +269,13 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
       // 1. Boolean-like attributes with falsy values were removed - restore them
       // 2. Value attributes were stamped - replace stamped values with markers
       if (restoration.attributes) {
-        for (const [attrName, attrValue] of Object.entries(restoration.attributes)) {
+        for (let [attrName, attrValue] of Object.entries(
+          restoration.attributes,
+        )) {
+          // Transform component-scoped bindings back to this. format
+          // Compiler transforms @[this.count] → @[_c0.count], runtime expects @[this.count]
+          attrValue = attrValue.replace(/@\[_c\d+\./g, "@[this.");
+
           // Always set the attribute to restore the marker
           // - If missing (boolean-like, falsy): adds it back
           // - If present (value attr, stamped): replaces stamped value with marker
@@ -274,17 +310,22 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
     // Text nodes use childNodes indices which become invalid after DOM modifications
     if (tree.children) {
       for (const key in tree.children) {
-        if (key.startsWith('text_')) {
+        if (key.startsWith("text_")) {
           const childTree = tree.children[key];
           const restoration = childTree.compiled?.restoration;
 
           if (restoration?.parsed && Array.isArray(restoration.parsed)) {
-            const hasBindings = restoration.parsed.some(item =>
-              typeof item === 'string' && item.includes('@[')
+            const hasBindings = restoration.parsed.some(
+              (item) => typeof item === "string" && item.includes("@["),
             );
 
             if (hasBindings) {
-              const originalContent = restoration.parsed.join('');
+              // Transform component-scoped bindings back to this. format
+              let originalContent = restoration.parsed.join("");
+              originalContent = originalContent.replace(
+                /@\[_c\d+\./g,
+                "@[this.",
+              );
 
               // Extract index from key (e.g., text_0 -> 0)
               const match = key.match(/_(\d+)$/);
@@ -315,7 +356,7 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
         const childTree = tree.children[key];
 
         // Handle iteration restoration
-        if (childTree.type === 'iteration' && childTree.compiled?.restoration) {
+        if (childTree.type === "iteration" && childTree.compiled?.restoration) {
           const restoration = childTree.compiled.restoration;
 
           // Find iteration comment by matching the expression
@@ -323,7 +364,10 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
           let endComment = null;
           let depth = 0;
 
-          const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
+          const walker = document.createTreeWalker(
+            element,
+            NodeFilter.SHOW_COMMENT,
+          );
           while (walker.nextNode()) {
             const comment = walker.currentNode;
             const trimmed = comment.textContent.trim();
@@ -337,9 +381,9 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
               startComment = comment;
               depth = 1;
             } else if (startComment) {
-              if (trimmed.startsWith('each ')) {
+              if (trimmed.startsWith("each ")) {
                 depth++;
-              } else if (trimmed === '/each') {
+              } else if (trimmed === "/each") {
                 depth--;
                 if (depth === 0) {
                   endComment = comment;
@@ -349,6 +393,10 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             }
           }
 
+          // Always delete the iteration node from tree - runtime will re-create it
+          // Do this even if comments weren't found (they might have been removed by parent restoration)
+          delete tree.children[key];
+
           if (startComment && endComment) {
             // Mark as processed
             startComment._vibeProcessed = true;
@@ -368,7 +416,7 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             }
 
             // Insert the template (single item)
-            const tempContainer = document.createElement('div');
+            const tempContainer = document.createElement("div");
             tempContainer.innerHTML = restoration.template;
 
             const fragment = document.createDocumentFragment();
@@ -378,30 +426,35 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             parent.insertBefore(fragment, endComment);
           }
 
-          // Delete the iteration node from tree - runtime will re-create it
-          delete tree.children[key];
           continue;
         }
 
-        if (childTree.type === 'conditional' && childTree.compiled?.restoration) {
+        if (
+          childTree.type === "conditional" &&
+          childTree.compiled?.restoration
+        ) {
           const restoration = childTree.compiled.restoration;
 
           // Find conditional comment markers in the current element
           // But SKIP conditionals that are inside iteration blocks
-          const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
+          const walker = document.createTreeWalker(
+            element,
+            NodeFilter.SHOW_COMMENT,
+          );
           let startComment = null;
           let endComment = null;
           let insideIteration = false;
+          let conditionalDepth = 0;
 
           while (walker.nextNode()) {
             const comment = walker.currentNode;
             const text = comment.textContent.trim();
 
             // Track if we're inside an iteration block
-            if (text.startsWith('each ')) {
+            if (text.startsWith("each ")) {
               insideIteration = true;
               continue;
-            } else if (text === '/each') {
+            } else if (text === "/each") {
               insideIteration = false;
               continue;
             }
@@ -412,14 +465,27 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             // Skip already processed conditionals
             if (comment._vibeProcessed) continue;
 
-            if (text.startsWith('if') && !startComment) {
-              startComment = comment;
-            } else if (text === '/if' && startComment && !endComment) {
-              endComment = comment;
-              break;
+            if (text.startsWith("if")) {
+              if (!startComment) {
+                startComment = comment;
+                conditionalDepth = 1;
+              } else {
+                // Track nested conditionals
+                conditionalDepth++;
+              }
+            } else if (text === "/if" && startComment) {
+              conditionalDepth--;
+              if (conditionalDepth === 0) {
+                endComment = comment;
+                break;
+              }
             }
           }
 
+          // Always delete the conditional node from tree - runtime will re-create it
+          // Do this even if comments weren't found (they might have been removed by parent restoration)
+          delete tree.children[key];
+
           if (startComment && endComment) {
             // Mark as processed
             startComment._vibeProcessed = true;
@@ -430,12 +496,12 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             let current = startComment.nextSibling;
             while (current && current !== endComment) {
               const next = current.nextSibling;
-              current.remove();  // Remove ALL nodes, including comment nodes
+              current.remove(); // Remove ALL nodes, including comment nodes
               current = next;
             }
 
             // Insert the template content BEFORE endComment
-            const tempContainer = document.createElement('div');
+            const tempContainer = document.createElement("div");
             tempContainer.innerHTML = restoration.template;
 
             const fragment = document.createDocumentFragment();
@@ -444,10 +510,6 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             }
             endComment.parentNode.insertBefore(fragment, endComment);
           }
-
-          // Delete restoration data AND remove the conditional node from tree
-          // Runtime will re-create it from the restored DOM
-          delete tree.children[key];
         }
       }
     }
@@ -458,28 +520,33 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
         const childTree = tree.children[key];
 
         // Skip conditionals and iterations (already processed/deleted above)
-        if (childTree.type === 'conditional' || childTree.type === 'iteration') {
+        if (
+          childTree.type === "conditional" ||
+          childTree.type === "iteration"
+        ) {
           continue;
         }
 
         // Skip text nodes - already handled before conditional/iteration processing
-        if (key.startsWith('text_')) {
+        if (key.startsWith("text_")) {
           continue;
         }
 
         // Find corresponding child element by tag name and index
         // Keys like "layout_1" mean the node at childNodes index 1 (includes text nodes)
-        // NOT the second layout element
         // Tag names can contain digits (h1, h2, etc.) so use [a-z0-9-]+
         const match = key.match(/^([a-z0-9-]+)_(\d+)$/);
         if (match) {
           const tagName = match[1].toUpperCase();
           const nodeIndex = parseInt(match[2], 10);
 
-          // Get the node at this childNodes index
           const childNode = element.childNodes[nodeIndex];
 
-          if (childNode && childNode.nodeType === Node.ELEMENT_NODE && childNode.nodeName === tagName) {
+          if (
+            childNode &&
+            childNode.nodeType === Node.ELEMENT_NODE &&
+            childNode.nodeName === tagName
+          ) {
             walkTree(childTree, childNode);
           }
         }