@ape-egg/vibe 1.3.1 → 1.6.0

package/runtime/index.js

@@ -18,16 +18,17 @@ import {
   PHASE_UPDATE,
   PHASE_MUTATE,
   PHASE_HYPERSPEED,
+  DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 import { processComponent, abortComponentFetch } from './component.js';
 import { debugLog } from './debug.js';
 import { shouldCleanup, cleanup } from './cleanup.js';
-import { generateComponentId, executeComponentScript } from './component-state.js';
 import {
   buildHyperspeedManifest,
   hyperspeedManifest,
+  hyperspeedPath,
   restoreMarkersFromManifest,
-} from './hyperspeed.js';
+} from './pre-compiled-manifest.js';
 
 // Wire up cross-module dependency after all modules are loaded
 setRenderAllConditionals(renderAllConditionals);
@@ -54,7 +55,10 @@ const shouldProcessNode = (node) => {
     if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
       return false;
     }
-    if (current.hasAttribute?.('dehydrate')) {
+    if (
+      current.hasAttribute?.(DEHYDRATE_CLASS_OR_ATTR) ||
+      current.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)
+    ) {
       return false;
     }
     current = current.parentElement;
@@ -183,13 +187,14 @@ const mergeManifests = (hyperspeedTree, runtimeTree) => {
   if (!hyperspeedTree) return runtimeTree;
   if (!runtimeTree) return hyperspeedTree;
 
-  // Start with deep clone of hyperspeed (foundation)
-  const merged = deepCloneNode(hyperspeedTree);
+  // hyperspeedTree is already a clone (done before restoration to avoid mutation)
+  const merged = hyperspeedTree;
 
   // Helper to recursively augment hyperspeed with runtime data
   const augmentWithRuntime = (mergedNode, runtimeNode) => {
     if (!runtimeNode) return;
 
+    // Debug: log node types
     // Populate DOM references from runtime
     if (runtimeNode.element) {
       mergedNode.element = runtimeNode.element;
@@ -200,18 +205,43 @@ const mergeManifests = (hyperspeedTree, runtimeTree) => {
       mergedNode.parsed = runtimeNode.parsed;
     }
 
+    // Populate name bindings from runtime (detected after restoration)
+    if (runtimeNode.nameBindings) {
+      mergedNode.nameBindings = runtimeNode.nameBindings;
+    }
+
+    // Populate attributes from runtime (detected after restoration)
+    if (runtimeNode.attributes) {
+      mergedNode.attributes = runtimeNode.attributes;
+    }
+
+    // Populate textNode reference from runtime (for text node children)
+    if (runtimeNode.textNode) {
+      mergedNode.textNode = runtimeNode.textNode;
+    }
+
     // For iterations: populate all meta and runtime from runtime
     if (mergedNode.type === 'iteration' && runtimeNode.type === 'iteration') {
+      // Preserve compiled data from manifest (has compiled batch function)
+      const compiledData = mergedNode.compiled;
+
       // Copy entire meta object from runtime (all properties needed)
       mergedNode.meta = runtimeNode.meta;
       // Copy runtime object (instances, etc.)
       mergedNode.runtime = runtimeNode.runtime;
+
+      // Restore compiled data if it was present
+      if (compiledData) {
+        mergedNode.compiled = compiledData;
+      }
     }
 
-    // For conditionals: populate all meta from runtime
+    // For conditionals: populate all meta and runtime from runtime
     if (mergedNode.type === 'conditional' && runtimeNode.type === 'conditional') {
       // Copy entire meta object from runtime (all properties needed)
       mergedNode.meta = runtimeNode.meta;
+      // Copy runtime object (activeBranch, activeInstance, templateRemoved)
+      mergedNode.runtime = runtimeNode.runtime;
     }
 
     // Augment children recursively
@@ -221,10 +251,40 @@ const mergeManifests = (hyperspeedTree, runtimeTree) => {
       for (const key in runtimeNode.children) {
         const runtimeChild = runtimeNode.children[key];
 
-        // Skip iterations - let runtime control them entirely
-        // Iterations are dynamic and restoration changes DOM structure
+        // For iterations: augment existing node, don't replace
         if (runtimeChild.type === 'iteration') {
+          const hyperspeedChild = mergedNode.children[key];
+
+          if (hyperspeedChild) {
+            // Preserve compiled data from hyperspeed
+            const compiledData = hyperspeedChild.compiled;
+
+            // Update meta and runtime from runtime node
+            mergedNode.children[key].meta = runtimeChild.meta;
+            mergedNode.children[key].runtime = runtimeChild.runtime;
+
+            // Keep compiled data from hyperspeed (it has batchFn)
+            if (compiledData) {
+              mergedNode.children[key].compiled = compiledData;
+            }
+          } else {
+            // No hyperspeed node, just use runtime
+            mergedNode.children[key] = runtimeChild;
+          }
+          continue;
+        }
+
+        // For conditionals: use runtime node but preserve compiled data
+        if (runtimeChild.type === 'conditional') {
+          const hyperspeedChild = mergedNode.children[key];
+          const compiledData = hyperspeedChild?.compiled;
+
           mergedNode.children[key] = runtimeChild;
+
+          // Restore compiled data if it existed
+          if (compiledData) {
+            mergedNode.children[key].compiled = compiledData;
+          }
           continue;
         }
 
@@ -277,7 +337,7 @@ const main = (s, config = {}, stringSelector = '') => {
     }
   }
 
-  debugLog(PHASE_ATTACH, `Vibe attached to`, true, 0, rootElement);
+  debugLog(PHASE_ATTACH, `Vibe attached to`, debug, 0, rootElement);
 
   // Component tagging is now handled by component.js before boot
   // Component state is merged into s by boot.js
@@ -286,7 +346,38 @@ const main = (s, config = {}, stringSelector = '') => {
   // This allows pre-rendered values to be visible (no FOUC) but makes DOM reactive
   let hyperspeedSubtree = null;
   if (hyperspeedTree) {
-    debugLog(PHASE_HYPERSPEED, 'Applied pre-compiled vibe-hyperspeed/**/*.manifest.js', debug);
+    const manifestName = hyperspeedPath ? hyperspeedPath.split('/').pop() : 'manifest.js';
+
+    // Count compiled features
+    const countCompiledIterations = (tree) => {
+      let count = 0;
+      if (tree.type === 'iteration' && tree.compiled?.iterations?.batchFn) count++;
+      if (tree.children) {
+        for (const key in tree.children) {
+          count += countCompiledIterations(tree.children[key]);
+        }
+      }
+      return count;
+    };
+
+    const compiledIterationCount = countCompiledIterations(hyperspeedTree);
+
+    // Log features that are enabled
+    debugLog(PHASE_HYPERSPEED, `Loaded ${manifestName}, page is pre-compiled`, debug);
+
+    if (compiledIterationCount > 0) {
+      debugLog(
+        PHASE_HYPERSPEED,
+        [
+          { text: String(compiledIterationCount), colored: true },
+          {
+            text: ` ${compiledIterationCount === 1 ? 'iteration' : 'iterations'} optimized`,
+            colored: false,
+          },
+        ],
+        debug,
+      );
+    }
 
     // Find matching subtree by DOM path (not just tag name)
     // Build path from document to rootElement
@@ -347,14 +438,19 @@ const main = (s, config = {}, stringSelector = '') => {
     };
 
     const domPath = buildDomPath(rootElement);
-    hyperspeedSubtree = findManifestNodeByPath(hyperspeedTree, domPath);
+    let subtreeFromManifest = findManifestNodeByPath(hyperspeedTree, domPath);
 
-    if (!hyperspeedSubtree) {
+    if (!subtreeFromManifest) {
       // Fallback to root if path matching fails
-      hyperspeedSubtree = hyperspeedTree;
+      subtreeFromManifest = hyperspeedTree;
     }
 
-    restoreMarkersFromManifest(rootElement, hyperspeedSubtree, hyperspeedTree);
+    // IMPORTANT: Clone BEFORE restoration because restoration mutates the tree
+    // We need TWO clones: one for restoration (gets mutated), one for merging (stays intact)
+    hyperspeedSubtree = deepCloneNode(subtreeFromManifest); // For merging
+    const cloneForRestoration = deepCloneNode(subtreeFromManifest); // For restoration
+
+    restoreMarkersFromManifest(rootElement, cloneForRestoration, hyperspeedTree);
   }
 
   // Runtime parses DOM (which now has restored markers if hyperspeed was used)
@@ -379,9 +475,9 @@ const main = (s, config = {}, stringSelector = '') => {
 
   const segments = [
     { text: `${elementsOnly}`, colored: true },
-    { text: ' elements (', colored: false },
+    { text: ` ${elementsOnly === 1 ? 'element' : 'elements'} (`, colored: false },
     { text: `${totalCount}`, color: 'slate' },
-    { text: ' total nodes)', colored: false },
+    { text: ` total ${totalCount === 1 ? 'node' : 'nodes'})`, colored: false },
   ];
   if (parsedTree.stats?.skipped > 0) {
     segments.push(
@@ -483,7 +579,10 @@ const main = (s, config = {}, stringSelector = '') => {
   debugLog(
     PHASE_HYDRATE,
     [
-      { text: `${affectedElements.length} bindings (`, colored: false },
+      {
+        text: `${affectedElements.length} ${affectedElements.length === 1 ? 'binding' : 'bindings'} (`,
+        colored: false,
+      },
       { text: '@[...]', color: 'pink' },
       { text: ')', colored: false },
     ],
@@ -501,7 +600,10 @@ const main = (s, config = {}, stringSelector = '') => {
     debugLog(
       PHASE_ITERATE,
       [
-        { text: `${iterationCount} iterations (`, colored: false },
+        {
+          text: `${iterationCount} ${iterationCount === 1 ? 'iteration' : 'iterations'} (`,
+          colored: false,
+        },
         { text: '<!-- each -->', color: 'commentGreen' },
         { text: ')', colored: false },
       ],
@@ -513,7 +615,10 @@ const main = (s, config = {}, stringSelector = '') => {
     debugLog(
       PHASE_CONDITION,
       [
-        { text: `${conditionalCount} conditionals (`, colored: false },
+        {
+          text: `${conditionalCount} ${conditionalCount === 1 ? 'conditional' : 'conditionals'} (`,
+          colored: false,
+        },
         { text: '<!-- if -->', color: 'commentGreen' },
         { text: ')', colored: false },
       ],
@@ -667,25 +772,31 @@ const main = (s, config = {}, stringSelector = '') => {
         // Added
         if (addedElements > 0) {
           segments.push({ text: `+${addedElements}`, color: 'green' });
-          segments.push({ text: ' elements', colored: false });
+          segments.push({
+            text: ` ${addedElements === 1 ? 'element' : 'elements'}`,
+            colored: false,
+          });
         }
         if (addedNodes > 0) {
           if (addedElements > 0) segments.push({ text: ', ', colored: false });
           segments.push({ text: `+${addedNodes}`, color: 'slate' });
-          segments.push({ text: ' nodes', colored: false });
+          segments.push({ text: ` ${addedNodes === 1 ? 'node' : 'nodes'}`, colored: false });
         }
 
         // Removed
         if (removedElements > 0) {
           if (addedElements > 0 || addedNodes > 0) segments.push({ text: ', ', colored: false });
           segments.push({ text: `-${removedElements}`, color: 'red' });
-          segments.push({ text: ' elements', colored: false });
+          segments.push({
+            text: ` ${removedElements === 1 ? 'element' : 'elements'}`,
+            colored: false,
+          });
         }
         if (removedNodes > 0) {
           if (addedElements > 0 || addedNodes > 0 || removedElements > 0)
             segments.push({ text: ', ', colored: false });
           segments.push({ text: `-${removedNodes}`, color: 'slate' });
-          segments.push({ text: ' nodes', colored: false });
+          segments.push({ text: ` ${removedNodes === 1 ? 'node' : 'nodes'}`, colored: false });
         }
 
         // Pass element reference if exactly one element was mutated (not counting nodes)
@@ -716,9 +827,9 @@ const main = (s, config = {}, stringSelector = '') => {
 
           const parseSegments = [
             { text: `${elementsOnly}`, colored: true },
-            { text: ' elements (', colored: false },
+            { text: ` ${elementsOnly === 1 ? 'element' : 'elements'} (`, colored: false },
             { text: `${totalNodes}`, color: 'slate' },
-            { text: ' total nodes)', colored: false },
+            { text: ` total ${totalNodes === 1 ? 'node' : 'nodes'})`, colored: false },
           ];
 
           if (totalSkipped > 0) {
@@ -736,7 +847,10 @@ const main = (s, config = {}, stringSelector = '') => {
             debugLog(
               PHASE_HYDRATE,
               [
-                { text: `${hydratedCount} bindings (`, colored: false },
+                {
+                  text: `${hydratedCount} ${hydratedCount === 1 ? 'binding' : 'bindings'} (`,
+                  colored: false,
+                },
                 { text: '@[...]', color: 'pink' },
                 { text: ')', colored: false },
               ],
@@ -749,7 +863,10 @@ const main = (s, config = {}, stringSelector = '') => {
             debugLog(
               PHASE_ITERATE,
               [
-                { text: `${iteratedCount} iterations (`, colored: false },
+                {
+                  text: `${iteratedCount} ${iteratedCount === 1 ? 'iteration' : 'iterations'} (`,
+                  colored: false,
+                },
                 { text: '<!-- each -->', color: 'commentGreen' },
                 { text: ')', colored: false },
               ],
@@ -762,7 +879,10 @@ const main = (s, config = {}, stringSelector = '') => {
             debugLog(
               PHASE_CONDITION,
               [
-                { text: `${evaluatedCount} conditionals (`, colored: false },
+                {
+                  text: `${evaluatedCount} ${evaluatedCount === 1 ? 'conditional' : 'conditionals'} (`,
+                  colored: false,
+                },
                 { text: '<!-- if -->', color: 'commentGreen' },
                 { text: ')', colored: false },
               ],
@@ -856,9 +976,11 @@ const main = (s, config = {}, stringSelector = '') => {
     componentConfig,
   );
 
-  // Export hyperspeed manifest globally for compiler extraction
+  // Export hyperspeed manifest globally for compiler extraction and optimizations
+  // Use pre-compiled manifest if available (has compiledBatchFn), otherwise runtime-generated
   if (typeof window !== 'undefined') {
-    window.__vibeManifest = hyperspeedManifestData;
+    const manifestToExport = hyperspeedTree || hyperspeedManifestData;
+    window.__vibeManifest = manifestToExport;
   }
 
   return $;

package/runtime/iterate.js

@@ -9,6 +9,9 @@ import { resolveThisPath } from './utils.js';
 // This is a preview of what Vibe Compiled (Phase 2) will do automatically
 import * as fastPath from './_vibe-compiled-iteration-batch.js';
 
+// Pre-compiled iteration optimization (production)
+import * as compiled from './pre-compiled-iterations.js';
+
 /**
  * Find a comment node with matching text content in the given nodes.
  */
@@ -257,7 +260,9 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     iterationNode.meta;
 
   // Already rendered - updates go through updateIteration
-  if (iterationNode.runtime.instances?.length > 0) return;
+  if (iterationNode.runtime.instances?.length > 0) {
+    return;
+  }
 
   // Check if this iteration has already been rendered
   // We use a marker on the startComment node itself (survives re-parsing)
@@ -288,6 +293,18 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
     return;
   }
 
+  // Compiled path: Check for pre-compiled batch function in manifest
+  if (compiled.canUseCompiled(iterationNode)) {
+    const compiledMeta = compiled.getCompiledMeta(iterationNode);
+    if (compiled.renderCompiled(iterationNode, array, state, compiledMeta, parent, endComment)) {
+      // Mark as rendered
+      startComment.__vibeRendered = true;
+      startComment.__vibeIterationRuntime = iterationNode.runtime;
+      return;
+    }
+    // Fall through to runtime path if compiled failed
+  }
+
   // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
   if (window.__VIBE_FAST_ITERATION__ && fastPath.canUseFastPath(template)) {
     fastPath.renderFast(iterationNode, array, state, parent, endComment);
@@ -341,12 +358,17 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   const oldArray = resolvePath(oldState, resolvedArrayPath) || [];
   const newArray = resolvePath(newState, resolvedArrayPath) || [];
 
+  // 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)) {
+      return;
+    }
+    // Fall through to runtime path if compiled failed
+  }
+
   // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
   // Use for bulk operations (large arrays or empty→full transitions)
-  const isEmptyToFull = oldArray.length === 0 && newArray.length > 0;
-  const isFullToEmpty = oldArray.length > 0 && newArray.length === 0;
-  const isLargeArray = newArray.length > 100 || oldArray.length > 100;
-
   if (
     window.__VIBE_FAST_ITERATION__ &&
     fastPath.canUseFastPath(template) &&

package/runtime/parse.js

@@ -5,6 +5,7 @@ import {
   ITERATION_REGEX,
   CONDITIONAL_REGEX,
   DOM_ELEMENT_PROPERTIES,
+  DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 
 const parseHTML = (children, rootKey = undefined) =>
@@ -31,7 +32,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
 
     // Skip non-reactive elements and dehydrated elements
     if (NON_REACTIVE_ELEMENTS.includes(nodeName)) continue;
-    if (element.hasAttribute?.('dehydrate')) {
+    if (element.hasAttribute?.(DEHYDRATE_CLASS_OR_ATTR) || element.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
       stats.skipped++;
       continue;
     }

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