@ape-egg/vibe 1.3.2 → 1.6.0

package/runtime/component.js

@@ -1,7 +1,17 @@
 import { debugLog } from './debug.js';
-import { PHASE_FETCH } from './constants.js';
+import { PHASE_FETCH, DEHYDRATE_CLASS_OR_ATTR } from './constants.js';
 import { evalInScope } from './utils.js';
-import { generateComponentId, executeComponentScript } from './component-state.js';
+
+// Deterministic component counter
+let componentCounter = 0;
+
+/**
+ * Generate unique component ID
+ * Uses deterministic counter: _c0, _c1, _c2, etc.
+ */
+export const generateComponentId = () => {
+  return `_c${componentCounter++}`;
+};
 
 // Helper to escape regex special characters
 const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -32,6 +42,19 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
 
   // Process just the first element - MutationObserver will trigger next call
   const el = componentElements[0];
+
+  // Skip if component is dehydrated (vibe-dehydrate attribute or class)
+  if (el.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || el.classList.contains(DEHYDRATE_CLASS_OR_ATTR)) {
+    // Skip this component and continue to next
+    if (componentElements.length > 1) {
+      // Process next component
+      processComponent(rootElement, onComplete, config);
+    } else {
+      if (onComplete) onComplete();
+    }
+    return;
+  }
+
   const src = el.getAttribute('src');
 
   // Capture children and props before fetching
@@ -54,39 +77,93 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
       const temp = document.createElement('div');
       temp.innerHTML = html;
 
-      // Process any <script type="component"> elements
-      const componentScripts = temp.querySelectorAll('script[type="component"]');
-      componentScripts.forEach((script) => {
-        const scriptContent = script.textContent?.trim() || '';
+      // Process any <script type="module"> elements
+      const moduleScripts = temp.querySelectorAll('script[type="module"]');
+      moduleScripts.forEach((script) => {
+        let scriptContent = script.textContent?.trim() || '';
         if (!scriptContent) return;
 
-        // Generate component ID
+        // Strip import statements (we provide component() manually)
+        // Remove lines like: import component from '...';
+        scriptContent = scriptContent.replace(/import\s+\w+\s+from\s+['"][^'"]+['"];?\s*/g, '');
+
+        // Generate component ID for this instance
         const componentId = generateComponentId();
 
-        // Tag script element
-        script.setAttribute('data-vibe-component-id', componentId);
+        // Provide a component() function that registers state for this component
+        const componentFn = (state) => {
+          // Register component state in both places:
+          // 1. __vibeComponents registry (for pre-boot components)
+          if (!window.__vibeComponents) {
+            window.__vibeComponents = {};
+          }
+          window.__vibeComponents[componentId] = state;
+
+          // 2. Directly in window.$ (the reactive proxy) for post-boot components
+          if (window.$) {
+            window.$[componentId] = state;
+          }
+
+          // Tag all siblings (everything after the script in this component)
+          let sibling = script.nextElementSibling;
+          while (sibling) {
+            // Stop if we hit another module script
+            if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'module') {
+              break;
+            }
+            sibling.setAttribute('data-vibe-component-id', componentId);
+            sibling = sibling.nextElementSibling;
+          }
+        };
+
+        // Execute script with component() function in scope
+        // Use Function constructor to provide 'component' as a parameter
+        try {
+          const executeFn = new Function('component', scriptContent);
+          executeFn(componentFn);
+        } catch (e) {
+          console.warn('[vibe] Failed to execute component script:', e);
+        }
+
+        // Rewrite this.property to componentId.property in siblings
+        // This allows the runtime to resolve component-scoped bindings
+        const rewriteThisBindings = (element) => {
+          const thisRegex = /@\[this\.(\w+)\]/g;
+
+          // Rewrite in text nodes
+          Array.from(element.childNodes).forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent.includes('@[this.')) {
+              node.textContent = node.textContent.replace(thisRegex, `@[${componentId}.$1]`);
+            }
+          });
+
+          // Rewrite in attributes
+          Array.from(element.attributes || []).forEach(attr => {
+            if (attr.value.includes('@[this.')) {
+              attr.value = attr.value.replace(thisRegex, `@[${componentId}.$1]`);
+            }
+          });
+
+          // Recurse into children
+          Array.from(element.children).forEach(child => {
+            rewriteThisBindings(child);
+          });
+        };
 
-        // Tag following siblings with this component ID
         let sibling = script.nextElementSibling;
         while (sibling) {
-          // Stop if we hit another component script
-          if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'component') {
+          if (sibling.tagName === 'SCRIPT' && sibling.getAttribute('type') === 'module') {
             break;
           }
-          sibling.setAttribute('data-vibe-component-id', componentId);
+          rewriteThisBindings(sibling);
           sibling = sibling.nextElementSibling;
         }
 
-        // Execute component script to get state
-        const componentState = executeComponentScript(scriptContent);
-
-        // Register in global state
-        if (window.$) {
-          window.$[componentId] = componentState;
-        }
+        // Remove script from temp (we executed it manually)
+        script.remove();
       });
 
-      // Get transformed HTML from temp container
+      // Get transformed HTML from temp container (scripts removed)
       let transformedHtml = temp.innerHTML;
 
       // Replace props

package/runtime/conditionals.js

@@ -58,8 +58,8 @@ export const renderConditional = (node, state, manifest, parentScope = {}) => {
   }
 
   // Remove original template nodes from DOM (between start and end comments)
-  // Only do this on first render (when activeBranch is undefined)
-  if (node.runtime.activeBranch === undefined) {
+  // Only do this on first render (when template hasn't been removed yet)
+  if (!node.runtime.templateRemoved) {
     let currentNode = startComment.nextSibling;
     while (currentNode && currentNode !== endComment) {
       const nextNode = currentNode.nextSibling;

package/runtime/constants.js

@@ -1,6 +1,7 @@
 // Debug logger name
 export const DEBUGGER_NAME = '[vibe-debug]:';
 export const FOUC_CLASS_OR_ATTR = 'vibe-fouc'; // Class or attribute used to prevent FOUC (default: [vibe])
+export const DEHYDRATE_CLASS_OR_ATTR = 'vibe-dehydrate'; // Class or attribute used to skip reactive processing
 
 // Lifecycle phase names for debug logging
 // ONE-OFF operations (run once during initialization)
@@ -17,7 +18,7 @@ export const PHASE_CONDITION = 'Evaluated'; // Renders <!-- if --> blocks (condi
 export const PHASE_FETCH = 'Fetched'; // Loads <component> content (component.js)
 export const PHASE_UPDATE = 'Proxy'; // State changes trigger re-hydration (index.js)
 export const PHASE_MUTATE = 'Mutation'; // DOM mutations detected by observer (index.js)
-export const PHASE_HYPERSPEED = 'Hyperspeed'; // Restores @[...] markers from pre-compiled manifest (hyperspeed.js)
+export const PHASE_HYPERSPEED = 'Hyperspeed'; // Restores @[...] markers from pre-compiled manifest (pre-compiled-manifest.js)
 
 // Elements that should not have reactive bindings
 // Note: COMPONENT is NOT in this list - inline component wrappers need to be parsed

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