@ape-egg/vibe 2.1.14 → 2.1.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [2.1.15] - 2026-06-22
+
+### Fixed
+
+- **Component props bound to global state inside an iteration froze instead of staying reactive** (`runtime/iterate.js`, `runtime/conditionals.js`, `runtime/component.js`) — when a `<component src>` inside an `<!-- each -->` received a prop whose expression referenced only globals (e.g. `<scalar-bar value="@[elapsedMilliseconds]">`), `resolveIterationComponentProps` snapshotted the value into the iteration-prop registry. That slot is refreshed only on array diffs, so in a row whose array never changes the prop froze at its first value and never tracked the global (the Brawling-loader / scalar-bar freeze). Such global-only prop bindings are now left raw so the normal reactive path tracks the global, while the wrapper is still tagged (`data-vibe-iter-prop` + an empty `_vibeIterPropExprs`) so `index.js` stamps its `_vibeIterTree` and `affected.js`'s `walkInlinedComponentTrees` descends in to re-hydrate the binding on a global-state change. The registry path is kept only for props that genuinely need iteration scope — `this.X` or an item/index/outer alias, detected via `extractDependencies`. Two supporting fixes: a conditional now recognizes it lives inside an iteration from its parse-time `scopeAliases` (not just a populated `parentScope`), so a conditional that mounts later through the update path — a loader whose `<!-- if -->` flips true only once combat starts — still routes its component props correctly; and `component.js` transfers the `data-vibe-iter-prop` discovery marker to the rebuilt wrapper on both the registry and the new global-only raw-binding paths. Tests: `e2e-runtime/component-prop-global-scalar.html`, `tests/e2e/component-prop-global-scalar.spec.js`.
+
 ## [2.1.14] - 2026-06-22
 
 ### Fixed

package/package.json

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

package/runtime/component.js

@@ -607,8 +607,15 @@ const processSingle = (el, debug) => {
           // on the next hydrate.
           if (el._vibeIterPropIds) {
             newWrapper._vibeIterPropIds = el._vibeIterPropIds;
-            newWrapper.setAttribute('data-vibe-iter-prop', '');
             el._vibeIterPropIds = null;
+          }
+          // The discovery marker rides on the registry path (props with iteration
+          // aliases) AND the global-only raw-binding path (no registry slot, just
+          // `_vibeIterPropExprs = []`). Transfer it whenever present so affected.js's
+          // walkInlinedComponentTrees can find the wrapper and re-hydrate its
+          // bindings on a global-state change.
+          if (el.hasAttribute('data-vibe-iter-prop')) {
+            newWrapper.setAttribute('data-vibe-iter-prop', '');
             el.removeAttribute('data-vibe-iter-prop');
           }
           // Transfer the original prop expressions too, so the iteration's

package/runtime/conditionals.js

@@ -104,7 +104,14 @@ export const renderConditional = (node, state, manifest, parentScope = {}) => {
   // live `@[stateKey]` bindings — which is what global state-change reactivity
   // depends on (the registry path snapshots a value and doesn't react to
   // global state changes on its own).
-  if (Object.keys(parentScope).length > 0) {
+  // `parentScope` is populated on the initial-render path, but a conditional
+  // mounted via the update path (a parent conditional flipping true after load)
+  // — or any deeper-nested conditional — arrives with an empty parentScope, the
+  // iteration's scoped state flowing in through `state` instead. `scopeAliases`
+  // is set at parse time and persists, so it reliably marks a conditional that
+  // lexically lives inside an iteration regardless of which path mounts it — the
+  // Brawling loader, whose conditional flips true only once combat starts.
+  if (Object.keys(parentScope).length > 0 || node.meta.scopeAliases?.length) {
     node.runtime.inIteration = true;
   }
 
@@ -189,7 +196,7 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
   // global-state bindings — going through the registry would snapshot the
   // value and break reactivity.
   if (node.runtime.inIteration) {
-    resolveIterationComponentProps(clonedNodes, scopedState);
+    resolveIterationComponentProps(clonedNodes, scopedState, aliasSet);
   }
 
   // Insert cloned nodes into DOM and register in branch registry

package/runtime/iterate.js

@@ -3,7 +3,7 @@ import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { resolvePath, getItemKey, computeDiff } from './iteration-utils.js';
 import { resolveThisPath, evalInScope, findComponentIdForElement, rememberScopedKeys } from './utils.js';
-import { managedNodes } from './conditionals.js';
+import { managedNodes, extractDependencies } from './conditionals.js';
 import { stampInstanceScopes } from './loop-scope.js';
 import {
   BINDING_REGEX,
@@ -372,7 +372,7 @@ export const releaseOrphanedIterationProps = (nodes) => {
 // inlines the component, since by then iteration scope is gone. Only called
 // from iteration code paths; conditionals don't need this because their branch
 // content is registered in the global manifest and reacts to state updates.
-export const resolveIterationComponentProps = (nodes, scopedState) => {
+export const resolveIterationComponentProps = (nodes, scopedState, aliases) => {
   for (let n = 0; n < nodes.length; n++) {
     const node = nodes[n];
     if (node.nodeType !== 1) continue;
@@ -388,6 +388,26 @@ export const resolveIterationComponentProps = (nodes, scopedState) => {
         const match = attr.value.match(/^@\[(.+)\]$/);
         if (!match) continue;
         const expr = match[1];
+        // The registry snapshot only exists to carry iteration-local values
+        // (item/index/outer aliases, or component-local `this.X`) past the point
+        // where processComponent inlines the component and that scope is gone.
+        // A prop whose expression references ONLY globals doesn't need it — and
+        // routing it through the snapshot would freeze it, since the slot is
+        // refreshed solely on array diffs (the Brawling-loader freeze: a prop
+        // bound to `elapsedMilliseconds` in a row whose array never changes).
+        // Leave such a binding raw so the normal reactive path tracks the
+        // global, but still tag the wrapper: `_vibeIterPropExprs` makes index.js
+        // stamp `_vibeIterTree`, which is what lets affected.js's
+        // walkInlinedComponentTrees descend in and re-hydrate the raw binding on
+        // a global-state change.
+        const usesLocalScope =
+          /\bthis\b/.test(expr) ||
+          (aliases && extractDependencies(expr).some((d) => aliases.has(d)));
+        if (!usesLocalScope) {
+          el.setAttribute('data-vibe-iter-prop', '');
+          el._vibeIterPropExprs = el._vibeIterPropExprs || [];
+          continue;
+        }
         try {
           const value = evalInScope(expr, scopedState, el);
           if (value === undefined) continue;
@@ -1405,7 +1425,8 @@ const buildInstance = (iterationNode, item, index, state, parentScope, liveItem)
   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));
-  resolveIterationComponentProps(built.clonedNodes, scopedState);
+  const scopeAliases = new Set([itemAlias, indexAlias, ...(iterationNode.meta.scopeAliases || [])]);
+  resolveIterationComponentProps(built.clonedNodes, scopedState, scopeAliases);
   return { ...built, scopedState, localVars, liveItem };
 };