@ape-egg/vibe 1.3.2 → 1.6.0

package/runtime/pre-compiled-iterations.js

@@ -0,0 +1,153 @@
+/**
+ * pre-compiled-iterations.js
+ *
+ * Pre-compiled iteration rendering - production version of iteration optimization.
+ * Uses pre-compiled batch functions from manifest generated by the compiler.
+ *
+ * This is the production implementation that runs compiled code generated at build time.
+ * Based on the prototype in _vibe-compiled-iteration-batch.js
+ */
+
+// Reusable template element for parsing compiled HTML
+const parseTemplate = typeof document !== 'undefined' ? document.createElement('template') : null;
+
+/**
+ * Check if template has nested iterations or conditionals
+ */
+const hasNestedStructures = (template) => {
+  if (!template || !template.children) return false;
+  for (const key in template.children) {
+    const child = template.children[key];
+    if (!child) continue;
+    if (child.type === 'iteration' || child.type === 'conditional') return true;
+    if (hasNestedStructures(child)) return true;
+  }
+  return false;
+};
+
+/**
+ * Check if iteration node has compiled batch function
+ */
+export const canUseCompiled = (iterationNode) => {
+  if (!iterationNode || !iterationNode.meta) {
+    return false;
+  }
+
+  // Check compiled data from manifest merge
+  const compiled = iterationNode.compiled;
+  if (!compiled || !compiled.iterations || !compiled.iterations.batchFn) {
+    return false;
+  }
+
+  // If we have a compiled batch function, we can use it even if the template
+  // has nested structures, because the compiler has already inlined them
+  // into the batch function
+  return true;
+};
+
+/**
+ * Get compiled function metadata from iteration node
+ */
+export const getCompiledMeta = (iterationNode) => {
+  const compiled = iterationNode.compiled;
+  if (!compiled || !compiled.iterations) return null;
+
+  return {
+    batchFn: compiled.iterations.batchFn,
+    itemAlias: compiled.iterations.itemAlias,
+    indexAlias: compiled.iterations.indexAlias,
+  };
+};
+
+/**
+ * Render iteration using pre-compiled batch function from manifest
+ */
+export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
+  // Create function from string if not cached
+  if (!iterationNode.runtime.compiledFn) {
+    try {
+      // compiledMeta.batchFn is a complete arrow function: (arr, $) => { ... }
+      // Wrap in a function that returns it, then call to get the actual function
+      iterationNode.runtime.compiledFn = new Function('return ' + compiledMeta.batchFn)();
+    } catch (e) {
+      console.error('[compiled-iteration] Failed to create compiled function:', e);
+      return false; // Signal failure
+    }
+  }
+
+  // Build HTML using compiled function
+  const html = iterationNode.runtime.compiledFn(array, state);
+
+  // Parse and insert
+  if (parseTemplate) {
+    parseTemplate.innerHTML = html;
+    const frag = parseTemplate.content;
+    const kids = frag.children;
+
+    // Track instances - pre-allocate array for performance
+    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;
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * Update iteration using pre-compiled batch function (bulk rebuild)
+ */
+export const updateCompiled = (iterationNode, newArray, state, compiledMeta, startComment, endComment) => {
+  const parent = startComment.parentNode;
+
+  // Clear existing instances
+  if (iterationNode.runtime.instances.length > 0) {
+    const range = document.createRange();
+    range.setStartAfter(startComment);
+    range.setEndBefore(endComment);
+    range.deleteContents();
+  }
+
+  if (newArray.length === 0) {
+    iterationNode.runtime.instances = [];
+    return true;
+  }
+
+  // Create function if not cached
+  if (!iterationNode.runtime.compiledFn) {
+    try {
+      iterationNode.runtime.compiledFn = new Function('return ' + compiledMeta.batchFn)();
+    } catch (e) {
+      console.error('Failed to create compiled function:', e);
+      return false;
+    }
+  }
+
+  // Build HTML using compiled function
+  const html = iterationNode.runtime.compiledFn(newArray, state);
+
+  // Parse and insert
+  if (parseTemplate) {
+    parseTemplate.innerHTML = html;
+    const frag = parseTemplate.content;
+    const kids = frag.children;
+
+    // Track instances - pre-allocate array for performance
+    const arrayLen = newArray.length;
+    const instances = new Array(arrayLen);
+    for (let i = 0; i < arrayLen; i++) {
+      instances[i] = { element: kids[i], item: newArray[i], index: i };
+    }
+
+    parent.insertBefore(frag, endComment);
+    iterationNode.runtime.instances = instances;
+    return true;
+  }
+
+  return false;
+};

package/runtime/{hyperspeed.js → pre-compiled-manifest.js}

@@ -1,10 +1,10 @@
 /**
- * Hyperspeed - Pre-compiled manifest support for Vibe
+ * Pre-compiled Manifest - Manifest support for pre-compiled Vibe pages
  *
- * Handles detection and restoration of pre-compiled pages.
+ * Handles detection, loading, and restoration of pre-compiled page manifests.
  */
 
-// Build hyperspeed manifest with restoration data (captures markers before hydration)
+// Build manifest with restoration data (captures markers before hydration)
 export const buildHyperspeedManifest = (parsedTree) => {
   // Helper to split text content by @[...] markers into array
   const splitByMarkers = (text) => {
@@ -121,16 +121,17 @@ export const buildHyperspeedManifest = (parsedTree) => {
   };
 };
 
-// Hyperspeed detection - per-page manifest
+// Manifest detection - per-page manifest
 // Each compiled page has its own manifest: /vibe-hyperspeed/{page-path}.manifest.js
-let hyperspeedManifest = null;
+let hyperspeedData = null;
 let hyperspeedDetectionAttempted = false;
 
 /**
  * Detect page-specific manifest (async, cached after first call)
+ * Returns { manifest, path } or null
  */
 const detectHyperspeed = async () => {
-  if (hyperspeedDetectionAttempted) return hyperspeedManifest;
+  if (hyperspeedDetectionAttempted) return hyperspeedData;
   hyperspeedDetectionAttempted = true;
 
   try {
@@ -170,9 +171,12 @@ const detectHyperspeed = async () => {
     for (const manifestPath of possiblePaths) {
       try {
         const module = await import(manifestPath);
-        hyperspeedManifest = module.default;
-        return hyperspeedManifest;
-      } catch {
+        hyperspeedData = {
+          manifest: module.default,
+          path: manifestPath
+        };
+        return hyperspeedData;
+      } catch (e) {
         // Try next path
         continue;
       }
@@ -187,7 +191,7 @@ const detectHyperspeed = async () => {
 };
 
 /**
- * Restore DOM from pre-rendered values to @[...] markers using hyperspeed manifest
+ * Restore DOM from pre-rendered values to @[...] markers using pre-compiled manifest
  * This enables FOUC-free loading while maintaining runtime reactivity
  *
  * Flow:
@@ -203,8 +207,8 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
   const walkTree = (tree, element) => {
     if (!tree || !element) return;
 
-    // Check for hyperspeed restoration data
-    const restoration = tree.hyperspeedRestoration;
+    // Check for compiled restoration data
+    const restoration = tree.compiled?.restoration;
 
     if (restoration) {
       // Restore text content with markers if parsed contains bindings
@@ -230,95 +234,94 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
         }
       }
 
-      // Skip attribute restoration - manifest merge provides all binding metadata
-      // Attributes are already pre-rendered correctly by compiler
-      // restoration.attributes exists only for manifest merge, not for DOM restoration
-
-      // Restore conditionals
-      if ((restoration.trueTemplate || restoration.falseTemplate) && tree.type === 'conditional') {
-        // Find comment markers
-        const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
-        let startComment = null;
-        let elseComment = null;
-        let endComment = null;
-
-        while (walker.nextNode()) {
-          const comment = walker.currentNode;
-          const text = comment.textContent.trim();
-          if (text.startsWith('if')) {
-            startComment = comment;
-          } else if (text === 'else') {
-            elseComment = comment;
-          } else if (text === '/if') {
-            endComment = comment;
-            break;
-          }
+      // Restore attribute bindings for reactivity
+      // Two cases:
+      // 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)) {
+          // 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
+          element.setAttribute(attrName, attrValue);
         }
+      }
 
-        if (startComment && endComment) {
-          // Remove pre-rendered content in true branch
-          let current = startComment.nextSibling;
-          while (current && current !== (elseComment || endComment)) {
-            const next = current.nextSibling;
-            if (current.nodeType === Node.ELEMENT_NODE) {
-              current.remove();
-            }
-            current = next;
-          }
+      // Restore name bindings (sparse array indexed by attribute position)
+      if (restoration.nameBindings && Array.isArray(restoration.nameBindings)) {
+        const attrs = Array.from(element.attributes);
 
-          // Remove pre-rendered content in false branch if exists
-          if (elseComment) {
-            current = elseComment.nextSibling;
-            while (current && current !== endComment) {
-              const next = current.nextSibling;
-              if (current.nodeType === Node.ELEMENT_NODE) {
-                current.remove();
-              }
-              current = next;
-            }
+        for (let i = 0; i < restoration.nameBindings.length; i++) {
+          const marker = restoration.nameBindings[i];
+          if (marker && attrs[i]) {
+            // Replace the stamped attribute name with the marker
+            const stampedName = attrs[i].name;
+            const attrValue = attrs[i].value;
+
+            element.removeAttribute(stampedName);
+            element.setAttribute(marker, attrValue);
           }
+        }
+      }
+
+      // After restoration, delete compiled.restoration (runtime will parse DOM fresh)
+      if (tree.compiled) {
+        delete tree.compiled.restoration;
+      }
+    }
 
-          // Insert templates (runtime will process them)
-          if (restoration.trueTemplate) {
-            const template = document.createElement('div');
-            template.innerHTML = restoration.trueTemplate;
-            const templateNode = template.firstElementChild; // Use firstElementChild, not firstChild
-            if (templateNode) {
-              (elseComment || endComment).parentNode.insertBefore(
-                templateNode,
-                elseComment || endComment
-              );
+    // IMPORTANT: Restore text nodes BEFORE processing conditionals/iterations
+    // Text nodes use childNodes indices which become invalid after DOM modifications
+    if (tree.children) {
+      for (const key in tree.children) {
+        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('@[')
+            );
+
+            if (hasBindings) {
+              const originalContent = restoration.parsed.join('');
+
+              // Extract index from key (e.g., text_0 -> 0)
+              const match = key.match(/_(\d+)$/);
+              if (match) {
+                const index = parseInt(match[1], 10);
+
+                if (index < element.childNodes.length) {
+                  const textNode = element.childNodes[index];
+                  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+                    textNode.textContent = originalContent;
+                  }
+                }
+              }
             }
           }
 
-          if (restoration.falseTemplate && elseComment) {
-            const template = document.createElement('div');
-            template.innerHTML = restoration.falseTemplate;
-            const templateNode = template.firstElementChild; // Use firstElementChild, not firstChild
-            if (templateNode) {
-              endComment.parentNode.insertBefore(templateNode, endComment);
-            }
+          if (childTree.compiled) {
+            delete childTree.compiled.restoration;
           }
         }
       }
-
-      // After restoration, delete hyperspeedRestoration (runtime will parse DOM fresh)
-      delete tree.hyperspeedRestoration;
     }
 
-    // Recursively restore children
+    // Handle conditional and iteration children - process them at THIS level before recursing
+    // These are comment nodes in the DOM, not elements, so we need to find them here
     if (tree.children) {
       for (const key in tree.children) {
         const childTree = tree.children[key];
 
-        // Handle iteration nodes with restoration data
-        if (childTree.type === 'iteration' && childTree.hyperspeedRestoration) {
-          const restoration = childTree.hyperspeedRestoration;
+        // Handle iteration restoration
+        if (childTree.type === 'iteration' && childTree.compiled?.restoration) {
+          const restoration = childTree.compiled.restoration;
 
-          // Find iteration comment by searching (not using index)
-          // This avoids index shifting issues after restoration changes DOM
+          // Find iteration comment by matching the expression
           let startComment = null;
           let endComment = null;
+          let depth = 0;
 
           const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
           while (walker.nextNode()) {
@@ -328,11 +331,21 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             // Skip already processed iterations
             if (comment._vibeProcessed) continue;
 
-            if (trimmed.startsWith('each ') && !startComment) {
+            // Match by expression: "each items as item, i"
+            const expectedComment = `each ${restoration.expression}`;
+            if (trimmed === expectedComment && !startComment) {
               startComment = comment;
-            } else if (trimmed === '/each' && startComment && !endComment) {
-              endComment = comment;
-              break;
+              depth = 1;
+            } else if (startComment) {
+              if (trimmed.startsWith('each ')) {
+                depth++;
+              } else if (trimmed === '/each') {
+                depth--;
+                if (depth === 0) {
+                  endComment = comment;
+                  break;
+                }
+              }
             }
           }
 
@@ -341,76 +354,134 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
             startComment._vibeProcessed = true;
             endComment._vibeProcessed = true;
 
-            // Remove all pre-rendered items between comments
+            const parent = startComment.parentNode;
+            const insertionPoint = endComment.nextSibling;
+
+            // Remove all pre-rendered content between comments
             let current = startComment.nextSibling;
             while (current && current !== endComment) {
               const next = current.nextSibling;
-              if (current.nodeType === Node.ELEMENT_NODE) {
+              if (current.nodeType !== Node.COMMENT_NODE) {
                 current.remove();
               }
               current = next;
             }
 
-            // Insert template from restoration data
-            const temp = document.createElement('div');
-            temp.innerHTML = restoration.template;
-            const templateNode = temp.firstElementChild;
-            if (templateNode) {
-              endComment.parentNode.insertBefore(templateNode, endComment);
+            // Insert the template (single item)
+            const tempContainer = document.createElement('div');
+            tempContainer.innerHTML = restoration.template;
+
+            const fragment = document.createDocumentFragment();
+            while (tempContainer.firstChild) {
+              fragment.appendChild(tempContainer.firstChild);
             }
+            parent.insertBefore(fragment, endComment);
           }
 
-          delete childTree.hyperspeedRestoration;
+          // Delete the iteration node from tree - runtime will re-create it
+          delete tree.children[key];
           continue;
         }
 
-        // Handle conditional nodes (similar approach)
-        if (childTree.type === 'conditional') {
-          // TODO: Implement conditional restoration when needed
-          continue;
-        }
+        if (childTree.type === 'conditional' && childTree.compiled?.restoration) {
+          const restoration = childTree.compiled.restoration;
 
-        // Handle text nodes with restoration data
-        if (key.startsWith('text_') && childTree.hyperspeedRestoration) {
-          const restoration = childTree.hyperspeedRestoration;
-          if (restoration.parsed && Array.isArray(restoration.parsed)) {
-            const hasBindings = restoration.parsed.some(item =>
-              typeof item === 'string' && item.includes('@[')
-            );
+          // Find conditional comment markers in the current element
+          // But SKIP conditionals that are inside iteration blocks
+          const walker = document.createTreeWalker(element, NodeFilter.SHOW_COMMENT);
+          let startComment = null;
+          let endComment = null;
+          let insideIteration = false;
 
-            if (hasBindings) {
-              const originalContent = restoration.parsed.join('');
-              if (element.childNodes.length === 1 && element.childNodes[0].nodeType === 3) {
-                element.childNodes[0].textContent = originalContent;
-              } else if (element.childNodes.length === 0) {
-                element.textContent = originalContent;
-              }
+          while (walker.nextNode()) {
+            const comment = walker.currentNode;
+            const text = comment.textContent.trim();
+
+            // Track if we're inside an iteration block
+            if (text.startsWith('each ')) {
+              insideIteration = true;
+              continue;
+            } else if (text === '/each') {
+              insideIteration = false;
+              continue;
+            }
+
+            // Skip conditionals inside iterations - runtime will handle them
+            if (insideIteration) continue;
+
+            // 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 (startComment && endComment) {
+            // Mark as processed
+            startComment._vibeProcessed = true;
+            endComment._vibeProcessed = true;
+
+            // Remove ALL pre-rendered content between start and end comments
+            // This includes the <!-- else --> marker from compiled HTML
+            let current = startComment.nextSibling;
+            while (current && current !== endComment) {
+              const next = current.nextSibling;
+              current.remove();  // Remove ALL nodes, including comment nodes
+              current = next;
             }
+
+            // Insert the template content BEFORE endComment
+            const tempContainer = document.createElement('div');
+            tempContainer.innerHTML = restoration.template;
+
+            const fragment = document.createDocumentFragment();
+            while (tempContainer.firstChild) {
+              fragment.appendChild(tempContainer.firstChild);
+            }
+            endComment.parentNode.insertBefore(fragment, endComment);
           }
-          delete childTree.hyperspeedRestoration;
+
+          // Delete restoration data AND remove the conditional node from tree
+          // Runtime will re-create it from the restored DOM
+          delete tree.children[key];
+        }
+      }
+    }
+
+    // Recursively restore children (skip conditional/iteration children as they were already handled)
+    if (tree.children) {
+      for (const key in tree.children) {
+        const childTree = tree.children[key];
+
+        // Skip conditionals and iterations (already processed/deleted above)
+        if (childTree.type === 'conditional' || childTree.type === 'iteration') {
           continue;
         }
 
-        // Find corresponding child element
-        // Keys like "strong_0" use childNodes indices (includes text nodes/comments)
-        const match = key.match(/_(\d+)$/);
+        // Skip text nodes - already handled before conditional/iteration processing
+        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 index = parseInt(match[1], 10);
-          const childNode = element.childNodes[index]; // Use childNodes (all nodes)
+          const tagName = match[1].toUpperCase();
+          const nodeIndex = parseInt(match[2], 10);
 
-          // Only walk if it's an element node
-          if (childNode && childNode.nodeType === Node.ELEMENT_NODE) {
+          // Get the node at this childNodes index
+          const childNode = element.childNodes[nodeIndex];
+
+          if (childNode && childNode.nodeType === Node.ELEMENT_NODE && childNode.nodeName === tagName) {
             walkTree(childTree, childNode);
           }
-        } else {
-          // Try to find by tag name for non-indexed keys
-          const tagName = key.split('_')[0].toUpperCase();
-          const childElement = Array.from(element.children).find(
-            child => child.nodeName === tagName
-          );
-          if (childElement) {
-            walkTree(childTree, childElement);
-          }
         }
       }
     }
@@ -420,6 +491,7 @@ export const restoreMarkersFromManifest = (rootElement, subtree, fullManifest =
 };
 
 // Top-level await to detect before module exports
-hyperspeedManifest = await detectHyperspeed();
+hyperspeedData = await detectHyperspeed();
 
-export { hyperspeedManifest };
+export const hyperspeedManifest = hyperspeedData?.manifest || null;
+export const hyperspeedPath = hyperspeedData?.path || null;

package/runtime/utils.js

@@ -67,7 +67,8 @@ export const resolveThisPath = (path, element) => {
 
   const componentId = findComponentIdForElement(element);
   if (componentId) {
-    return path.replace(/^this\./, `${componentId}.`);
+    const resolved = path.replace(/^this\./, `${componentId}.`);
+    return resolved;
   }
 
   return path;

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

package/vibe.css

@@ -11,3 +11,22 @@
 .vibe-fouc * {
   transition: none !important;
 }
+
+/* Vibe Dehydrate - Skip Reactive Processing
+ * Elements with [vibe-dehydrate] attribute or .vibe-dehydrate class are skipped during
+ * Vibe's parsing and hydration. Useful for displaying literal @[variable] syntax in
+ * documentation, examples, or code snippets without triggering reactivity.
+ */
+[vibe-dehydrate],
+.vibe-dehydrate {
+  /* No styles applied - marker only */
+}
+
+/* Component Wrappers - Layout Transparent
+ * Component wrappers (<component> or <div class="component">) use display: contents
+ * to make the wrapper invisible in the layout. Children render as if the wrapper doesn't exist.
+ */
+component,
+div.component {
+  display: contents;
+}