@ape-egg/vibe 1.6.1 → 1.7.1

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
-      }
-    }
+      },
+    },
   };
 };
 
@@ -138,19 +138,19 @@ const detectHyperspeed = async () => {
     let pagePath = window.location.pathname;
 
     // Normalize path: handle directory URLs and missing extensions
-    if (pagePath.endsWith('/')) {
+    if (pagePath.endsWith("/")) {
       // /compiled/ -> /compiled/index.html
-      pagePath = pagePath + 'index.html';
-    } else if (!pagePath.includes('.')) {
+      pagePath = pagePath + "index.html";
+    } else if (!pagePath.includes(".")) {
       // /compiled/mypage -> /compiled/mypage.html
-      const lastSlash = pagePath.lastIndexOf('/');
+      const lastSlash = pagePath.lastIndexOf("/");
       const lastSegment = pagePath.substring(lastSlash + 1);
-      if (lastSegment && !lastSegment.includes('.')) {
-        pagePath = pagePath + '.html';
+      if (lastSegment && !lastSegment.includes(".")) {
+        pagePath = pagePath + ".html";
       }
     }
 
-    const pathSegments = pagePath.split('/').filter(s => s);
+    const pathSegments = pagePath.split("/").filter((s) => s);
 
     if (pathSegments.length === 0) return null;
 
@@ -165,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)
@@ -177,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
@@ -187,7 +191,7 @@ const detectHyperspeed = async () => {
         const module = await import(manifestPath);
         hyperspeedData = {
           manifest: module.default,
-          path: manifestPath
+          path: manifestPath,
         };
         return hyperspeedData;
       } catch (e) {
@@ -217,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;
 
@@ -227,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) {
@@ -253,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
@@ -288,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+)$/);
@@ -329,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
@@ -337,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();
@@ -351,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;
@@ -363,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;
@@ -382,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();
@@ -392,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;
             }
@@ -426,14 +465,31 @@ 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) {
+                const expression = childTree.meta?.expression;
+                const expectedText = expression ? 'if ' + expression : null;
+                if (expectedText && text === expectedText) {
+                  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;
@@ -444,12 +500,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();
@@ -458,10 +514,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];
         }
       }
     }
@@ -472,28 +524,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);
           }
         }