@ape-egg/vibe 4.0.0 → 4.0.1

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 4.0.0** — 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 4.0.1** — 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": "4.0.0",
+  "version": "4.0.1",
   "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

@@ -484,6 +484,16 @@ export const forceRemount = (el, debug = false) => {
   processSingle(el, debug);
 };
 
+// A src still carrying an @[…] binding is not a URL — it's source material
+// (an iteration or branch template the renderer hasn't consumed yet, or an
+// outlet whose scope owner hasn't resolved it). Fetching it verbatim is never
+// right: initializeBlock substitutes loop-scoped srcs, hydration remounts
+// reactive outlets, and this pass only mounts real URLs.
+const hasUnresolvedSrc = (el) => {
+  BINDING_REGEX.lastIndex = 0;
+  return BINDING_REGEX.test(el.getAttribute('src'));
+};
+
 // Check if an element is nested inside another unprocessed component[src]
 const isNestedInUnprocessedComponent = (el, rootElement) => {
   let parent = el.parentElement;
@@ -1050,11 +1060,12 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
     return;
   }
 
-  // Only process top-level components — skip those nested inside other
+  // Only process top-level components with a fetchable src — skip unresolved
+  // binding srcs (never fetchable), and skip those nested inside other
   // unprocessed component[src] elements (they're slot content that will
   // be revealed when the parent component finalizes).
   const topLevel = Array.from(allComponents).filter(
-    (el) => !isNestedInUnprocessedComponent(el, rootElement)
+    (el) => !hasUnresolvedSrc(el) && !isNestedInUnprocessedComponent(el, rootElement)
   );
 
   if (topLevel.length === 0) {

package/runtime/constants.js

@@ -1,6 +1,6 @@
 // The released version — check-release.js holds this in lockstep with
 // package.json, the READMEs and the CHANGELOG.
-export const VERSION = '4.0.0';
+export const VERSION = '4.0.1';
 
 // Debug logger name
 export const DEBUGGER_NAME = '[vibe-debug]:';

package/runtime/iterate.js

@@ -493,6 +493,24 @@ const resolveSlotContentBindings = (el, scopedState, aliases) => {
   }
 };
 
+// Substitute the loop-scoped `@[expr]` parts of a component's src with their
+// values from this block's scope. Only exprs whose dependencies include a loop
+// alias are resolved — everything else keeps its binding form (see the caller
+// in initializeBlock for why). An expr that evaluates to undefined stays raw
+// too, so the unresolved-src invariant keeps the wrapper unfetchable instead
+// of composing a garbage URL.
+const resolveScopedSrc = (el, scopedState, scopeKeys) => {
+  const src = el.getAttribute('src');
+  BINDING_REGEX.lastIndex = 0;
+  if (!BINDING_REGEX.test(src)) return;
+  const resolved = src.replace(BINDING_REGEX, (match, expr) =>
+    extractDependencies(expr).some((dep) => scopeKeys.has(dep))
+      ? (evalInScope(expr, scopedState, el) ?? match)
+      : match,
+  );
+  if (resolved !== src) el.setAttribute('src', resolved);
+};
+
 // For <component src> elements inside an iteration instance, evaluate any
 // `@[expr]` attribute bindings against the iteration's scoped state and route
 // every resolved value through the global iteration-prop registry. The prop
@@ -1016,10 +1034,22 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null, c
   // el.innerHTML (next microtask, when MutationObserver fires) the inactive branch templates
   // would be gone. cloneNode(true) does not copy expando JS properties, so we must (re)capture
   // _vibeSlotContent on every clone.
+  //
+  // Also resolve loop-scoped src bindings here, BEFORE parse() reads the
+  // attribute: the loop locals die with this render, so a src composed from
+  // them (`src="/x/@[item.slug].html"`) must become a literal URL now. Left as
+  // a binding it registers in this block's tree, and the remount transport
+  // (_vibeSrcBinding → data-vibe-src on the finalized wrapper) re-evaluates it
+  // against GLOBAL state on reparse — clobbering the mounted row with a fetch
+  // of a garbage URL. Exprs that read no loop alias stay raw: a reactive
+  // outlet (`src="@[page.src]"`) keeps its global binding, and an alias owned
+  // by a deeper loop resolves when that loop clones its own instances.
   const components = parseContainer.querySelectorAll('component[src], div.component[src]');
+  const scopeKeys = overlayKeysOf(scopedState);
   for (let i = 0; i < components.length; i++) {
     const el = components[i];
     if (el._vibeSlotContent === undefined) el._vibeSlotContent = el.innerHTML;
+    if (scopeKeys) resolveScopedSrc(el, scopedState, scopeKeys);
   }
 
   // Give this row its own component ids (compiled mode) before parse() reads the