@ape-egg/vibe 2.1.13 → 2.1.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- **Compiler 1.9.8 → 1.9.9 — a component prop referenced *bare* inside an event handler threw at fire time** (`compiler/src/parser/html.rs`, `runtime/component.js`) — prop substitution into `on*` handlers only rewrote the `$.prop` form, so a bare prop reference (`onclick="pick(item)"` where `item` is a prop) was left untouched. Because a native inline handler runs in *global* scope when it fires, that bare identifier resolved to an undefined global and threw a `ReferenceError`. Both the compiler's `substitute_props` and the runtime's `renderPropsAndSlot` now also substitute the bare prop identifier — mirroring the existing `@[...]` binding pass — so the handler receives the live prop with object identity preserved: a loop-alias path (`row.sig`) becomes `(row.sig)`, which `parse.js` rewrites to the scoped accessor, and a literal prop (`limit="5"`) inlines as the numeric `5`. The bare pass skips the `$.prop` form (lookbehind guard) so the two rewrites don't collide. Tests: `e2e-runtime/prop-in-handler.html` + `components/test-prop-handler.html`, exercised by `tests/e2e/component-props.spec.js`.
+
 ## [2.1.13] - 2026-06-22
 
 ### Fixed

package/compiler/src/Cargo.lock

@@ -1599,7 +1599,7 @@ checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
 
 [[package]]
 name = "vibe-compiler"
-version = "1.9.8"
+version = "1.9.9"
 dependencies = [
  "clap",
  "colored",

package/compiler/src/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "vibe-compiler"
-version = "1.9.8"
+version = "1.9.9"
 edition = "2021"
 description = "Vibe framework compiler - compiles Vibe source files into optimized output"
 authors = ["Kim Korte"]

package/compiler/src/parser/html.rs

@@ -690,7 +690,13 @@ fn substitute_props(template: &str, props: &[(String, String)]) -> String {
             .replace_all(&html, |c: &regex::Captures| {
                 let ev = c.get(1).unwrap().as_str();
                 let body = c.get(2).unwrap().as_str();
-                let rewritten = substitute_state_ref(body, prop_name, &state_repl);
+                // First the `$.prop` form, then the bare prop identifier — mirroring
+                // the runtime's two-step rewrite so `onclick="pick(item)"` resolves
+                // the live prop instead of throwing ReferenceError in global scope.
+                // The bare pass skips `$.prop` (its `.`-lookbehind guard) so the two
+                // don't collide.
+                let after_state = substitute_state_ref(body, prop_name, &state_repl);
+                let rewritten = substitute_identifier(&after_state, prop_name, &ident_repl);
                 if rewritten == body {
                     c.get(0).unwrap().as_str().to_string()
                 } else {

package/package.json

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

package/runtime/component.js

@@ -369,7 +369,12 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
       );
       const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'gi');
       transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
-        const rewritten = body.replace(stateRegex, `$.${path}`);
+        // Substitute the bare prop identifier too (not just the `$.prop` form),
+        // mirroring the @[...] binding pass above — so `onclick="pick(item)"`
+        // resolves the live prop, not a global that throws ReferenceError. A
+        // loop-alias path (`row.sig`) becomes `(row.sig)` here; parse.js then
+        // rewrites the alias to `$scope(this,'row')`.
+        const rewritten = substituteInExpr(body.replace(stateRegex, `$.${path}`), `(${path})`);
         return rewritten === body ? match : `on${evName}="${rewritten}"`;
       });
     } else {
@@ -395,7 +400,9 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
       );
       const stateRegex = new RegExp(`\\$\\.${escapeRegex(propName)}(?![a-zA-Z0-9_$])`, 'gi');
       transformedHtml = transformedHtml.replace(EVENT_ATTR_REGEX, (match, evName, body) => {
-        const rewritten = body.replace(stateRegex, `$.${literal}`);
+        // Same bare-identifier substitution for a literal prop: `onclick="set(limit)"`
+        // with `limit="5"` becomes `set(5)`.
+        const rewritten = substituteInExpr(body.replace(stateRegex, `$.${literal}`), literal);
         return rewritten === body ? match : `on${evName}="${rewritten}"`;
       });
     }
@@ -600,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 };
 };