@ape-egg/vibe 2.1.13 → 2.1.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [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.14",
   "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}"`;
       });
     }