@ape-egg/vibe 2.1.17 → 2.1.18

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.1.18] - 2026-06-22
+
+### Fixed
+
+- **Loop-scoped bindings in slot content passed to a component inside an iteration didn't resolve** (`runtime/iterate.js`) — content projected into a `<component src>` is captured raw (`_vibeSlotContent`) and inlined only when `processComponent` runs, by which point the row's iteration scope is gone. So a `@[...]` in that slot content rooted in a loop alias (`item`/`index`/outer) or `this` couldn't resolve later: value bindings rendered `undefined` and name-bindings (`<icon @[row.icon]>`) never set their attribute. The new `resolveSlotContentBindings` pre-resolves those bindings into registry-backed global refs — the same snapshot mechanism the component's own prop attributes use — before the scope is lost, so the inlined slot hydrates against the right values and the row's update path refreshes them in place (the wrapper inherits `_vibeIterPropExprs` / `data-vibe-iter-prop`, so `refreshIterationComponentProps` re-evaluates them on each item change). Globals-only bindings are left raw and resolve through the normal reactive path. Tests: `e2e-runtime/slot-name-binding-loop.html`, `tests/e2e/slot-name-binding.spec.js`.
+
 ## [2.1.17] - 2026-06-22
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/iterate.js

@@ -368,6 +368,50 @@ export const releaseOrphanedIterationProps = (nodes) => {
   }
 };
 
+// Slot content projected into a <component src> is captured raw (`_vibeSlotContent`)
+// and inlined only when processComponent runs — by which point the row's iteration
+// scope is gone. Any `@[...]` in that content rooted in a loop alias (item/index/
+// outer) or `this` therefore can't resolve later: value bindings render undefined
+// and name-bindings (`<icon @[row.icon]>`) never set their attribute. Pre-resolve
+// those into registry-backed global refs here — the same snapshot mechanism the
+// component's own prop attributes use — so the inlined slot hydrates against the
+// right values and the row's update path refreshes them in place (the wrapper
+// inherits `_vibeIterPropExprs`/`data-vibe-iter-prop`, so refreshIterationComponentProps
+// re-evaluates them on each item change). Globals-only bindings are left raw; they
+// resolve through the normal reactive path against the inlined component's scope.
+const resolveSlotContentBindings = (el, scopedState, aliases) => {
+  const html = el._vibeSlotContent;
+  if (!html || !html.includes('@[')) return;
+  const registry = ensureIterPropsRegistry();
+  const idByExpr = new Map();
+  const rewritten = html.replace(BINDING_REGEX, (whole, expr) => {
+    const usesLocalScope =
+      /\bthis\b/.test(expr) ||
+      (aliases && extractDependencies(expr).some((d) => aliases.has(d)));
+    if (!usesLocalScope) return whole;
+    let id = idByExpr.get(expr);
+    if (id === undefined) {
+      let value;
+      try {
+        value = evalInScope(expr, scopedState, el);
+      } catch {
+        return whole;
+      }
+      if (value === undefined) return whole;
+      id = `_p${__vibeIterPropCounter++}`;
+      registry[id] = value;
+      idByExpr.set(expr, id);
+      (el._vibeIterPropExprs = el._vibeIterPropExprs || []).push({ id, attrName: null, expr });
+      (el._vibeIterPropIds = el._vibeIterPropIds || []).push(id);
+    }
+    return `@[window.__vibeiterprops.${id}]`;
+  });
+  if (idByExpr.size) {
+    el._vibeSlotContent = rewritten;
+    el.setAttribute('data-vibe-iter-prop', '');
+  }
+};
+
 // 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
@@ -433,6 +477,7 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           // Leave binding raw — processComponent will handle it as a binding
         }
       }
+      resolveSlotContentBindings(el, scopedState, aliases);
     }
   }
 };