@ape-egg/vibe 1.3.1 → 1.6.0

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;
+}

package/runtime/component-state.js

@@ -1,63 +0,0 @@
-// Shared utility for processing component state
-
-/**
- * Generate unique component ID
- */
-export const generateComponentId = () => {
-  return `_c${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-};
-
-/**
- * Transform variable declarations to property assignments
- * let count = 0; → this.count = 0;
- */
-const transformDeclarations = (code) => {
-  return code
-    // Transform: let varName = value;
-    .replace(/\b(let|const|var)\s+(\w+)\s*=\s*([^;]+);/g, 'this.$2 = $3;')
-    // Transform: let varName;
-    .replace(/\b(let|const|var)\s+(\w+)\s*;/g, 'this.$2 = undefined;');
-};
-
-/**
- * Execute component script and return state object
- * @param {string} scriptContent - JavaScript code to execute
- * @returns {object} - Component state object
- */
-export const executeComponentScript = (scriptContent) => {
-  const componentState = {};
-
-  if (!scriptContent || !scriptContent.trim()) {
-    return componentState;
-  }
-
-  try {
-    // Transform declarations to property assignments
-    const transformed = transformDeclarations(scriptContent);
-
-    // Execute script with 'this' = componentState
-    const fn = new Function(transformed);
-    fn.call(componentState);
-
-  } catch (error) {
-    console.error('[vibe] Error executing component script:', error);
-    console.error('[vibe] Script content:', scriptContent);
-  }
-
-  return componentState;
-};
-
-/**
- * Register component state in global store
- * @param {string} componentId - Unique component identifier
- * @param {object} state - Component state object
- * @param {object} globalState - Global $ object
- */
-export const registerComponentState = (componentId, state, globalState) => {
-  if (!globalState[componentId]) {
-    globalState[componentId] = state;
-  } else {
-    // Component already registered, merge new state
-    Object.assign(globalState[componentId], state);
-  }
-};