@ape-egg/vibe 2.0.0 → 2.1.1

package/compiler/src/compiler/iteration_optimizer.rs

@@ -60,6 +60,16 @@ fn extract_and_compile_iterations(html: &str) -> HashMap<String, CompiledIterati
                 continue;
             }
 
+            // Raw-HTML bindings can't ride a template literal: a batch function
+            // interpolates RawHtml via toString(), which escapes. Skip the batch
+            // function so the runtime renders these rows through clone+hydrate —
+            // the one place that implements $.unsafe semantics (innerHTML +
+            // inert subtree).
+            if template_html.contains("$.unsafe(") {
+                search_start = end_after;
+                continue;
+            }
+
             // Generate hash for this template
             let hash = generate_template_hash(template_html);
 
@@ -113,6 +123,54 @@ fn generate_template_hash(template: &str) -> String {
     format!("iter_{:x}", hash)
 }
 
+/// DOM element properties — set on the element, kept as value attributes in
+/// batch output. Mirrors DOM_PROPERTIES in runtime/constants.js.
+const DOM_PROPERTIES: &[&str] = &["value", "checked", "selected"];
+
+/// Attributes that keep their string value verbatim (never boolean-coerced).
+/// Mirrors VALUE_ATTRS in runtime/constants.js — the two lists must stay in
+/// lockstep or batch and clone paths render different attributes.
+const VALUE_ATTRS: &[&str] = &[
+    "class", "style", "id", "title", "lang", "dir", "tabindex", "accesskey",
+    "slot", "part", "is", "nonce", "popover", "anchor",
+    "contenteditable", "draggable", "spellcheck", "translate",
+    "autocapitalize", "inputmode", "enterkeyhint", "virtualkeyboardpolicy",
+    "href", "src", "action", "cite", "data", "poster", "srcset",
+    "imagesrcset", "formaction", "ping", "usemap", "manifest", "codebase",
+    "name", "type", "value", "placeholder", "pattern", "min", "max", "step",
+    "minlength", "maxlength", "size", "accept", "autocomplete", "list",
+    "form", "formmethod", "formtarget", "formenctype", "wrap", "method",
+    "enctype", "for", "dirname",
+    "alt", "label", "summary", "abbr",
+    "width", "height", "cols", "rows", "span", "rowspan", "colspan",
+    "low", "high", "optimum",
+    "target", "rel", "hreflang", "download", "as", "media", "charset",
+    "crossorigin", "integrity", "loading", "decoding", "fetchpriority",
+    "referrerpolicy", "blocking", "imagesizes", "sizes",
+    "preload", "kind", "srclang",
+    "content", "http-equiv",
+    "sandbox", "allow", "srcdoc", "credentialless",
+    "headers", "scope",
+    "datetime",
+    "coords", "shape",
+];
+
+/// Whether an attribute keeps its string value (vs boolean coercion).
+/// Mirrors isValueStyleAttr in runtime/iterate.js.
+fn is_value_style_attr(name: &str) -> bool {
+    VALUE_ATTRS.contains(&name)
+        || name.starts_with("data-")
+        || name.starts_with("aria-")
+        || name.starts_with("on")
+}
+
+/// Escape a static text chunk for a JS template-literal context.
+fn escape_tpl_text(text: &str) -> String {
+    text.replace('\\', "\\\\")
+        .replace('`', "\\`")
+        .replace("${", "\\${")
+}
+
 /// Compile template HTML to a batch function string
 /// Supports nested <!-- each --> blocks
 fn compile_template_to_batch_fn(
@@ -120,134 +178,120 @@ fn compile_template_to_batch_fn(
     item_alias: &str,
     index_alias: &str,
 ) -> String {
-    // Process nested iterations first
-    let processed_template = process_nested_iterations(template);
-
-    // Replace @[expr] with ${expr}
-    let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
-    let with_bindings = binding_re.replace_all(&processed_template, |caps: &regex::Captures| {
-        format!("${{{}}}", &caps[1])
-    });
-
-    // Fix boolean attributes: remove ="" from attributes to match CSS selectors
-    // Converts: <div attr=""> to <div attr>
+    // Normalize static boolean attributes: <div attr=""> → <div attr>
+    // (matches CSS attribute selectors). Runs on raw template text, before
+    // emission — emitted JS below also contains attr="" inside string
+    // literals, which must not be touched.
     let boolean_attr_re = Regex::new(r#"(\w+)="""#).unwrap();
-    let with_boolean_attrs = boolean_attr_re.replace_all(&with_bindings, "$1");
+    let cleaned = boolean_attr_re.replace_all(template, "$1");
 
-    // Escape backslashes only (backticks are fine in JSON strings)
-    let escaped = with_boolean_attrs
-        .replace('\\', "\\\\");
+    let body = emit_template_literal(&cleaned);
 
-    // Generate batch function
     format!(
-        r#"(arr, $) => {{ let html = ''; const len = arr.length; for (let {index} = 0; {index} < len; {index}++) {{ const {item} = arr[{index}]; html += `{template}`; }} return html; }}"#,
+        r#"(arr, $) => {{ let html = ''; const len = arr.length; for (let {index} = 0; {index} < len; {index}++) {{ const {item} = arr[{index}]; html += `{body}`; }} return html; }}"#,
         index = index_alias,
         item = item_alias,
-        template = escaped
+        body = body
     )
 }
 
-/// Process nested <!-- each --> blocks recursively
-/// Replaces nested iterations with inline loop code
-fn process_nested_iterations(template: &str) -> String {
+/// Emit the body of a JS template literal for a template chunk:
+///   - static text escaped for template-literal context
+///   - attribute pure bindings classified like hydrate.js / compileBatchFn:
+///     DOM properties and value-style attributes keep `attr="${expr}"`,
+///     boolean-coerced attributes become `${(expr) ? ' attr=""' : ''}` so the
+///     attribute is ABSENT when falsy and present-empty when truthy
+///   - remaining @[expr] bindings (text content, partial attribute values)
+///     become `${expr}` interpolations
+///   - nested <!-- each --> blocks become inline IIFE loops, recursively
+///
+/// Anything the runtime clone+hydrate path renders, this output has to render
+/// identically — it is the compiled twin of compileBatchFn in runtime/iterate.js.
+fn emit_template_literal(template: &str) -> String {
     let each_re = Regex::new(r"<!--\s*each\s+([^\s]+)\s+as\s+([^\s,]+)(?:\s*,\s*([^\s]+))?\s*-->").unwrap();
     let end_re = Regex::new(r"<!--\s*/each\s*-->").unwrap();
-
-    let mut result = template.to_string();
-    let mut replacements = Vec::new();
-
-    // Find all nested iterations
-    let mut search_start = 0;
-    while let Some(start_match) = each_re.find_at(&result, search_start) {
-        let captures = each_re.captures(&result[start_match.start()..]).unwrap();
-        let array_path = captures.get(1).unwrap().as_str();
-        let item_alias = captures.get(2).unwrap().as_str();
-        let index_alias = captures.get(3).map(|m| m.as_str()).unwrap_or("index");
-
-        let template_start = start_match.end();
-
-        // Find matching <!-- /each --> using depth counting
-        if let Some((end_pos, _)) = find_matching_each_end(&result, template_start) {
-            let inner_template = &result[template_start..end_pos];
-
-            // Recursively process inner template
-            let processed_inner = process_nested_iterations(inner_template);
-
-            // For nested iterations, convert to string concatenation
-            // Uses JSON string escaping which is valid JavaScript
-            let inner_concat_code = convert_to_string_concat(&processed_inner, item_alias, index_alias, array_path);
-
-            let nested_code = format!("${{(() => {{ let inner = ''; const len_{idx} = {arr}.length; for (let {idx} = 0; {idx} < len_{idx}; {idx}++) {{ const {item} = {arr}[{idx}]; {code} }} return inner; }})()}}",
-                idx = index_alias,
-                arr = array_path,
-                item = item_alias,
-                code = inner_concat_code
-            );
-
-            // Store replacement (from start to end including comments)
-            let end_match = end_re.find_at(&result, end_pos).unwrap();
-            replacements.push((start_match.start(), end_match.end(), nested_code));
-
-            search_start = end_match.end();
-        } else {
-            break;
-        }
-    }
-
-    // Apply replacements in reverse order to maintain positions
-    for (start, end, replacement) in replacements.iter().rev() {
-        result.replace_range(*start..*end, replacement);
-    }
-
-    result
-}
-
-/// Convert template to string concatenation code using template literals
-/// Parses @[expr] and converts to: inner += `text${expr}more text`;
-/// Template literals properly handle newlines without escaping
-/// NOTE: Backslashes and ${ need escaping, but backticks don't (they'll be in JSON)
-fn convert_to_string_concat(template: &str, _item_alias: &str, _index_alias: &str, _array_path: &str) -> String {
+    let attr_binding_re = Regex::new(r#"(\s)([\w-]+)="@\[([^\]]+)\]""#).unwrap();
     let binding_re = Regex::new(r"@\[([^\]]+)\]").unwrap();
 
-    // Build template literal with ${} expressions
-    let mut result = String::from("inner += `");
-    let mut last_end = 0;
-
-    for cap in binding_re.captures_iter(template) {
-        let match_start = cap.get(0).unwrap().start();
-        let match_end = cap.get(0).unwrap().end();
-        let expr = &cap[1];
-
-        // Add text before this binding
-        if match_start > last_end {
-            let text = &template[last_end..match_start];
-            // For template literals: only escape backslashes and ${ sequences
-            // Don't escape backticks - they're fine in JSON and we want them as-is
-            let escaped = text
-                .replace('\\', "\\\\")   // Escape backslashes
-                .replace("${", "\\${");  // Escape template literal expression markers
-            result.push_str(&escaped);
+    let mut out = String::new();
+    let mut pos = 0;
+
+    while pos < template.len() {
+        let next_each = each_re.find_at(template, pos);
+        let next_attr = attr_binding_re.find_at(template, pos);
+        let next_binding = binding_re.find_at(template, pos);
+
+        // Earliest match wins; attr-binding outranks plain binding at the same
+        // region (the plain regex would match inside the attr form).
+        let candidates = [
+            next_each.map(|m| (m.start(), 0u8)),
+            next_attr.map(|m| (m.start(), 1u8)),
+            next_binding.map(|m| (m.start(), 2u8)),
+        ];
+        let Some(&(start, kind)) = candidates
+            .iter()
+            .flatten()
+            .min_by_key(|(s, k)| (*s, *k))
+        else {
+            out.push_str(&escape_tpl_text(&template[pos..]));
+            break;
+        };
+
+        out.push_str(&escape_tpl_text(&template[pos..start]));
+
+        match kind {
+            0 => {
+                // Nested <!-- each --> → inline IIFE loop
+                let m = next_each.unwrap();
+                let caps = each_re.captures(&template[m.start()..]).unwrap();
+                let arr = caps.get(1).unwrap().as_str();
+                let item = caps.get(2).unwrap().as_str();
+                let idx = caps.get(3).map(|c| c.as_str()).unwrap_or("index");
+
+                if let Some((end_pos, _)) = find_matching_each_end(template, m.end()) {
+                    let inner = emit_template_literal(&template[m.end()..end_pos]);
+                    out.push_str(&format!(
+                        "${{(() => {{ let inner = ''; const len_{idx} = {arr}.length; for (let {idx} = 0; {idx} < len_{idx}; {idx}++) {{ const {item} = {arr}[{idx}]; inner += `{inner_body}`; }} return inner; }})()}}",
+                        idx = idx,
+                        arr = arr,
+                        item = item,
+                        inner_body = inner
+                    ));
+                    let end_match = end_re.find_at(template, end_pos).unwrap();
+                    pos = end_match.end();
+                } else {
+                    // Unbalanced each — emit as text and move on
+                    out.push_str(&escape_tpl_text(&template[m.start()..m.end()]));
+                    pos = m.end();
+                }
+            }
+            1 => {
+                // Attribute pure binding: attr="@[expr]"
+                let m = next_attr.unwrap();
+                let caps = attr_binding_re.captures(&template[m.start()..]).unwrap();
+                let ws = caps.get(1).unwrap().as_str();
+                let name = caps.get(2).unwrap().as_str();
+                let expr = caps.get(3).unwrap().as_str();
+                let name_lc = name.to_lowercase();
+
+                if DOM_PROPERTIES.contains(&name_lc.as_str()) || is_value_style_attr(&name_lc) {
+                    out.push_str(&format!("{ws}{name}=\"${{{expr}}}\""));
+                } else {
+                    out.push_str(&format!("${{({expr}) ? ' {name}=\"\"' : ''}}"));
+                }
+                pos = m.end();
+            }
+            _ => {
+                // Plain binding: text content or partial attribute value
+                let m = next_binding.unwrap();
+                let caps = binding_re.captures(&template[m.start()..]).unwrap();
+                out.push_str(&format!("${{{}}}", caps.get(1).unwrap().as_str()));
+                pos = m.end();
+            }
         }
-
-        // Add expression
-        result.push_str("${");
-        result.push_str(expr);
-        result.push_str("}");
-
-        last_end = match_end;
-    }
-
-    // Add remaining text
-    if last_end < template.len() {
-        let text = &template[last_end..];
-        let escaped = text
-            .replace('\\', "\\\\")
-            .replace("${", "\\${");
-        result.push_str(&escaped);
     }
 
-    result.push_str("`;");
-    result
+    out
 }
 
 /// Find matching <!-- /each --> comment using depth counting
@@ -323,6 +367,38 @@ mod tests {
         assert_eq!(compiled.index_alias, "idx");
     }
 
+    #[test]
+    fn test_boolean_attr_binding_emits_conditional_presence() {
+        let html = r#"
+            <!-- each items as item -->
+            <attr-target open="@[flag]" href="@[item.url]" value="@[item.v]"></attr-target>
+            <!-- /each -->
+        "#;
+
+        let opts = build_iteration_optimizations(html);
+        let iterations = &opts.unwrap().iterations;
+        let (_, compiled) = iterations.iter().next().unwrap();
+
+        // Boolean-coerced attribute: absent when falsy, present-empty when truthy
+        assert!(compiled.batch_fn.contains(r#"${(flag) ? ' open=""' : ''}"#));
+        // Value-style attribute keeps its string value
+        assert!(compiled.batch_fn.contains(r#"href="${item.url}""#));
+        // DOM property keeps its value form
+        assert!(compiled.batch_fn.contains(r#"value="${item.v}""#));
+    }
+
+    #[test]
+    fn test_unsafe_template_skips_batch_fn() {
+        let html = r#"
+            <!-- each rows as row -->
+            <li>@[$.unsafe(row.markup)]</li>
+            <!-- /each -->
+        "#;
+
+        // RawHtml semantics can't ride a template literal — no batch function
+        assert!(build_iteration_optimizations(html).is_none());
+    }
+
     #[test]
     fn test_nested_iteration_compiled() {
         let html = r#"

package/compiler/src/compiler/manifest_builder.rs

@@ -395,19 +395,15 @@ impl ManifestBuilder {
             }
         }
 
-        // Extract template HTML between start and end
+        // Extract template HTML between start and end — VERBATIM, including
+        // whitespace-only text nodes. The manifest's child keys are childNodes
+        // indices computed on the pre-stamp DOM; restoration re-inserts this
+        // template, and only an exact node-count round-trip keeps those
+        // indices valid for every sibling that follows the restored region.
         if let Some(end) = end_idx {
             let template_nodes: Vec<_> = siblings.iter()
                 .skip(start_idx + 1)
                 .take(end - start_idx - 1)
-                .filter(|node| {
-                    // Skip whitespace-only text nodes
-                    if let NodeData::Text { contents } = &node.data {
-                        !contents.borrow().trim().is_empty()
-                    } else {
-                        true // Keep all non-text nodes
-                    }
-                })
                 .collect();
 
             return self.serialize_nodes(&template_nodes);

package/compiler/src/parser/html.rs

@@ -195,7 +195,7 @@ impl HtmlParser {
                 let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
 
                 // Find all occurrences
-                let mut matches: Vec<(usize, usize, String, HashMap<String, String>)> = Vec::new();
+                let mut matches: Vec<(usize, usize, String, Vec<(String, String)>)> = Vec::new();
 
                 // Find opening tags
                 for cap in tag_re.find_iter(&result) {
@@ -228,14 +228,9 @@ impl HtmlParser {
                 // Replace from end to start to maintain indices
                 matches.reverse();
                 for (start, end, slot_content, props) in matches {
-                    let mut replacement = element.content.clone();
-
-                    // Replace props: for each prop like headline="@[pageTitle]",
-                    // replace @[headline] in content with @[pageTitle]
-                    for (prop_name, prop_value) in props {
-                        let prop_binding = format!("@[{}]", prop_name);
-                        replacement = replacement.replace(&prop_binding, &prop_value);
-                    }
+                    // Substitute props with full runtime parity (bindings,
+                    // expressions, directive comments, event handlers)
+                    let mut replacement = substitute_props(&element.content, &props);
 
                     // Replace <slot> tags — wrap children in <slot> boundary, or remove if empty
                     let slot_wrapped = if slot_content.trim().is_empty() {
@@ -360,7 +355,10 @@ impl HtmlParser {
             let slot_content = result[open_end..close_start].to_string();
 
             let attrs_str = format!("{} {}", attrs_before, attrs_after);
-            let props = Self::parse_props(&attrs_str);
+            let props: Vec<(String, String)> = Self::parse_props(&attrs_str)
+                .into_iter()
+                .filter(|(n, _)| n != "src" && n != "class")
+                .collect();
 
             Some((open_tag.start(), close_end, props, slot_content))
         }).collect();
@@ -370,12 +368,8 @@ impl HtmlParser {
         sorted.sort_by(|a, b| b.0.cmp(&a.0));
 
         for (start, end, props, slot_content) in &sorted {
-            let mut replacement = component_content.to_string();
-
-            for (prop_name, prop_value) in props {
-                let prop_binding = format!("@[{}]", prop_name);
-                replacement = replacement.replace(&prop_binding, prop_value);
-            }
+            let mut replacement = substitute_props(component_content, props);
+            replacement = neuter_component_scripts(&replacement);
 
             let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
             replacement = replacement.replace("<slot></slot>", &slot_wrapped);
@@ -425,7 +419,10 @@ impl HtmlParser {
                 let slot_content = result[open_end..close_start].to_string();
 
                 let attrs_str = format!("{} {}", attrs_before, attrs_after);
-                let props = Self::parse_props(&attrs_str);
+                let props: Vec<(String, String)> = Self::parse_props(&attrs_str)
+                    .into_iter()
+                    .filter(|(n, _)| n != "src" && n != "class")
+                    .collect();
 
                 Some((open_tag.start(), close_end, src.to_string(), props, slot_content))
             }).collect();
@@ -447,11 +444,9 @@ impl HtmlParser {
                     }
                 };
 
-                if let Some(mut replacement) = external_cache.get(&normalized_src).cloned() {
-                    for (prop_name, prop_value) in &props {
-                        let prop_binding = format!("@[{}]", prop_name);
-                        replacement = replacement.replace(&prop_binding, prop_value);
-                    }
+                if let Some(template) = external_cache.get(&normalized_src) {
+                    let mut replacement = substitute_props(template, &props);
+                    replacement = neuter_component_scripts(&replacement);
 
                     let slot_wrapped = if slot_content.trim().is_empty() { String::new() } else { format!("<slot>{}</slot>", slot_content) };
                     replacement = replacement.replace("<slot></slot>", &slot_wrapped);
@@ -473,24 +468,192 @@ impl HtmlParser {
         result
     }
 
-    /// Parse component props from attributes string
-    /// Example: ` headline="@[pageTitle]" theme="dark"` -> {"headline": "@[pageTitle]", "theme": "dark"}
-    fn parse_props(attrs_str: &str) -> HashMap<String, String> {
-        let mut props = HashMap::new();
+    /// Parse component props from attributes string, in source order.
+    /// Supports valued (`headline="@[pageTitle]"`) and bare boolean
+    /// (`dndDisabled`) attributes — the runtime receives bare attributes from
+    /// the DOM with an empty-string value, so they're captured the same here.
+    fn parse_props(attrs_str: &str) -> Vec<(String, String)> {
+        let mut props = Vec::new();
 
-        // Match attribute="value" pairs
-        let attr_re = regex::Regex::new(r#"(\w+)="([^"]*)""#).unwrap();
+        let attr_re = regex::Regex::new(r#"([\w-]+)(?:="([^"]*)")?"#).unwrap();
 
         for cap in attr_re.captures_iter(attrs_str) {
-            if let (Some(name), Some(value)) = (cap.get(1), cap.get(2)) {
-                props.insert(name.as_str().to_string(), value.as_str().to_string());
-            }
+            let name = cap.get(1).unwrap().as_str().to_string();
+            let value = cap.get(2).map(|m| m.as_str().to_string()).unwrap_or_default();
+            props.push((name, value));
         }
 
         props
     }
 }
 
+/// Neuter component scripts inlined from `<component src>` templates:
+/// `<script type="module">` becomes `<script type="vibe-module">` so the
+/// browser does NOT execute it as a native page module (wrong timing —
+/// pre-boot, placeholder `$`, no live state merge). The runtime executes
+/// vibe-module scripts through the same injected-component() path it uses
+/// for fetched component scripts, giving compiled and runtime pages one
+/// script-execution pipeline with identical semantics. Runs before slot
+/// inlining so caller-authored slot scripts stay native.
+fn neuter_component_scripts(html: &str) -> String {
+    html.replace("<script type=\"module\"", "<script type=\"vibe-module\"")
+}
+
+fn is_ident_byte(b: u8) -> bool {
+    b.is_ascii_alphanumeric() || b == b'_' || b == b'$'
+}
+
+/// Case-insensitive free-identifier substitution, mirroring the runtime's
+/// renderPropsAndSlot idRegex: the name must not be preceded by an identifier
+/// character or `.` (property access) and not followed by an identifier
+/// character. Case-insensitive because HTML lowercases attribute names while
+/// component templates reference the author's camelCase identifiers.
+fn substitute_identifier(expr: &str, name: &str, replacement: &str) -> String {
+    let bytes = expr.as_bytes();
+    let nb = name.as_bytes();
+    let nlen = nb.len();
+    if nlen == 0 {
+        return expr.to_string();
+    }
+    let mut out: Vec<u8> = Vec::with_capacity(bytes.len());
+    let mut i = 0;
+    while i < bytes.len() {
+        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'.'))
+            && (i + nlen == bytes.len() || !is_ident_byte(bytes[i + nlen]))
+        {
+            out.extend_from_slice(replacement.as_bytes());
+            i += nlen;
+        } else {
+            out.push(bytes[i]);
+            i += 1;
+        }
+    }
+    String::from_utf8(out).unwrap()
+}
+
+/// `$.propName` rewrites inside event-handler bodies (the runtime's stateRegex
+/// pass): for a binding prop `value="@[email]"`, `$.value = this.value`
+/// becomes `$.email = this.value` — DOM property reads (`this.value`) stay.
+fn substitute_state_ref(body: &str, name: &str, replacement: &str) -> String {
+    let bytes = body.as_bytes();
+    let nb = name.as_bytes();
+    let nlen = nb.len();
+    if nlen == 0 {
+        return body.to_string();
+    }
+    let mut out: Vec<u8> = Vec::with_capacity(bytes.len());
+    let mut i = 0;
+    while i < bytes.len() {
+        if bytes[i] == b'$'
+            && i + 2 + nlen <= bytes.len()
+            && bytes[i + 1] == b'.'
+            && bytes[i + 2..i + 2 + nlen].eq_ignore_ascii_case(nb)
+            && (i + 2 + nlen == bytes.len() || !is_ident_byte(bytes[i + 2 + nlen]))
+        {
+            out.extend_from_slice(b"$.");
+            out.extend_from_slice(replacement.as_bytes());
+            i += 2 + nlen;
+        } else {
+            out.push(bytes[i]);
+            i += 1;
+        }
+    }
+    String::from_utf8(out).unwrap()
+}
+
+/// Substitute component props into a template — the compiled twin of the
+/// runtime's renderPropsAndSlot (runtime/component.js). Both sides must
+/// transform identically:
+///   - exact `@[propName]` bindings (case-insensitive)
+///   - prop identifiers inside other `@[expr]` bindings
+///   - prop identifiers inside directive comments (`if` / `else if` / `each`)
+///   - `$.propName` references inside event-handler attribute bodies
+/// Binding props (`prop="@[path]"`) rewrite identifiers to the bound path;
+/// literal props inject the value (bare boolean attrs → true, strings
+/// JSON-quoted, numerics raw).
+fn substitute_props(template: &str, props: &[(String, String)]) -> String {
+    let binding_re = regex::Regex::new(r"@\[([^\]]+)\]").unwrap();
+    let directive_re = regex::Regex::new(r"(?s)<!--\s*(if|else if|each)\s+(.*?)\s*-->").unwrap();
+    let event_re = regex::Regex::new(r#"\bon(\w+)="([^"]*)""#).unwrap();
+    let numeric_re = regex::Regex::new(r"(?i)^-?\d+(\.\d+)?(e[+-]?\d+)?$").unwrap();
+
+    let mut html = template.to_string();
+
+    for (prop_name, prop_value) in props {
+        let exact_re =
+            regex::Regex::new(&format!(r"(?i)@\[{}\]", regex::escape(prop_name))).unwrap();
+
+        let binding_path = prop_value
+            .strip_prefix("@[")
+            .and_then(|v| v.strip_suffix(']'));
+
+        let (exact_repl, ident_repl, each_repl, state_repl) = if let Some(path) = binding_path {
+            (
+                format!("@[{}]", path),
+                format!("({})", path),
+                path.to_string(),
+                path.to_string(),
+            )
+        } else {
+            let literal = if prop_value.is_empty() {
+                "true".to_string()
+            } else if numeric_re.is_match(prop_value) {
+                prop_value.clone()
+            } else {
+                serde_json::to_string(prop_value).unwrap()
+            };
+            (prop_value.clone(), literal.clone(), literal.clone(), literal)
+        };
+
+        html = exact_re
+            .replace_all(&html, regex::NoExpand(exact_repl.as_str()))
+            .to_string();
+
+        html = binding_re
+            .replace_all(&html, |c: &regex::Captures| {
+                let expr = c.get(1).unwrap().as_str();
+                let rewritten = substitute_identifier(expr, prop_name, &ident_repl);
+                if rewritten == expr {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!("@[{}]", rewritten)
+                }
+            })
+            .to_string();
+
+        html = directive_re
+            .replace_all(&html, |c: &regex::Captures| {
+                let kw = c.get(1).unwrap().as_str();
+                let expr = c.get(2).unwrap().as_str();
+                let repl = if kw == "each" { each_repl.as_str() } else { ident_repl.as_str() };
+                let rewritten = substitute_identifier(expr, prop_name, repl);
+                if rewritten == expr {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!("<!-- {} {} -->", kw, rewritten)
+                }
+            })
+            .to_string();
+
+        html = event_re
+            .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);
+                if rewritten == body {
+                    c.get(0).unwrap().as_str().to_string()
+                } else {
+                    format!(r#"on{}="{}""#, ev, rewritten)
+                }
+            })
+            .to_string();
+    }
+
+    html
+}
+
 /// Transform custom HTML elements to divs with classes
 fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) -> String {
     let mut result = content.to_string();

package/llms.txt

@@ -289,7 +289,7 @@ window.$ = vibe(
 
 **Parameters:**
 - `initialState` — object containing initial state values
-- `config` — optional object. Currently supports `{ debug: boolean }`. A third positional argument can pass a target selector (defaults to `body`).
+- `config` — optional object. Supports `{ debug: boolean, noCache: boolean }` (`noCache` disables the component template cache — components are otherwise fetched once per `src` and reused across instances/navigation). A third positional argument can pass a target selector (defaults to `body`).
 
 **Returns:** Reactive proxy. Assign it to `window.$` so inline event handlers and bindings can find it.