@ape-egg/vibe 1.6.1 → 1.7.0

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,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;
@@ -444,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();
@@ -458,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];
         }
       }
     }
@@ -472,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);
           }
         }