@ape-egg/vibe 2.1.8 → 2.1.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.1.9] - 2026-06-20
+
+### Fixed
+
+- **Compiler 1.9.4 → 1.9.5 — array-literal each-root components broke when inlined** (`compiler/src/parser/html.rs`, `compile.rs`) — a component whose root is `<!-- each [prop] as a -->` receives its iterable as a prop and relies on the runtime's `__vibeiterprops` indirection: the runtime evaluates the prop binding in the *enclosing* loop scope, stashes the value in a global registry slot, and iterates that slot. Inlining instead baked the call-site's parent-loop alias straight into the each (`[card.signatureAbility]`); the runtime evaluates an array-literal iterable in global scope, where that alias is undefined, so the loop yielded zero items (the empty `AbilityCell` / status-chip bug in compiled mode). Such components (`is_iter_prop_root`) are now left as runtime `<component src>` tags instead of being inlined — in both the `src=` and custom-element inlining paths — and the `components/` directory is always mirrored to the output so the runtime can fetch their source, exactly as in non-compiled mode. Tests: `each_root_component_is_left_for_runtime`, `ordinary_component_still_inlines` (`html.rs`), and `tests/compiler/components`.
+- **Compiler 1.9.4 → 1.9.5 — a stateful component nested inside another stole the inner's `this.` bindings** (`compiler/src/compiler/component_tagger.rs`) — the outer component's build-time `this.` → component-id rewrite descended through a nested component that registers its OWN `component({...})` state, claiming the inner's bindings and `if`/`each` directives with the outer id before the inner was reached. The inner's live state (registered under its own runtime id) then never reached its markup → empty each-loops and dead bindings (the `DebugContent` → `ScalingModal` empty-legend bug). The rewrite now stops at any nested state-registering component (`is_state_registering_component`); each component owns the `this.` inside it and gets its own id + rewrite when `walk_tag_and_extract` reaches it. Test: `nested_component_this_resolves_to_own_id`.
+
 ## [2.1.8] - 2026-06-19
 
 ### Changed

package/compiler/src/Cargo.lock

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

package/compiler/src/Cargo.toml

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

package/compiler/src/compiler/compile.rs

@@ -1270,17 +1270,19 @@ impl Compiler {
                     continue;
                 }
 
-                // Handle components directory based on components_as_is flag
+                // The components directory is always mirrored to the output. With
+                // components_as_is every component is loaded at runtime; otherwise
+                // most are inlined at build time, but iter-prop each-root components
+                // are deliberately left as runtime `<component src>` tags (see
+                // is_iter_prop_root in parser/html.rs) and the runtime fetches their
+                // source from here — exactly as it does in non-compiled mode.
                 if file_name == self.config.components {
-                    if self.config.components_as_is {
-                        // Copy components directory to output for runtime
-                        let new_relative = if relative_path.is_empty() {
-                            file_name.to_string()
-                        } else {
-                            format!("{}/{}", relative_path, file_name)
-                        };
-                        self.copy_directory(&path, &new_relative, canonical_source, stats)?;
-                    }
+                    let new_relative = if relative_path.is_empty() {
+                        file_name.to_string()
+                    } else {
+                        format!("{}/{}", relative_path, file_name)
+                    };
+                    self.copy_directory(&path, &new_relative, canonical_source, stats)?;
                     // Skip further processing (don't recurse into components)
                     continue;
                 }

package/compiler/src/compiler/component_tagger.rs

@@ -142,33 +142,7 @@ impl ComponentTagger {
                 // treated as a stateful component with the merged state of all its descendants.
                 // That made rewrite_this_to_component_id rewrite every @[this.xxx] in the page
                 // to @[_c0.xxx] before child components could claim their own bindings.
-                let mut direct_scripts_html = String::new();
-                for child in node.children.borrow().iter() {
-                    if let NodeData::Element { name: ref child_name, .. } = child.data {
-                        if child_name.local.as_ref() == "script" {
-                            // Read the script's raw text directly. Serializing the
-                            // element would HTML-escape JS operators (`>` -> `>`,
-                            // `&&` -> `&&`) because the serializer loses the
-                            // rawtext context when it starts at the script's children;
-                            // the escaped source then fails to parse, dropping a
-                            // `component(stateVar)` component to the regex fallback
-                            // (which only matches `component({` literals) and leaving
-                            // it untagged.
-                            let mut script_text = String::new();
-                            for grandchild in child.children.borrow().iter() {
-                                if let NodeData::Text { ref contents } = grandchild.data {
-                                    script_text.push_str(&contents.borrow());
-                                }
-                            }
-                            // Wrap in <script> so extract_from_html routes it through
-                            // the JS AST analyzer, which resolves `component(stateVar)`
-                            // via its declaration (the regex fallback can't).
-                            direct_scripts_html.push_str("<script>");
-                            direct_scripts_html.push_str(&script_text);
-                            direct_scripts_html.push_str("</script>");
-                        }
-                    }
-                }
+                let direct_scripts_html = Self::direct_scripts_html(node);
 
                 // A component must be tagged whenever it REGISTERS local state via a
                 // `component(...)` call — that is what makes `this.X` in its markup
@@ -237,6 +211,53 @@ impl ComponentTagger {
         })
     }
 
+    /// Concatenate a node's DIRECT `<script>` children as `<script>…</script>`.
+    /// Reads raw text (not serialized) so JS operators (`>`, `&&`) aren't
+    /// HTML-escaped — the escaped source would fail the AST parse and drop a
+    /// `component(stateVar)` call to the regex fallback. Used both to extract a
+    /// wrapper's own state and to detect nested component boundaries.
+    fn direct_scripts_html(node: &Handle) -> String {
+        let mut out = String::new();
+        for child in node.children.borrow().iter() {
+            if let NodeData::Element { name: ref child_name, .. } = child.data {
+                if child_name.local.as_ref() == "script" {
+                    let mut script_text = String::new();
+                    for grandchild in child.children.borrow().iter() {
+                        if let NodeData::Text { ref contents } = grandchild.data {
+                            script_text.push_str(&contents.borrow());
+                        }
+                    }
+                    out.push_str("<script>");
+                    out.push_str(&script_text);
+                    out.push_str("</script>");
+                }
+            }
+        }
+        out
+    }
+
+    /// Is this node a component wrapper that registers its OWN local state? Such
+    /// a node gets its own `_cN` id and `this.`→id pass when `walk_tag_and_extract`
+    /// reaches it, so an ancestor's rewrite must stop here — descending would let
+    /// the ancestor claim the nested component's bindings with the wrong id (the
+    /// DebugContent→ScalingModal empty-legend bug).
+    fn is_state_registering_component(node: &Handle) -> bool {
+        if let NodeData::Element { name, attrs, .. } = &node.data {
+            let tag_name = name.local.as_ref();
+            let borrowed = attrs.borrow();
+            let is_component = tag_name == "component" && !Self::has_src_attr(&borrowed);
+            let is_div_component = tag_name == "div"
+                && Self::has_class_component(&borrowed)
+                && !Self::has_src_attr(&borrowed);
+            if !(is_component || is_div_component) {
+                return false;
+            }
+            drop(borrowed);
+            return component_call_regex().is_match(&Self::direct_scripts_html(node));
+        }
+        false
+    }
+
     /// Rewrite `this.X` to `componentId.X` throughout a component's subtree:
     /// inside `@[...]` bindings (text + attributes, nested paths and multi-ref
     /// expressions) and inside if/each/else-if directive comments. Resolving the
@@ -312,8 +333,14 @@ impl ComponentTagger {
             }
         }
 
-        // Recurse into children
+        // Recurse into children — but STOP at a nested component that registers
+        // its own state. It owns the `this.` inside it and gets its own id +
+        // rewrite when walk_tag_and_extract reaches it; descending here would
+        // claim its bindings with this ancestor's id (the empty-legend bug).
         for child in node.children.borrow().iter() {
+            if Self::is_state_registering_component(child) {
+                continue;
+            }
             Self::rewrite_node_recursive(child, binding_regex, this_prop, state_this_prop, component_id);
         }
     }
@@ -394,6 +421,29 @@ mod tests {
         );
     }
 
+    #[test]
+    fn nested_component_this_resolves_to_own_id() {
+        // DebugContent → ScalingModal shape: a stateful component nested inside
+        // another stateful component, each owning its own `this.`. The outer's
+        // this.→id rewrite must STOP at the inner component boundary — otherwise
+        // it claims the inner's bindings/directives with the OUTER id before the
+        // inner is reached, and the inner's live state (registered under its own
+        // runtime id) never reaches the markup → empty each-loops, dead bindings.
+        let html = r#"<!DOCTYPE html><html><body><component><script>component({ outer: 1 })</script><outer-mark>@[this.outer]</outer-mark><component><script>component({ inner: 2, items: [] })</script><modal-root open="@[this.open]"><!-- each this.items as it --><inner-mark>@[this.inner]</inner-mark><!-- /each --></modal-root></component></component></body></html>"#;
+
+        let result = ComponentTagger::tag_components(html, &PathBuf::from(".")).unwrap();
+
+        // Outer is _c0 (visited first), inner is _c1 (reached on recursion).
+        assert!(result.html.contains("@[_c0.outer]"), "outer binding wrong: {}", result.html);
+        assert!(result.html.contains("@[_c1.inner]"), "inner binding not rewritten to own id: {}", result.html);
+        assert!(result.html.contains("each _c1.items as it"), "inner each not rewritten to own id: {}", result.html);
+        assert!(result.html.contains("open=\"@[_c1.open]\""), "inner attr binding not rewritten to own id: {}", result.html);
+        // The outer must NOT have claimed any of the inner's bindings/directives.
+        assert!(!result.html.contains("@[_c0.inner]"), "outer claimed inner text binding: {}", result.html);
+        assert!(!result.html.contains("each _c0.items"), "outer claimed inner each: {}", result.html);
+        assert!(!result.html.contains("@[_c0.open]"), "outer claimed inner attr binding: {}", result.html);
+    }
+
     #[test]
     fn tag_multiple_components() {
         // Each wrapper registers component-local state, so all three are tagged

package/compiler/src/parser/html.rs

@@ -367,6 +367,12 @@ impl HtmlParser {
             Some((open_tag.start(), close_end, props, slot_content))
         }).collect();
 
+        // Iter-prop components stay as runtime `<component src>` tags (see
+        // is_iter_prop_root). The content is the same for every match, so skip all.
+        if is_iter_prop_root(component_content) {
+            return result;
+        }
+
         // Replace from end to start (sorted descending by start position)
         let mut sorted = matches;
         sorted.sort_by(|a, b| b.0.cmp(&a.0));
@@ -449,6 +455,12 @@ impl HtmlParser {
                 };
 
                 if let Some(template) = external_cache.get(&normalized_src) {
+                    // Iter-prop components stay as runtime `<component src>` tags so the
+                    // runtime renders them via its __vibeiterprops path — inlining
+                    // breaks the enclosing loop's scope (see is_iter_prop_root).
+                    if is_iter_prop_root(template) {
+                        continue;
+                    }
                     let mut replacement = substitute_props(template, &props);
                     replacement = neuter_component_scripts(&replacement);
 
@@ -578,6 +590,30 @@ fn substitute_state_ref(body: &str, name: &str, replacement: &str) -> String {
 /// runtime's renderPropsAndSlot (runtime/component.js). Both sides must
 /// transform identically:
 ///   - exact `@[propName]` bindings (case-insensitive)
+/// Whether a component template's ROOT is an array-literal each
+/// (`<!-- each [expr] as a -->`). Such a component receives its iterable as a prop
+/// and depends on the runtime's `__vibeiterprops` indirection: the runtime
+/// evaluates the prop binding in the *enclosing* loop scope, stores the value in a
+/// global registry slot, and rewrites the each to iterate that slot. Inlining
+/// instead bakes the call-site's parent-loop alias straight into the each
+/// (`[card.signatureAbility]`); the runtime evaluates an array-literal iterable in
+/// GLOBAL scope (that's the registry-slot pattern), where the alias is undefined →
+/// the loop yields zero items (the empty AbilityCell / status-chip bug in compiled
+/// mode). So such components are NOT inlined — they stay as runtime
+/// `<component src>` tags, and the compiler ships their source so the runtime can
+/// fetch and instantiate them exactly as it does in non-compiled mode.
+fn is_iter_prop_root(template: &str) -> bool {
+    let t = template.trim_start();
+    t.strip_prefix("<!--")
+        .map(str::trim_start)
+        .and_then(|r| r.strip_prefix("each"))
+        .map(str::trim_start)
+        .is_some_and(|after| after.starts_with('['))
+}
+
+/// Substitute component props into a template.
+///
+/// Rewrites:
 ///   - prop identifiers inside other `@[expr]` bindings
 ///   - prop identifiers inside directive comments (`if` / `else if` / `each`)
 ///   - `$.propName` references inside event-handler attribute bodies
@@ -853,4 +889,59 @@ mod tests {
         // A literal prop after the `>=` prop still substitutes → tag parsed fully.
         assert!(out.contains(r#"n="7""#), "count not substituted: {out}");
     }
+
+    #[test]
+    fn each_root_component_is_left_for_runtime() {
+        // A component whose ROOT is an array-literal each (`<!-- each [prop] as a -->`)
+        // depends on the runtime's __vibeiterprops indirection (the runtime evaluates
+        // the prop in the enclosing loop scope and stashes it in a global registry
+        // slot the each iterates). Inlining bakes the parent-loop alias into the each
+        // (`[card.signatureAbility]`); the runtime evaluates array-literal iterables
+        // in GLOBAL scope, where that alias is undefined → zero items (the empty
+        // AbilityCell / status-chip bug). So such a component must NOT be inlined:
+        // leave the `<component src=...>` tag for the runtime to fetch and instantiate.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<!-- each cards as card --><card-section>"#,
+            r#"<component src="/components/AbilityCell.html" ability="@[card.signatureAbility]"></component>"#,
+            r#"</card-section><!-- /each -->"#,
+        );
+        // AbilityCell's root is an each over the `[ability]` array-literal prop.
+        let template = r#"<!-- each [ability] as a --><ability-tile><icon @[a.icon]></icon></ability-tile><!-- /each -->"#;
+        let mut cache = HashMap::new();
+        cache.insert("/components/AbilityCell.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        // Left un-inlined for the runtime, with its prop binding intact…
+        assert!(
+            out.contains(r#"<component src="/components/AbilityCell.html""#),
+            "each-root component must be left un-inlined for the runtime: {out}"
+        );
+        assert!(
+            out.contains(r#"ability="@[card.signatureAbility]""#),
+            "prop binding lost on un-inlined component: {out}"
+        );
+        // …and the parent-loop alias must NOT have been baked into an each iterable.
+        assert!(
+            !out.contains("each [card.signatureAbility]"),
+            "parent-loop alias was inlined into the component each (the bug): {out}"
+        );
+    }
+
+    #[test]
+    fn ordinary_component_still_inlines() {
+        // Guard: a normal component (root is NOT an array-literal each) must still
+        // inline as before — the skip is scoped to the iter-prop pattern only.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = r#"<page><component src="/components/Badge.html" label="@[title]"></component></page>"#;
+        let template = r#"<badge-pill>@[label]</badge-pill>"#;
+        let mut cache = HashMap::new();
+        cache.insert("/components/Badge.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        assert!(out.contains("<badge-pill>"), "ordinary component should inline: {out}");
+        assert!(!out.contains(r#"src="/components/Badge.html""#), "ordinary component src should be gone: {out}");
+    }
 }

package/package.json

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