@ape-egg/vibe 1.7.2 → 1.9.0

package/runtime/manifest.js

@@ -1,5 +1,6 @@
 const recursive = (tree, results, tagChain) => {
-  results[tagChain.join('.')] = tree.element;
+  const path = tagChain.join('.');
+  results[path] = tree.element;
 
   if (tree.children && Object.keys(tree.children).length > 0) {
     Object.keys(tree.children).forEach((tag) => {

package/runtime/parse.js

@@ -8,6 +8,66 @@ import {
   DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 
+// Walks up the DOM for the nearest component wrapper tagged by component.js.
+// Used to rewrite `this.property` in event handlers to the component's state path.
+const findComponentIdForElement = (element) => {
+  if (!element?.closest) return null;
+  const wrapper = element.closest('[data-vibe-component-id]');
+  return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
+};
+
+// Single source of truth for reading attribute/name bindings off an element.
+// Called from both the root handler and recursive() so they can't drift. Any
+// element classified as a fetched component (`<component src>` or
+// `<div class="component" src>`) returns nulls — its attributes are props
+// owned by processComponent and must stay raw; hydrating them would coerce
+// objects to "[object Object]" or strip boolean-like attrs to empty.
+const captureAttributeBindings = (element) => {
+  const nodeName = element.nodeName;
+  const isFetchedComponent =
+    (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
+    element.hasAttribute?.('src');
+
+  if (isFetchedComponent || !element.attributes || element.attributes.length === 0) {
+    return { attributes: null, nameBindings: null };
+  }
+
+  const attributes = {};
+  const nameBindings = [];
+
+  for (let j = 0; j < element.attributes.length; j++) {
+    const attr = element.attributes[j];
+    BINDING_REGEX.lastIndex = 0;
+
+    // Attribute name itself contains a binding (e.g. <icon @[section.icon]>).
+    if (BINDING_REGEX.test(attr.name)) {
+      nameBindings.push(attr.name);
+      continue;
+    }
+
+    // Rewrite `this.property` inside event handlers to the component's state path.
+    if (attr.name.startsWith('on') && attr.value.includes('this.')) {
+      const componentId = findComponentIdForElement(element);
+      if (componentId) {
+        const rewritten = attr.value.replace(/\bthis\.(\w+)/g, (match, prop) => {
+          return DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`;
+        });
+        element.setAttribute(attr.name, rewritten);
+      }
+    }
+
+    BINDING_REGEX.lastIndex = 0;
+    if (BINDING_REGEX.test(attr.value)) {
+      attributes[attr.name] = attr.value;
+    }
+  }
+
+  return {
+    attributes: Object.keys(attributes).length > 0 ? attributes : null,
+    nameBindings: nameBindings.length > 0 ? nameBindings : null,
+  };
+};
+
 const parseHTML = (children, rootKey = undefined) =>
   children.reduce((s, element, i) => {
     const { nodeName, textContent } = element;
@@ -140,6 +200,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
           // Store conditional metadata (use index for deterministic keys)
           const conditionalKey = `conditional_${i}`;
           result[conditionalKey] = {
+            _key: conditionalKey,
             type: 'conditional',
             meta: {
               expression,
@@ -195,59 +256,7 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
     const elementForBindings = isTextNode ? element.parentElement : element;
     const textNodeRef = isTextNode ? element : null; // Store reference to actual text node
 
-    // Check for attribute bindings
-    const attributes = {};
-    const nameBindings = [];
-
-    // Skip hydrating attributes on fetched components - they need to be passed raw
-    const isFetchedComponent =
-      (nodeName === 'COMPONENT' || (nodeName === 'DIV' && element.classList?.contains('component'))) &&
-      element.hasAttribute('src');
-
-    if (element.attributes && !isFetchedComponent) {
-      for (let j = 0; j < element.attributes.length; j++) {
-        const attr = element.attributes[j];
-        // Reset lastIndex before test - BINDING_REGEX has 'g' flag which persists state
-        BINDING_REGEX.lastIndex = 0;
-
-        // Check if attribute name contains binding (e.g., @[section.icon])
-        if (BINDING_REGEX.test(attr.name)) {
-          nameBindings.push(attr.name);
-          continue; // Don't process as regular attribute
-        }
-
-        // Rewrite event handlers with this. to use component state
-        if (attr.name.startsWith('on') && attr.value.includes('this.')) {
-          const componentId = findComponentIdForElement(element);
-          if (componentId) {
-            // Rewrite this.property to $['componentId'].property, but skip DOM properties
-            const rewritten = attr.value.replace(/\bthis\.(\w+)/g, (match, prop) => {
-              return DOM_ELEMENT_PROPERTIES.has(prop) ? match : `$['${componentId}'].${prop}`;
-            });
-            element.setAttribute(attr.name, rewritten);
-          }
-        }
-
-        // Check if attribute value contains binding
-        BINDING_REGEX.lastIndex = 0;
-        if (BINDING_REGEX.test(attr.value)) {
-          attributes[attr.name] = attr.value;
-        }
-      }
-    }
-
-    // Helper to find component ID for an element
-    // Looks for nearest ancestor with data-vibe-component-id
-    function findComponentIdForElement(element) {
-      if (!element) return null;
-
-      // Find nearest component wrapper (tagged by component.js)
-      const wrapper = element.closest('[data-vibe-component-id]');
-      return wrapper ? wrapper.getAttribute('data-vibe-component-id') : null;
-    }
-    const hasAttributeBindings = Object.keys(attributes).length > 0;
-    const hasNameBindings = nameBindings.length > 0;
-
+    const { attributes, nameBindings } = captureAttributeBindings(element);
     const hasChildren = childNodes.length;
 
     if (hasChildren) {
@@ -258,8 +267,8 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         parsed,
         element: elementForBindings,
         children: recursive(iteratableChildren, undefined, new Set(), stats),
-        ...(hasAttributeBindings && { attributes }),
-        ...(hasNameBindings && { nameBindings }),
+        ...(attributes && { attributes }),
+        ...(nameBindings && { nameBindings }),
         ...(textNodeRef && { textNode: textNodeRef }),
       };
     } else {
@@ -267,8 +276,8 @@ const recursive = (children, rootKey = undefined, skipIndices = new Set(), stats
         parsed: innerHTML || textContent,
         element: elementForBindings,
         children: {},
-        ...(hasAttributeBindings && { attributes }),
-        ...(hasNameBindings && { nameBindings }),
+        ...(attributes && { attributes }),
+        ...(nameBindings && { nameBindings }),
         ...(textNodeRef && { textNode: textNodeRef }),
       };
     }
@@ -281,29 +290,7 @@ export default (root, rootKey = undefined) => {
   const { childNodes } = root;
   const stats = { skipped: 0 };
 
-  // Check for attribute bindings on the root element itself (only if element has attributes)
-  let attributes = null;
-  let nameBindings = null;
-  if (root.attributes && root.attributes.length > 0) {
-    for (let j = 0; j < root.attributes.length; j++) {
-      const attr = root.attributes[j];
-      BINDING_REGEX.lastIndex = 0;
-
-      // Check if attribute name contains binding
-      if (BINDING_REGEX.test(attr.name)) {
-        if (!nameBindings) nameBindings = [];
-        nameBindings.push(attr.name);
-        continue;
-      }
-
-      // Check if attribute value contains binding
-      BINDING_REGEX.lastIndex = 0;
-      if (BINDING_REGEX.test(attr.value)) {
-        if (!attributes) attributes = {};
-        attributes[attr.name] = attr.value;
-      }
-    }
-  }
+  const { attributes, nameBindings } = captureAttributeBindings(root);
 
   return {
     // html: root.outerHTML,

package/runtime/pre-compiled-iterations.js

@@ -60,23 +60,46 @@ export const getCompiledMeta = (iterationNode) => {
 };
 
 /**
- * Render iteration using pre-compiled batch function from manifest
+ * Build a scoped wrapper that puts state keys in scope for the batch function.
+ * The compiler generates (arr, $) => { ... } with bare variable names like `selectedCategory`,
+ * but those aren't parameters of the arrow function. We create a wrapper that defines
+ * state keys as parameters, then evaluates the batch function in that scope.
  */
-export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
-  // Create function from string if not cached
+const buildScopedFn = (batchFnStr, stateKeys) => {
+  return new Function(
+    ...stateKeys, 'arr',
+    `const $ = {${stateKeys.map(k => k + ':' + k).join(',')}};
+     const __batchFn = ${batchFnStr};
+     return __batchFn(arr, $);`
+  );
+};
+
+/**
+ * Call a compiled batch function with state keys spread into scope
+ */
+const callCompiled = (iterationNode, array, state, compiledMeta) => {
   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)();
+      const stateKeys = Object.keys(state);
+      iterationNode.runtime.compiledFn = buildScopedFn(compiledMeta.batchFn, stateKeys);
+      iterationNode.runtime.compiledStateKeys = stateKeys;
     } catch (e) {
       console.error('[compiled-iteration] Failed to create compiled function:', e);
-      return false; // Signal failure
+      return null;
     }
   }
 
-  // Build HTML using compiled function
-  const html = iterationNode.runtime.compiledFn(array, state);
+  const keys = iterationNode.runtime.compiledStateKeys;
+  const values = keys.map(k => state[k]);
+  return iterationNode.runtime.compiledFn(...values, array);
+};
+
+/**
+ * Render iteration using pre-compiled batch function from manifest
+ */
+export const renderCompiled = (iterationNode, array, state, compiledMeta, parent, endComment) => {
+  const html = callCompiled(iterationNode, array, state, compiledMeta);
+  if (html === null) return false;
 
   // Parse and insert
   if (parseTemplate) {
@@ -118,18 +141,8 @@ export const updateCompiled = (iterationNode, newArray, state, compiledMeta, sta
     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);
+  const html = callCompiled(iterationNode, newArray, state, compiledMeta);
+  if (html === null) return false;
 
   // Parse and insert
   if (parseTemplate) {

package/runtime/pre-compiled-manifest.js

@@ -134,6 +134,14 @@ const detectHyperspeed = async () => {
   if (hyperspeedDetectionAttempted) return hyperspeedData;
   hyperspeedDetectionAttempted = true;
 
+  // Runtime-mode pages still have [vibe-fouc] / .vibe-fouc on their vibe root
+  // at this point — the compiler strips it at build time, and the runtime only
+  // clears it after hydration (PHASE_READY). Vibe can latch to any element, so
+  // search the whole document. If any fouc marker is still here, we're in
+  // runtime mode and no hyperspeed manifest will exist — skip the network
+  // fetches and avoid the 404 devtools noise.
+  const skipNetwork = !!document.querySelector("[vibe-fouc], .vibe-fouc");
+
   try {
     let pagePath = window.location.pathname;
 
@@ -185,21 +193,38 @@ const detectHyperspeed = async () => {
       );
     }
 
-    // Try each possible path
-    for (const manifestPath of possiblePaths) {
-      try {
-        const module = await import(manifestPath);
-        hyperspeedData = {
-          manifest: module.default,
-          path: manifestPath,
-        };
-        return hyperspeedData;
-      } catch (e) {
-        // Try next path
-        continue;
+    if (!skipNetwork) {
+      // Fully-runtime dynamic import. Hidden behind `new Function` so any
+      // bundler's static-analysis can't read into it — there's nothing we
+      // could or should tell it about these manifest paths, which are decided
+      // at runtime by searching a list.
+      const dynamicImport = new Function('p', 'return import(p)');
+      // Try each possible path
+      for (const manifestPath of possiblePaths) {
+        try {
+          const module = await dynamicImport(manifestPath);
+          hyperspeedData = {
+            manifest: module.default,
+            path: manifestPath,
+          };
+          return hyperspeedData;
+        } catch (e) {
+          // Try next path
+          continue;
+        }
       }
     }
 
+    // When skipping network, yield a macrotask so module-graph timing matches
+    // the old behavior where `await import()` on a missing manifest resolved
+    // via a network 404 (macrotask), not a microtask. Without this yield, the
+    // vibe module-graph resolves too fast and the post-boot microtask fires
+    // before sibling `<script type="module">` tags (e.g. component scripts)
+    // have had a chance to register their state.
+    if (skipNetwork) {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+
     // No manifest found
     return null;
   } catch {
@@ -468,7 +493,7 @@ export const restoreMarkersFromManifest = (
             if (text.startsWith("if")) {
               if (!startComment) {
                 const expression = childTree.meta?.expression;
-                const expectedText = expression ? 'if ' + expression : null;
+                const expectedText = expression ? "if " + expression : null;
                 if (expectedText && text === expectedText) {
                   startComment = comment;
                   conditionalDepth = 1;