@ape-egg/vibe 2.1.4 → 2.1.7

package/compiler/src/parser/html.rs

@@ -190,7 +190,7 @@ impl HtmlParser {
             // Find all tags that match loaded elements
             for (tag_name, element) in &self.cache {
                 // Match opening and closing tags with any attributes and children
-                let tag_pattern = format!(r"<{}(\s[^>]*)?>", regex::escape(tag_name));
+                let tag_pattern = format!(r"<{}(\s{})?>", regex::escape(tag_name), ATTR_RUN);
                 let tag_re = regex::Regex::new(&tag_pattern).unwrap();
                 let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
 
@@ -336,7 +336,7 @@ impl HtmlParser {
 
         // Match only the opening tag — slot content is extracted via depth-counting close search
         // to correctly handle slot content that contains </div> or nested <component> elements.
-        let pattern = format!(r#"<(component|div)\s+([^>]*)\bsrc="{}"\s*([^>]*)>"#, regex::escape(&normalized_src));
+        let pattern = format!(r#"<(component|div)\s+({attr})\bsrc="{src}"\s*({attr})>"#, attr = ATTR_RUN, src = regex::escape(&normalized_src));
         let open_re = regex::Regex::new(&pattern).unwrap();
 
         let matches: Vec<_> = open_re.captures_iter(&result).filter_map(|cap| {
@@ -393,7 +393,7 @@ impl HtmlParser {
         // Match only the opening component tag — slot content is extracted via depth-counting
         // to correctly handle slot content containing </div> or nested <component> elements.
         let open_re = regex::Regex::new(
-            r#"<(component|div)\s+([^>]*)\bsrc="([^"]+)"([^>]*)>"#
+            &format!(r#"<(component|div)\s+({attr})\bsrc="([^"]+)"({attr})>"#, attr = ATTR_RUN)
         ).unwrap();
 
         // Process one match at a time with re-scanning after each replacement.
@@ -503,6 +503,13 @@ fn neuter_component_scripts(html: &str) -> String {
     html.replace("<script type=\"module\"", "<script type=\"vibe-module\"")
 }
 
+/// A run of HTML attributes where `>` is permitted only inside a quoted value.
+/// Mirrors a real HTML tokenizer: a tag ends on an *unquoted* `>` only. Without
+/// this, a binding prop like `flipped="@[a >= b]"` truncates the open tag at the
+/// `>` inside its value, so the trailing attributes get mis-parsed (empty
+/// boolean props → literal `true`) and corrupt the inlined template.
+const ATTR_RUN: &str = r#"(?:"[^"]*"|'[^']*'|[^>"'])*"#;
+
 fn is_ident_byte(b: u8) -> bool {
     b.is_ascii_alphanumeric() || b == b'_' || b == b'$'
 }
@@ -775,4 +782,75 @@ mod tests {
         assert!(content[close..].starts_with("</component>"), "matched wrong close: {:?}", &content[close..close + 14]);
         assert!(content[close..].contains("<sibling>"), "sibling was swallowed into the component");
     }
+
+    #[test]
+    fn inline_component_tolerates_gt_in_prop_binding() {
+        // A component prop whose `@[...]` value contains a comparison operator
+        // (`>=`) must not truncate the open tag at the `>` *inside the value*.
+        // The flawed `[^>]*` attribute run cut the tag mid-attribute, so the
+        // trailing identifiers (`selectedBrawlers`, `length`) were mis-parsed as
+        // empty boolean props (→ literal `true`), rewriting the loop expression
+        // to `brawlHandCards(characters, true)` — which throws `true.includes is
+        // not a function` at runtime, so the card discs never render.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<page><component src="/components/remote/CardHand.html" "#,
+            r#"cards="@[brawlHandCards(characters, selectedBrawlers)]" "#,
+            r#"flipped="@[selectedBrawlers.length >= maxBrawlers]" "#,
+            r#"angle="16"></component></page>"#,
+        );
+        let template = concat!(
+            r#"<card-hand flipped="@[flipped]"><card-fan style="--angle: @[angle]deg">"#,
+            r#"<!-- each cards as card (card.id), i --><card-slot data-id="@[card.id]"></card-slot>"#,
+            r#"<!-- /each --></card-fan></card-hand>"#,
+        );
+        let mut cache = HashMap::new();
+        cache.insert("/components/remote/CardHand.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        // The loop expression must carry `selectedBrawlers` through untouched.
+        assert!(
+            out.contains("brawlHandCards(characters, selectedBrawlers)"),
+            "loop expression corrupted: {out}"
+        );
+        assert!(
+            !out.contains("brawlHandCards(characters, true)"),
+            "selectedBrawlers wrongly replaced with `true`: {out}"
+        );
+        // The binding prop keeps its full comparison expression.
+        assert!(
+            out.contains(r#"flipped="@[selectedBrawlers.length >= maxBrawlers]""#),
+            "flipped binding lost: {out}"
+        );
+        // A literal prop *after* the `>=` prop must still substitute — proof the
+        // tag was parsed to the real `>`, not the one inside the value.
+        assert!(out.contains("--angle: 16deg"), "angle not substituted: {out}");
+    }
+
+    #[test]
+    fn inline_custom_element_tolerates_gt_in_prop_binding() {
+        // Same defect in the custom-element inliner's `<tag(\s[^>]*)?>` regex.
+        // (Cached element tags are filename-derived single words — see element.rs.)
+        let mut parser = HtmlParser::new(std::path::PathBuf::from("."));
+        parser.cache.insert(
+            "gauge".to_string(),
+            Element::new(
+                "gauge".to_string(),
+                std::path::PathBuf::from("gauge.html"),
+                r#"<gauge-inner show="@[show]" n="@[count]"></gauge-inner>"#.to_string(),
+            ),
+        );
+
+        let page = r#"<page><gauge show="@[items.length >= max]" count="7"></gauge></page>"#;
+        let out = parser.inline_custom_elements(page);
+
+        // The `>=` inside the binding must not have truncated the open tag.
+        assert!(
+            out.contains(r#"show="@[items.length >= max]""#),
+            "show binding lost: {out}"
+        );
+        // A literal prop after the `>=` prop still substitutes → tag parsed fully.
+        assert!(out.contains(r#"n="7""#), "count not substituted: {out}");
+    }
 }

package/package.json

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

package/runtime/component.js

@@ -158,14 +158,41 @@ const transformScriptContent = (rawContent) => {
 export const executeCompiledComponentScripts = () => {
   const scripts = document.querySelectorAll('script[type="vibe-module"]');
   if (!scripts.length) return null;
+  advanceComponentCounterPastIds(document);
+  return runVibeModuleScripts(scripts);
+};
+
+// Same pipeline as the boot-time pass, but scoped to a freshly mounted subtree
+// (a conditional branch or iteration row) rather than the whole document. The
+// boot pass only sees component scripts that are in the page at boot; a branch
+// that mounts later — or RE-mounts after being unmounted — carries its own
+// inlined `vibe-module` scripts that must run each time so component-local state
+// (`component({...})` → `$._cN`) is re-registered. Without this, a re-opened
+// conditional restores its markup but its `<!-- each _cN.x -->` reads state that
+// was released on unmount (the AccountProgression overlay rendering blank on
+// second open).
+export const executeCompiledComponentScriptsIn = (nodes) => {
+  const scripts = [];
+  for (const node of nodes) {
+    if (node.nodeType !== 1) continue;
+    if (node.matches?.('script[type="vibe-module"]')) scripts.push(node);
+    node.querySelectorAll?.('script[type="vibe-module"]').forEach((s) => scripts.push(s));
+  }
+  if (!scripts.length) return null;
+  advanceComponentCounterPastIds(document);
+  return runVibeModuleScripts(scripts);
+};
 
-  // Build-time tagging already assigned _cN ids to wrappers; advance the
-  // runtime counter past them so freshly generated ids never collide.
-  document.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
+// Build-time tagging already assigned _cN ids to wrappers; advance the runtime
+// counter past them so freshly generated ids never collide.
+const advanceComponentCounterPastIds = (root) => {
+  root.querySelectorAll('[data-vibe-component-id]').forEach((el) => {
     const m = el.getAttribute('data-vibe-component-id')?.match(/^_c(\d+)$/);
     if (m) componentCounter = Math.max(componentCounter, Number(m[1]) + 1);
   });
+};
 
+const runVibeModuleScripts = (scripts) => {
   const asyncTasks = [];
   const claimed = new Set();
 

package/runtime/conditionals.js

@@ -3,7 +3,7 @@ import affected from './affected.js';
 import hydrate from './hydrate.js';
 import { createScopedState, renderAllIterations, initializeBlock, resolveIterationComponentProps } from './iterate.js';
 import { evalInScope } from './utils.js';
-import { collectComponentIds, releaseOrphanedComponentState } from './component.js';
+import { collectComponentIds, releaseOrphanedComponentState, executeCompiledComponentScriptsIn } from './component.js';
 
 // Registry of DOM nodes owned by conditional branches.
 // Maps a DOM node to { nodes: array_ref, index: number } so that
@@ -231,6 +231,13 @@ const mountBranch = (node, branchData, state, manifest, parentScope) => {
     }
   }
 
+  // Compiled pages inline each component's setup script as type="vibe-module".
+  // The boot-time pass only runs scripts present at boot, so a branch that
+  // mounts (or re-mounts after unmount) must run its own scripts here to
+  // re-register component-local state. Must happen BEFORE rendering nested
+  // iterations/conditionals so `<!-- each _cN.x -->` sees the registered state.
+  executeCompiledComponentScriptsIn(clonedNodes);
+
   // Recursively render any nested iterations and conditionals
   if (branchTree) {
     renderAllIterations(branchTree, scopedState, manifest, parentScope);