@ape-egg/vibe 2.1.16 → 2.1.18

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- **Compiled inlined components inside an iteration shared one local-state bucket across all rows** (`runtime/iterate.js`) — in compiled mode each inlined component carries a fixed `data-vibe-component-id` (`_cN`) with its `@[this.x]` bindings and `$.this.x` handlers stamped to that id. An iteration clones its template once per row, so every row reused the same baked id — and therefore the same `component({...})` state bucket — and opening one row's ability drawer opened them all (two brawler slots both resolving to `_c2.open`). `initializeBlock` now isolates components per row: `isolateInlinedComponentIds` remaps every baked `_cN` in the clone to a fresh `generateComponentId()` and rewrites the `_cN.prop` references in attributes and text (boundary-anchored so `_c2` never matches inside `_c20`), then runs the row's inlined `vibe-module` setup scripts so each registers isolated state under its fresh id — mirroring the conditional-branch path. Batch render is also disabled for templates carrying an inlined component script (it emits one shared HTML string per row, which would duplicate the baked id), routing them through the clone-and-isolate path instead. Runtime mode is unaffected: there are no baked ids there — components are still `<component src>`.
+
 ## [2.1.16] - 2026-06-22
 
 ### Fixed

package/package.json

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

package/runtime/iterate.js

@@ -16,6 +16,8 @@ import {
 // Pre-compiled iteration optimization (production)
 import * as compiled from './pre-compiled-iterations.js';
 
+import { generateComponentId, executeCompiledComponentScriptsIn } from './component.js';
+
 // Runtime batch-render helpers for full-replacement of simple templates.
 // Build an HTML string via template-literal compilation, then parse once —
 // avoids per-item clone/parse/hydrate in the hot path.
@@ -56,6 +58,14 @@ const hasNestedStructures = (tree) => {
 const hasComponentSrc = (templateEl) =>
   !!templateEl.querySelector?.('component[src], div.component[src]');
 
+// A compiled inlined component with its own setup script carries component-local
+// state (`component({...})` → `$._cN`). Batch render emits one shared HTML string
+// per row, which would duplicate the baked `_cN` id across rows and collapse
+// their state into one bucket. Route these through the clone path, where
+// initializeBlock isolates each row's component ids.
+const hasInlinedComponentScript = (templateEl) =>
+  !!templateEl.querySelector?.('script[type="vibe-module"]');
+
 // `__vibeForceClonePath` is a debug/test escape hatch — set it on globalThis to
 // route every iteration through the clone+hydrate path, even templates that
 // would otherwise qualify for batch. Used by the batch-vs-clone-equivalence
@@ -65,7 +75,8 @@ const canUseBatchRender = (template) =>
   !globalThis.__vibeForceClonePath &&
   !hasNestedStructures(template) &&
   template.element.children.length <= 1 &&
-  !hasComponentSrc(template.element);
+  !hasComponentSrc(template.element) &&
+  !hasInlinedComponentScript(template.element);
 
 // Patterns used by compileBatchFn to recognize bindings in attribute-name and
 // attribute-value positions. The inner alternation mirrors BINDING_INNER from
@@ -357,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
@@ -422,6 +477,7 @@ export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
           // Leave binding raw — processComponent will handle it as a binding
         }
       }
+      resolveSlotContentBindings(el, scopedState, aliases);
     }
   }
 };
@@ -795,7 +851,57 @@ const cloneTreeWithElements = (originalTree, clonedRoot) => {
  *   that runs while clones are still detached.
  * @returns {Object} { element, tree, clonedNodes }
  */
-export const initializeBlock = (templateNodes, scopedState, cachedTree = null, componentId = null, aliasSet = undefined) => {
+// Compiled mode bakes a fixed `data-vibe-component-id` into each inlined
+// component and stamps its `@[this.x]` bindings / `$.this.x` handlers to that
+// id. An iteration clones its template once per row, so every row would
+// otherwise share that one id — and thus one local-state bucket. (Two brawler
+// slots both resolving to `_c2.open` is why opening one ability drawer opened
+// them all.) Per row, remap every baked id in the clone to a fresh one and
+// rewrite the references to it; the caller then runs the row's component
+// scripts so each registers isolated state under its fresh id. Runtime mode has
+// no baked ids here (components are still `<component src>`), so this no-ops.
+const COMPONENT_ID = /^_c\d+$/;
+
+const isolateInlinedComponentIds = (container) => {
+  const remap = new Map();
+  for (const el of container.querySelectorAll('[data-vibe-component-id]')) {
+    const oldId = el.getAttribute('data-vibe-component-id');
+    if (!COMPONENT_ID.test(oldId)) continue;
+    if (!remap.has(oldId)) remap.set(oldId, generateComponentId());
+    el.setAttribute('data-vibe-component-id', remap.get(oldId));
+  }
+  if (!remap.size) return false;
+
+  // `_c2` must not match inside `_c20` or a longer identifier, so anchor on a
+  // non-word/`$` boundary before and a non-digit/word after. Bindings always
+  // read the id as `_cN.prop`, so the trailing `.` satisfies the lookahead.
+  const refs = [...remap].map(([oldId, newId]) => [
+    new RegExp(`(?<![\\w$])${oldId}(?![\\w\\d])`, 'g'),
+    newId,
+  ]);
+  const rewrite = (str) => {
+    let out = str;
+    for (const [re, newId] of refs) out = out.replace(re, newId);
+    return out;
+  };
+  const walk = (node) => {
+    if (node.nodeType === 1) {
+      for (const attr of node.attributes) {
+        if (attr.value.includes('_c')) {
+          const next = rewrite(attr.value);
+          if (next !== attr.value) attr.value = next;
+        }
+      }
+      for (const child of node.childNodes) walk(child);
+    } else if (node.nodeType === 3 && node.textContent.includes('_c')) {
+      node.textContent = rewrite(node.textContent);
+    }
+  };
+  for (const node of container.childNodes) walk(node);
+  return true;
+};
+
+export const initializeBlock = (templateNodes, scopedState, cachedTree = null, componentId = null, aliasSet = undefined, isolateComponents = false) => {
   let tree;
   let clonedNodes = [];
   let firstElement = null;
@@ -833,6 +939,13 @@ export const initializeBlock = (templateNodes, scopedState, cachedTree = null, c
     if (el._vibeSlotContent === undefined) el._vibeSlotContent = el.innerHTML;
   }
 
+  // Give this row its own component ids (compiled mode) before parse() reads the
+  // bindings, then run the row's inlined setup scripts so each registers its own
+  // local state under the fresh id — mirroring the conditional-branch path.
+  if (isolateComponents && isolateInlinedComponentIds(parseContainer)) {
+    executeCompiledComponentScriptsIn([...parseContainer.childNodes]);
+  }
+
   if (useCachedTree) {
     // Fast path: map cached tree structure onto cloned DOM (no regex, no DOM walking)
     tree = cloneTreeWithElements(cachedTree, parseContainer);
@@ -1424,7 +1537,7 @@ const buildInstance = (iterationNode, item, index, state, parentScope, liveItem)
   const localVars = { [itemAlias]: liveItem, [indexAlias]: index };
   const scopedState = createScopedState(state, localVars, parentScope);
   const componentId = findComponentIdForElement(startComment.parentElement);
-  const built = initializeBlock([...template.element.childNodes], scopedState, template, componentId, new Set(iterationNode.meta.scopeAliases));
+  const built = initializeBlock([...template.element.childNodes], scopedState, template, componentId, new Set(iterationNode.meta.scopeAliases), true);
   const scopeAliases = new Set([itemAlias, indexAlias, ...(iterationNode.meta.scopeAliases || [])]);
   resolveIterationComponentProps(built.clonedNodes, scopedState, scopeAliases);
   return { ...built, scopedState, localVars, liveItem };