@ape-egg/vibe 1.9.6 → 1.9.7

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## [1.9.7] - 2026-06-01
+
+### Fixed
+
+- **Conditional inside an iteration row didn't react to global-state changes** (`runtime/affected.js`, `runtime/hydrate.js`) — a `<!-- if … -->` (or `<!-- if … --><!-- else --><!-- /if -->`) living inside an `<!-- each -->` row, whose expression depended on a global rather than the loop item, stayed frozen on the branch active at mount time when the global later changed and the row's `item` was unchanged. Two compounding gaps, fixed at the right layer in two steps:
+  - **Branch swap re-evaluated against the wrong scope** (`affected.js`, `hydrate.js`) — `affected` correctly detected the change against the row's merged state, but the affected entry it pushed carried only the node. `hydrate` then called `updateConditional` with the cycle's top-level state, which had no `item`, so the branch eval evaluated `selected.includes(item.id)` etc. against `item === undefined`. Rows mounted on the *if* branch happened to flip to *else* (often correct by coincidence); rows mounted on the *else* branch stayed stuck. `affected.js` now attaches the same `state`/`newState` pair the change was detected against as `scopedState`/`oldScopedState` on the conditional entry — merged row state inside an iteration, the cycle's top-level state outside — and `hydrate.js`'s conditional handler uses them when present.
+  - **Inlined per-row components were invisible to the iteration recursion** (`affected.js`) — a `<component src>` mounted per iteration row has its parsed tree stashed on the post-process wrapper as `_vibeIterTree`, not as a child of `instance.tree`. `hydrateInlinedIterationComponents` already re-hydrates those trees, but it only runs from `updateInstance`, which only fires when the iteration's array changes. On a pure global-state change the array is unchanged, so the inlined component trees were never visited — a row-internal `<!-- if -->` *without* an else, gated on a global and living inside a per-row component (the Battle Brawlers `<brawler-menu>`/`<brawler-activity>` shape), wouldn't tear down. `affected.js`'s iteration recursion now also descends into every `_vibeIterTree` reachable from each instance's cloned nodes with the same merged scoped state, so the conditional flows through the normal affected → hydrate → `updateConditional` path and the existing `branches.else === null` handling triggers `unmountBranch`. Same path covers any other binding/conditional living inside a per-row component, so they all now react to global state changes too.
+  - Test: `tests/e2e/conditional-in-iteration-global.spec.js` (7 tests: swap of `selected.includes(item.id)` in both directions; dynamic property lookup; compound gate with both halves; `if`-without-else direct shape; compound `if`-without-else; nested-property gate `combat.duration !== 0 && busyMap[item.id]`; and the per-row-component repro toggling `$.showMenu` through a mount→teardown→re-mount cycle)
+
+- **Loop-scoped `on*` handler inside a row-internal `<!-- if -->` resolved the previous item after the row updated** (`runtime/loop-scope.js`) — a `<!-- if -->` inside an iteration mounts its branch content separately from the row's `clonedNodes` and stamps `__vibeScope` once at mount time. When the row was later updated in place (its DOM reused for a new item), the iteration refreshed its own root stamp but the branch root kept the stale mount-time stamp, and `resolveScope` hit that first on the walk up — so a handler inside the conditional resolved the previous item. `stampInstanceScopes` now walks the instance's parsed tree and re-stamps every active conditional-branch root with the same fresh scope. Nested loops are skipped — each iteration node already manages its own instances' scopes.
+  - Test: `tests/e2e/loop-scoped-handlers.spec.js` (+ unit coverage in `tests/unit/loop-scope.test.js`)
+
+- **Treeless (batch-rendered) iteration was rebuilt on every unrelated state change** (`runtime/iterate.js`) — `affected.js` conservatively flags a treeless iteration on any state change (it can't walk per-row trees to know what they depend on), and `updateIteration` responded with an unconditional `bulkReplace`. A background tick (e.g. a 250 ms client clock) therefore recreated every row on every flush, dropping imperatively-attached listeners (tooltip mouseleave) and any in-progress drag. `renderBatch` now remembers the rendered HTML on the iteration's runtime; before tearing down, `updateIteration` re-runs the batch — if the output is byte-identical to the previous one, the rows don't depend on what changed, and the existing DOM nodes are kept. Skipped when the template has DOM-property writes (`value`/`checked`/`selected`), which aren't reflected in the HTML string.
+  - Test: `tests/e2e/iteration-treeless-unrelated-update.spec.js`
+
+- **Inlined component's literal-wrap `<!-- each [prop] as alias -->` froze on the original snapshot** (`runtime/iterate.js`) — when an inlined component received an object prop and wrapped it in a literal-array iteration to render its fields, the inner iteration's `forceRegistryBackedIterationUpdates` calls `updateIteration` with `oldState === newState`, but the old/new array eval produces fresh arrays containing the just-rewritten registry value, so the diff saw identical contents and emitted no UPDATE. `updateIteration` now treats `oldState === newState` as a "trust the rendered snapshot" signal — the previously rendered items on iteration instances are the only honest "old" when the registry side-effect is the only mutation — and correctly emits per-row updates.
+
+### Added
+
+- **`<component src>` callsite receives its componentId** (`runtime/component.js`) — `processSingle` now returns the resolved `componentId` so `const id = component(state)` inside a `<script type="module">` block of a src-fetched component resolves to a non-undefined id. Matches the public component.js contract; without it, downstream `$[id]` was silently undefined for src-fetched components.
+
+---
+
 ## [1.9.6] - 2026-05-25
 
 ### Fixed

package/package.json

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

package/runtime/affected.js

@@ -38,6 +38,53 @@ const matchesKey = (matchStr, key) => {
   return false;
 };
 
+// Resolve a clone-list entry to its live counterpart. processComponent swaps
+// the original `<component src>` for a post-process `<component>` wrapper and
+// records the new node on the original via `_vibeReplacedBy`. Mirrors
+// `liveCloneNode` in iterate.js — kept inline to avoid a circular import.
+const liveCloneNode = (node) => {
+  let cur = node;
+  while (cur && cur._vibeReplacedBy) cur = cur._vibeReplacedBy;
+  return cur;
+};
+
+// Descend into any inlined `<component>` parsed trees attached to an
+// iteration row. `_vibeIterTree` is stamped on the post-process wrapper by
+// index.js (mutation-observer path) and on nested inlined components reached
+// via `[data-vibe-iter-prop]`. The trees retain the original `@[…]` binding
+// text so this affected walk can flag changes the same way it would on the
+// row's own tree.
+const walkInlinedComponentTrees = (
+  clonedNodes,
+  state,
+  newState,
+  affected,
+  depth,
+) => {
+  for (let n = 0; n < clonedNodes.length; n++) {
+    const node = liveCloneNode(clonedNodes[n]);
+    if (!node || node.nodeType !== 1) continue;
+    const wrappers = [];
+    if (node._vibeIterTree) wrappers.push(node);
+    const found = node.querySelectorAll?.('[data-vibe-iter-prop]');
+    if (found) {
+      for (let i = 0; i < found.length; i++) {
+        if (found[i]._vibeIterTree) wrappers.push(found[i]);
+      }
+    }
+    for (let w = 0; w < wrappers.length; w++) {
+      recursive(
+        wrappers[w]._vibeIterTree,
+        state,
+        newState,
+        affected,
+        newState,
+        depth,
+      );
+    }
+  }
+};
+
 const recursive = (
   tree,
   state,
@@ -129,6 +176,26 @@ const recursive = (
             mergedNewState,
             depth + 1,
           );
+
+          // Components mounted as `<component src>` *inside* an iteration row
+          // are not children of `instance.tree` — their parsed tree lives on
+          // the post-process wrapper as `_vibeIterTree`. Without descending
+          // into it, conditionals / bindings inside the inlined component are
+          // invisible to this walk, so a global state change that should tear
+          // down a row-internal `<!-- if -->` (or flip a binding) inside the
+          // component is missed. `updateInstance` re-hydrates these trees via
+          // `hydrateInlinedIterationComponents`, but only when the iteration
+          // itself is flagged affected (array change). For pure global-state
+          // updates the array is unchanged, so we descend here instead.
+          if (instance.clonedNodes) {
+            walkInlinedComponentTrees(
+              instance.clonedNodes,
+              mergedOldState,
+              mergedNewState,
+              affected,
+              depth + 1,
+            );
+          }
         }
       }
     }
@@ -151,10 +218,19 @@ const recursive = (
 
     // Check if condition result changed
     if (oldValue !== newValue) {
+      // Carry the state pair the condition was evaluated against. Inside an
+      // iteration row this is the merged state (loop alias + current globals),
+      // outside it is the cycle's top-level state. hydrate hands these to
+      // updateConditional so the branch swap re-evaluates the expression in
+      // the same scope — without them, a row-internal `if` is re-evaluated
+      // against a state with no `item`, which always reads falsy and leaves
+      // rows that were initially on the else branch stuck there.
       affected.push({
         type: "conditional",
         node: tree,
         changeType: "expression",
+        scopedState: newState,
+        oldScopedState: state,
       });
       return affected;
     }

package/runtime/hydrate.js

@@ -14,9 +14,15 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       return;
     }
 
-    // Handle conditional updates
+    // Handle conditional updates. Use the scoped pair affected attached when
+    // the conditional sits inside an iteration row — that pair has the row's
+    // loop alias overlaid on current globals, so the branch eval re-runs in
+    // the same scope the change was detected against. Top-level conditionals
+    // pass through with the cycle's state (affected attaches it verbatim there).
     if (aff.type === 'conditional') {
-      updateConditional(aff.node, state, oldState, manifest);
+      const condNewState = aff.scopedState || state;
+      const condOldState = aff.oldScopedState || oldState;
+      updateConditional(aff.node, condNewState, condOldState, manifest);
       return;
     }
 

package/runtime/iterate.js

@@ -996,19 +996,32 @@ export const updateIteration = (iterationNode, newState, oldState, manifest, par
   const newArray = evalInScope(resolvedExpr, newState, startComment.parentElement) ?? resolvePath(newState, resolvedExpr) ?? [];
 
   // Use instances (what's actually rendered) as ground truth for old array
-  // when oldState disagrees with the rendered count, OR when stateOldArray
-  // and newArray are the same reference. The latter happens for
-  // registry-backed iterations: when the iteration's arrayPath resolves to
-  // `window.__vibeIterProps._pN`, refreshIterationComponentProps updates the
-  // slot in place, so both reads return the same NEW array. Without this
-  // fallback the diff would compare the new array against itself and report
-  // no changes — leaving the inlined iteration frozen on previously rendered
-  // items.
+  // whenever the only signal of change is a registry side-effect, or when
+  // the rendered count doesn't match the freshly evaluated state. Three
+  // cases collapse to "trust the rendered snapshot":
+  //   1. oldState === newState — forceRegistryBackedIterationUpdates calls
+  //      updateIteration with the same state on both sides because the only
+  //      mutation was a registry slot rewrite. The previously rendered
+  //      items are the only honest record of what was there before.
+  //   2. stateOldArray === newArray — the iteration's arrayPath resolves
+  //      directly to a registry slot (`window.__vibeIterProps._pN`); the
+  //      slot was swapped in place, so both reads return the same NEW
+  //      array.
+  //   3. length mismatch — oldState predates the current render.
+  // Otherwise the freshly evaluated state is a trustworthy "old".
+  //
+  // Literal-wrap expressions like `[s]` would otherwise slip through this
+  // net: they build different array refs each eval but both contain the
+  // just-rewritten registry value, so a naive diff sees no change. Case 1
+  // catches them.
   const instances = iterationNode.runtime.instances;
-  const oldArray =
-    stateOldArray !== newArray && instances.length === stateOldArray.length
-      ? stateOldArray
-      : instances.map((inst) => inst.item);
+  const useInstancesAsOld =
+    oldState === newState ||
+    stateOldArray === newArray ||
+    instances.length !== stateOldArray.length;
+  const oldArray = useInstancesAsOld
+    ? instances.map((inst) => inst.item)
+    : stateOldArray;
 
   // Compiled path: Use pre-compiled batch function when available
   if (compiled.canUseCompiled(iterationNode)) {

package/runtime/loop-scope.js

@@ -128,6 +128,35 @@ export const resolveScope = (el, name) => {
   return undefined;
 };
 
+// Re-stamp the instance scope onto conditional-branch roots mounted inside a
+// row. A `<!-- if -->` within a loop mounts its branch content separately from
+// the iteration's own clonedNodes and stamps it once, at mount time
+// (conditionals.js). When the row later updates in place — its DOM node reused
+// for a new item — the iteration refreshes its own root stamp, but the branch
+// root keeps the stale mount-time stamp, and `resolveScope` hits that first on
+// the walk up (so a handler inside the conditional resolves the previous item).
+// Walking the instance's parsed tree and re-stamping every active conditional
+// branch root with the same fresh `scope` object closes that gap. Nested loops
+// are skipped: each iteration node manages its own instances' scopes.
+const restampConditionalBranches = (tree, scope) => {
+  if (!tree || typeof tree !== 'object') return;
+  if (tree.type === 'iteration') return;
+  if (tree.type === 'conditional') {
+    const active = tree.runtime?.activeInstance;
+    if (active?.nodes) {
+      for (let i = 0; i < active.nodes.length; i++) {
+        const node = active.nodes[i];
+        if (node && node.nodeType === 1) node.__vibeScope = scope;
+      }
+    }
+    if (active?.parsedTree) restampConditionalBranches(active.parsedTree, scope);
+    return;
+  }
+  if (tree.children) {
+    for (const key in tree.children) restampConditionalBranches(tree.children[key], scope);
+  }
+};
+
 // Stamp the in-scope loop vars onto every iteration instance's root element
 // node(s). The stamp accumulates the enclosing loop vars (`parentScope`) plus
 // this loop's item/index, so a single innermost stamp resolves every alias in
@@ -151,6 +180,10 @@ export const stampInstanceScopes = (iterationNode, parentScope = {}) => {
       const node = roots[r];
       if (node && node.nodeType === 1) node.__vibeScope = scope;
     }
+    // Conditional branches inside the row carry their own stamp from mount time;
+    // refresh them with the same fresh scope so in-place row updates don't leave
+    // a handler inside an `<!-- if -->` resolving the previous item.
+    if (inst.tree) restampConditionalBranches(inst.tree, scope);
   }
 };