@ape-egg/vibe 1.1.2 → 1.3.0

package/runtime/index.js

@@ -1,7 +1,7 @@
 import state from './state.js';
 import parse from './parse.js';
 import createManifest from './manifest.js';
-import hydrate, { setPreviousState } from './hydrate.js';
+import hydrate from './hydrate.js';
 import affected from './affected.js';
 import { deepMerge, hash } from './utils.js';
 import { renderAllIterations, setRenderAllConditionals } from './iterate.js';
@@ -17,28 +17,50 @@ import {
   PHASE_OBSERVE,
   PHASE_UPDATE,
   PHASE_MUTATE,
-  PHASE_COMPLETE,
+  PHASE_HYPERSPEED,
 } 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,
+  restoreMarkersFromManifest,
+} from './hyperspeed.js';
 
 // Wire up cross-module dependency after all modules are loaded
 setRenderAllConditionals(renderAllConditionals);
 
-// Check if node itself or any ancestor is non-reactive or dehydrated
-const isNonReactiveOrInside = (node) => {
+// Check if node should be processed by Vibe
+const shouldProcessNode = (node) => {
+  // Only process element nodes
+  if (node.nodeType !== 1) return false;
+
+  // Fast check first: skip nodes without Vibe syntax (cheapest check)
+  const html = node.outerHTML;
+  if (
+    !html.includes('@[') &&
+    !html.includes('<!-- each') &&
+    !html.includes('<!-- if') &&
+    !html.includes('<component')
+  ) {
+    return false;
+  }
+
+  // Node has Vibe syntax - now check if it's in a non-reactive context
   let current = node;
   while (current && current !== document.body) {
     if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
-      return true;
+      return false;
     }
     if (current.hasAttribute?.('dehydrate')) {
-      return true;
+      return false;
     }
     current = current.parentElement;
   }
-  return false;
+
+  return true;
 };
 
 // Navigate tree using dot notation (handles .children at each level)
@@ -90,10 +112,11 @@ const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) =>
 
   // 2. Hydrate (replace @[...] bindings)
   // Use empty object as "previous state" for new nodes so all bindings are affected
-  const affectedElements = affected(parsedNode, isNewNode ? {} : previousState, state);
+  const oldStateForAffected = isNewNode ? {} : previousState;
+  const affectedElements = affected(parsedNode, oldStateForAffected, state);
   if (affectedElements.length > 0) {
     hydratedCount = affectedElements.length;
-    hydrate(affectedElements, state, manifest);
+    hydrate(affectedElements, state, manifest, oldStateForAffected);
   }
 
   // 3. Conditionals (evaluate <!-- if -->)
@@ -114,34 +137,239 @@ const processCoreLoop = (node, parsedNode, state, manifest, isNewNode, debug) =>
   return { hydratedCount, iteratedCount, evaluatedCount };
 };
 
+/**
+ * Deep clone a tree node (to avoid mutating hyperspeed template)
+ */
+const deepCloneNode = (node) => {
+  if (!node || typeof node !== 'object') return node;
+
+  const cloned = { ...node };
+
+  // Clone children recursively
+  if (node.children && typeof node.children === 'object') {
+    cloned.children = {};
+    for (const key in node.children) {
+      cloned.children[key] = deepCloneNode(node.children[key]);
+    }
+  }
+
+  // Clone meta if it exists
+  if (node.meta && typeof node.meta === 'object') {
+    cloned.meta = { ...node.meta };
+    if (node.meta.template) {
+      cloned.meta.template = { ...node.meta.template };
+    }
+    if (node.meta.branches) {
+      cloned.meta.branches = { ...node.meta.branches };
+    }
+  }
+
+  // Clone runtime if it exists
+  if (node.runtime && typeof node.runtime === 'object') {
+    cloned.runtime = { ...node.runtime };
+    if (Array.isArray(node.runtime.instances)) {
+      cloned.runtime.instances = [...node.runtime.instances];
+    }
+  }
+
+  return cloned;
+};
+
+/**
+ * Merge hyperspeed manifest with runtime manifest
+ * Hyperspeed provides structure/metadata, runtime populates DOM references
+ */
+const mergeManifests = (hyperspeedTree, runtimeTree) => {
+  if (!hyperspeedTree) return runtimeTree;
+  if (!runtimeTree) return hyperspeedTree;
+
+  // Start with deep clone of hyperspeed (foundation)
+  const merged = deepCloneNode(hyperspeedTree);
+
+  // Helper to recursively augment hyperspeed with runtime data
+  const augmentWithRuntime = (mergedNode, runtimeNode) => {
+    if (!runtimeNode) return;
+
+    // Populate DOM references from runtime
+    if (runtimeNode.element) {
+      mergedNode.element = runtimeNode.element;
+    }
+
+    // Populate parsed data from runtime
+    if (runtimeNode.parsed) {
+      mergedNode.parsed = runtimeNode.parsed;
+    }
+
+    // For iterations: populate all meta and runtime from runtime
+    if (mergedNode.type === 'iteration' && runtimeNode.type === 'iteration') {
+      // Copy entire meta object from runtime (all properties needed)
+      mergedNode.meta = runtimeNode.meta;
+      // Copy runtime object (instances, etc.)
+      mergedNode.runtime = runtimeNode.runtime;
+    }
+
+    // For conditionals: populate all meta from runtime
+    if (mergedNode.type === 'conditional' && runtimeNode.type === 'conditional') {
+      // Copy entire meta object from runtime (all properties needed)
+      mergedNode.meta = runtimeNode.meta;
+    }
+
+    // Augment children recursively
+    if (runtimeNode.children) {
+      if (!mergedNode.children) mergedNode.children = {};
+
+      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
+        if (runtimeChild.type === 'iteration') {
+          mergedNode.children[key] = runtimeChild;
+          continue;
+        }
+
+        if (mergedNode.children[key]) {
+          // Child exists in both - augment it
+          augmentWithRuntime(mergedNode.children[key], runtimeNode.children[key]);
+        } else {
+          // Child only in runtime - add it (dynamic element discovered at runtime)
+          mergedNode.children[key] = runtimeNode.children[key];
+        }
+      }
+    }
+  };
+
+  // Augment hyperspeed foundation with runtime data
+  augmentWithRuntime(merged, runtimeTree);
+
+  // Preserve stats from runtime (hyperspeed won't have stats)
+  if (runtimeTree.stats) {
+    merged.stats = runtimeTree.stats;
+  }
+
+  return merged;
+};
+
 // Store previous state for comparison (needs to be accessible by core loop)
 let previousState = {};
 
-const main = (s, attrName = 'vibe', config = {}) => {
+const main = (s, config = {}, stringSelector = '') => {
   const debug = !!config?.debug;
   const verbose = !!config?.verbose;
 
+  // Detect if running in compiler's headless browser
+  // When true: skip cleanup to preserve [vibe] attribute in compiled HTML
+  const isCompiling = typeof window !== 'undefined' && window.__vibeCompiling === true;
+
   // Reset previous state for each new instance
   previousState = {};
 
-  // Find element(s) with the specified attribute
-  const elements = document.querySelectorAll(`[${attrName}]`);
+  // Use page-specific hyperspeed manifest (detected at module load)
+  const hyperspeedTree = hyperspeedManifest;
 
-  if (elements.length === 0) {
-    console.info(`[vibe] No element found with attribute "${attrName}". Falling back to body.`);
-  } else if (elements.length > 1) {
-    console.info(
-      `[vibe] Multiple elements (${elements.length}) found with attribute "${attrName}". Hydrating the first one.`,
-    );
+  let rootElement = document.body;
+
+  if (stringSelector) {
+    // Find element(s) with the specified attribute
+    const elements = document.querySelectorAll(`${stringSelector}`);
+    if (elements?.[0]) {
+      rootElement = elements[0];
+    }
   }
 
-  const rootElement = elements[0] || document.body;
+  debugLog(PHASE_ATTACH, `Vibe attached to`, true, 0, rootElement);
+
+  // Component tagging is now handled by component.js before boot
+  // Component state is merged into s by boot.js
+
+  // RESTORATION PHASE: If hyperspeed detected, restore @[...] markers in DOM
+  // 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);
+
+    // Find matching subtree by DOM path (not just tag name)
+    // Build path from document to rootElement
+    const buildDomPath = (element) => {
+      const path = [];
+      let current = element;
+
+      // Walk up to document itself (include html in the path)
+      while (current && current.parentNode && current !== document) {
+        const parent = current.parentNode;
+
+        // Skip document node itself
+        if (parent === document) {
+          const siblings = Array.from(document.childNodes);
+          const index = siblings.indexOf(current);
+          const tag = current.nodeName.toLowerCase();
+          path.unshift({ tag, index });
+          break;
+        }
+
+        const siblings = Array.from(parent.childNodes);
+        const index = siblings.indexOf(current);
+        const tag = current.nodeName.toLowerCase();
+
+        path.unshift({ tag, index });
+        current = parent;
+      }
+
+      return path;
+    };
+
+    // Walk manifest tree following DOM path
+    const findManifestNodeByPath = (manifest, path) => {
+      let current = manifest;
+
+      for (const { tag, index } of path) {
+        if (!current || !current.children) return null;
+
+        // Look for matching child by tag_index pattern
+        const key = `${tag}_${index}`;
+        if (current.children[key]) {
+          current = current.children[key];
+        } else {
+          // Fallback: search all children for matching tag at this level
+          let found = false;
+          for (const childKey in current.children) {
+            if (childKey.startsWith(tag + '_')) {
+              current = current.children[childKey];
+              found = true;
+              break;
+            }
+          }
+          if (!found) return null;
+        }
+      }
+
+      return current;
+    };
 
-  debugLog(PHASE_ATTACH, `Vibe attached to`, debug, 0, rootElement);
+    const domPath = buildDomPath(rootElement);
+    hyperspeedSubtree = findManifestNodeByPath(hyperspeedTree, domPath);
 
+    if (!hyperspeedSubtree) {
+      // Fallback to root if path matching fails
+      hyperspeedSubtree = hyperspeedTree;
+    }
+
+    restoreMarkersFromManifest(rootElement, hyperspeedSubtree, hyperspeedTree);
+  }
+
+  // Runtime parses DOM (which now has restored markers if hyperspeed was used)
   let parsedTree = parse(rootElement);
+
+  // Merge with hyperspeed if available (hyperspeed as foundation, runtime augments)
+  if (hyperspeedSubtree) {
+    parsedTree = mergeManifests(hyperspeedSubtree, parsedTree);
+  }
+
   let manifest = createManifest(parsedTree);
 
+  // Build hyperspeed manifest (before hydration, extract markers from parsed strings)
+  const hyperspeedManifestData = buildHyperspeedManifest(parsedTree);
+
   const manifestEntries = Object.entries(manifest);
   const totalCount = manifestEntries.length;
   const elementsOnly = manifestEntries.filter(
@@ -163,7 +391,11 @@ const main = (s, attrName = 'vibe', config = {}) => {
     );
   }
   debugLog(PHASE_PARSE, segments, debug);
-  debugLog(PHASE_MANIFEST, `DOM manifest created`, debug);
+  debugLog(
+    PHASE_MANIFEST,
+    hyperspeedTree ? 'DOM manifest merged with hyperspeed' : 'DOM manifest created',
+    debug,
+  );
 
   // Lifecycle hooks that users can subscribe to
   const hooks = {
@@ -171,19 +403,31 @@ const main = (s, attrName = 'vibe', config = {}) => {
     afterDomMutation: [],
   };
 
-  // Observer reference and callback - defined here so state handler can access processMutations
-  let observer = null;
-  let processMutations = null;
+  // Extract plain values from proxy (removes proxy wrappers)
+  const extractPlainValue = (obj) => {
+    if (obj === null || typeof obj !== 'object') return obj;
+    if (Array.isArray(obj)) return obj.map(extractPlainValue);
+    const plain = {};
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        plain[key] = extractPlainValue(obj[key]);
+      }
+    }
+    return plain;
+  };
+
+  // Observer callback will be defined below (already declared above before processComponent)
 
-  const $ = state(s, (newState) => {
-    const mergedState = deepMerge($, newState);
+  const $ = state(s, (newState, oldState) => {
+    // Extract current state (after mutation)
+    const currentState = extractPlainValue($);
+    const changedProp = Object.keys(newState)[0];
 
-    // Find what changed
-    const affectedElements = affected(parsedTree, previousState, mergedState);
+    // Find what changed (compare previousState vs currentState)
+    const affectedElements = affected(parsedTree, previousState, currentState);
 
     if (affectedElements.length > 0) {
-      const changedKeys = Object.keys(newState).join(', ');
-      debugLog(PHASE_UPDATE, `state changed (${changedKeys})`, debug);
+      debugLog(PHASE_UPDATE, `state changed (${changedProp})`, debug);
 
       // Capture pending mutations before disconnecting (takeRecords clears the queue)
       let pendingMutations = [];
@@ -194,11 +438,11 @@ const main = (s, attrName = 'vibe', config = {}) => {
 
       // Run core loop on the full tree (hydrate will use affected list)
       // isNewNode = false because this is a state update, not a DOM mutation
-      hydrate(affectedElements, mergedState, manifest);
+      hydrate(affectedElements, currentState, manifest, previousState);
 
       // After hydrate, check for conditional/iteration changes
-      const conditionalCount = renderAllConditionals(parsedTree, mergedState, manifest);
-      const iterationCount = renderAllIterations(parsedTree, mergedState, manifest);
+      const conditionalCount = renderAllConditionals(parsedTree, currentState, manifest);
+      const iterationCount = renderAllIterations(parsedTree, currentState, manifest);
 
       if (observer) {
         observer.observe(rootElement, {
@@ -215,22 +459,10 @@ const main = (s, attrName = 'vibe', config = {}) => {
       }
     }
 
-    // Deep clone that handles proxies (structuredClone fails on proxy objects)
-    const deepClone = (obj) => {
-      if (obj === null || typeof obj !== 'object') return obj;
-      if (Array.isArray(obj)) return obj.map(deepClone);
-      const cloned = {};
-      for (const key in obj) {
-        if (obj.hasOwnProperty(key)) {
-          cloned[key] = deepClone(obj[key]);
-        }
-      }
-      return cloned;
-    };
-
-    const prev = deepClone(previousState);
-    previousState = { ...$, ...newState };
-    hooks.afterUpdate.forEach((callback) => callback(deepClone({ ...$ }), prev));
+    // Store previous state for hooks (currentState is already plain, no need to clone)
+    const prev = previousState;
+    previousState = currentState;
+    hooks.afterUpdate.forEach((callback) => callback(currentState, prev));
   });
 
   // Add hook subscription method (non-enumerable so it won't be spread/cloned with state)
@@ -244,8 +476,9 @@ const main = (s, attrName = 'vibe', config = {}) => {
     enumerable: false,
   });
 
-  // Initial hydration
-  const affectedElements = affected(parsedTree, $, $);
+  // Initial hydration - pass plain values so iteration can do reference comparison
+  const initialState = extractPlainValue($);
+  const affectedElements = affected(parsedTree, initialState, initialState);
 
   debugLog(
     PHASE_HYDRATE,
@@ -257,14 +490,13 @@ const main = (s, attrName = 'vibe', config = {}) => {
     debug,
   );
 
-  hydrate(affectedElements, $, manifest);
-
+  // Hydrate with proxy $ so DOM bindings work
+  // Pass initialState as oldState for iterations (won't actually update, just initial render)
+  hydrate(affectedElements, $, manifest, initialState);
 
   // Render all iterations and conditionals after initial hydration
-  setPreviousState($);
-  previousState = { ...$ };
-
-  const iterationCount = renderAllIterations(parsedTree, $, manifest);
+  // Use initialState (plain values) for iteration rendering so reference comparison works
+  const iterationCount = renderAllIterations(parsedTree, initialState, manifest);
   if (iterationCount > 0)
     debugLog(
       PHASE_ITERATE,
@@ -288,6 +520,13 @@ const main = (s, attrName = 'vibe', config = {}) => {
       debug,
     );
 
+  // After all initial rendering, capture a clean snapshot for comparison
+  previousState = extractPlainValue($);
+
+  // Observer reference and processMutations
+  let observer = null;
+  let processMutations = null;
+
   // Define observer callback as named function so we can call it manually for pending mutations
   processMutations = (mutations) => {
     // Early exit if no mutations to process (common case)
@@ -353,8 +592,8 @@ const main = (s, attrName = 'vibe', config = {}) => {
       });
 
       addedNodesList.forEach((node) => {
-        // Skip if node itself or any ancestor is non-reactive
-        if (isNonReactiveOrInside(node)) {
+        // Skip nodes that aren't element nodes, are non-reactive, or lack Vibe syntax
+        if (!shouldProcessNode(node)) {
           return;
         }
 
@@ -374,8 +613,13 @@ const main = (s, attrName = 'vibe', config = {}) => {
           picked.element = target;
         }
 
-        // Parse the newly added node
-        const name = `${node.nodeName.toLowerCase()}_${hash()}`;
+        // Parse the newly added node (use monotonically increasing counter for deterministic key)
+        // Initialize counter if it doesn't exist
+        if (!picked._nextChildIndex) {
+          picked._nextChildIndex = Object.keys(picked.children).length;
+        }
+        const name = `${node.nodeName.toLowerCase()}_${picked._nextChildIndex}`;
+        picked._nextChildIndex++; // Always increment, never decrement
         const parsedNode = parse(node);
 
         // Accumulate skipped stats
@@ -539,12 +783,16 @@ const main = (s, attrName = 'vibe', config = {}) => {
         ...config,
         _forceSync: true,
         _observer: observer,
-        _processMutations: processMutations
+        _processMutations: processMutations,
       };
-      processComponent(rootElement, () => {
-        // When all components are done, run cleanup check
-        checkCleanup();
-      }, componentConfig);
+      processComponent(
+        rootElement,
+        () => {
+          // When all components are done, run cleanup check
+          checkCleanup();
+        },
+        componentConfig,
+      );
     }
   };
 
@@ -567,7 +815,7 @@ const main = (s, attrName = 'vibe', config = {}) => {
 
   // Check if cleanup should run
   const checkCleanup = () => {
-    if (cleanupExecuted) return;
+    if (cleanupExecuted || isCompiling) return;
 
     // Check for pending mutations first
     const pendingMutations = observer ? observer.takeRecords() : [];
@@ -580,7 +828,7 @@ const main = (s, attrName = 'vibe', config = {}) => {
 
     // Check if all processing is complete
     if (shouldCleanup(rootElement)) {
-      cleanup(rootElement, attrName, debug);
+      cleanup(rootElement, debug);
       cleanupExecuted = true;
     }
   };
@@ -596,7 +844,7 @@ const main = (s, attrName = 'vibe', config = {}) => {
     ...config,
     _forceSync: true,
     _observer: observer,
-    _processMutations: processMutations
+    _processMutations: processMutations,
   };
 
   processComponent(
@@ -608,6 +856,11 @@ const main = (s, attrName = 'vibe', config = {}) => {
     componentConfig,
   );
 
+  // Export hyperspeed manifest globally for compiler extraction
+  if (typeof window !== 'undefined') {
+    window.__vibeManifest = hyperspeedManifestData;
+  }
+
   return $;
 };
 

package/runtime/iterate.js

@@ -2,6 +2,7 @@ import parse from './parse.js';
 import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
+import { resolveThisPath } from './utils.js';
 
 // Fast path for iteration rendering (opt-in via window.__VIBE_FAST_ITERATION__)
 // See: _vibe-compiled-iteration-batch.js for implementation details
@@ -153,7 +154,7 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null) =
   }
 
   if (tree) {
-    const affectedElements = affected(tree, {}, scopedState);
+    const affectedElements = affected(tree, {}, scopedState, [], scopedState);
     hydrate(affectedElements, scopedState);
   }
 
@@ -278,7 +279,10 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
 
   const parent = startComment.parentNode;
 
-  const array = resolvePath(state, arrayPath);
+  // Handle this.property for component-scoped arrays
+  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
+
+  const array = resolvePath(state, resolvedArrayPath);
   if (!Array.isArray(array) || array.length === 0) {
     iterationNode.runtime.instances = [];
     return;
@@ -318,8 +322,11 @@ export const renderIteration = (iterationNode, state, manifest, parentScope = {}
   iterationNode.runtime.instances = instances;
 
   // Mark comment as rendered (survives re-parsing since comment nodes persist in DOM)
+  // Also store runtime data on the DOM node so it persists across re-parses
   // @ts-ignore - adding custom property to comment node
   startComment.__vibeRendered = true;
+  // @ts-ignore - adding custom property to comment node
+  startComment.__vibeIterationRuntime = iterationNode.runtime;
 };
 
 // Update an iteration block when array changes
@@ -327,8 +334,12 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   if (!iterationNode.runtime.instances || !iterationNode.runtime.templateRemoved) return;
 
   const { arrayPath, template, startComment, endComment } = iterationNode.meta;
-  const oldArray = resolvePath(oldState, arrayPath) || [];
-  const newArray = resolvePath(newState, arrayPath) || [];
+
+  // Handle this.property for component-scoped arrays
+  const resolvedArrayPath = resolveThisPath(arrayPath, startComment.parentElement);
+
+  const oldArray = resolvePath(oldState, resolvedArrayPath) || [];
+  const newArray = resolvePath(newState, resolvedArrayPath) || [];
 
   // Fast path: opt-in via window.__VIBE_FAST_ITERATION__ (preview of Vibe Compiled)
   // Use for bulk operations (large arrays or empty→full transitions)