@ape-egg/vibe 2.1.16 → 2.1.17

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [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.17",
   "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
@@ -795,7 +806,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 +894,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 +1492,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 };