@ape-egg/vibe 3.0.4 → 3.0.5

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 3.0.4** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
+**Version 3.0.5** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
 
 ## Security model & CSP
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "type": "module",
   "description": "Runtime-first reactivity for plain HTML — no build step, no virtual DOM, no new syntax to learn",
   "main": "index.js",

package/runtime/component.js

@@ -11,7 +11,7 @@ import {
   ITERATION_START_REGEX,
 } from './constants.js';
 import { evalInScope } from './utils.js';
-import { bumpIterPropGeneration } from './iteration-utils.js';
+import { bumpIterPropGeneration, parkFetchableSrc } from './iteration-utils.js';
 import { fetchComponentTemplate, isComponentCached } from './component-cache.js';
 import { notifyChanged } from './state.js';
 import {
@@ -857,6 +857,10 @@ const processSingle = (el, debug) => {
           }
 
           newWrapper.innerHTML = transformedHtml;
+          // Park binding-valued src while the wrapper still lives in the inert
+          // document — adoption into the live document is what starts image
+          // loads, so this is the last moment a raw `@[...]` src is harmless.
+          parkFetchableSrc(newWrapper);
           if (firstComponentId !== null) {
             newWrapper.setAttribute('data-vibe-component-id', firstComponentId);
           }

package/runtime/constants.js

@@ -1,3 +1,7 @@
+// The released version — check-release.js holds this in lockstep with
+// package.json, the READMEs and the CHANGELOG.
+export const VERSION = '3.0.5';
+
 // 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])
@@ -26,6 +30,16 @@ export const PHASE_HYPERSPEED = 'Hyperspeed'; // Restores @[...] markers from pr
 // Fetched components (<component src="">) are handled separately by processComponent()
 export const NON_REACTIVE_ELEMENTS = ['SCRIPT', 'HEAD', 'PRE'];
 
+// Elements whose src-family attributes the browser fetches the moment they are
+// set — a raw `src="@[binding]"` reaching one of these fires a network request
+// for the literal binding text before hydration can stamp the real value.
+// Bindings on them are parked on data-vibe-<attr> (the established transport)
+// until hydration writes the evaluated URL. <component src> is NOT here — its
+// src is consumed by processComponent, never by the browser.
+export const FETCH_SRC_ATTRS = ['src', 'srcset', 'poster'];
+export const FETCH_SRC_SELECTOR = 'img, source, iframe, video, audio, embed, track';
+export const FETCH_SRC_ELEMENTS = ['IMG', 'SOURCE', 'IFRAME', 'VIDEO', 'AUDIO', 'EMBED', 'TRACK'];
+
 // Attributes where the string value is meaningful (should NOT be removed when falsy)
 // All other attributes are treated as boolean-like (removed when falsy, present when truthy)
 export const VALUE_ATTRS = [

package/runtime/hydrate.js

@@ -1,7 +1,7 @@
 import { updateIteration } from './iterate.js';
 import { updateConditional, managedNodes } from './conditionals.js';
 import { liveComponentWrapper, remountComponent, forceRemount } from './component.js';
-import { isComponentWrapper, parkRootFor, parkBinding } from './staging.js';
+import { isComponentWrapper, isRemountTrigger, parkRootFor, parkBinding } from './staging.js';
 import { VALUE_ATTRS, DOM_PROPERTIES, BINDING_REGEX, PURE_BINDING_REGEX } from './constants.js';
 import {
   evalInScope,
@@ -177,11 +177,7 @@ export default (affected, state, manifest = {}, oldState = {}) => {
   const remountTriggers = [];
   const ordinary = [];
   for (const aff of affected) {
-    const isRemountTrigger =
-      aff.type === 'attribute' &&
-      (aff.attrName === 'src' || aff.attrName === 'key') &&
-      isComponentWrapper(aff.element);
-    (isRemountTrigger ? remountTriggers : ordinary).push(aff);
+    (isRemountTrigger(aff) ? remountTriggers : ordinary).push(aff);
   }
 
   const processEntry = (aff) => {

package/runtime/index.js

@@ -9,6 +9,7 @@ import { renderAllIterations, setRenderAllConditionals, releaseOrphanedIteration
 import { renderAllConditionals, branchNodeRegistry, managedNodes , settleConditionals} from './conditionals.js';
 import { installScopeResolver } from './loop-scope.js';
 import {
+  VERSION,
   NON_REACTIVE_ELEMENTS,
   PHASE_ATTACH,
   PHASE_PARSE,
@@ -40,6 +41,10 @@ import {
 // Wire up cross-module dependency after all modules are loaded
 setRenderAllConditionals(renderAllConditionals);
 
+// Stamped at module load, not boot — a console can read __vibe.version even
+// on a page whose boot died, which is exactly when a bug report needs it.
+((globalThis.__vibe ??= {}).version = VERSION);
+
 // Check if node should be processed by Vibe
 const shouldProcessNode = (node) => {
   // Only process element nodes
@@ -302,6 +307,18 @@ const mergeManifests = (hyperspeedTree, runtimeTree) => {
       mergedNode.runtime = runtimeNode.runtime;
     }
 
+    // The runtime parse of the live DOM is the ground truth for what exists.
+    // A manifest child with no runtime counterpart sits at an index the DOM
+    // no longer agrees with (a content script prepending into <body> shifts
+    // every sibling) — it can never bind an element, and hydrating its
+    // bindings would dereference null. Drop it; the runtime-discovered
+    // sibling added below carries the real element.
+    if (mergedNode.children) {
+      for (const key in mergedNode.children) {
+        if (!runtimeNode.children?.[key]) delete mergedNode.children[key];
+      }
+    }
+
     // Augment children recursively
     if (runtimeNode.children) {
       if (!mergedNode.children) mergedNode.children = {};

package/runtime/iteration-utils.js

@@ -1,5 +1,32 @@
 // Utility functions for array iteration
-import { ITERATION_REGEX, ITERATION_START_REGEX, CONDITIONAL_START_REGEX } from './constants.js';
+import {
+  ITERATION_REGEX,
+  ITERATION_START_REGEX,
+  CONDITIONAL_START_REGEX,
+  BINDING_REGEX,
+  FETCH_SRC_ATTRS,
+  FETCH_SRC_SELECTOR,
+} from './constants.js';
+
+// Move binding-valued src/srcset/poster on browser-fetchable elements to
+// data-vibe-<attr> so the literal `@[...]` text never becomes a fetchable URL.
+// Called on subtrees that are still in the inert document (component finalize)
+// — parse.js recaptures the parked binding under the real attribute name and
+// hydration writes the evaluated URL, which is the first value the browser
+// ever sees.
+export const parkFetchableSrc = (root) => {
+  const elements = root.querySelectorAll(FETCH_SRC_SELECTOR);
+  for (let i = 0; i < elements.length; i++) {
+    for (const attr of FETCH_SRC_ATTRS) {
+      const value = elements[i].getAttribute(attr);
+      BINDING_REGEX.lastIndex = 0;
+      if (value && BINDING_REGEX.test(value)) {
+        elements[i].setAttribute(`data-vibe-${attr}`, value);
+        elements[i].removeAttribute(attr);
+      }
+    }
+  }
+};
 
 // Parse an `each` directive body (the text inside `<!-- ... -->`, markers
 // stripped) into its parts, or null when it isn't a valid each. The index alias

package/runtime/parse.js

@@ -13,6 +13,8 @@ import {
   DEHYDRATE_CLASS_OR_ATTR,
   THIS_PROP_REGEX,
   STATE_THIS_PROP_REGEX,
+  FETCH_SRC_ATTRS,
+  FETCH_SRC_ELEMENTS,
 } from './constants.js';
 import { rewriteHandlerAliases } from './loop-scope.js';
 
@@ -75,6 +77,8 @@ const captureAttributeBindings = (element, aliasSet) => {
 
   const attributes = {};
   const nameBindings = [];
+  const isFetchableElement = FETCH_SRC_ELEMENTS.includes(nodeName);
+  let srcToPark = null;
 
   for (let j = 0; j < element.attributes.length; j++) {
     const attr = element.attributes[j];
@@ -88,6 +92,31 @@ const captureAttributeBindings = (element, aliasSet) => {
       continue;
     }
 
+    // A src-family binding parked on data-vibe-<attr> (by an earlier parse of
+    // this template, or by component finalize neutralizing fetched HTML):
+    // bind it to the real attribute — hydration writes the evaluated URL there.
+    if (isFetchableElement && attr.name.startsWith('data-vibe-')) {
+      const realName = attr.name.slice(10);
+      if (FETCH_SRC_ATTRS.includes(realName)) {
+        attributes[realName] = attr.value;
+        continue;
+      }
+    }
+
+    // A raw binding-valued src reaching a fetchable element fires a request
+    // for the literal `@[...]` text (innerHTML parse and cloneNode both
+    // trigger it). Park it on data-vibe-<attr> — after the loop, since
+    // removeAttribute would shift the live NamedNodeMap being iterated —
+    // so the template and every clone of it are inert until hydration.
+    if (isFetchableElement && FETCH_SRC_ATTRS.includes(attr.name)) {
+      BINDING_REGEX.lastIndex = 0;
+      if (BINDING_REGEX.test(attr.value)) {
+        attributes[attr.name] = attr.value;
+        (srcToPark ??= []).push([attr.name, attr.value]);
+        continue;
+      }
+    }
+
     // Attribute name itself contains a binding (e.g. <icon @[section.icon]>).
     if (BINDING_REGEX.test(attr.name)) {
       nameBindings.push(attr.name);
@@ -128,6 +157,13 @@ const captureAttributeBindings = (element, aliasSet) => {
     }
   }
 
+  if (srcToPark) {
+    for (const [name, value] of srcToPark) {
+      element.setAttribute(`data-vibe-${name}`, value);
+      element.removeAttribute(name);
+    }
+  }
+
   return {
     attributes: Object.keys(attributes).length > 0 ? attributes : null,
     nameBindings: nameBindings.length > 0 ? nameBindings : null,