@ape-egg/vibe 2.1.14 → 2.1.16

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.1.16] - 2026-06-22
+
+### Fixed
+
+- **Compiler 1.9.9 → 2.0.0 — bare prop substitution corrupted matching text inside string literals** (`compiler/src/parser/html.rs`, `runtime/component.js`) — the bare-prop-identifier rewrite added in 2.1.14 (so `onclick="pick(item)"` resolves the live prop) replaced *every* whole-word occurrence of the prop name, including ones inside a quoted string. A prop named `slot` rewrote the selector in `closest('brawler-slot')`, corrupting it. Both the compiler's `substitute_identifier` and the runtime's `substituteInExpr` now track string-literal boundaries (`'`, `"`, and backtick, honouring escapes; template `${…}` counts as part of the literal) and substitute only the code spans between them, leaving identifiers inside string literals intact. The two sides stay byte-for-byte identical, preserving compiled/runtime parity.
+
+## [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/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/parser/html.rs

@@ -542,7 +542,32 @@ fn substitute_identifier(expr: &str, name: &str, replacement: &str) -> String {
     }
     let mut out: Vec<u8> = Vec::with_capacity(bytes.len());
     let mut i = 0;
+    // Delimiter of the string literal we're currently inside, or 0 when in code.
+    // A prop identifier that appears inside a quoted string (e.g. the selector in
+    // `closest('brawler-slot')`) must be left intact, mirroring the runtime's
+    // substituteInExpr. Template `${…}` counts as part of the literal here.
+    let mut quote: u8 = 0;
     while i < bytes.len() {
+        let b = bytes[i];
+        if quote != 0 {
+            out.push(b);
+            if b == b'\\' && i + 1 < bytes.len() {
+                out.push(bytes[i + 1]);
+                i += 2;
+                continue;
+            }
+            if b == quote {
+                quote = 0;
+            }
+            i += 1;
+            continue;
+        }
+        if b == b'\'' || b == b'"' || b == b'`' {
+            quote = b;
+            out.push(b);
+            i += 1;
+            continue;
+        }
         if i + nlen <= bytes.len()
             && bytes[i..i + nlen].eq_ignore_ascii_case(nb)
             && (i == 0 || (!is_ident_byte(bytes[i - 1]) && bytes[i - 1] != b'.'))
@@ -551,7 +576,7 @@ fn substitute_identifier(expr: &str, name: &str, replacement: &str) -> String {
             out.extend_from_slice(replacement.as_bytes());
             i += nlen;
         } else {
-            out.push(bytes[i]);
+            out.push(b);
             i += 1;
         }
     }

package/package.json

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

package/runtime/component.js

@@ -350,7 +350,23 @@ const renderPropsAndSlot = (temp, props, slotHtml) => {
       'gi'
     );
 
-    const substituteInExpr = (expr, replacement) => expr.replace(idRegex, replacement);
+    // Rewrite the identifier only outside string literals. A prop/alias that also
+    // appears inside a quoted string — e.g. the selector in `closest('brawler-slot')`
+    // when the prop is `slot` — must be left intact. Split on string literals
+    // (single/double/backtick, honouring escapes) and substitute only the code spans
+    // between them. Template `${…}` interpolation counts as part of the literal here.
+    const stringLiteral = /(['"`])(?:\\.|(?!\1)[^\\])*\1/g;
+    const substituteInExpr = (expr, replacement) => {
+      let out = '';
+      let last = 0;
+      let m;
+      stringLiteral.lastIndex = 0;
+      while ((m = stringLiteral.exec(expr))) {
+        out += expr.slice(last, m.index).replace(idRegex, replacement) + m[0];
+        last = m.index + m[0].length;
+      }
+      return out + expr.slice(last).replace(idRegex, replacement);
+    };
 
     if (bindingMatch) {
       const path = bindingMatch[1];
@@ -607,8 +623,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 };
 };