@ape-egg/vibe 1.8.0 → 1.9.1

package/runtime/parse.js

@@ -6,8 +6,69 @@ import {
   CONDITIONAL_REGEX,
   DOM_ELEMENT_PROPERTIES,
   DEHYDRATE_CLASS_OR_ATTR,
+  THIS_PROP_REGEX,
 } 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(THIS_PROP_REGEX, (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;
@@ -196,59 +257,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) {
@@ -259,8 +268,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 {
@@ -268,8 +277,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 }),
       };
     }
@@ -282,29 +291,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-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;