@ape-egg/vibe 2.1.10 → 2.1.12

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [2.1.12] - 2026-06-22
+
+### Fixed
+
+- **Nodes resolving inside slot-projected branch/iteration content were orphaned from the reactive tree** (`runtime/index.js`) — `navigateTree` only walks a node's `children`, but content projected across a `<slot>` boundary (a conditional branch's or an iteration instance's slotted content) is registered in the flat manifest under a path that isn't reachable through `children` — the slot node's children don't include the projected subtree. So when a `<component src>` (or any node) mounted inside such content, `navigateTree` returned null: on add, the resolved subtree never linked into the reactive tree (so it wasn't reactive); on remove, the stale tree entry lingered beside its replacement. A new `findNodeByElement` does an identity search across the *full* tree — plain `children`, conditional branch trees (`runtime.activeInstance.parsedTree`), and iteration instance trees (`runtime.instances`) — and is used as a fallback at both the add and remove sites when path navigation can't reach the parent, so the subtree links in and cleans up regardless of slot/branch/iteration projection.
+
+## [2.1.11] - 2026-06-22
+
+### Fixed
+
+- **Compiler 1.9.6 → 1.9.7 — name-binding expressions were lowercased, breaking camelCase identifiers** (`compiler/src/compiler/binding_case.rs` (new), `component_tagger.rs`, `manifest_builder.rs`) — html5ever lowercases attribute *names* per the HTML spec, and a name-binding lives in attribute-name position (`<icon @[selectedEquipProps(uuid).element]>`), so every parse/serialize round-trip lowered its expression (`selectedEquipProps` → `selectedequipprops`, undefined at runtime). Attribute *values* keep their case, so value-bindings were never affected. The new `binding_case` module snapshots the original-cased `@[...]` bindings before the round-trip (keyed by their lowercased form, first-wins on collision) and restores them afterward — applied both to the tagged HTML in `component_tagger` and to every string the manifest builder serializes, including its captured `name_bindings` array. Repro: `tests/compiler/name-binding-case`.
+- **Name-binding paths wrapped in grouping parens by component-prop substitution failed to resolve** (`runtime/utils.js`) — `resolveCaseInsensitivePath` bailed on any `(`, but reusing a component rewrites a prop reference like `props.element` into `(equipmentDetailProps).element`, and the HTML parser lowercases the surrounding name-binding attribute. It now strips grouping parens to recover the plain dotted path and resolves it case-insensitively, still bailing on a genuine function call (`selectedEquipProps(uuid)`) that needs the full evaluator. Covered by `tests/unit/utils.test.js`.
+
 ## [2.1.10] - 2026-06-21
 
 ### Fixed

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/binding_case.rs

@@ -0,0 +1,88 @@
+use regex::Regex;
+use std::collections::HashMap;
+use std::sync::OnceLock;
+
+/// The canonical `@[...]` binding matcher, shared with manifest_builder /
+/// value_stamper. A binding body is any run of non-bracket chars, optionally
+/// containing a single bracketed group (`items[0]`).
+fn binding_regex() -> &'static Regex {
+    static RE: OnceLock<Regex> = OnceLock::new();
+    RE.get_or_init(|| Regex::new(r"@\[((?:[^\[\]]|\[[^\]]*\])+)\]").unwrap())
+}
+
+/// html5ever lowercases attribute NAMES per the HTML spec. A name-binding lives
+/// in attribute-name position (`<icon @[selectedEquipProps(uuid).element]>`), so
+/// its expression is lowercased by every parse/serialize round-trip — the
+/// identifier `selectedEquipProps` becomes `selectedequipprops`, undefined at
+/// runtime. Attribute VALUES keep their case, so value-bindings are unaffected.
+///
+/// We can't tell html5ever to preserve case, so we restore it ourselves: snapshot
+/// the original-cased `@[...]` bindings from the input BEFORE the round-trip, then
+/// map them back over the output AFTER. The map is keyed by the lowercased binding
+/// (what the round-trip produces) → original binding.
+///
+/// First-wins on a lowercase collision (two differently-cased bindings that
+/// lowercase to the same key): rare, and either casing is a defensible restore.
+pub fn capture(input: &str) -> HashMap<String, String> {
+    let mut map = HashMap::new();
+    for caps in binding_regex().captures_iter(input) {
+        let original = caps.get(0).unwrap().as_str();
+        let lower = original.to_ascii_lowercase();
+        if lower != original {
+            map.entry(lower).or_insert_with(|| original.to_string());
+        }
+    }
+    map
+}
+
+/// Restore original casing of `@[...]` bindings in `output` using a map built by
+/// [`capture`]. Only bindings whose lowercased form is a known key are rewritten;
+/// everything else is left verbatim, so this is a no-op when nothing was lowered.
+pub fn restore(output: &str, map: &HashMap<String, String>) -> String {
+    if map.is_empty() {
+        return output.to_string();
+    }
+    binding_regex()
+        .replace_all(output, |caps: &regex::Captures| {
+            let matched = caps.get(0).unwrap().as_str();
+            match map.get(&matched.to_ascii_lowercase()) {
+                Some(original) => original.clone(),
+                None => matched.to_string(),
+            }
+        })
+        .to_string()
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn restores_lowercased_name_binding() {
+        // Post-prop-substitution name binding (parens added by substitute_props),
+        // as it enters an html5ever round-trip. html5ever lowercases the whole
+        // attr name; restore puts the original casing back.
+        let input = "<icon @[(selectedEquipProps(uuid)).element]></icon>";
+        let map = capture(input);
+        let lowered = "<icon @[(selectedequipprops(uuid)).element]></icon>";
+        let restored = restore(lowered, &map);
+        assert_eq!(restored, input);
+    }
+
+    #[test]
+    fn leaves_value_bindings_untouched_when_already_correct() {
+        let input = r#"<card tinted="@[selectedEquipProps(uuid).element]"></card>"#;
+        let map = capture(input);
+        // Value bindings keep case through html5ever, so output already matches.
+        let restored = restore(input, &map);
+        assert_eq!(restored, input);
+    }
+
+    #[test]
+    fn noop_when_no_uppercase() {
+        let input = "<icon @[tooltip.props.element]></icon>";
+        let map = capture(input);
+        assert!(map.is_empty());
+        assert_eq!(restore(input, &map), input);
+    }
+}

package/compiler/src/compiler/component_tagger.rs

@@ -42,6 +42,11 @@ impl ComponentTagger {
             html_with_placeholders = html_with_placeholders.replace(content, &placeholder);
         }
 
+        // Snapshot original-cased `@[...]` bindings before html5ever lowercases
+        // any that live in attribute-name position (name bindings); restored after
+        // serialization below.
+        let binding_cases = crate::compiler::binding_case::capture(&html_with_placeholders);
+
         // Parse HTML (with placeholders instead of actual vibe-dehydrate content)
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
@@ -64,6 +69,9 @@ impl ComponentTagger {
         let mut modified_html = String::from_utf8(modified_html_bytes)
             .map_err(|e| format!("Failed to convert HTML to UTF-8: {}", e))?;
 
+        // Restore original casing of name-binding expressions html5ever lowercased.
+        modified_html = crate::compiler::binding_case::restore(&modified_html, &binding_cases);
+
         // Restore template content from placeholders
         for (i, content) in template_placeholders.iter().enumerate() {
             let placeholder = format!("<!--VIBE_TEMPLATE_PLACEHOLDER_{}-->", i);

package/compiler/src/compiler/manifest_builder.rs

@@ -4,12 +4,17 @@ use markup5ever_rcdom::{RcDom, NodeData, Handle};
 use regex::Regex;
 use serde::{Serialize, Serializer};
 use serde_json::Value;
+use std::cell::RefCell;
 use std::collections::{HashMap, BTreeMap};
 use crate::compiler::iteration_optimizer::build_iteration_optimizations;
 
 pub struct ManifestBuilder {
     binding_regex: Regex,
     name_binding_fix_regex: Regex,
+    /// Original-cased `@[...]` bindings captured from the pre-parse HTML, keyed by
+    /// their lowercased form — used to undo html5ever's attribute-name lowercasing
+    /// of name bindings on every string this builder serializes back out.
+    binding_cases: RefCell<HashMap<String, String>>,
 }
 
 impl ManifestBuilder {
@@ -17,10 +22,16 @@ impl ManifestBuilder {
         Self {
             binding_regex: Regex::new(r"@\[((?:[^\[\]]|\[[^\]]*\])+)\]").unwrap(),
             name_binding_fix_regex: Regex::new(r#"(@\[[^\]]+\])="+"#).unwrap(),
+            binding_cases: RefCell::new(HashMap::new()),
         }
     }
 
     pub fn build_from_html(&self, html: &str, _state: &Value, iterations_as_is: bool) -> Result<ManifestNode, String> {
+        // Snapshot original-cased bindings before html5ever lowercases name
+        // bindings (attr-name position). Restored on serialized templates and on
+        // the captured name_bindings array.
+        *self.binding_cases.borrow_mut() = crate::compiler::binding_case::capture(html);
+
         // Parse HTML
         let dom = parse_document(RcDom::default(), Default::default())
             .from_utf8()
@@ -133,7 +144,12 @@ impl ManifestBuilder {
                         while name_bindings.len() <= idx {
                             name_bindings.push(None);
                         }
-                        name_bindings[idx] = Some(attr_name.clone());
+                        // html5ever lowercased the attr name; restore original casing.
+                        let restored = crate::compiler::binding_case::restore(
+                            &attr_name,
+                            &self.binding_cases.borrow(),
+                        );
+                        name_bindings[idx] = Some(restored);
                     }
                     // Check for attribute value bindings
                     else if self.binding_regex.is_match(&attr_value) {
@@ -441,6 +457,10 @@ impl ManifestBuilder {
         // which is invalid HTML that browsers reject
         html = self.name_binding_fix_regex.replace_all(&html, "$1").to_string();
 
+        // Restore original casing of any name-binding expressions html5ever
+        // lowercased while parsing (attr-name position).
+        html = crate::compiler::binding_case::restore(&html, &self.binding_cases.borrow());
+
         html
     }
 }

package/compiler/src/compiler/mod.rs

@@ -5,6 +5,7 @@ mod value_stamper;
 mod iteration_optimizer;
 mod js_analyzer;
 mod component_tagger;
+mod binding_case;
 mod reassignment_analyzer;
 pub mod watcher;
 

package/package.json

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

package/runtime/index.js

@@ -81,6 +81,48 @@ const navigateTree = (tree, path) => {
   return path.split('.').filter(k => k).reduce((node, key) => node?.children?.[key], tree);
 };
 
+// Locate the tree node whose `.element` is `target`, searching the full tree:
+// plain `children`, plus conditional branch trees (`runtime.activeInstance`)
+// and iteration instance trees (`runtime.instances`). navigateTree only walks
+// `children`, so it can't reach content projected across a <slot> boundary — a
+// conditional branch's slotted content is registered in the flat manifest by
+// path, but that path isn't navigable through `children` (the slot node's
+// children don't include the projected subtree). When a <component src> resolves
+// inside such content, navigateTree returns null and the resolved subtree would
+// be orphaned from the reactive tree. This identity search recovers the real
+// parent node so the subtree links in regardless of slot/branch projection.
+const findNodeByElement = (tree, target) => {
+  if (!target) return null;
+  const seen = new Set();
+  const walk = (node) => {
+    if (!node || typeof node !== 'object' || seen.has(node)) return null;
+    seen.add(node);
+    if (node.element === target) return node;
+    if (node.children) {
+      for (const key in node.children) {
+        const hit = walk(node.children[key]);
+        if (hit) return hit;
+      }
+    }
+    const branchTree = node.runtime?.activeInstance?.parsedTree;
+    if (branchTree) {
+      const hit = walk(branchTree);
+      if (hit) return hit;
+    }
+    const instances = node.runtime?.instances;
+    if (instances) {
+      for (let i = 0; i < instances.length; i++) {
+        if (instances[i]?.tree) {
+          const hit = walk(instances[i].tree);
+          if (hit) return hit;
+        }
+      }
+    }
+    return null;
+  };
+  return walk(tree);
+};
+
 // Get or create a node in the tree at the given path
 const ensureNode = (tree, path) => {
   const keys = path.split('.').filter(k => k);
@@ -853,7 +895,12 @@ const main = (s, config = {}, stringSelector = '') => {
         const name = dotPath.pop();
         const parentDotAnnotation = dotPath.join('.');
 
-        const picked = navigateTree(parsedTree, parentDotAnnotation);
+        // Identity fallback mirrors the added-node path: a parent inside
+        // slot-projected branch content isn't reachable via navigateTree's
+        // `children` walk, so resolve it by element identity instead — otherwise
+        // the removed node's stale tree entry lingers alongside its replacement.
+        const picked =
+          navigateTree(parsedTree, parentDotAnnotation) || findNodeByElement(parsedTree, target);
 
         // If we can't navigate to the parent, skip
         if (!picked || !picked.element) return;
@@ -912,7 +959,12 @@ const main = (s, config = {}, stringSelector = '') => {
         // registration since there's no tree branch to attach to.)
         if (entry) {
           const [dotAnnotation] = entry;
-          const picked = navigateTree(parsedTree, dotAnnotation);
+          // navigateTree walks `children` only; when the parent lives in a
+          // conditional branch's slot-projected content its manifest path isn't
+          // navigable that way (see findNodeByElement). Fall back to an identity
+          // search so the resolved subtree still links into the reactive tree.
+          const picked =
+            navigateTree(parsedTree, dotAnnotation) || findNodeByElement(parsedTree, target);
 
           if (picked) {
             if (!picked.element) {

package/runtime/utils.js

@@ -221,7 +221,16 @@ export const evalInScope = (expr, state, element = null) => {
 // `fx`. Bails on bracket/call expressions because those need a real
 // evaluator (and `evalInScope` already handled them).
 export const resolveCaseInsensitivePath = (state, path) => {
-  if (path.includes('[') || path.includes('(')) return undefined;
+  if (path.includes('[')) return undefined;
+  // Component prop substitution wraps the source in grouping parens, e.g.
+  // `props.element` inside a reused component becomes `(equipmentDetailProps).element`.
+  // The HTML parser lowercases name-binding attribute names, so strip the grouping
+  // parens to recover a plain dotted path; bail if anything but identifiers + dots
+  // survives (a real function call like `selectedEquipProps(uuid)` can't be recovered).
+  if (path.includes('(')) {
+    path = path.replace(/[()]/g, '');
+    if (!/^[A-Za-z_$][\w$]*(\.[A-Za-z_$][\w$]*)*$/.test(path)) return undefined;
+  }
   const segments = path.split('.');
   let current = state;
   for (const seg of segments) {