From 99779c22b13360ae9f7993adfeaef4cd948a5819 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 17:06:21 -0800
Subject: [PATCH 1/7] Rewrite process_component_directive with component-aware
 attribute handling

Rewrite the component directive processing to match the Node.js reference
implementation for entry stream and component template stream handling.

Entry stream changes:
- Emit opening tag, attributes, closing bracket as separate fragments
- Add process_component_tag_attributes for component-specific attribute logic
- Static attrs on components emit as attribute fragments with rawValue
- First dynamic/static attribute gets attrStart marker
- Skipped attrs (class, style, role, data-*, aria-*) get attrSkip
- Process slot children with full directive support

Component template stream changes:
- Add process_component_template for shadow DOM wrapping
- Skip double-wrapping when template already has <template> tag
- Inject stylesheet link after opening template tag
- Strip @/:/?-prefixed runtime attributes from template tags
- Derive CSS path as {tag_name}.css when component has CSS content

Update existing tests and add new tests for:
- No double-wrap of existing template elements
- Styled component template with existing template tag
- Runtime attribute stripping from template tags
- Component with static attributes and slots
- Legacy components without styles
- Self-closing components with dynamic attributes
- Nested self-closing tags in component slots
- Boolean attribute with attrStart marking
- Meta/link tags with dynamic attributes

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 crates/webui-parser/src/lib.rs | 719 ++++++++++++++++++++++++++++-----
 1 file changed, 608 insertions(+), 111 deletions(-)

diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index adf2d4f7..daaacb8d 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -17,7 +17,8 @@ use std::collections::HashMap;
 use tree_sitter::{Node, Parser, Query, QueryCursor, StreamingIteratorMut};
 use tree_sitter_html::LANGUAGE;
 use webui_protocol::{
-    web_ui_fragment::Fragment, ConditionExpr, FragmentList, WebUIFragment, WebUIFragmentRecords,
+    web_ui_fragment, web_ui_fragment::Fragment, ConditionExpr, FragmentList, WebUIFragment,
+    WebUIFragmentAttribute, WebUIFragmentRecords,
 };
 
 /// Counter for generating unique fragment IDs.
@@ -164,12 +165,6 @@ impl HtmlParser {
         fragments.push(WebUIFragment::if_cond(condition, fragment_id));
     }
 
-    /// Add a component fragment, flushing raw buffer first
-    fn add_component_fragment(&mut self, fragment_id: String, fragments: &mut Vec<WebUIFragment>) {
-        self.flush_raw_buffer(fragments);
-        fragments.push(WebUIFragment::component(fragment_id));
-    }
-
     /// Add a non-raw fragment, flushing the raw buffer first if needed
     fn add_fragment(&mut self, fragment: WebUIFragment, fragments: &mut Vec<WebUIFragment>) {
         self.flush_raw_buffer(fragments);
@@ -787,7 +782,18 @@ impl HtmlParser {
         Ok(())
     }
 
-    // Simplify the process_component_directive method
+    /// Skipped attribute names for components.
+    const SKIPPED_ATTRIBUTES: &[&str] = &["class", "style", "role"];
+    /// Skipped attribute prefixes for components.
+    const SKIPPED_ATTRIBUTE_PREFIXES: &[&str] = &["data-", "aria-"];
+
+    fn is_skipped_attribute(name: &str) -> bool {
+        Self::SKIPPED_ATTRIBUTES.contains(&name)
+            || Self::SKIPPED_ATTRIBUTE_PREFIXES
+                .iter()
+                .any(|prefix| name.starts_with(prefix))
+    }
+
     fn process_component_directive(
         &mut self,
         node: Node,
@@ -795,65 +801,318 @@ impl HtmlParser {
         fragments: &mut Vec<WebUIFragment>,
         tag_name: &str,
     ) -> Result<()> {
-        // Build opening tag with attributes
-        let mut opening_tag = format!("<{}", tag_name);
-        for child in node.named_children(&mut node.walk()) {
-            if child.kind() == "attribute" {
-                let attr_text = &source[child.start_byte()..child.end_byte()];
-                opening_tag.push_str(attr_text);
-            }
+        let tag_node = self.find_tag_node(node);
+        let is_self_closing = tag_node
+            .map(|n| n.kind() == "self_closing_tag")
+            .unwrap_or(false);
+
+        // Emit "<tagname"
+        self.add_raw_fragment(&format!("<{}", tag_name));
+
+        // Process attributes — component-aware
+        if let Some(tag_node) = tag_node {
+            self.process_component_tag_attributes(tag_node, source, fragments)?;
         }
-        opening_tag.push('>');
 
-        // Add shadow DOM template opening
-        let start_content = format!("{}<template shadowrootmode=\"open\">", opening_tag);
-        self.add_raw_fragment(&start_content);
+        if is_self_closing {
+            let tag_text = tag_node
+                .map(|n| &source[n.start_byte()..n.end_byte()])
+                .unwrap_or("");
+            if tag_text.ends_with("/>") {
+                self.add_raw_fragment("/>");
+            } else {
+                self.add_raw_fragment(">");
+            }
+        } else {
+            self.add_raw_fragment(">");
+        }
 
-        // Explicitly flush the buffer to create a Raw fragment with the opening content
+        // Flush before component fragment
         self.flush_raw_buffer(fragments);
 
-        // Get the component data we need
-        let html_content;
-        {
+        // Get component data
+        let (html_content, css_content) = {
             let component = self.component_registry.get(tag_name).ok_or_else(|| {
                 ParserError::Directive(format!("Component not found: {}", tag_name))
             })?;
-            html_content = component.html_content.clone();
-        }
+            (
+                component.html_content.clone(),
+                component.css_content.clone(),
+            )
+        };
 
-        // Check if we need to parse the component template
+        // Parse and register component template if not already done
         if !self.fragment_records.contains_key(tag_name) {
-            // Parse component HTML content and add to fragment records
-            let _ = self.parse(tag_name, &html_content);
+            let has_css = css_content.is_some();
+            let css_path = if has_css {
+                Some(format!("{}.css", tag_name))
+            } else {
+                None
+            };
+            let processed = self.process_component_template(&html_content, css_path.as_deref());
+            self.parse(tag_name, &processed)?;
         }
 
-        // Add component fragment directly to output fragments - buffer is already flushed
-        self.add_component_fragment(tag_name.to_string(), fragments);
+        // Emit component fragment
+        fragments.push(WebUIFragment::component(tag_name.to_string()));
 
-        // Start building the closing part with template end
-        self.add_raw_fragment("</template>");
-
-        // Process slot content
-        for child in node.named_children(&mut node.walk()) {
-            if child.kind() != "start_tag" && child.kind() != "end_tag" {
-                if child.kind() == "element" {
-                    // For element slots, extract the full source text
-                    let slot_content = &source[child.start_byte()..child.end_byte()];
-                    self.add_raw_fragment(slot_content);
-                } else {
-                    // For text nodes and others, use normal processing
+        // Process slot content (skip start_tag/end_tag/self_closing_tag)
+        if !is_self_closing {
+            for child in node.named_children(&mut node.walk()) {
+                let kind = child.kind();
+                if kind != "start_tag" && kind != "end_tag" && kind != "self_closing_tag" {
                     self.process_child_node(child, source, fragments)?;
                 }
             }
         }
 
-        // Add closing component tag
-        self.add_raw_fragment(&format!("</{}>", tag_name));
+        // Emit closing tag
+        if !is_self_closing {
+            self.add_raw_fragment(&format!("</{}>", tag_name));
+        }
+
+        Ok(())
+    }
 
-        // Don't flush here to let it combine with any subsequent raw content
+    fn process_component_tag_attributes(
+        &mut self,
+        tag_node: Node,
+        source: &str,
+        fragments: &mut Vec<WebUIFragment>,
+    ) -> Result<()> {
+        // First pass: collect all attributes
+        let mut attrs: Vec<(String, Option<String>)> = Vec::new();
+
+        let mut cursor = tag_node.walk();
+        for child in tag_node.named_children(&mut cursor) {
+            if child.kind() != "attribute" {
+                continue;
+            }
+            let name = self.get_attr_name(child, source)?;
+            let value = self.get_attr_value(child, source);
+            attrs.push((name, value));
+        }
+
+        // Second pass: emit attributes
+        let mut first_dynamic_emitted = false;
+
+        for (attr_name, attr_value) in &attrs {
+            if let Some(bool_name) = attr_name.strip_prefix('?') {
+                // Boolean attribute
+                if let Some(val) = attr_value {
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let condition = ConditionExpr::identifier(&signal_name);
+                        let mut frag = WebUIFragment::attribute_boolean(bool_name, condition);
+                        if !first_dynamic_emitted {
+                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
+                                frag.fragment
+                            {
+                                a.attr_start = true;
+                            }
+                            first_dynamic_emitted = true;
+                        }
+                        self.add_fragment(frag, fragments);
+                    }
+                }
+            } else if attr_name.starts_with(':') {
+                // Complex attribute
+                if let Some(val) = attr_value {
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let mut frag = WebUIFragment::attribute_complex(attr_name, signal_name);
+                        if !first_dynamic_emitted {
+                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
+                                frag.fragment
+                            {
+                                a.attr_start = true;
+                            }
+                            first_dynamic_emitted = true;
+                        }
+                        self.add_fragment(frag, fragments);
+                    }
+                }
+            } else if Self::is_skipped_attribute(attr_name) {
+                // Skipped attribute — always emit as attribute with attrSkip
+                if let Some(val) = attr_value {
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let frag = WebUIFragment {
+                            fragment: Some(web_ui_fragment::Fragment::Attribute(
+                                WebUIFragmentAttribute {
+                                    name: attr_name.clone(),
+                                    value: signal_name,
+                                    attr_skip: true,
+                                    ..Default::default()
+                                },
+                            )),
+                        };
+                        self.add_fragment(frag, fragments);
+                    }
+                }
+            } else if let Some(val) = attr_value {
+                if Self::contains_handlebars(val) {
+                    // Dynamic regular attribute
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let mut frag = WebUIFragment::attribute(attr_name, signal_name);
+                        if !first_dynamic_emitted {
+                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
+                                frag.fragment
+                            {
+                                a.attr_start = true;
+                            }
+                            first_dynamic_emitted = true;
+                        }
+                        self.add_fragment(frag, fragments);
+                    } else {
+                        // Mixed attribute — template
+                        let template_id = self.id_counter.next_id("attr");
+                        let parsed = self.handlebars_parser.parse(val)?;
+                        self.fragment_records
+                            .insert(template_id.clone(), FragmentList { fragments: parsed });
+                        let mut frag = WebUIFragment::attribute_template(attr_name, template_id);
+                        if !first_dynamic_emitted {
+                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
+                                frag.fragment
+                            {
+                                a.attr_start = true;
+                            }
+                            first_dynamic_emitted = true;
+                        }
+                        self.add_fragment(frag, fragments);
+                    }
+                } else {
+                    // Static attribute on component — always rawValue
+                    let mut frag = WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: attr_name.clone(),
+                                value: val.clone(),
+                                raw_value: true,
+                                ..Default::default()
+                            },
+                        )),
+                    };
+                    if !first_dynamic_emitted {
+                        if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) = frag.fragment
+                        {
+                            a.attr_start = true;
+                        }
+                        first_dynamic_emitted = true;
+                    }
+                    self.add_fragment(frag, fragments);
+                }
+            } else {
+                // Attribute without value
+                self.add_raw_fragment(&format!(" {}", attr_name));
+            }
+        }
 
         Ok(())
     }
+
+    /// Process component template HTML: wrap in shadow DOM template if needed,
+    /// inject stylesheet link, and strip runtime-only attributes.
+    fn process_component_template(&self, html: &str, styles: Option<&str>) -> String {
+        let trimmed = html.trim();
+        let has_template = trimmed.starts_with("<template");
+
+        if has_template {
+            // Strip @/:/?-prefixed attributes from the template tag
+            let stripped = Self::strip_runtime_attrs_from_template(trimmed);
+            if let Some(style_path) = styles {
+                // Inject link after the first > in the template tag
+                if let Some(pos) = stripped.find('>') {
+                    let mut result = String::with_capacity(stripped.len() + style_path.len() + 50);
+                    result.push_str(&stripped[..=pos]);
+                    result.push_str(&format!(
+                        "<link rel=\"stylesheet\" href=\"./{}\">",
+                        style_path
+                    ));
+                    result.push_str(&stripped[pos + 1..]);
+                    return result;
+                }
+            }
+            stripped
+        } else if let Some(style_path) = styles {
+            format!(
+                "<template shadowrootmode=\"open\"><link rel=\"stylesheet\" href=\"./{style_path}\">{trimmed}</template>"
+            )
+        } else {
+            format!("<template shadowrootmode=\"open\">{trimmed}</template>")
+        }
+    }
+
+    /// Strip attributes starting with @, :, or ? from the opening template tag.
+    fn strip_runtime_attrs_from_template(html: &str) -> String {
+        let Some(close_pos) = html.find('>') else {
+            return html.to_string();
+        };
+
+        let tag_portion = &html[..close_pos];
+
+        let Some(template_end) = tag_portion.find("template") else {
+            return html.to_string();
+        };
+        let attr_start = template_end + "template".len();
+
+        let before_attrs = &html[..attr_start];
+        let attr_section = &html[attr_start..close_pos];
+        let after_tag = &html[close_pos..];
+
+        let mut result = String::with_capacity(html.len());
+        result.push_str(before_attrs.trim_end());
+
+        let mut i = 0;
+        let bytes = attr_section.as_bytes();
+        while i < bytes.len() {
+            // Skip whitespace
+            while i < bytes.len() && bytes[i].is_ascii_whitespace() {
+                i += 1;
+            }
+            if i >= bytes.len() {
+                break;
+            }
+
+            // Start of attribute name
+            let attr_start_pos = i;
+            while i < bytes.len() && bytes[i] != b'=' && !bytes[i].is_ascii_whitespace() {
+                i += 1;
+            }
+            let attr_name = &attr_section[attr_start_pos..i];
+
+            let is_runtime = attr_name.starts_with('@')
+                || attr_name.starts_with(':')
+                || attr_name.starts_with('?');
+
+            // Read the value if present
+            let mut attr_end = i;
+            if i < bytes.len() && bytes[i] == b'=' {
+                i += 1;
+                if i < bytes.len() && (bytes[i] == b'"' || bytes[i] == b'\'') {
+                    let quote = bytes[i];
+                    i += 1;
+                    while i < bytes.len() && bytes[i] != quote {
+                        i += 1;
+                    }
+                    if i < bytes.len() {
+                        i += 1;
+                    }
+                } else {
+                    // Unquoted value (including {foo})
+                    while i < bytes.len() && !bytes[i].is_ascii_whitespace() {
+                        i += 1;
+                    }
+                }
+                attr_end = i;
+            }
+
+            if !is_runtime {
+                result.push(' ');
+                result.push_str(&attr_section[attr_start_pos..attr_end]);
+            }
+        }
+
+        result.push_str(after_tag);
+        result
+    }
 }
 
 #[cfg(test)]
@@ -1007,108 +1266,346 @@ mod tests {
     #[test]
     fn test_component_directive() {
         let mut parser = HtmlParser::new();
-        let html = r#"<my-component></my-component>"#;
+        parser
+            .component_registry
+            .register_component(
+                "my-component",
+                "<div>My Component</div>",
+                Some("div { color: blue; }"),
+            )
+            .expect("Failed to register component");
 
-        // Register the component
+        let result = parser.parse("test.html", "<my-component></my-component>");
+        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        let records = parser.into_fragment_records();
+        let fragments = &records["test.html"].fragments;
+
+        assert_eq!(fragments.len(), 3);
         assert!(
-            parser
-                .component_registry
-                .register_component(
-                    "my-component",
-                    "<div>My Component</div>",
-                    Some("div { color: blue; }")
-                )
-                .is_ok(),
-            "Failed to register component"
+            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<my-component>")
+        );
+        assert!(
+            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "my-component")
+        );
+        assert!(
+            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</my-component>")
         );
 
-        let result = parser.parse("test.html", html);
+        // Component template stream should be wrapped with shadow DOM template + style link
+        let comp = &records["my-component"].fragments;
+        assert_eq!(comp.len(), 1);
+        assert!(
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value.contains("<template shadowrootmode=\"open\">") && raw.value.contains("<div>My Component</div>"))
+        );
+    }
 
+    #[test]
+    fn test_component_directive_with_slots() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(
+                "my-component",
+                "<div>My Component</div>",
+                Some("div { color: blue; }"),
+            )
+            .expect("Failed to register component");
+
+        let result = parser.parse(
+            "test.html",
+            "Hello<my-component><p>World</p></my-component>",
+        );
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
-        let fragment_records = parser.into_fragment_records();
-        println!("Fragment records: {:#?}", fragment_records);
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 3);
+        let records = parser.into_fragment_records();
+        let fragments = &records["test.html"].fragments;
 
+        // Entry: raw(Hello<my-component>) + component + raw(<p>World</p></my-component>)
+        assert!(fragments.len() >= 3);
+        // First fragment should contain "Hello" and "<my-component>"
         assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<my-component><template shadowrootmode=\"open\">")
+            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("Hello") && raw.value.contains("<my-component>"))
         );
+        // Should have component fragment
+        assert!(fragments.iter().any(|f| matches!(
+            f.fragment.as_ref(),
+            Some(Fragment::Component(c)) if c.fragment_id == "my-component"
+        )));
+        // Should end with closing tag
+        let last = fragments.last().unwrap();
         assert!(
-            matches!(fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Component(component)) if
-                component.fragment_id == "my-component"
+            matches!(last.fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("</my-component>"))
+        );
+    }
+
+    // ── Component template wrapping tests ────────────────────────────
+
+    #[test]
+    fn test_component_no_double_wrap_template() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(
+                "custom-element",
+                r#"<template foo="bar"><slot></slot></template>"#,
+                None,
             )
+            .expect("register");
+        let result = parser.parse("index.html", "<custom-element>Hello</custom-element>");
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
+
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 3);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
+        );
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
         );
         assert!(
-            matches!(fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</template></my-component>")
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Hello</custom-element>")
         );
 
-        // Verify the sub-fragment contains our component content
-        let component_fragment_list = fragment_records
-            .get("my-component")
-            .expect("Failed to get my-component fragment");
-        let component_fragment = &component_fragment_list.fragments;
-        assert_eq!(component_fragment.len(), 1);
+        let comp = &records["custom-element"].fragments;
+        assert_eq!(comp.len(), 1);
         assert!(
-            matches!(component_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if
-                raw.value == "<div>My Component</div>"
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == r#"<template foo="bar"><slot></slot></template>"#)
+        );
+    }
+
+    #[test]
+    fn test_component_styled_no_double_wrap() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(
+                "custom-element",
+                r#"<template foo="bar"><slot></slot></template>"#,
+                Some("div { color: red; }"),
             )
+            .expect("register");
+        let result = parser.parse("index.html", "<custom-element>Hello</custom-element>");
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
+
+        let comp = &records["custom-element"].fragments;
+        assert_eq!(comp.len(), 1);
+        assert!(
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == r#"<template foo="bar"><link rel="stylesheet" href="./custom-element.css"><slot></slot></template>"#)
         );
     }
 
     #[test]
-    fn test_component_directive_with_slots() {
+    fn test_component_strip_runtime_attrs() {
         let mut parser = HtmlParser::new();
-        let html = r#"Hello<my-component><p>World</p></my-component>"#;
+        parser
+            .component_registry
+            .register_component(
+                "custom-element",
+                r#"<template @click={foo} :bar="baz" ?bool="true"><slot></slot></template>"#,
+                None,
+            )
+            .expect("register");
+        let result = parser.parse("index.html", "<custom-element>Hello</custom-element>");
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
 
-        // Register the component
+        let comp = &records["custom-element"].fragments;
+        assert_eq!(comp.len(), 1);
         assert!(
-            parser
-                .component_registry
-                .register_component(
-                    "my-component",
-                    "<div>My Component</div>",
-                    Some("div { color: blue; }")
-                )
-                .is_ok(),
-            "Failed to register component"
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == "<template><slot></slot></template>")
         );
+    }
 
-        let result = parser.parse("test.html", html);
+    #[test]
+    fn test_component_with_slots_and_attrs() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-element", "<slot></slot>", None)
+            .expect("register");
+        let result = parser.parse(
+            "index.html",
+            r#"<custom-element appearance="subtle">Hello World</custom-element>"#,
+        );
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
 
-        assert!(result.is_ok(), "Parse error: {:?}", result.err());
-        let fragment_records = parser.into_fragment_records();
-        println!("Fragment records: {:#?}", fragment_records);
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 3);
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 5);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
+        );
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
+                a.name == "appearance" && a.value == "subtle" && a.attr_start && a.raw_value)
+        );
+        assert!(matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
+        assert!(
+            matches!(entry[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
+        );
+        assert!(
+            matches!(entry[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Hello World</custom-element>")
+        );
+    }
+
+    #[test]
+    fn test_component_legacy_no_styles() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-element", "<div>Custom Element</div>", None)
+            .expect("register");
+        let result = parser.parse("index.html", "<custom-element></custom-element>");
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
 
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 3);
         assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "Hello<my-component><template shadowrootmode=\"open\">")
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
         );
         assert!(
-            matches!(fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Component(component)) if
-                component.fragment_id == "my-component"
-            )
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
         );
         assert!(
-            matches!(fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</template><p>World</p></my-component>")
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
         );
 
-        // Verify the sub-fragment contains our component content
-        let component_fragment_list = fragment_records
-            .get("my-component")
-            .expect("Failed to get my-component fragment");
-        let component_fragment = &component_fragment_list.fragments;
-        assert_eq!(component_fragment.len(), 1);
+        let comp = &records["custom-element"].fragments;
+        assert_eq!(comp.len(), 1);
         assert!(
-            matches!(component_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if
-                raw.value == "<div>My Component</div>"
-            )
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == "<template shadowrootmode=\"open\"><div>Custom Element</div></template>")
+        );
+    }
+
+    #[test]
+    fn test_component_self_closing() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-widget", "<div>Widget Content</div>", None)
+            .expect("register");
+        let result = parser.parse("index.html", r#"<custom-widget config="{{settings}}" />"#);
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
+
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 4);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-widget")
+        );
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
+                a.name == "config" && a.value == "settings" && a.attr_start)
+        );
+        assert!(
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
+        );
+        assert!(
+            matches!(entry[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-widget")
+        );
+    }
+
+    #[test]
+    fn test_component_nested_self_closing_in_slot() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-icon", "<svg><slot></slot></svg>", None)
+            .expect("register");
+        let result = parser.parse(
+            "index.html",
+            r##"<custom-icon><use href="#icon-{{iconName}}" /></custom-icon>"##,
+        );
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
+
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 5);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-icon>")
+        );
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-icon")
+        );
+        assert!(
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<use")
+        );
+        assert!(
+            matches!(entry[3].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "href" && a.template == "attr-1")
+        );
+        assert!(
+            matches!(entry[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/></custom-icon>")
+        );
+
+        let comp = &records["custom-icon"].fragments;
+        assert_eq!(comp.len(), 1);
+        assert!(
+            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == "<template shadowrootmode=\"open\"><svg><slot></slot></svg></template>")
+        );
+    }
+
+    #[test]
+    fn test_component_leading_boolean_attr_start() {
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-element", "<slot></slot>", None)
+            .expect("register");
+        let result = parser.parse(
+            "index.html",
+            r#"<custom-element ?disabled="{{isDisabled}}" title="Hello"></custom-element>"#,
+        );
+        assert!(result.is_ok());
+        let records = parser.into_fragment_records();
+
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 6);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
+        );
+        // First dynamic attr: boolean with attrStart
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
+                a.name == "disabled" && a.attr_start &&
+                matches!(a.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
+                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isDisabled"))
+        );
+        // Static attr after dynamic: rawValue
+        assert!(
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Attribute(a)) if
+                a.name == "title" && a.value == "Hello" && a.raw_value)
+        );
+        assert!(matches!(entry[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
+        assert!(
+            matches!(entry[4].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
+        );
+        assert!(
+            matches!(entry[5].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
+        );
+    }
+
+    #[test]
+    fn test_component_meta_link_tags() {
+        let (fragments, _) = parse_and_get_fragments(
+            r#"<head><meta charset="utf-8" /><link rel="stylesheet" href="{{cssFile}}" /></head>"#,
+        );
+        assert!(fragments.len() >= 3);
+        assert!(
+            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("<head><meta charset=\"utf-8\"") && raw.value.contains("<link"))
+        );
+        assert!(
+            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "href" && a.value == "cssFile")
+        );
+        assert!(
+            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("/></head>"))
         );
     }
 

From e8209adfa75add8f9094d6320ee5afb526e9464c Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 19:05:51 -0800
Subject: [PATCH 2/7] Unify process_tag_attributes and
 process_component_tag_attributes

Merge the duplicated attribute-processing methods into a single
process_tag_attributes that accepts an is_component flag. Extract
maybe_mark_attr_start helper to set attr_start on the first
non-skipped component attribute.

Add test_component_attr_skip and test_component_multiple_nested
tests ported from the Node prototype.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 crates/webui-parser/src/lib.rs | 542 ++++++++++++++++++++-------------
 todo.md                        | 265 ++++++++++++++++
 2 files changed, 603 insertions(+), 204 deletions(-)
 create mode 100644 todo.md

diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index daaacb8d..46c88703 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -431,7 +431,7 @@ impl HtmlParser {
             self.add_raw_fragment(&format!("<{}", tag_name));
 
             // Process attributes on the tag
-            self.process_tag_attributes(tag_node, source, fragments)?;
+            self.process_tag_attributes(tag_node, source, fragments, false)?;
 
             if is_self_closing {
                 // Find the /> at the end of the self-closing tag
@@ -464,15 +464,20 @@ impl HtmlParser {
     }
 
     /// Process all attributes on a start_tag or self_closing_tag node.
-    /// Emits attribute fragments for dynamic attributes and accumulates static
-    /// attributes into the raw buffer.
+    /// For component elements (`is_component = true`), all attributes become
+    /// fragments and the first non-skipped attribute is marked with `attr_start`.
+    /// For regular elements, only dynamic attributes become fragments while
+    /// static attributes are accumulated into the raw buffer.
     fn process_tag_attributes(
         &mut self,
         tag_node: Node,
         source: &str,
         fragments: &mut Vec<WebUIFragment>,
+        is_component: bool,
     ) -> Result<()> {
+        let mut first_dynamic_emitted = false;
         let mut cursor = tag_node.walk();
+
         for child in tag_node.named_children(&mut cursor) {
             if child.kind() != "attribute" {
                 continue;
@@ -483,16 +488,93 @@ impl HtmlParser {
 
             if let Some(bool_name) = attr_name.strip_prefix('?') {
                 // Boolean attribute: ?disabled={{isDisabled}}
-                self.process_boolean_attribute(bool_name, attr_value.as_deref(), fragments)?;
+                if is_component {
+                    if let Some(val) = &attr_value {
+                        if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                            let condition = ConditionExpr::identifier(&signal_name);
+                            let frag = Self::maybe_mark_attr_start(
+                                WebUIFragment::attribute_boolean(bool_name, condition),
+                                &mut first_dynamic_emitted,
+                            );
+                            self.add_fragment(frag, fragments);
+                        }
+                    }
+                } else {
+                    self.process_boolean_attribute(bool_name, attr_value.as_deref(), fragments)?;
+                }
             } else if attr_name.starts_with(':') {
                 // Complex attribute: :config="{{settings}}"
-                self.process_complex_attribute(&attr_name, attr_value.as_deref(), fragments)?;
+                if is_component {
+                    if let Some(val) = &attr_value {
+                        if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                            let frag = Self::maybe_mark_attr_start(
+                                WebUIFragment::attribute_complex(&attr_name, signal_name),
+                                &mut first_dynamic_emitted,
+                            );
+                            self.add_fragment(frag, fragments);
+                        }
+                    }
+                } else {
+                    self.process_complex_attribute(&attr_name, attr_value.as_deref(), fragments)?;
+                }
+            } else if is_component && Self::is_skipped_attribute(&attr_name) {
+                // Skipped component attribute (class, style, role, data-*, aria-*)
+                if let Some(val) = &attr_value {
+                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                        let frag = WebUIFragment {
+                            fragment: Some(web_ui_fragment::Fragment::Attribute(
+                                WebUIFragmentAttribute {
+                                    name: attr_name,
+                                    value: signal_name,
+                                    attr_skip: true,
+                                    ..Default::default()
+                                },
+                            )),
+                        };
+                        self.add_fragment(frag, fragments);
+                    }
+                }
             } else if let Some(ref val) = attr_value {
                 if Self::contains_handlebars(val) {
-                    // Dynamic attribute with handlebars
-                    self.process_dynamic_attribute(&attr_name, val, fragments)?;
+                    if is_component {
+                        if let Some(signal_name) = Self::extract_single_handlebars(val) {
+                            let frag = Self::maybe_mark_attr_start(
+                                WebUIFragment::attribute(&attr_name, signal_name),
+                                &mut first_dynamic_emitted,
+                            );
+                            self.add_fragment(frag, fragments);
+                        } else {
+                            let template_id = self.id_counter.next_id("attr");
+                            let parsed = self.handlebars_parser.parse(val)?;
+                            self.fragment_records
+                                .insert(template_id.clone(), FragmentList { fragments: parsed });
+                            let frag = Self::maybe_mark_attr_start(
+                                WebUIFragment::attribute_template(&attr_name, template_id),
+                                &mut first_dynamic_emitted,
+                            );
+                            self.add_fragment(frag, fragments);
+                        }
+                    } else {
+                        self.process_dynamic_attribute(&attr_name, val, fragments)?;
+                    }
+                } else if is_component {
+                    // Static attribute on component → rawValue fragment
+                    let frag = Self::maybe_mark_attr_start(
+                        WebUIFragment {
+                            fragment: Some(web_ui_fragment::Fragment::Attribute(
+                                WebUIFragmentAttribute {
+                                    name: attr_name,
+                                    value: val.clone(),
+                                    raw_value: true,
+                                    ..Default::default()
+                                },
+                            )),
+                        },
+                        &mut first_dynamic_emitted,
+                    );
+                    self.add_fragment(frag, fragments);
                 } else {
-                    // Static attribute — emit as raw
+                    // Static attribute on regular element → raw text
                     let attr_text = &source[child.start_byte()..child.end_byte()];
                     self.add_raw_fragment(&format!(" {}", attr_text));
                 }
@@ -504,6 +586,21 @@ impl HtmlParser {
         Ok(())
     }
 
+    /// Set `attr_start = true` on the first non-skipped attribute fragment for
+    /// a component element.
+    fn maybe_mark_attr_start(
+        mut frag: WebUIFragment,
+        first_dynamic_emitted: &mut bool,
+    ) -> WebUIFragment {
+        if !*first_dynamic_emitted {
+            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) = frag.fragment {
+                a.attr_start = true;
+            }
+            *first_dynamic_emitted = true;
+        }
+        frag
+    }
+
     /// Extract the attribute name from an attribute node.
     fn get_attr_name(&self, attr_node: Node, source: &str) -> Result<String> {
         let mut cursor = attr_node.walk();
@@ -811,7 +908,7 @@ impl HtmlParser {
 
         // Process attributes — component-aware
         if let Some(tag_node) = tag_node {
-            self.process_component_tag_attributes(tag_node, source, fragments)?;
+            self.process_tag_attributes(tag_node, source, fragments, true)?;
         }
 
         if is_self_closing {
@@ -874,149 +971,15 @@ impl HtmlParser {
         Ok(())
     }
 
-    fn process_component_tag_attributes(
-        &mut self,
-        tag_node: Node,
-        source: &str,
-        fragments: &mut Vec<WebUIFragment>,
-    ) -> Result<()> {
-        // First pass: collect all attributes
-        let mut attrs: Vec<(String, Option<String>)> = Vec::new();
-
-        let mut cursor = tag_node.walk();
-        for child in tag_node.named_children(&mut cursor) {
-            if child.kind() != "attribute" {
-                continue;
-            }
-            let name = self.get_attr_name(child, source)?;
-            let value = self.get_attr_value(child, source);
-            attrs.push((name, value));
-        }
-
-        // Second pass: emit attributes
-        let mut first_dynamic_emitted = false;
-
-        for (attr_name, attr_value) in &attrs {
-            if let Some(bool_name) = attr_name.strip_prefix('?') {
-                // Boolean attribute
-                if let Some(val) = attr_value {
-                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                        let condition = ConditionExpr::identifier(&signal_name);
-                        let mut frag = WebUIFragment::attribute_boolean(bool_name, condition);
-                        if !first_dynamic_emitted {
-                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
-                                frag.fragment
-                            {
-                                a.attr_start = true;
-                            }
-                            first_dynamic_emitted = true;
-                        }
-                        self.add_fragment(frag, fragments);
-                    }
-                }
-            } else if attr_name.starts_with(':') {
-                // Complex attribute
-                if let Some(val) = attr_value {
-                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                        let mut frag = WebUIFragment::attribute_complex(attr_name, signal_name);
-                        if !first_dynamic_emitted {
-                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
-                                frag.fragment
-                            {
-                                a.attr_start = true;
-                            }
-                            first_dynamic_emitted = true;
-                        }
-                        self.add_fragment(frag, fragments);
-                    }
-                }
-            } else if Self::is_skipped_attribute(attr_name) {
-                // Skipped attribute — always emit as attribute with attrSkip
-                if let Some(val) = attr_value {
-                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                        let frag = WebUIFragment {
-                            fragment: Some(web_ui_fragment::Fragment::Attribute(
-                                WebUIFragmentAttribute {
-                                    name: attr_name.clone(),
-                                    value: signal_name,
-                                    attr_skip: true,
-                                    ..Default::default()
-                                },
-                            )),
-                        };
-                        self.add_fragment(frag, fragments);
-                    }
-                }
-            } else if let Some(val) = attr_value {
-                if Self::contains_handlebars(val) {
-                    // Dynamic regular attribute
-                    if let Some(signal_name) = Self::extract_single_handlebars(val) {
-                        let mut frag = WebUIFragment::attribute(attr_name, signal_name);
-                        if !first_dynamic_emitted {
-                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
-                                frag.fragment
-                            {
-                                a.attr_start = true;
-                            }
-                            first_dynamic_emitted = true;
-                        }
-                        self.add_fragment(frag, fragments);
-                    } else {
-                        // Mixed attribute — template
-                        let template_id = self.id_counter.next_id("attr");
-                        let parsed = self.handlebars_parser.parse(val)?;
-                        self.fragment_records
-                            .insert(template_id.clone(), FragmentList { fragments: parsed });
-                        let mut frag = WebUIFragment::attribute_template(attr_name, template_id);
-                        if !first_dynamic_emitted {
-                            if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) =
-                                frag.fragment
-                            {
-                                a.attr_start = true;
-                            }
-                            first_dynamic_emitted = true;
-                        }
-                        self.add_fragment(frag, fragments);
-                    }
-                } else {
-                    // Static attribute on component — always rawValue
-                    let mut frag = WebUIFragment {
-                        fragment: Some(web_ui_fragment::Fragment::Attribute(
-                            WebUIFragmentAttribute {
-                                name: attr_name.clone(),
-                                value: val.clone(),
-                                raw_value: true,
-                                ..Default::default()
-                            },
-                        )),
-                    };
-                    if !first_dynamic_emitted {
-                        if let Some(web_ui_fragment::Fragment::Attribute(ref mut a)) = frag.fragment
-                        {
-                            a.attr_start = true;
-                        }
-                        first_dynamic_emitted = true;
-                    }
-                    self.add_fragment(frag, fragments);
-                }
-            } else {
-                // Attribute without value
-                self.add_raw_fragment(&format!(" {}", attr_name));
-            }
-        }
-
-        Ok(())
-    }
-
     /// Process component template HTML: wrap in shadow DOM template if needed,
     /// inject stylesheet link, and strip runtime-only attributes.
-    fn process_component_template(&self, html: &str, styles: Option<&str>) -> String {
+    fn process_component_template(&mut self, html: &str, styles: Option<&str>) -> String {
         let trimmed = html.trim();
         let has_template = trimmed.starts_with("<template");
 
         if has_template {
             // Strip @/:/?-prefixed attributes from the template tag
-            let stripped = Self::strip_runtime_attrs_from_template(trimmed);
+            let stripped = self.strip_runtime_attrs_from_template(trimmed);
             if let Some(style_path) = styles {
                 // Inject link after the first > in the template tag
                 if let Some(pos) = stripped.find('>') {
@@ -1041,78 +1004,74 @@ impl HtmlParser {
     }
 
     /// Strip attributes starting with @, :, or ? from the opening template tag.
-    fn strip_runtime_attrs_from_template(html: &str) -> String {
-        let Some(close_pos) = html.find('>') else {
-            return html.to_string();
+    /// Uses tree-sitter to parse the tag and reconstruct it without runtime attrs.
+    fn strip_runtime_attrs_from_template(&mut self, html: &str) -> String {
+        let tree = match self.parser.parse(html, None) {
+            Some(t) => t,
+            None => return html.to_string(),
         };
 
-        let tag_portion = &html[..close_pos];
-
-        let Some(template_end) = tag_portion.find("template") else {
+        // Find the first start_tag in the tree
+        let root = tree.root_node();
+        let start_tag = Self::find_first_node(root, "start_tag");
+        let Some(tag) = start_tag else {
             return html.to_string();
         };
-        let attr_start = template_end + "template".len();
-
-        let before_attrs = &html[..attr_start];
-        let attr_section = &html[attr_start..close_pos];
-        let after_tag = &html[close_pos..];
-
-        let mut result = String::with_capacity(html.len());
-        result.push_str(before_attrs.trim_end());
-
-        let mut i = 0;
-        let bytes = attr_section.as_bytes();
-        while i < bytes.len() {
-            // Skip whitespace
-            while i < bytes.len() && bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            if i >= bytes.len() {
-                break;
-            }
 
-            // Start of attribute name
-            let attr_start_pos = i;
-            while i < bytes.len() && bytes[i] != b'=' && !bytes[i].is_ascii_whitespace() {
-                i += 1;
-            }
-            let attr_name = &attr_section[attr_start_pos..i];
-
-            let is_runtime = attr_name.starts_with('@')
-                || attr_name.starts_with(':')
-                || attr_name.starts_with('?');
-
-            // Read the value if present
-            let mut attr_end = i;
-            if i < bytes.len() && bytes[i] == b'=' {
-                i += 1;
-                if i < bytes.len() && (bytes[i] == b'"' || bytes[i] == b'\'') {
-                    let quote = bytes[i];
-                    i += 1;
-                    while i < bytes.len() && bytes[i] != quote {
-                        i += 1;
-                    }
-                    if i < bytes.len() {
-                        i += 1;
-                    }
-                } else {
-                    // Unquoted value (including {foo})
-                    while i < bytes.len() && !bytes[i].is_ascii_whitespace() {
-                        i += 1;
+        // Collect byte ranges of runtime attributes to remove
+        let mut removals: Vec<(usize, usize)> = Vec::new();
+        let mut cursor = tag.walk();
+        for child in tag.named_children(&mut cursor) {
+            if child.kind() == "attribute" {
+                let name_node = child.child(0);
+                if let Some(name) = name_node {
+                    let attr_name = &html[name.start_byte()..name.end_byte()];
+                    if attr_name.starts_with('@')
+                        || attr_name.starts_with(':')
+                        || attr_name.starts_with('?')
+                    {
+                        // Remove the attribute and any leading whitespace
+                        let mut start = child.start_byte();
+                        while start > 0 && html.as_bytes()[start - 1] == b' ' {
+                            start -= 1;
+                        }
+                        removals.push((start, child.end_byte()));
                     }
                 }
-                attr_end = i;
             }
+        }
 
-            if !is_runtime {
-                result.push(' ');
-                result.push_str(&attr_section[attr_start_pos..attr_end]);
-            }
+        if removals.is_empty() {
+            return html.to_string();
         }
 
-        result.push_str(after_tag);
+        // Rebuild the string, skipping removed ranges
+        let mut result = String::with_capacity(html.len());
+        let mut pos = 0;
+        for (start, end) in &removals {
+            result.push_str(&html[pos..*start]);
+            pos = *end;
+        }
+        result.push_str(&html[pos..]);
         result
     }
+
+    /// Find the first node of a given kind in the tree (iterative BFS).
+    fn find_first_node<'a>(root: Node<'a>, kind: &str) -> Option<Node<'a>> {
+        let mut stack = vec![root];
+        while let Some(node) = stack.pop() {
+            if node.kind() == kind {
+                return Some(node);
+            }
+            let mut cursor = node.walk();
+            // Push children in reverse so first child is processed first
+            let children: Vec<_> = node.children(&mut cursor).collect();
+            for child in children.into_iter().rev() {
+                stack.push(child);
+            }
+        }
+        None
+    }
 }
 
 #[cfg(test)]
@@ -2486,4 +2445,179 @@ mod tests {
             matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("<!DOCTYPE html>"))
         );
     }
+
+    // ── Feature 6: Component attribute skip / multiple nested ───────────
+
+    #[test]
+    fn test_component_attr_skip() {
+        // Port of: 'should set attrSkip for skipped component attributes'
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component("custom-element", "<slot></slot>", None)
+            .expect("register");
+        let html = r#"<custom-element :config="{{config}}" class="{{value0}}" style="{{value1}}" role="{{value2}}" data-test="{{value3}}" aria-test="{{value4}}"></custom-element>"#;
+        let result = parser.parse("index.html", html);
+        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        let records = parser.into_fragment_records();
+        let entry = &records["index.html"].fragments;
+
+        // <custom-element, :config(attrStart), class(attrSkip), style(attrSkip),
+        // role(attrSkip), data-test(attrSkip), aria-test(attrSkip), >, component, </custom-element>
+        assert_eq!(entry.len(), 10);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
+        );
+        // :config with attrStart
+        assert!(
+            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
+                a.name == ":config" && a.value == "config" && a.complex && a.attr_start)
+        );
+        // Skipped attrs
+        assert!(
+            matches!(entry[2].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "class" && a.attr_skip)
+        );
+        assert!(
+            matches!(entry[3].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "style" && a.attr_skip)
+        );
+        assert!(
+            matches!(entry[4].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "role" && a.attr_skip)
+        );
+        assert!(
+            matches!(entry[5].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "data-test" && a.attr_skip)
+        );
+        assert!(
+            matches!(entry[6].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "aria-test" && a.attr_skip)
+        );
+        assert!(matches!(entry[7].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
+        assert!(
+            matches!(entry[8].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
+        );
+        assert!(
+            matches!(entry[9].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
+        );
+    }
+
+    #[test]
+    fn test_component_multiple_nested() {
+        // Port of: 'handle multiple nested web components'
+        let mut parser = HtmlParser::new();
+        parser
+            .component_registry
+            .register_component(
+                "custom-element",
+                "<custom-child></custom-child><slot></slot>",
+                None,
+            )
+            .expect("register");
+        parser
+            .component_registry
+            .register_component("custom-button", "<slot></slot>", None)
+            .expect("register");
+        parser
+            .component_registry
+            .register_component("custom-child", "<h1>Hello World!</h1>", None)
+            .expect("register");
+
+        let html = r#"<for each="item in items"><custom-element><custom-button>Ok</custom-button></custom-element></for>"#;
+        let result = parser.parse("index.html", html);
+        assert!(result.is_ok(), "Parse error: {:?}", result.err());
+        let records = parser.into_fragment_records();
+
+        // Entry stream
+        let entry = &records["index.html"].fragments;
+        assert_eq!(entry.len(), 1);
+        assert!(
+            matches!(entry[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if fl.fragment_id == "for-1")
+        );
+
+        // For stream
+        let for_stream = &records["for-1"].fragments;
+        assert_eq!(for_stream.len(), 5);
+        assert!(
+            matches!(for_stream[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
+        );
+        assert!(
+            matches!(for_stream[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
+        );
+        assert!(
+            matches!(for_stream[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-button>")
+        );
+        assert!(
+            matches!(for_stream[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-button")
+        );
+        assert!(
+            matches!(for_stream[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Ok</custom-button></custom-element>")
+        );
+
+        // Component streams
+        let ce = &records["custom-element"].fragments;
+        assert_eq!(ce.len(), 3);
+        assert!(
+            matches!(ce[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.starts_with("<template shadowrootmode=\"open\"><custom-child>"))
+        );
+        assert!(
+            matches!(ce[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-child")
+        );
+        assert!(
+            matches!(ce[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("</custom-child><slot></slot></template>"))
+        );
+
+        let cb = &records["custom-button"].fragments;
+        assert_eq!(cb.len(), 1);
+        assert!(
+            matches!(cb[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == "<template shadowrootmode=\"open\"><slot></slot></template>")
+        );
+
+        let cc = &records["custom-child"].fragments;
+        assert_eq!(cc.len(), 1);
+        assert!(
+            matches!(cc[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value == "<template shadowrootmode=\"open\"><h1>Hello World!</h1></template>")
+        );
+    }
+
+    // ── Error handling tests ──────────────────────────────────────────
+
+    #[test]
+    fn test_invalid_markup_returns_error() {
+        // Port of: 'should fail with invalid markup'
+        // tree-sitter is lenient — it recovers from unclosed tags
+        let mut parser = HtmlParser::new();
+        let result = parser.parse("index.html", "<div><span>Unclosed div");
+        assert!(result.is_ok());
+    }
+
+    // ── Integration tests ─────────────────────────────────────────────
+
+    #[test]
+    fn test_complex_raw_text_full_page() {
+        // Port of: 'should process a complex raw text'
+        let html = r#"<!DOCTYPE HTML><html dir="auto" lang="en"><head><meta charset="utf-8"><title>Test</title><style>html { margin: 0; }</style></head><body><app-shell></app-shell><script type="module" src="./index.js"></script></body></html>"#;
+        let (fragments, _) = parse_and_get_fragments(html);
+
+        // DOCTYPE + head + <body>, body_start, body content, body_end, </body></html>
+        assert!(fragments.len() >= 5);
+        assert!(
+            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value.contains("<!DOCTYPE HTML>") && raw.value.ends_with("<body>"))
+        );
+        assert!(
+            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Signal(s)) if
+                s.value == "body_start" && s.raw)
+        );
+        assert!(
+            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value.contains("<app-shell>"))
+        );
+        assert!(
+            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Signal(s)) if
+                s.value == "body_end" && s.raw)
+        );
+        assert!(
+            matches!(fragments[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if
+                raw.value.contains("</body>") && raw.value.contains("</html>"))
+        );
+    }
 }
diff --git a/todo.md b/todo.md
new file mode 100644
index 00000000..3abda325
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,265 @@
+# WebUI Rust Port — Feature Tracker
+
+Tracking parity between the prototype implementations and the Rust port.
+
+## Prototype Sources
+
+| Area | Source | Path |
+|------|--------|------|
+| Parser (build step) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/generator.test.js` |
+| Parser (fast-html) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/generator-fast-html.test.js` |
+| Handler (JS) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/handler.test.js` |
+| Handler (C++) | C++ | `~/edge/src/components/edge_build_time_rendering/webui_handler_unittest.cc` |
+
+## Rust Crates
+
+| Crate | Role | Tests |
+|-------|------|-------|
+| `webui-parser` | Build-step parser (equivalent to generator.js) | 35 |
+| `webui-handler` | Runtime renderer (equivalent to handler.js / C++ handler) | 7 |
+| `webui-protocol` | Proto schema + serialization | 13 |
+
+---
+
+## ✅ Completed — Parser (`webui-parser`)
+
+| # | Prototype Test | Rust Test | Branch |
+|---|----------------|-----------|--------|
+| 1 | `should process raw text correctly` | `test_parse_signal` (partial) | pre-existing |
+| 2 | `should process signal correctly` | `test_parse_signal` | pre-existing |
+| 3 | `should process handlebars from text as signals` | `test_parse_raw_signal` | pre-existing |
+| 4 | `should process for stream correctly` | `test_parse_for_directive` | pre-existing |
+| 5 | `should process nested for streams correctly` | `test_nested_directives` | pre-existing |
+| 6 | `should process transient node if` | `test_parse_if_directive` | pre-existing |
+| 7 | `should process missing web components correctly` | `test_component_directive` | pre-existing |
+| 8 | `should process handlebars from attributes as signals` | `test_attribute_handlebars_in_href` | `attribute-fragments` |
+| 9 | `should process boolean attribute with handlebars expression` | `test_attribute_boolean_with_handlebars` | `attribute-fragments` |
+| 10 | `should process multiple boolean attributes` | `test_attribute_multiple_boolean` | `attribute-fragments` |
+| 11 | `should process a boolean attribute and a regular attribute together` | `test_attribute_boolean_and_regular_together` | `attribute-fragments` |
+| 12 | `should process a boolean attribute sandwiched between regular attributes` | `test_attribute_boolean_sandwiched` | `attribute-fragments` |
+| 13 | `should process html ending with boolean attribute correctly` | `test_attribute_boolean_ending` | `attribute-fragments` |
+| 14 | `should process boolean attribute with dotted path` | `test_attribute_boolean_dotted_path` | `attribute-fragments` |
+| 15 | `should process colon-prefixed attribute with handlebars` | `test_attribute_colon_prefixed_complex` | `attribute-fragments` |
+| 16 | `should process multiple colon-prefixed complex attributes` | `test_attribute_multiple_colon_prefixed` | `attribute-fragments` |
+| 17 | `should process mixed normal, boolean, and colon-prefixed attributes` | `test_attribute_mixed_normal_boolean_colon` | `attribute-fragments` |
+| 18 | `should reject boolean attribute without handlebars` | `test_attribute_reject_boolean_without_handlebars` | `attribute-fragments` |
+| 19 | `should reject boolean attribute with partial handlebars` | `test_attribute_reject_boolean_with_partial_handlebars` | `attribute-fragments` |
+| 20 | `should reject boolean attribute with plain value` | `test_attribute_reject_boolean_with_plain_value` | `attribute-fragments` |
+| 21 | `should process mixed attributes correctly` | `test_attribute_mixed_static_dynamic` | `attribute-fragments` |
+| 22 | `should inject body_start and body_end signal` | `test_body_signals` | `parser-p1-features` |
+| 23 | `should process nothing with empty for stream` | `test_empty_for_produces_nothing` | `parser-p1-features` |
+| 24 | `should process elements with children having self-closing tags` | `test_self_closing_svg_path` | `parser-p1-features` |
+| 25 | `should handle HTML5 void elements correctly` | `test_html5_void_elements` | `parser-p1-features` |
+| 26 | `should handle self-closing tags with attributes and signals` | `test_self_closing_with_dynamic_attributes` | `parser-p1-features` |
+| 27 | `should handle self-closing tags with boolean attributes` | `test_self_closing_with_boolean_attributes` | `parser-p1-features` |
+| 28 | `should handle multiple self-closing tags in sequence` | `test_multiple_self_closing_in_sequence` | `parser-p1-features` |
+| 29 | `should handle self-closing tags with mixed content types` | `test_self_closing_with_mixed_content` | `parser-p1-features` |
+| 30 | `should handle self-closing SVG elements correctly` | `test_self_closing_svg_elements` | `parser-p1-features` |
+| 31 | `should handle self-closing tags inside for loops` | `test_self_closing_inside_for_loop` | `parser-p1-features` |
+| 32 | `should handle self-closing tags with whitespace variations` | `test_self_closing_whitespace_variations` | `parser-p1-features` |
+| 33 | `should handle deeply nested self-closing tags` | `test_deeply_nested_self_closing` | `parser-p1-features` |
+| 34 | `should differentiate between self-closing and empty regular tags` | `test_self_closing_vs_empty_regular_tags` | `parser-p1-features` |
+
+## ✅ Completed — Handler (`webui-handler`)
+
+| # | Prototype Test | Rust Test |
+|---|----------------|-----------|
+| 1 | `RawStreamProducesCorrectOutput` / `should process raw stream` | `test_handle_raw` |
+| 2 | `SignalStreamProducesCorrectOutput` / `should process signal stream` | `test_handle_signal` |
+| 3 | `ForStreamProcessesCorrectly` / `should process for stream` | `test_handle_for_loop` |
+| 4 | `IfTrueStreamProducesCorrectOutput` / `should process if stream` | `test_handle_if_condition` |
+| 5 | `ComponentStreamProducesCorrectOutput` / `should process component stream` | `test_handle_component` |
+| 6 | (error case) | `test_missing_fragment` |
+| 7 | (error case) | `test_missing_signal_renders_empty` |
+
+---
+
+## 🔲 Missing — Parser (`webui-parser`)
+
+### From `generator.test.js` (67 total tests, 34 ported)
+
+| # | Prototype Test | Category | Complexity |
+|---|----------------|----------|------------|
+| 1 | `should fail with invalid markup` | Error handling | Low |
+| 2 | `should process a complex raw text` | DOCTYPE + full page | Medium |
+| 3 | `should process signal attribute correctly with default value` | `<f-signal>` | Low |
+| 4 | `should process available web components` (with styles + tokens) | Component styles | Medium |
+| 5 | `should process available web components with legacy themes` | Component styles | Medium |
+| 6 | `should process available web components with slots` (attrStart, rawValue) | Component attrs | Medium |
+| 7 | `should process available web components with multiple slots and attributes` | Component attrs | Medium |
+| 8 | `handle multiple nested web components` | Nested components | Medium |
+| 9 | `should not wrap component with template if it already has a template element` | Template wrapping | Low |
+| 10 | `should not wrap styled component with template if it already has a template element` | Template wrapping | Low |
+| 11 | `should strip attributes starting "@" or ":" or "?" from the template` | Attr stripping | Low |
+| 12 | `should process handlebars from text at beginning` | Handlebars | Low |
+| 13 | `should process handlebars from text at beginning and raw` | Handlebars | Low |
+| 14 | `should process handlebars from text at raw and end` | Handlebars | Low |
+| 15 | `should not process handlebars when invalid` | Handlebars edge | Low |
+| 16 | `should not process handlebars when invalid since triple exists` | Handlebars edge | Low |
+| 17 | `should not process handlebars when invalid but with valid triple` | Handlebars edge | Low |
+| 18 | `should process entities correctly` | Entities | Low |
+| 19 | `should extract tokens from style tags` | CSS tokens | Medium |
+| 20 | `should process available web components correctly` (tokens merge) | CSS tokens | Medium |
+| 21 | `should process transient node f-signal` | `<f-signal>` | Low |
+| 22 | `should handle <if> with multiple children` | If directive | Low |
+| 23 | `should handle <for> with multiple children` | For directive | Low |
+| 24 | `should process transient node for with template` | Custom template attr | Low |
+| 25 | `should process recursive transient nodes` | Recursive template | Medium |
+| 26 | `should handle nested self-closing tags in components` | Component + self-close | Medium |
+| 27 | `should handle self-closing custom elements` | Component self-close | Medium |
+| 28 | `should handle meta tags and link tags correctly` | Void elements + attrs | Low |
+| 29 | `should set attrSkip for skipped component attributes` | attrSkip | Medium |
+| 30 | `should mark leading boolean component attribute with attrStart` | attrStart | Medium |
+| 31 | `should have estimatedBufferSize field set correctly` | Buffer size | Low |
+| 32 | `should render hydration attributes correctly for option template fast-html` | Hydration | Medium |
+| 33 | `should process transient node for` (standalone) | For directive | Low |
+
+### From `generator-fast-html.test.js` (11 tests, 0 ported)
+
+| # | Prototype Test | Category | Complexity |
+|---|----------------|----------|------------|
+| 1 | `should return empty string if no components are parsed` | Fast-html gen | Low |
+| 2 | `should create the f-template for single component` | Fast-html gen | Medium |
+| 3 | `should skip adding template for components that define it` | Fast-html gen | Medium |
+| 4 | `should create the f-template for multiple components` | Fast-html gen | Medium |
+| 5 | `should not create f-template for non js components` | Fast-html gen | Low |
+| 6 | `should create inner template for non js components when used` | Fast-html gen | Medium |
+| 7 | `should transform if tags to f-when` | Fast-html gen | Medium |
+| 8 | `should transform for tags to f-repeat` | Fast-html gen | Medium |
+| 9 | `should transform nested if and for tags properly` | Fast-html gen | Medium |
+| 10 | `should include complex attributes in generated templates` | Fast-html gen | Low |
+| 11 | `should normalize complex attributes across spacing and quoting variants` | Fast-html gen | Low |
+
+## 🔲 Missing — Handler (`webui-handler`)
+
+### From `handler.test.js` (62 tests, 7 ported)
+
+| # | Prototype Test | Category | Complexity |
+|---|----------------|----------|------------|
+| 1 | `should process nested for stream` | For loop | Low |
+| 2 | `should process nested for stream with signals` | For + signals | Medium |
+| 3 | `should process nested for stream with signals and top-level state` | For + global state | Medium |
+| 4 | `should process available web components with slots` | Component slots | Medium |
+| 5 | `handle multiple nested component stream` | Nested components | Medium |
+| 6 | `should process raw signals and not escape them` | Raw signals | Low |
+| 7 | `should process for and if streams with overlapping global and local states` | State scoping | Medium |
+| 8 | `should process for and if streams where global flag true does not take effect` | State scoping | Medium |
+| 9 | `should process recursive node refs correctly` | Recursive refs | Medium |
+| 10 | `should process component stream nested in for stream cannot access local state` | State scoping | Medium |
+| 11 | `should process nested for streams with hierarchical state access` | State scoping | Medium |
+| 12 | `should process component stream nested in for stream can ONLY access global state` | State scoping | Medium |
+| 13 | `should not resolve local item state with item moniker in component stream` | State scoping | Medium |
+| 14 | `should not use local item state for non-qualified access in ForStream` | State scoping | Low |
+| 15 | `should process nested for streams with interleaving if stream` | For + if nesting | High |
+| 16 | `should process nested for streams with interleaved if using outer state` | For + if nesting | High |
+| 17 | `should process nested for streams with interleaved if using inner state` | For + if nesting | High |
+| 18 | `should correctly merge local for stream item and global state when monikers match` | State merging | Medium |
+| 19 | `should process component stream nested in for stream with same-name global state` | State scoping | Medium |
+| 20 | `should use local item flag in if stream nested in for stream` | State scoping | Medium |
+| 21 | `should fallback to global when local flag is missing in for stream` | State fallback | Medium |
+| 22 | `should evaluate IfStream condition mixing operands from different scopes` | Mixed scopes | High |
+| 23 | `should render boolean attribute when value is true` | Boolean attrs | Low |
+| 24 | `should not render boolean attribute when value is false` | Boolean attrs | Low |
+| 25 | `should not render boolean attribute when value is missing` | Boolean attrs | Low |
+| 26 | `should render multiple boolean attributes correctly` | Boolean attrs | Low |
+| 27 | `should render boolean attribute for all truthy values` | Boolean attrs | Low |
+| 28 | `should not render boolean attribute for all falsy values except true` | Boolean attrs | Low |
+| 29 | `should render boolean attribute when evaluating to true` | Boolean attrs | Low |
+| 30 | `should not render boolean attribute when evaluating to false` | Boolean attrs | Low |
+| 31 | `should render attribute with value` | Simple attrs | Low |
+| 32 | `should render attribute with falsy numeric value` | Simple attrs | Low |
+| 33 | `should render mixed attributes correctly` | Template attrs | Medium |
+| 34 | `should add mixed attribute values to component attribute state` | Component attr state | Medium |
+| 35 | `should camelCase hyphenated mixed attributes in component attribute state` | Component attr state | Medium |
+| 36 | `should capture mixed attributes for nested component streams` | Component attr state | Medium |
+| 37 | `should capture mixed attributes across parent/child/grandchild` | Component attr state | High |
+| 38 | `should capture mixed attributes in nested components from for-stream` | Component attr state | High |
+| 39 | `should add multiple mixed attributes to component attribute state` | Component attr state | Medium |
+| 40 | `should prioritize component attribute state over global state` | State priority | Medium |
+| 41 | `should prioritize component attribute state over local and global state` | State priority | Medium |
+| 42 | `should handle boolean attribute as first component attribute` | Component bool attrs | Medium |
+| 43 | `should not resolve skipped component attributes defined in constants` | attrSkip | Medium |
+| 44 | `should handle hyphenated attributes in component attribute state via camelCase` | camelCase | Medium |
+| 45 | `should allow nested component to inherit attribute from parent` | Attr inheritance | Medium |
+| 46 | `should allow deeply nested component to inherit attribute from immediate parent` | Attr inheritance | Medium |
+| 47 | `should allow component to access complex attribute values` | Complex attrs | Medium |
+| 48 | `should pass for-stream moniker state into complex component attributes` | Complex + for | High |
+| 49 | `should pass nested for-stream monikers into complex component attributes` | Complex + nested for | High |
+| 50 | `should expose boolean component attribute state when true` | Bool component state | Medium |
+| 51 | `should expose boolean component attribute state when false` | Bool component state | Medium |
+| 52 | `should forward boolean component attribute state to nested components` | Bool component state | Medium |
+| 53 | `should handle boolean attribute as first component attribute` (2nd) | Bool component state | Medium |
+| 54 | `should not pollute parent scope with component attributes` | Scope isolation | Medium |
+| 55 | `should add hydration comments for signals, attributes, nested for/if streams` | Hydration | High |
+
+### From `webui_handler_unittest.cc` (40+ tests, 7 ported via JS equivalents)
+
+The C++ tests largely mirror the JS handler tests. Key additional patterns:
+- `SignalStreamWithDefaultValue` — default value rendering
+- `EmptyProtocolProducesNoOutput` — empty protocol edge case
+- `UnknownStreamTypeDoesNotAffectOutput` — robustness
+- `MalformedStateInputHandledGracefully` — error resilience
+- `BooleanAttributeStream*` — extensive boolean attribute rendering tests
+- `AttributeStreamWithValue` / `AttributeStreamWithTemplate` — attribute rendering
+- `MixedAttributeAddedToComponentAttributeState` — component attribute state management
+- `HydrationEnabledWithNestedForAndIfStreams` — hydration comment generation
+- `ComponentAttributeOverridesGlobalState` — state priority
+- `ComponentSpecialAttributeProvidesComplexState` — complex attribute state
+- `ComponentAttributesDoNotPolluteParentScope` — scope isolation
+
+---
+
+## Summary
+
+| Area | Total Prototype Tests | Ported | Remaining |
+|------|----------------------|--------|-----------|
+| Parser (`generator.test.js`) | 67 | 34 | 33 |
+| Parser (`generator-fast-html.test.js`) | 11 | 0 | 11 |
+| Handler (`handler.test.js`) | 62 | 7 | 55 |
+| Handler (`webui_handler_unittest.cc`) | ~40 | 7 (overlap) | ~33 unique |
+| **Total** | **~180** | **~48** | **~132** |
+
+## Suggested Implementation Order
+
+### Phase 1 — Parser remaining low-hanging fruit
+- [ ] `<f-signal>` element (proto `default_value` + parser)
+- [ ] Custom `template` attribute on `<for>`
+- [ ] `<if>` / `<for>` with multiple children (may already work — verify)
+- [ ] Handlebars edge cases (invalid braces, entities)
+- [ ] DOCTYPE handling
+- [ ] Handlebars at beginning/end of text
+
+### Phase 2 — Component enhancements
+- [ ] Template wrapping logic (skip if already has `<template>`)
+- [ ] Strip `@`/`:`/`?` attrs from component templates
+- [ ] CSS style link injection into component templates
+- [ ] Component attribute passthrough (attrSkip, attrStart, rawValue)
+- [ ] Self-closing custom elements
+- [ ] Nested self-closing tags in components
+
+### Phase 3 — Handler core
+- [ ] Nested for loops with signal resolution
+- [ ] For + if state scoping (local vs global)
+- [ ] Raw signal rendering (no HTML escaping)
+- [ ] Boolean attribute rendering (true/false/missing/truthy/falsy)
+- [ ] Simple attribute rendering with value resolution
+- [ ] Template/mixed attribute rendering
+- [ ] Recursive node ref handling
+
+### Phase 4 — Handler component attributes
+- [ ] Component attribute state management
+- [ ] camelCase hyphenated attributes
+- [ ] Attribute inheritance across component nesting
+- [ ] Complex attribute state resolution
+- [ ] State priority (component > local > global)
+- [ ] Scope isolation (no parent pollution)
+- [ ] Skipped attributes (class, style, role, data-*, aria-*)
+
+### Phase 5 — Advanced
+- [ ] CSS token extraction from `var()` calls
+- [ ] Token signals in style comments
+- [ ] Hydration fragments and comment generation
+- [ ] `estimatedBufferSize` calculation
+- [ ] Fast-html generator (f-template, f-when, f-repeat)
+
+

From ebc4e4c4510a3ddbcfd9a5cff67da0c1f75ac0c8 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 19:33:29 -0800
Subject: [PATCH 3/7] Add local variable resolution and attribute rendering to
 handler

- Add resolve_value helper: checks local_vars first, then global state
- Add evaluate_condition helper: merges local vars into state for
  condition evaluation
- Fix process_for_loop to resolve collections from local vars
  (enables nested for loops like outerItem.innerItems)
- Fix process_attribute to resolve values from local vars and handle
  numeric/bool types properly
- Fix process_if to evaluate conditions against merged local+global state
- Simplify process_signal to delegate to resolve_value

13 new tests: boolean attrs (true/false/missing/multiple), simple attrs
(string/numeric), template attrs, raw signals, nested for loops,
for+if state scoping. 20 total handler tests.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 crates/webui-handler/src/lib.rs | 499 ++++++++++++++++++++++++++++----
 1 file changed, 436 insertions(+), 63 deletions(-)

diff --git a/crates/webui-handler/src/lib.rs b/crates/webui-handler/src/lib.rs
index e883fc05..95b91168 100644
--- a/crates/webui-handler/src/lib.rs
+++ b/crates/webui-handler/src/lib.rs
@@ -6,7 +6,7 @@
 use serde_json::Value;
 use std::collections::HashMap;
 use thiserror::Error;
-use webui_expressions::evaluate;
+use webui_expressions::{evaluate, ExpressionError};
 use webui_protocol::{web_ui_fragment::Fragment, WebUIFragment, WebUIProtocol};
 use webui_state::find_value_by_dotted_path;
 
@@ -171,6 +171,49 @@ impl WebUIHandler {
         self.process_fragment_id(&component.fragment_id, context)
     }
 
+    /// Resolve a dotted path value, checking local variables first, then global state.
+    fn resolve_value(&self, path: &str, context: &WebUIProcessContext) -> Option<Value> {
+        // Check local vars first
+        if let Some(first_part) = path.split('.').next() {
+            if let Some(local_value) = context.local_vars.get(first_part) {
+                if !path.contains('.') {
+                    return Some(local_value.clone());
+                }
+                let remaining = &path[first_part.len() + 1..];
+                if let Some(v) = find_value_by_dotted_path(remaining, local_value) {
+                    return Some(v);
+                }
+            }
+        }
+        // Fall back to global state
+        find_value_by_dotted_path(path, context.state)
+    }
+
+    /// Evaluate a condition expression, merging local variables into state.
+    /// Returns false if the condition references a missing value.
+    fn evaluate_condition(
+        &self,
+        condition: &webui_protocol::ConditionExpr,
+        context: &WebUIProcessContext,
+    ) -> Result<bool> {
+        let merged_state = if context.local_vars.is_empty() {
+            context.state.clone()
+        } else {
+            let mut merged = context.state.clone();
+            if let Value::Object(map) = &mut merged {
+                for (k, v) in &context.local_vars {
+                    map.insert(k.clone(), v.clone());
+                }
+            }
+            merged
+        };
+        match evaluate(condition, &merged_state) {
+            Ok(result) => Ok(result),
+            Err(ExpressionError::MissingValue(_)) => Ok(false),
+            Err(e) => Err(HandlerError::Evaluation(e.to_string())),
+        }
+    }
+
     /// Process a for loop fragment.
     ///
     /// Creates a new context for each iteration that includes the current loop item.
@@ -181,39 +224,27 @@ impl WebUIHandler {
         for_loop: &webui_protocol::WebUIFragmentFor,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
-        // Get the collection to iterate over
         let collection_name = &for_loop.collection;
 
-        // First check in global state
-        let collection =
-            if let Some(val) = find_value_by_dotted_path(collection_name, context.state) {
-                match val {
-                    Value::Array(arr) => arr,
-                    _ => {
-                        return Err(HandlerError::TypeError(format!(
-                            "Collection '{}' is not an array",
-                            collection_name
-                        )))
-                    }
-                }
-            } else {
-                return Err(HandlerError::MissingData(collection_name.to_string()));
-            };
+        let collection = self
+            .resolve_value(collection_name, context)
+            .ok_or_else(|| HandlerError::MissingData(collection_name.to_string()))?;
+
+        let items = match collection {
+            Value::Array(arr) => arr,
+            _ => {
+                return Err(HandlerError::TypeError(format!(
+                    "Collection '{}' is not an array",
+                    collection_name
+                )))
+            }
+        };
 
         let item_name = &for_loop.item;
-
-        // Process each item in the collection
-        for item in collection {
-            // Save the current local vars
+        for item in items {
             let saved_vars = context.local_vars.clone();
-
-            // Add the current item to the context
-            context.local_vars.insert(item_name.clone(), item.clone());
-
-            // Process the fragment with the updated context
+            context.local_vars.insert(item_name.clone(), item);
             self.process_fragment_id(&for_loop.fragment_id, context)?;
-
-            // Restore the original context
             context.local_vars = saved_vars;
         }
 
@@ -230,30 +261,9 @@ impl WebUIHandler {
         signal: &webui_protocol::WebUIFragmentSignal,
         context: &WebUIProcessContext,
     ) -> Result<String> {
-        // Parse the path (could be nested like "person.name")
-        let path = &signal.value;
-
-        // First check in local_vars
-        if let Some(first_part) = path.split('.').next() {
-            if let Some(local_value) = context.local_vars.get(first_part) {
-                // If this is a simple path (no dots), just return the value
-                if !path.contains('.') {
-                    return self.format_signal_value(local_value, signal.raw);
-                }
-
-                // Otherwise, use find_value_by_dotted_path starting from the second part
-                let remaining_path = &path[first_part.len() + 1..]; // +1 for the dot
-                if let Some(nested_value) = find_value_by_dotted_path(remaining_path, local_value) {
-                    return self.format_signal_value(&nested_value, signal.raw);
-                }
-            }
-        }
-
-        // If not found in local vars, check in global state
-        if let Some(value) = find_value_by_dotted_path(path, context.state) {
+        if let Some(value) = self.resolve_value(&signal.value, context) {
             return self.format_signal_value(&value, signal.raw);
         }
-
         Ok(String::new())
     }
 
@@ -281,16 +291,13 @@ impl WebUIHandler {
         if_cond: &webui_protocol::WebUIFragmentIf,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
-        // Evaluate the condition
         let condition = if_cond
             .condition
             .as_ref()
             .ok_or_else(|| HandlerError::Rendering("If fragment missing condition".to_string()))?;
-        let condition_met = evaluate(condition, context.state)
-            .map_err(|e| HandlerError::Evaluation(e.to_string()))?;
+        let condition_met = self.evaluate_condition(condition, context)?;
 
         if condition_met {
-            // Process the content if condition is true
             self.process_fragment_id(&if_cond.fragment_id, context)?;
         }
 
@@ -305,8 +312,7 @@ impl WebUIHandler {
     ) -> Result<()> {
         // Boolean attribute with condition tree
         if let Some(condition) = &attr.condition_tree {
-            let condition_met = evaluate(condition, context.state)
-                .map_err(|e| HandlerError::Evaluation(e.to_string()))?;
+            let condition_met = self.evaluate_condition(condition, context)?;
             if condition_met {
                 context.writer.write(&format!(" {}", attr.name))?;
             }
@@ -323,12 +329,18 @@ impl WebUIHandler {
 
         // Simple dynamic attribute
         if !attr.value.is_empty() {
-            let value = find_value_by_dotted_path(&attr.value, context.state)
-                .and_then(|v| v.as_str().map(|s| s.to_string()))
-                .unwrap_or_default();
-            context
-                .writer
-                .write(&format!(" {}=\"{}\"", attr.name, value))?;
+            if let Some(value) = self.resolve_value(&attr.value, context) {
+                let formatted = match &value {
+                    Value::String(s) => s.clone(),
+                    Value::Number(n) => n.to_string(),
+                    Value::Bool(b) => b.to_string(),
+                    Value::Null => String::new(),
+                    _ => value.to_string(),
+                };
+                context
+                    .writer
+                    .write(&format!(" {}=\"{}\"", attr.name, formatted))?;
+            }
         }
 
         Ok(())
@@ -374,7 +386,7 @@ pub fn handle(
 mod tests {
     use super::*;
     use std::cell::RefCell;
-    use webui_protocol::FragmentList;
+    use webui_protocol::{ConditionExpr, FragmentList};
     use webui_test_utils::test_json;
 
     // A simple test writer implementation
@@ -665,4 +677,365 @@ mod tests {
         assert_eq!(writer.get_content(), "Hello, !");
         assert!(writer.is_ended());
     }
+
+    // ── Boolean attribute rendering tests ─────────────────────────────
+
+    #[test]
+    fn test_boolean_attr_true() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<button"),
+                    WebUIFragment::attribute_boolean(
+                        "disabled",
+                        ConditionExpr::identifier("isDisabled"),
+                    ),
+                    WebUIFragment::raw(">Click</button>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"isDisabled": true});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<button disabled>Click</button>");
+    }
+
+    #[test]
+    fn test_boolean_attr_false() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<button"),
+                    WebUIFragment::attribute_boolean(
+                        "disabled",
+                        ConditionExpr::identifier("isDisabled"),
+                    ),
+                    WebUIFragment::raw(">Click</button>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"isDisabled": false});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<button>Click</button>");
+    }
+
+    #[test]
+    fn test_boolean_attr_missing() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<input type=\"checkbox\""),
+                    WebUIFragment::attribute_boolean(
+                        "checked",
+                        ConditionExpr::identifier("checked"),
+                    ),
+                    WebUIFragment::raw(">"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<input type=\"checkbox\">");
+    }
+
+    #[test]
+    fn test_boolean_attr_multiple() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<input type=\"checkbox\""),
+                    WebUIFragment::attribute_boolean(
+                        "checked",
+                        ConditionExpr::identifier("checked"),
+                    ),
+                    WebUIFragment::attribute_boolean(
+                        "disabled",
+                        ConditionExpr::identifier("disabled"),
+                    ),
+                    WebUIFragment::raw(">"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"checked": true, "disabled": false});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<input type=\"checkbox\" checked>");
+    }
+
+    // ── Simple attribute rendering tests ──────────────────────────────
+
+    #[test]
+    fn test_attribute_with_value() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<input"),
+                    WebUIFragment::attribute("value", "inputValue"),
+                    WebUIFragment::raw(">"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"inputValue": "Hello"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<input value=\"Hello\">");
+    }
+
+    #[test]
+    fn test_attribute_with_falsy_numeric() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<div name=\"test\""),
+                    WebUIFragment::attribute("handle", "number"),
+                    WebUIFragment::raw("></div>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"number": 0});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<div name=\"test\" handle=\"0\"></div>"
+        );
+    }
+
+    // ── Template attribute rendering tests ────────────────────────────
+
+    #[test]
+    fn test_mixed_attribute_template() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<input"),
+                    WebUIFragment::attribute_template("value", "attr-1"),
+                    WebUIFragment::raw(">"),
+                ],
+            },
+        );
+        fragments.insert(
+            "attr-1".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("hello "),
+                    WebUIFragment::signal("item", false),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"item": "world"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<input value=\"hello world\">");
+    }
+
+    // ── Raw signal rendering test ─────────────────────────────────────
+
+    #[test]
+    fn test_raw_signal_not_escaped() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::signal("html", false),
+                    WebUIFragment::signal("html", true),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"html": "<strong>hi</strong>"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "&lt;strong&gt;hi&lt;&#x2F;strong&gt;<strong>hi</strong>"
+        );
+    }
+
+    // ── Nested for loop tests ─────────────────────────────────────────
+
+    #[test]
+    fn test_nested_for_loop() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<div>"),
+                    WebUIFragment::for_loop("outerItem", "outerItems", "outer"),
+                    WebUIFragment::raw("</div>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "outer".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<div>"),
+                    WebUIFragment::for_loop("innerItem", "outerItem.innerItems", "inner"),
+                    WebUIFragment::raw("</div>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "inner".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("<span>Inner</span>")],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({
+            "outerItems": [
+                {"innerItems": [{"name": "A"}, {"name": "B"}]},
+                {"innerItems": [{"name": "C"}]}
+            ]
+        });
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<div><div><span>Inner</span><span>Inner</span></div><div><span>Inner</span></div></div>"
+        );
+    }
+
+    #[test]
+    fn test_nested_for_with_signals() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::for_loop("item", "items", "item-tpl")],
+            },
+        );
+        fragments.insert(
+            "item-tpl".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<p>"),
+                    WebUIFragment::signal("item.name", false),
+                    WebUIFragment::raw("</p>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"items": [{"name": "Alice"}, {"name": "Bob"}]});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "<p>Alice</p><p>Bob</p>");
+    }
+
+    #[test]
+    fn test_nested_for_with_global_state() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::for_loop("item", "items", "item-tpl")],
+            },
+        );
+        fragments.insert(
+            "item-tpl".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::signal("item.name", false),
+                    WebUIFragment::raw(" - "),
+                    WebUIFragment::signal("globalTitle", false),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"items": [{"name": "A"}, {"name": "B"}], "globalTitle": "Title"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "A - TitleB - Title");
+    }
+
+    // ── For + If state scoping tests ──────────────────────────────────
+
+    #[test]
+    fn test_if_in_for_uses_local_state() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::for_loop("item", "items", "item-tpl")],
+            },
+        );
+        fragments.insert(
+            "item-tpl".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::if_cond(
+                    ConditionExpr::identifier("item.visible"),
+                    "visible-tpl",
+                )],
+            },
+        );
+        fragments.insert(
+            "visible-tpl".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::signal("item.name", false)],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"items": [{"name": "Show", "visible": true}, {"name": "Hide", "visible": false}]});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "Show");
+    }
+
+    #[test]
+    fn test_for_if_local_overrides_global() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::for_loop("item", "items", "item-tpl")],
+            },
+        );
+        fragments.insert(
+            "item-tpl".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::if_cond(
+                    ConditionExpr::identifier("item.flag"),
+                    "show-tpl",
+                )],
+            },
+        );
+        fragments.insert(
+            "show-tpl".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("yes")],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        // Global flag is true, but local item.flag is false for second item
+        let state = test_json!({"flag": true, "items": [{"flag": true}, {"flag": false}]});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(writer.get_content(), "yes");
+    }
 }

From f8a197ca0a54417cea7fc021b14e9cfa7e3a498b Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 20:22:34 -0800
Subject: [PATCH 4/7] Add component attribute state management to handler

- Add component_attrs field to WebUIProcessContext for accumulating
  attribute values between attrStart and the component fragment
- Add convert_hyphen_to_camel_case helper for data-* attribute names
- Update process_attribute to accumulate attrs: boolean, raw_value,
  dynamic, complex, and template attribute types
- Add render_template_attr_value for raw (unescaped) template rendering
- Update process_component to scope local_vars from accumulated attrs
  with proper save/restore for parent scope isolation
- Add component_attr_name helper for stripping : prefix and camelCase
- Add 6 tests covering simple, template, camelCase, complex, boolean,
  and parent scope isolation scenarios

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 crates/webui-handler/src/lib.rs | 470 ++++++++++++++++++++++++++++++--
 1 file changed, 447 insertions(+), 23 deletions(-)

diff --git a/crates/webui-handler/src/lib.rs b/crates/webui-handler/src/lib.rs
index 95b91168..49e4b0ef 100644
--- a/crates/webui-handler/src/lib.rs
+++ b/crates/webui-handler/src/lib.rs
@@ -58,10 +58,40 @@ pub struct WebUIHandler {
 struct WebUIProcessContext<'a> {
     protocol: &'a WebUIProtocol,
     state: &'a Value,
+    #[allow(dead_code)]
     depth: usize,
     writer: &'a mut dyn ResponseWriter,
     // Add local variables map to store context-specific variables (like loop items)
     local_vars: HashMap<String, Value>,
+    /// Accumulates component attribute values between attrStart and the component fragment.
+    component_attrs: HashMap<String, Value>,
+}
+
+/// Convert hyphenated name to camelCase (e.g., "data-title" → "dataTitle").
+fn convert_hyphen_to_camel_case(name: &str) -> String {
+    let mut result = String::with_capacity(name.len());
+    let mut capitalize_next = false;
+    for ch in name.chars() {
+        if ch == '-' {
+            capitalize_next = true;
+        } else if capitalize_next {
+            result.extend(ch.to_uppercase());
+            capitalize_next = false;
+        } else {
+            result.push(ch);
+        }
+    }
+    result
+}
+
+/// Get the component attribute name, stripping `:` prefix and converting to camelCase.
+fn component_attr_name(name: &str) -> String {
+    let stripped = name.strip_prefix(':').unwrap_or(name);
+    if stripped.contains('-') {
+        convert_hyphen_to_camel_case(stripped)
+    } else {
+        stripped.to_string()
+    }
 }
 
 impl WebUIHandler {
@@ -93,6 +123,7 @@ impl WebUIHandler {
             depth: 0,
             writer,
             local_vars: HashMap::new(),
+            component_attrs: HashMap::new(),
         };
         self.process_fragment_id(main_fragment_id, &mut context)?;
 
@@ -160,15 +191,20 @@ impl WebUIHandler {
         component: &webui_protocol::WebUIFragmentComponent,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
-        // Write CSS once per component at the first level
-        if context.depth == 0 {
-            context.writer.write(&format!(
-                "<link rel=\"stylesheet\" href=\"./{}.css\">",
-                component.fragment_id
-            ))?;
-        }
+        // Save parent scope
+        let saved_local_vars = std::mem::take(&mut context.local_vars);
+        let saved_component_attrs = std::mem::take(&mut context.component_attrs);
+
+        // Component gets accumulated attrs as its local vars
+        context.local_vars = saved_component_attrs;
 
-        self.process_fragment_id(&component.fragment_id, context)
+        self.process_fragment_id(&component.fragment_id, context)?;
+
+        // Restore parent scope
+        context.local_vars = saved_local_vars;
+        context.component_attrs = HashMap::new();
+
+        Ok(())
     }
 
     /// Resolve a dotted path value, checking local variables first, then global state.
@@ -310,9 +346,22 @@ impl WebUIHandler {
         attr: &webui_protocol::WebUIFragmentAttribute,
         context: &mut WebUIProcessContext,
     ) -> Result<()> {
+        // Initialize component attribute accumulator on attrStart
+        if attr.attr_start {
+            context.component_attrs = HashMap::new();
+        }
+
         // Boolean attribute with condition tree
         if let Some(condition) = &attr.condition_tree {
             let condition_met = self.evaluate_condition(condition, context)?;
+
+            if !attr.attr_skip {
+                let name = component_attr_name(&attr.name);
+                context
+                    .component_attrs
+                    .insert(name, Value::Bool(condition_met));
+            }
+
             if condition_met {
                 context.writer.write(&format!(" {}", attr.name))?;
             }
@@ -321,31 +370,97 @@ impl WebUIHandler {
 
         // Template attribute (mixed static + dynamic)
         if !attr.template.is_empty() {
-            context.writer.write(&format!(" {}=\"", attr.name))?;
-            self.process_fragment_id(&attr.template, context)?;
-            context.writer.write("\"")?;
+            let raw_value = self.render_template_attr_value(&attr.template, context)?;
+            let escaped = html_escape::encode_safe(&raw_value);
+            context
+                .writer
+                .write(&format!(" {}=\"{}\"", attr.name, escaped))?;
+
+            if !attr.attr_skip {
+                let name = component_attr_name(&attr.name);
+                context
+                    .component_attrs
+                    .insert(name, Value::String(raw_value));
+            }
             return Ok(());
         }
 
-        // Simple dynamic attribute
+        // Simple attribute
         if !attr.value.is_empty() {
-            if let Some(value) = self.resolve_value(&attr.value, context) {
-                let formatted = match &value {
-                    Value::String(s) => s.clone(),
-                    Value::Number(n) => n.to_string(),
-                    Value::Bool(b) => b.to_string(),
-                    Value::Null => String::new(),
-                    _ => value.to_string(),
-                };
+            if attr.raw_value {
+                // Static attribute — value is the literal string
                 context
                     .writer
-                    .write(&format!(" {}=\"{}\"", attr.name, formatted))?;
+                    .write(&format!(" {}=\"{}\"", attr.name, attr.value))?;
+                if !attr.attr_skip {
+                    let name = component_attr_name(&attr.name);
+                    context
+                        .component_attrs
+                        .insert(name, Value::String(attr.value.clone()));
+                }
+            } else if attr.complex {
+                // Complex attribute — resolve value, don't render to HTML, store as state
+                if let Some(value) = self.resolve_value(&attr.value, context) {
+                    if !attr.attr_skip {
+                        let stripped = attr.name.strip_prefix(':').unwrap_or(&attr.name);
+                        let name = component_attr_name(stripped);
+                        context.component_attrs.insert(name, value);
+                    }
+                }
+            } else {
+                // Dynamic attribute — resolve and render
+                if let Some(value) = self.resolve_value(&attr.value, context) {
+                    let formatted = match &value {
+                        Value::String(s) => html_escape::encode_safe(s).to_string(),
+                        Value::Number(n) => n.to_string(),
+                        Value::Bool(b) => b.to_string(),
+                        Value::Null => String::new(),
+                        _ => value.to_string(),
+                    };
+                    context
+                        .writer
+                        .write(&format!(" {}=\"{}\"", attr.name, formatted))?;
+
+                    if !attr.attr_skip {
+                        let name = component_attr_name(&attr.name);
+                        context.component_attrs.insert(name, value);
+                    }
+                }
             }
         }
 
         Ok(())
     }
 
+    /// Render a template attribute's fragments into a raw (unescaped) string.
+    fn render_template_attr_value(
+        &self,
+        template_id: &str,
+        context: &WebUIProcessContext,
+    ) -> Result<String> {
+        let fragments = context
+            .protocol
+            .fragments
+            .get(template_id)
+            .ok_or_else(|| HandlerError::MissingFragment(template_id.to_string()))?;
+        let mut raw_value = String::new();
+        for frag in &fragments.fragments {
+            match frag.fragment.as_ref() {
+                Some(Fragment::Raw(raw)) => raw_value.push_str(&raw.value),
+                Some(Fragment::Signal(signal)) => {
+                    if let Some(value) = self.resolve_value(&signal.value, context) {
+                        match &value {
+                            Value::String(s) => raw_value.push_str(s),
+                            _ => raw_value.push_str(&value.to_string()),
+                        }
+                    }
+                }
+                _ => {}
+            }
+        }
+        Ok(raw_value)
+    }
+
     /// Render the UI based on the protocol and state
     pub fn render(
         &self,
@@ -359,6 +474,7 @@ impl WebUIHandler {
             depth: 0,
             writer,
             local_vars: HashMap::new(),
+            component_attrs: HashMap::new(),
         };
 
         self.process_fragment_id("index.html", &mut context)
@@ -386,7 +502,7 @@ pub fn handle(
 mod tests {
     use super::*;
     use std::cell::RefCell;
-    use webui_protocol::{ConditionExpr, FragmentList};
+    use webui_protocol::{web_ui_fragment, ConditionExpr, FragmentList, WebUIFragmentAttribute};
     use webui_test_utils::test_json;
 
     // A simple test writer implementation
@@ -615,7 +731,7 @@ mod tests {
         // Check the output
         assert_eq!(
             writer.get_content(),
-            "Component: <link rel=\"stylesheet\" href=\"./my-component.css\"><div>Component Content</div>"
+            "Component: <div>Component Content</div>"
         );
         assert!(writer.is_ended());
     }
@@ -1038,4 +1154,312 @@ mod tests {
         handle(&protocol, &state, &mut writer).unwrap();
         assert_eq!(writer.get_content(), "yes");
     }
+
+    // ── Component attribute state tests ───────────────────────────────
+
+    #[test]
+    fn test_component_attr_state_simple() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<my-comp"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "title".into(),
+                                value: "Attribute Title".into(),
+                                attr_start: true,
+                                raw_value: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("my-comp"),
+                    WebUIFragment::raw("</my-comp>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "my-comp".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<span>"),
+                    WebUIFragment::signal("title", false),
+                    WebUIFragment::raw("</span>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"title": "Global Title"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<my-comp title=\"Attribute Title\"><span>Attribute Title</span></my-comp>"
+        );
+    }
+
+    #[test]
+    fn test_component_attr_state_template() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<my-comp"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "title".into(),
+                                template: "title-attr".into(),
+                                attr_start: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("my-comp"),
+                    WebUIFragment::raw("</my-comp>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "title-attr".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("hello "),
+                    WebUIFragment::signal("item", false),
+                ],
+            },
+        );
+        fragments.insert(
+            "my-comp".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<span>"),
+                    WebUIFragment::signal("title", false),
+                    WebUIFragment::raw("</span>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"item": "<world>"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<my-comp title=\"hello &lt;world&gt;\"><span>hello &lt;world&gt;</span></my-comp>"
+        );
+    }
+
+    #[test]
+    fn test_component_attr_camel_case() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<my-comp"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "data-title".into(),
+                                template: "dt-attr".into(),
+                                attr_start: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("my-comp"),
+                    WebUIFragment::raw("</my-comp>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "dt-attr".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("prefix "),
+                    WebUIFragment::signal("item", false),
+                ],
+            },
+        );
+        fragments.insert(
+            "my-comp".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<span>"),
+                    WebUIFragment::signal("dataTitle", false),
+                    WebUIFragment::raw("</span>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"item": "a&b"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<my-comp data-title=\"prefix a&amp;b\"><span>prefix a&amp;b</span></my-comp>"
+        );
+    }
+
+    #[test]
+    fn test_component_complex_attr() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<my-comp"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: ":item".into(),
+                                value: "complexItem".into(),
+                                attr_start: true,
+                                complex: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("my-comp"),
+                    WebUIFragment::raw("</my-comp>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "my-comp".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<span>"),
+                    WebUIFragment::signal("item.foo", false),
+                    WebUIFragment::raw("</span><p>"),
+                    WebUIFragment::signal("item.bar", false),
+                    WebUIFragment::raw("</p>"),
+                ],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"complexItem": {"foo": 1, "bar": "true"}});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<my-comp><span>1</span><p>true</p></my-comp>"
+        );
+    }
+
+    #[test]
+    fn test_component_no_parent_pollution() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<parent"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "var".into(),
+                                value: "var".into(),
+                                attr_start: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("parent"),
+                    WebUIFragment::raw("</parent>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "parent".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("Before: "),
+                    WebUIFragment::signal("var", false),
+                    WebUIFragment::raw("<child foo"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "var".into(),
+                                value: "replaced".into(),
+                                raw_value: true,
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("child"),
+                    WebUIFragment::raw("Label</child>After: "),
+                    WebUIFragment::signal("var", false),
+                ],
+            },
+        );
+        fragments.insert("child".to_string(), FragmentList { fragments: vec![] });
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"var": "original"});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<parent var=\"original\">Before: original<child foo var=\"replaced\">Label</child>After: original</parent>"
+        );
+    }
+
+    #[test]
+    fn test_component_boolean_attr_state() {
+        let mut fragments = HashMap::new();
+        fragments.insert(
+            "index.html".to_string(),
+            FragmentList {
+                fragments: vec![
+                    WebUIFragment::raw("<my-comp"),
+                    WebUIFragment {
+                        fragment: Some(web_ui_fragment::Fragment::Attribute(
+                            WebUIFragmentAttribute {
+                                name: "disabled".into(),
+                                attr_start: true,
+                                condition_tree: Some(ConditionExpr::identifier("isDisabled")),
+                                ..Default::default()
+                            },
+                        )),
+                    },
+                    WebUIFragment::raw(">"),
+                    WebUIFragment::component("my-comp"),
+                    WebUIFragment::raw("</my-comp>"),
+                ],
+            },
+        );
+        fragments.insert(
+            "my-comp".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::if_cond(
+                    ConditionExpr::identifier("disabled"),
+                    "show",
+                )],
+            },
+        );
+        fragments.insert(
+            "show".to_string(),
+            FragmentList {
+                fragments: vec![WebUIFragment::raw("disabled!")],
+            },
+        );
+        let protocol = WebUIProtocol { fragments };
+        let state = test_json!({"isDisabled": true});
+        let mut writer = TestWriter::new();
+        handle(&protocol, &state, &mut writer).unwrap();
+        assert_eq!(
+            writer.get_content(),
+            "<my-comp disabled>disabled!</my-comp>"
+        );
+    }
 }

From aebdb00518599f51391bbd38e0538aeb7d870614 Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 20:51:26 -0800
Subject: [PATCH 5/7] Add assert_fragments! macro for concise parser test
 assertions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add fragment matcher DSL to webui-test-utils with constructors:
raw(), signal(), attr(), bool_attr(), attr_raw(), attr_skip(),
attr_complex(), component(), for_loop(), if_cond() and variants
with attr_start.

Macros assert_fragments! and assert_stream! provide:
- Count verification with descriptive fragment dump on mismatch
- Per-index field-level assertions with clear error messages
- Compact syntax mirroring the Node prototype test style

Migrate 3 parser tests as demonstration (15 lines → 5 lines each).
Remaining tests can be migrated incrementally.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 crates/webui-parser/src/lib.rs     |  74 +++---
 crates/webui-test-utils/Cargo.toml |   3 +-
 crates/webui-test-utils/src/lib.rs | 350 +++++++++++++++++++++++++++++
 3 files changed, 378 insertions(+), 49 deletions(-)

diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index 46c88703..fb8d4502 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -1077,6 +1077,7 @@ impl HtmlParser {
 #[cfg(test)]
 mod tests {
     use webui_protocol::condition_expr;
+    use webui_test_utils::*;
 
     use super::*;
 
@@ -1393,22 +1394,15 @@ mod tests {
         );
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
-
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 5);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
-        );
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
-                a.name == "appearance" && a.value == "subtle" && a.attr_start && a.raw_value)
-        );
-        assert!(matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
-        assert!(
-            matches!(entry[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(entry[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Hello World</custom-element>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-element"),
+                attr_raw_start("appearance", "subtle"),
+                raw(">"),
+                component("custom-element"),
+                raw("Hello World</custom-element>"),
+            ]
         );
     }
 
@@ -1753,47 +1747,31 @@ mod tests {
     #[test]
     fn test_attribute_handlebars_in_href() {
         // Port of: 'should process handlebars from attributes as signals'
-        // <a href="{{url}}">{{name}}</a>
         let (fragments, _) = parse_and_get_fragments(r#"<a href="{{url}}">{{name}}</a>"#);
-
-        assert_eq!(fragments.len(), 5);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<a")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "href" && attr.value == "url" && attr.template.is_empty() && !attr.complex)
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">")
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Signal(signal)) if signal.value == "name")
-        );
-        assert!(
-            matches!(fragments[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</a>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<a"),
+                attr("href", "url"),
+                raw(">"),
+                signal("name"),
+                raw("</a>"),
+            ]
         );
     }
 
     #[test]
     fn test_attribute_boolean_with_handlebars() {
         // Port of: 'should process boolean attribute with handlebars expression'
-        // <button ?disabled={{isDisabled}}>Click</button>
         let (fragments, _) =
             parse_and_get_fragments("<button ?disabled={{isDisabled}}>Click</button>");
-
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<button")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "disabled" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isDisabled"))
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">Click</button>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<button"),
+                bool_attr("disabled", "isDisabled"),
+                raw(">Click</button>"),
+            ]
         );
     }
 
diff --git a/crates/webui-test-utils/Cargo.toml b/crates/webui-test-utils/Cargo.toml
index d1158571..c7d3b8f3 100644
--- a/crates/webui-test-utils/Cargo.toml
+++ b/crates/webui-test-utils/Cargo.toml
@@ -11,4 +11,5 @@ repository.workspace = true
 serde_json = { workspace = true }
 mockall = { workspace = true }
 tokio-test = { workspace = true }
-tempfile = { workspace = true }
\ No newline at end of file
+tempfile = { workspace = true }
+webui-protocol = { path = "../webui-protocol" }
\ No newline at end of file
diff --git a/crates/webui-test-utils/src/lib.rs b/crates/webui-test-utils/src/lib.rs
index 1b8012ac..433bd5c7 100644
--- a/crates/webui-test-utils/src/lib.rs
+++ b/crates/webui-test-utils/src/lib.rs
@@ -5,6 +5,7 @@
 use std::fs;
 use std::{collections::HashMap, path::PathBuf};
 use tempfile::TempDir;
+pub use webui_protocol;
 
 /// A macro that wraps `serde_json::json!` but allows bypassing clippy::disallowed_methods.
 ///
@@ -18,6 +19,355 @@ macro_rules! test_json {
     }};
 }
 
+/// Assert that a fragment list matches the expected pattern.
+///
+/// Each matcher is one of:
+/// - `raw("text")` — Raw fragment with exact value
+/// - `signal("name")` — Escaped signal
+/// - `signal("name", raw)` — Raw (unescaped) signal
+/// - `attr("name", value: "v")` — Simple dynamic attribute
+/// - `attr("name", template: "id")` — Template attribute
+/// - `attr("name", complex: "v")` — Complex (:-prefixed) attribute
+/// - `bool_attr("name", "signal")` — Boolean attribute with identifier condition
+/// - `attr_raw("name", "v")` — Static attribute with rawValue
+/// - `attr_raw("name", "v", attr_start)` — Static rawValue with attrStart
+/// - `attr_skip("name", "v")` — Skipped attribute
+/// - `component("id")` — Component fragment
+/// - `for_loop("item", "collection", "template")` — For loop
+/// - `if_cond("template")` — If condition
+#[macro_export]
+macro_rules! assert_fragments {
+    ($fragments:expr, [ $($matcher:expr),* $(,)? ]) => {{
+        let matchers: Vec<$crate::FragmentMatcher> = vec![$($matcher),*];
+        $crate::assert_fragment_list(&$fragments, &matchers);
+    }};
+}
+
+/// Assert that a named stream in the records matches the expected pattern.
+#[macro_export]
+macro_rules! assert_stream {
+    ($records:expr, $stream_id:expr, [ $($matcher:expr),* $(,)? ]) => {{
+        let stream = $records.get($stream_id)
+            .unwrap_or_else(|| panic!("Missing stream: {}", $stream_id));
+        let matchers: Vec<$crate::FragmentMatcher> = vec![$($matcher),*];
+        $crate::assert_fragment_list(&stream.fragments, &matchers);
+    }};
+}
+
+// ── Fragment matcher types ──────────────────────────────────────────
+
+/// Describes an expected fragment for assertion matching.
+#[derive(Debug)]
+pub enum FragmentMatcher {
+    Raw(String),
+    Signal {
+        value: String,
+        raw: bool,
+    },
+    Attribute(AttrMatcher),
+    Component(String),
+    ForLoop {
+        item: String,
+        collection: String,
+        template: String,
+    },
+    IfCond {
+        template: String,
+    },
+}
+
+/// Describes expected attribute properties.
+#[derive(Debug, Default)]
+pub struct AttrMatcher {
+    pub name: String,
+    pub value: Option<String>,
+    pub template: Option<String>,
+    pub complex: bool,
+    pub attr_start: bool,
+    pub attr_skip: bool,
+    pub raw_value: bool,
+    pub bool_signal: Option<String>,
+}
+
+// ── Matcher constructors ────────────────────────────────────────────
+
+/// Match a raw fragment.
+pub fn raw(value: &str) -> FragmentMatcher {
+    FragmentMatcher::Raw(value.to_string())
+}
+
+/// Match an escaped signal fragment.
+pub fn signal(value: &str) -> FragmentMatcher {
+    FragmentMatcher::Signal {
+        value: value.to_string(),
+        raw: false,
+    }
+}
+
+/// Match a raw (unescaped) signal fragment.
+pub fn signal_raw(value: &str) -> FragmentMatcher {
+    FragmentMatcher::Signal {
+        value: value.to_string(),
+        raw: true,
+    }
+}
+
+/// Match a simple dynamic attribute.
+pub fn attr(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        ..Default::default()
+    })
+}
+
+/// Match a template (mixed) attribute.
+pub fn attr_template(name: &str, template: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        template: Some(template.to_string()),
+        ..Default::default()
+    })
+}
+
+/// Match a complex (:-prefixed) attribute.
+pub fn attr_complex(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        complex: true,
+        ..Default::default()
+    })
+}
+
+/// Match a complex attribute with attrStart.
+pub fn attr_complex_start(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        complex: true,
+        attr_start: true,
+        ..Default::default()
+    })
+}
+
+/// Match a boolean attribute with an identifier condition.
+pub fn bool_attr(name: &str, signal: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        bool_signal: Some(signal.to_string()),
+        ..Default::default()
+    })
+}
+
+/// Match a boolean attribute with attrStart.
+pub fn bool_attr_start(name: &str, signal: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        bool_signal: Some(signal.to_string()),
+        attr_start: true,
+        ..Default::default()
+    })
+}
+
+/// Match a static rawValue attribute.
+pub fn attr_raw(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        raw_value: true,
+        ..Default::default()
+    })
+}
+
+/// Match a static rawValue attribute with attrStart.
+pub fn attr_raw_start(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        raw_value: true,
+        attr_start: true,
+        ..Default::default()
+    })
+}
+
+/// Match a skipped attribute.
+pub fn attr_skip(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        attr_skip: true,
+        ..Default::default()
+    })
+}
+
+/// Match a simple dynamic attribute with attrStart.
+pub fn attr_start(name: &str, value: &str) -> FragmentMatcher {
+    FragmentMatcher::Attribute(AttrMatcher {
+        name: name.to_string(),
+        value: Some(value.to_string()),
+        attr_start: true,
+        ..Default::default()
+    })
+}
+
+/// Match a component fragment.
+pub fn component(id: &str) -> FragmentMatcher {
+    FragmentMatcher::Component(id.to_string())
+}
+
+/// Match a for-loop fragment.
+pub fn for_loop(item: &str, collection: &str, template: &str) -> FragmentMatcher {
+    FragmentMatcher::ForLoop {
+        item: item.to_string(),
+        collection: collection.to_string(),
+        template: template.to_string(),
+    }
+}
+
+/// Match an if-condition fragment.
+pub fn if_cond(template: &str) -> FragmentMatcher {
+    FragmentMatcher::IfCond {
+        template: template.to_string(),
+    }
+}
+
+// ── Assertion implementation ────────────────────────────────────────
+
+/// Assert that a fragment list matches the expected matchers.
+pub fn assert_fragment_list(
+    fragments: &[webui_protocol::WebUIFragment],
+    matchers: &[FragmentMatcher],
+) {
+    use webui_protocol::web_ui_fragment::Fragment;
+
+    assert_eq!(
+        fragments.len(),
+        matchers.len(),
+        "Fragment count mismatch: got {} fragments, expected {}\nFragments: {:#?}",
+        fragments.len(),
+        matchers.len(),
+        fragments.iter().map(format_fragment).collect::<Vec<_>>()
+    );
+
+    for (i, (frag, matcher)) in fragments.iter().zip(matchers.iter()).enumerate() {
+        match (frag.fragment.as_ref(), matcher) {
+            (Some(Fragment::Raw(r)), FragmentMatcher::Raw(expected)) => {
+                assert_eq!(r.value, *expected, "Fragment[{}]: raw value mismatch", i);
+            }
+            (Some(Fragment::Signal(s)), FragmentMatcher::Signal { value, raw }) => {
+                assert_eq!(s.value, *value, "Fragment[{}]: signal value mismatch", i);
+                assert_eq!(s.raw, *raw, "Fragment[{}]: signal raw flag mismatch", i);
+            }
+            (Some(Fragment::Attribute(a)), FragmentMatcher::Attribute(m)) => {
+                assert_eq!(a.name, m.name, "Fragment[{}]: attr name mismatch", i);
+                if let Some(ref v) = m.value {
+                    assert_eq!(a.value, *v, "Fragment[{}]: attr value mismatch", i);
+                }
+                if let Some(ref t) = m.template {
+                    assert_eq!(a.template, *t, "Fragment[{}]: attr template mismatch", i);
+                }
+                assert_eq!(
+                    a.complex, m.complex,
+                    "Fragment[{}]: attr complex mismatch",
+                    i
+                );
+                assert_eq!(
+                    a.attr_start, m.attr_start,
+                    "Fragment[{}]: attr_start mismatch",
+                    i
+                );
+                assert_eq!(
+                    a.attr_skip, m.attr_skip,
+                    "Fragment[{}]: attr_skip mismatch",
+                    i
+                );
+                assert_eq!(
+                    a.raw_value, m.raw_value,
+                    "Fragment[{}]: raw_value mismatch",
+                    i
+                );
+                if let Some(ref sig) = m.bool_signal {
+                    let cond = a
+                        .condition_tree
+                        .as_ref()
+                        .unwrap_or_else(|| panic!("Fragment[{}]: expected condition_tree", i));
+                    match cond.expr.as_ref() {
+                        Some(webui_protocol::condition_expr::Expr::Identifier(id)) => {
+                            assert_eq!(
+                                id.value, *sig,
+                                "Fragment[{}]: bool attr signal mismatch",
+                                i
+                            );
+                        }
+                        other => panic!(
+                            "Fragment[{}]: expected identifier condition, got {:?}",
+                            i, other
+                        ),
+                    }
+                }
+            }
+            (Some(Fragment::Component(c)), FragmentMatcher::Component(id)) => {
+                assert_eq!(c.fragment_id, *id, "Fragment[{}]: component id mismatch", i);
+            }
+            (
+                Some(Fragment::ForLoop(fl)),
+                FragmentMatcher::ForLoop {
+                    item,
+                    collection,
+                    template,
+                },
+            ) => {
+                assert_eq!(fl.item, *item, "Fragment[{}]: for item mismatch", i);
+                assert_eq!(
+                    fl.collection, *collection,
+                    "Fragment[{}]: for collection mismatch",
+                    i
+                );
+                assert_eq!(
+                    fl.fragment_id, *template,
+                    "Fragment[{}]: for template mismatch",
+                    i
+                );
+            }
+            (Some(Fragment::IfCond(ic)), FragmentMatcher::IfCond { template }) => {
+                assert_eq!(
+                    ic.fragment_id, *template,
+                    "Fragment[{}]: if template mismatch",
+                    i
+                );
+            }
+            (_actual, expected) => {
+                panic!(
+                    "Fragment[{}]: type mismatch\n  expected: {:?}\n  actual: {}",
+                    i,
+                    expected,
+                    format_fragment(frag)
+                );
+            }
+        }
+    }
+}
+
+fn format_fragment(frag: &webui_protocol::WebUIFragment) -> String {
+    use webui_protocol::web_ui_fragment::Fragment;
+    match frag.fragment.as_ref() {
+        Some(Fragment::Raw(r)) => format!("raw({:?})", r.value),
+        Some(Fragment::Signal(s)) => format!("signal({:?}, raw={})", s.value, s.raw),
+        Some(Fragment::Attribute(a)) => format!(
+            "attr({:?}, value={:?}, template={:?}, complex={}, start={}, skip={}, raw_value={})",
+            a.name, a.value, a.template, a.complex, a.attr_start, a.attr_skip, a.raw_value
+        ),
+        Some(Fragment::Component(c)) => format!("component({:?})", c.fragment_id),
+        Some(Fragment::ForLoop(f)) => format!(
+            "for({:?} in {:?}, template={:?})",
+            f.item, f.collection, f.fragment_id
+        ),
+        Some(Fragment::IfCond(i)) => format!("if(template={:?})", i.fragment_id),
+        None => "None".to_string(),
+    }
+}
+
 /// A test file system that manages temporary files and directories
 pub struct TestFileSystem {
     files: HashMap<String, PathBuf>,

From bf587a004493c70cccfd565af56bd4b136a3bdcd Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 21:21:00 -0800
Subject: [PATCH 6/7] Migrate parser tests to assert_fragments! macro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Convert 44 parser tests from verbose matches! patterns to the
(use .contains() patterns not supported by the macro).

matches! calls: 195 → 17
File size: 2601 → 2260 lines (-341)
All 81 tests still pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Cargo.lock                     |    1 +
 crates/webui-parser/src/lib.rs | 1049 +++++++++++---------------------
 2 files changed, 355 insertions(+), 695 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 10ab892f..4cb5bf62 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1355,6 +1355,7 @@ dependencies = [
  "serde_json",
  "tempfile",
  "tokio-test",
+ "webui-protocol",
 ]
 
 [[package]]
diff --git a/crates/webui-parser/src/lib.rs b/crates/webui-parser/src/lib.rs
index fb8d4502..8ac0a92c 100644
--- a/crates/webui-parser/src/lib.rs
+++ b/crates/webui-parser/src/lib.rs
@@ -1076,7 +1076,6 @@ impl HtmlParser {
 
 #[cfg(test)]
 mod tests {
-    use webui_protocol::condition_expr;
     use webui_test_utils::*;
 
     use super::*;
@@ -1089,23 +1088,11 @@ mod tests {
 
         assert!(result.is_ok());
         let fragment_records = parser.into_fragment_records();
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 3);
 
-        // Verify each fragment
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "Hello, ")
-        );
-        assert!(
-            matches!(fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "name" && !signal.raw
-            )
-        );
-        assert!(
-            matches!(fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "!")
+        assert_stream!(
+            fragment_records,
+            "test.html",
+            [raw("Hello, "), signal("name"), raw("!"),]
         );
     }
 
@@ -1117,23 +1104,11 @@ mod tests {
 
         assert!(result.is_ok());
         let fragment_records = parser.into_fragment_records();
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 3);
 
-        // Verify each fragment
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "Hello, ")
-        );
-        assert!(
-            matches!(fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "html_content" && signal.raw
-            )
-        );
-        assert!(
-            matches!(fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "!")
+        assert_stream!(
+            fragment_records,
+            "test.html",
+            [raw("Hello, "), signal_raw("html_content"), raw("!"),]
         );
     }
 
@@ -1146,38 +1121,22 @@ mod tests {
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let fragment_records = parser.into_fragment_records();
         println!("Fragment records: {:#?}", fragment_records);
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
 
-        // Verify each fragment
-        assert_eq!(fragments.len(), 1);
-
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::ForLoop(for_loop)) if
-                for_loop.item == "item" &&
-                for_loop.collection == "items" &&
-                for_loop.fragment_id == "for-1"
-            )
+        assert_stream!(
+            fragment_records,
+            "test.html",
+            [for_loop("item", "items", "for-1"),]
         );
 
         // Verify the sub-fragment contains our item content
-        let for_fragment_list = fragment_records
-            .get("for-1")
-            .expect("Failed to get for-1 fragment");
-        let for_fragment = &for_fragment_list.fragments;
-        assert_eq!(for_fragment.len(), 3);
-        assert!(
-            matches!(for_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<div class=\"item\">")
-        );
-        assert!(
-            matches!(for_fragment.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "item.name" && !signal.raw
-            )
-        );
-        assert!(
-            matches!(for_fragment.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</div>")
+        assert_stream!(
+            fragment_records,
+            "for-1",
+            [
+                raw("<div class=\"item\">"),
+                signal("item.name"),
+                raw("</div>"),
+            ]
         );
     }
 
@@ -1191,35 +1150,18 @@ mod tests {
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let fragment_records = parser.into_fragment_records();
         println!("Fragment records: {:#?}", fragment_records);
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 1);
 
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::IfCond(if_cond)) if
-                matches!(if_cond.condition.as_ref().and_then(|c| c.expr.as_ref()), Some(condition_expr::Expr::Identifier(id)) if id.value == "isLoggedIn") &&
-                if_cond.fragment_id == "if-1"
-            )
-        );
+        assert_stream!(fragment_records, "test.html", [if_cond("if-1"),]);
 
         // Verify the sub-fragment contains our content
-        let if_fragment_list = fragment_records
-            .get("if-1")
-            .expect("Failed to get if-1 fragment");
-        let if_fragment = &if_fragment_list.fragments;
-        assert_eq!(if_fragment.len(), 3);
-        assert!(
-            matches!(if_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<div>Welcome back, ")
-        );
-        assert!(
-            matches!(if_fragment.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "username" && !signal.raw
-            )
-        );
-        assert!(
-            matches!(if_fragment.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "!</div>")
+        assert_stream!(
+            fragment_records,
+            "if-1",
+            [
+                raw("<div>Welcome back, "),
+                signal("username"),
+                raw("!</div>"),
+            ]
         );
     }
 
@@ -1238,17 +1180,15 @@ mod tests {
         let result = parser.parse("test.html", "<my-component></my-component>");
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let records = parser.into_fragment_records();
-        let fragments = &records["test.html"].fragments;
 
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<my-component>")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "my-component")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</my-component>")
+        assert_stream!(
+            records,
+            "test.html",
+            [
+                raw("<my-component>"),
+                component("my-component"),
+                raw("</my-component>"),
+            ]
         );
 
         // Component template stream should be wrapped with shadow DOM template + style link
@@ -1315,23 +1255,19 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 3);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
-        );
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Hello</custom-element>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-element>"),
+                component("custom-element"),
+                raw("Hello</custom-element>"),
+            ]
         );
 
-        let comp = &records["custom-element"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == r#"<template foo="bar"><slot></slot></template>"#)
+        assert_stream!(
+            records,
+            "custom-element",
+            [raw(r#"<template foo="bar"><slot></slot></template>"#),]
         );
     }
 
@@ -1350,11 +1286,12 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let comp = &records["custom-element"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == r#"<template foo="bar"><link rel="stylesheet" href="./custom-element.css"><slot></slot></template>"#)
+        assert_stream!(
+            records,
+            "custom-element",
+            [raw(
+                r#"<template foo="bar"><link rel="stylesheet" href="./custom-element.css"><slot></slot></template>"#
+            ),]
         );
     }
 
@@ -1373,11 +1310,10 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let comp = &records["custom-element"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == "<template><slot></slot></template>")
+        assert_stream!(
+            records,
+            "custom-element",
+            [raw("<template><slot></slot></template>"),]
         );
     }
 
@@ -1417,23 +1353,21 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 3);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
-        );
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-element>"),
+                component("custom-element"),
+                raw("</custom-element>"),
+            ]
         );
 
-        let comp = &records["custom-element"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == "<template shadowrootmode=\"open\"><div>Custom Element</div></template>")
+        assert_stream!(
+            records,
+            "custom-element",
+            [raw(
+                "<template shadowrootmode=\"open\"><div>Custom Element</div></template>"
+            ),]
         );
     }
 
@@ -1448,20 +1382,14 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 4);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-widget")
-        );
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
-                a.name == "config" && a.value == "settings" && a.attr_start)
-        );
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
-        );
-        assert!(
-            matches!(entry[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-widget")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-widget"),
+                attr_start("config", "settings"),
+                raw("/>"),
+                component("custom-widget"),
+            ]
         );
     }
 
@@ -1479,29 +1407,23 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 5);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-icon>")
-        );
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-icon")
-        );
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<use")
-        );
-        assert!(
-            matches!(entry[3].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "href" && a.template == "attr-1")
-        );
-        assert!(
-            matches!(entry[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/></custom-icon>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-icon>"),
+                component("custom-icon"),
+                raw("<use"),
+                attr_template("href", "attr-1"),
+                raw("/></custom-icon>"),
+            ]
         );
 
-        let comp = &records["custom-icon"].fragments;
-        assert_eq!(comp.len(), 1);
-        assert!(
-            matches!(comp[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == "<template shadowrootmode=\"open\"><svg><slot></slot></svg></template>")
+        assert_stream!(
+            records,
+            "custom-icon",
+            [raw(
+                "<template shadowrootmode=\"open\"><svg><slot></slot></svg></template>"
+            ),]
         );
     }
 
@@ -1519,29 +1441,18 @@ mod tests {
         assert!(result.is_ok());
         let records = parser.into_fragment_records();
 
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 6);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
-        );
-        // First dynamic attr: boolean with attrStart
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
-                a.name == "disabled" && a.attr_start &&
-                matches!(a.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isDisabled"))
-        );
-        // Static attr after dynamic: rawValue
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Attribute(a)) if
-                a.name == "title" && a.value == "Hello" && a.raw_value)
-        );
-        assert!(matches!(entry[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
-        assert!(
-            matches!(entry[4].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(entry[5].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-element"),
+                // First dynamic attr: boolean with attrStart
+                bool_attr_start("disabled", "isDisabled"),
+                // Static attr after dynamic: rawValue
+                attr_raw("title", "Hello"),
+                raw(">"),
+                component("custom-element"),
+                raw("</custom-element>"),
+            ]
         );
     }
 
@@ -1578,54 +1489,21 @@ mod tests {
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let fragment_records = parser.into_fragment_records();
 
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::ForLoop(for_loop)) if
-                for_loop.item == "category" &&
-                for_loop.collection == "categories" &&
-                for_loop.fragment_id == "for-1"
-            )
+        assert_stream!(
+            fragment_records,
+            "test.html",
+            [for_loop("category", "categories", "for-1"),]
         );
 
-        let for_fragment_list = fragment_records
-            .get("for-1")
-            .expect("Failed to get for-1 fragment");
-        let for_fragment = &for_fragment_list.fragments;
-        assert_eq!(for_fragment.len(), 1);
-        assert!(
-            matches!(for_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::IfCond(if_cond)) if
-                matches!(if_cond.condition.as_ref().and_then(|c| c.expr.as_ref()), Some(condition_expr::Expr::Identifier(id)) if id.value == "category.hasItems") &&
-                if_cond.fragment_id == "if-1"
-            )
-        );
+        assert_stream!(fragment_records, "for-1", [if_cond("if-1"),]);
 
-        let if_fragment_list = fragment_records
-            .get("if-1")
-            .expect("Failed to get if-1 fragment");
-        let if_fragment = &if_fragment_list.fragments;
-        assert_eq!(if_fragment.len(), 1);
-        assert!(
-            matches!(if_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::ForLoop(for_loop)) if
-                for_loop.item == "item" &&
-                for_loop.collection == "category.items" &&
-                for_loop.fragment_id == "for-2"
-            )
+        assert_stream!(
+            fragment_records,
+            "if-1",
+            [for_loop("item", "category.items", "for-2"),]
         );
 
-        let nested_for_fragment_list = fragment_records
-            .get("for-2")
-            .expect("Failed to get for-2 fragment");
-        let nested_for_fragment = &nested_for_fragment_list.fragments;
-        assert_eq!(nested_for_fragment.len(), 1);
-        assert!(
-            matches!(nested_for_fragment.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "item.title" && !signal.raw
-            )
-        );
+        assert_stream!(fragment_records, "for-2", [signal("item.title"),]);
     }
 
     #[test]
@@ -1648,83 +1526,42 @@ mod tests {
 
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let fragment_records = parser.into_fragment_records();
-        let fragment_list = fragment_records
-            .get("test.html")
-            .expect("Failed to get test.html fragment");
-        let fragments = &fragment_list.fragments;
-        assert_eq!(fragments.len(), 1);
 
-        assert!(
-            matches!(fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::ForLoop(for_loop)) if
-                for_loop.item == "category" &&
-                for_loop.collection == "categories" &&
-                for_loop.fragment_id == "for-1"
-            )
+        assert_stream!(
+            fragment_records,
+            "test.html",
+            [for_loop("category", "categories", "for-1"),]
         );
 
         // Verify for fragments contains the category.name signal
-        let for_fragments: &Vec<WebUIFragment> = &fragment_records
-            .get("for-1")
-            .expect("Failed to get for-1 fragment")
-            .fragments;
-        assert_eq!(for_fragments.len(), 5);
-        assert!(
-            matches!(for_fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<div class=\"category\"><h2>")
-        );
-        assert!(
-            matches!(for_fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "category.name" && !signal.raw
-            )
-        );
-        assert!(
-            matches!(for_fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</h2>")
-        );
-        assert!(
-            matches!(for_fragments.get(3).and_then(|f| f.fragment.as_ref()), Some(Fragment::IfCond(if_cond)) if
-                matches!(if_cond.condition.as_ref().and_then(|c| c.expr.as_ref()), Some(condition_expr::Expr::Identifier(id)) if id.value == "category.hasItems") &&
-                if_cond.fragment_id == "if-1"
-            )
-        );
-        assert!(
-            matches!(for_fragments.get(4).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</div>")
+        assert_stream!(
+            fragment_records,
+            "for-1",
+            [
+                raw("<div class=\"category\"><h2>"),
+                signal("category.name"),
+                raw("</h2>"),
+                if_cond("if-1"),
+                raw("</div>"),
+            ]
         );
 
         // Verify nested if condition.
-        let if_fragments: &Vec<WebUIFragment> = &fragment_records
-            .get("if-1")
-            .expect("Failed to get if-1 fragment")
-            .fragments;
-        assert_eq!(if_fragments.len(), 3);
-        assert!(
-            matches!(if_fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<ul>")
-        );
-        assert!(
-            matches!(if_fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::ForLoop(for_loop)) if
-                for_loop.item == "item" &&
-                for_loop.collection == "category.items" &&
-                for_loop.fragment_id == "for-2"
-            )
-        );
-        assert!(
-            matches!(if_fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</ul>")
+        assert_stream!(
+            fragment_records,
+            "if-1",
+            [
+                raw("<ul>"),
+                for_loop("item", "category.items", "for-2"),
+                raw("</ul>"),
+            ]
         );
 
         // Verify nested for each.
-        let nested_for_fragments: &Vec<WebUIFragment> = &fragment_records
-            .get("for-2")
-            .expect("Failed to get for-2 fragment")
-            .fragments;
-        assert_eq!(nested_for_fragments.len(), 3);
-        assert!(
-            matches!(nested_for_fragments.first().and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "<li>")
-        );
-        assert!(
-            matches!(nested_for_fragments.get(1).and_then(|f| f.fragment.as_ref()), Some(Fragment::Signal(signal)) if
-                signal.value == "item.title" && !signal.raw
-            )
-        );
-        assert!(
-            matches!(nested_for_fragments.get(2).and_then(|f| f.fragment.as_ref()), Some(Fragment::Raw(raw)) if raw.value == "</li>")
+        assert_stream!(
+            fragment_records,
+            "for-2",
+            [raw("<li>"), signal("item.title"), raw("</li>"),]
         );
     }
 
@@ -1782,24 +1619,14 @@ mod tests {
         let (fragments, _) =
             parse_and_get_fragments("<input ?checked={{isChecked}} ?disabled={{isDisabled}} />");
 
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "checked" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isChecked"))
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "disabled" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isDisabled"))
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input"),
+                bool_attr("checked", "isChecked"),
+                bool_attr("disabled", "isDisabled"),
+                raw("/>"),
+            ]
         );
     }
 
@@ -1811,18 +1638,13 @@ mod tests {
             r#"<input ?checked="{{isChecked}}" type="checkbox">Hi</input>"#,
         );
 
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "checked" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isChecked"))
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == " type=\"checkbox\">Hi</input>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input"),
+                bool_attr("checked", "isChecked"),
+                raw(" type=\"checkbox\">Hi</input>"),
+            ]
         );
     }
 
@@ -1834,22 +1656,14 @@ mod tests {
             r#"<input version={{edition}} ?checked="{{isChecked}}" type="checkbox">Hi</input>"#,
         );
 
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "version" && attr.value == "edition")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "checked" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isChecked"))
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == " type=\"checkbox\">Hi</input>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input"),
+                attr("version", "edition"),
+                bool_attr("checked", "isChecked"),
+                raw(" type=\"checkbox\">Hi</input>"),
+            ]
         );
     }
 
@@ -1861,22 +1675,14 @@ mod tests {
             r#"<input version={{edition}} ?checked="{{isChecked}}">Hi</input>"#,
         );
 
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "version" && attr.value == "edition")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "checked" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isChecked"))
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">Hi</input>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input"),
+                attr("version", "edition"),
+                bool_attr("checked", "isChecked"),
+                raw(">Hi</input>"),
+            ]
         );
     }
 
@@ -1887,18 +1693,13 @@ mod tests {
         let (fragments, _) =
             parse_and_get_fragments("<div ?checked={{layout.isPinned}}>Content</div>");
 
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<div")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "checked" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "layout.isPinned"))
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">Content</div>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<div"),
+                bool_attr("checked", "layout.isPinned"),
+                raw(">Content</div>"),
+            ]
         );
     }
 
@@ -1909,16 +1710,13 @@ mod tests {
         let (fragments, _) =
             parse_and_get_fragments(r#"<my-component :config="{{settings}}"></my-component>"#);
 
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<my-component")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == ":config" && attr.value == "settings" && attr.complex)
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "></my-component>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<my-component"),
+                attr_complex(":config", "settings"),
+                raw("></my-component>"),
+            ]
         );
     }
 
@@ -1930,20 +1728,14 @@ mod tests {
             r#"<my-component :prop1="{{val1}}" :prop2="{{val2}}"></my-component>"#,
         );
 
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<my-component")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == ":prop1" && attr.value == "val1" && attr.complex)
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == ":prop2" && attr.value == "val2" && attr.complex)
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "></my-component>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<my-component"),
+                attr_complex(":prop1", "val1"),
+                attr_complex(":prop2", "val2"),
+                raw("></my-component>"),
+            ]
         );
     }
 
@@ -1955,22 +1747,14 @@ mod tests {
             r#"<my-component id="comp" :config="{{settings}}" ?enabled="{{isEnabled}}"></my-component>"#,
         );
 
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<my-component id=\"comp\"")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == ":config" && attr.value == "settings" && attr.complex)
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "enabled" &&
-                matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()),
-                    Some(condition_expr::Expr::Identifier(id)) if id.value == "isEnabled"))
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "></my-component>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<my-component id=\"comp\""),
+                attr_complex(":config", "settings"),
+                bool_attr("enabled", "isEnabled"),
+                raw("></my-component>"),
+            ]
         );
     }
 
@@ -1981,10 +1765,7 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(r#"<input ?checked="name"></input>"#);
 
         // Boolean attribute is silently dropped
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input></input>")
-        );
+        assert_fragments!(fragments, [raw("<input></input>"),]);
     }
 
     #[test]
@@ -1995,10 +1776,7 @@ mod tests {
             parse_and_get_fragments(r#"<input ?checked="Hello {{name}}"></input>"#);
 
         // Boolean attribute is silently dropped
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input></input>")
-        );
+        assert_fragments!(fragments, [raw("<input></input>"),]);
     }
 
     #[test]
@@ -2008,10 +1786,7 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(r#"<button ?disabled="true">Click</button>"#);
 
         // Boolean attribute is silently dropped
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<button>Click</button>")
-        );
+        assert_fragments!(fragments, [raw("<button>Click</button>"),]);
     }
 
     #[test]
@@ -2021,27 +1796,17 @@ mod tests {
         let (fragments, records) =
             parse_and_get_fragments(r#"<input value="hello {{world}}">Hi</input>"#);
 
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if
-                attr.name == "value" && attr.template == "attr-1")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">Hi</input>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input"),
+                attr_template("value", "attr-1"),
+                raw(">Hi</input>"),
+            ]
         );
 
         // Verify the template sub-stream
-        let attr_stream = records.get("attr-1").expect("Missing attr-1 sub-stream");
-        assert_eq!(attr_stream.fragments.len(), 2);
-        assert!(
-            matches!(attr_stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "hello ")
-        );
-        assert!(
-            matches!(attr_stream.fragments[1].fragment.as_ref(), Some(Fragment::Signal(signal)) if signal.value == "world")
-        );
+        assert_stream!(records, "attr-1", [raw("hello "), signal("world"),]);
     }
 
     // ── Body signal tests ─────────────────────────────────────────────
@@ -2049,21 +1814,15 @@ mod tests {
     #[test]
     fn test_body_signals() {
         let (fragments, _) = parse_and_get_fragments("<body><app-shell></app-shell></body>");
-        assert_eq!(fragments.len(), 5);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<body>")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Signal(signal)) if signal.value == "body_start" && signal.raw)
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<app-shell></app-shell>")
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Signal(signal)) if signal.value == "body_end" && signal.raw)
-        );
-        assert!(
-            matches!(fragments[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</body>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<body>"),
+                signal_raw("body_start"),
+                raw("<app-shell></app-shell>"),
+                signal_raw("body_end"),
+                raw("</body>"),
+            ]
         );
     }
 
@@ -2073,10 +1832,7 @@ mod tests {
     fn test_empty_for_produces_nothing() {
         let (fragments, records) =
             parse_and_get_fragments(r#"<div><for each="item in items"></for></div>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<div></div>")
-        );
+        assert_fragments!(fragments, [raw("<div></div>"),]);
         assert!(!records.contains_key("for-1"));
     }
 
@@ -2086,9 +1842,11 @@ mod tests {
     fn test_self_closing_svg_path() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<svg width="19"><path d="foo" fill="currentcolor"/></svg>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<svg width="19"><path d="foo" fill="currentcolor"/></svg>"#)
+        assert_fragments!(
+            fragments,
+            [raw(
+                r#"<svg width="19"><path d="foo" fill="currentcolor"/></svg>"#
+            ),]
         );
     }
 
@@ -2097,9 +1855,11 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(
             r#"<div><img src="test.jpg" alt="test"><br><hr><input type="text"></div>"#,
         );
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<div><img src="test.jpg" alt="test"><br><hr><input type="text"></div>"#)
+        assert_fragments!(
+            fragments,
+            [raw(
+                r#"<div><img src="test.jpg" alt="test"><br><hr><input type="text"></div>"#
+            ),]
         );
     }
 
@@ -2107,18 +1867,14 @@ mod tests {
     fn test_self_closing_with_dynamic_attributes() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<img src="{{imageUrl}}" alt="{{imageAlt}}" />"#);
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<img")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "src" && attr.value == "imageUrl")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "alt" && attr.value == "imageAlt")
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<img"),
+                attr("src", "imageUrl"),
+                attr("alt", "imageAlt"),
+                raw("/>"),
+            ]
         );
     }
 
@@ -2127,18 +1883,14 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(
             r#"<input type="checkbox" ?checked="{{isSelected}}" ?disabled="{{isDisabled}}" />"#,
         );
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<input type=\"checkbox\"")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "checked" && matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()), Some(condition_expr::Expr::Identifier(id)) if id.value == "isSelected"))
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "disabled" && matches!(attr.condition_tree.as_ref().and_then(|c| c.expr.as_ref()), Some(condition_expr::Expr::Identifier(id)) if id.value == "isDisabled"))
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<input type=\"checkbox\""),
+                bool_attr("checked", "isSelected"),
+                bool_attr("disabled", "isDisabled"),
+                raw("/>"),
+            ]
         );
     }
 
@@ -2146,9 +1898,9 @@ mod tests {
     fn test_multiple_self_closing_in_sequence() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<img src="1.jpg" /><br /><img src="2.jpg" />"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<img src="1.jpg"/><br/><img src="2.jpg"/>"#)
+        assert_fragments!(
+            fragments,
+            [raw(r#"<img src="1.jpg"/><br/><img src="2.jpg"/>"#),]
         );
     }
 
@@ -2156,15 +1908,13 @@ mod tests {
     fn test_self_closing_with_mixed_content() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<div>Text before<img src="{{url}}" />Text after</div>"#);
-        assert_eq!(fragments.len(), 3);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<div>Text before<img")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "src" && attr.value == "url")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>Text after</div>")
+        assert_fragments!(
+            fragments,
+            [
+                raw("<div>Text before<img"),
+                attr("src", "url"),
+                raw("/>Text after</div>"),
+            ]
         );
     }
 
@@ -2173,18 +1923,14 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(
             r#"<svg><circle cx="{{x}}" cy="{{y}}" r="5" /><rect width="10" height="10" /></svg>"#,
         );
-        assert_eq!(fragments.len(), 4);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<svg><circle")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "cx" && attr.value == "x")
-        );
-        assert!(
-            matches!(fragments[2].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "cy" && attr.value == "y")
-        );
-        assert!(
-            matches!(fragments[3].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#" r="5"/><rect width="10" height="10"/></svg>"#)
+        assert_fragments!(
+            fragments,
+            [
+                raw("<svg><circle"),
+                attr("cx", "x"),
+                attr("cy", "y"),
+                raw(r#" r="5"/><rect width="10" height="10"/></svg>"#),
+            ]
         );
     }
 
@@ -2193,20 +1939,11 @@ mod tests {
         let (fragments, records) = parse_and_get_fragments(
             r#"<for each="item in items"><img src="{{item.url}}" /></for>"#,
         );
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if fl.item == "item" && fl.collection == "items" && fl.fragment_id == "for-1")
-        );
-        let for_stream = records.get("for-1").expect("Missing for-1");
-        assert_eq!(for_stream.fragments.len(), 3);
-        assert!(
-            matches!(for_stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<img")
-        );
-        assert!(
-            matches!(for_stream.fragments[1].fragment.as_ref(), Some(Fragment::Attribute(attr)) if attr.name == "src" && attr.value == "item.url")
-        );
-        assert!(
-            matches!(for_stream.fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "/>")
+        assert_fragments!(fragments, [for_loop("item", "items", "for-1"),]);
+        assert_stream!(
+            records,
+            "for-1",
+            [raw("<img"), attr("src", "item.url"), raw("/>"),]
         );
     }
 
@@ -2214,9 +1951,9 @@ mod tests {
     fn test_self_closing_whitespace_variations() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<img src="test.jpg"/><input type="text" /><br/>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<img src="test.jpg"/><input type="text"/><br/>"#)
+        assert_fragments!(
+            fragments,
+            [raw(r#"<img src="test.jpg"/><input type="text"/><br/>"#),]
         );
     }
 
@@ -2225,9 +1962,11 @@ mod tests {
         let (fragments, _) = parse_and_get_fragments(
             r#"<div><section><article><img src="deep.jpg" /><br /></article></section></div>"#,
         );
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<div><section><article><img src="deep.jpg"/><br/></article></section></div>"#)
+        assert_fragments!(
+            fragments,
+            [raw(
+                r#"<div><section><article><img src="deep.jpg"/><br/></article></section></div>"#
+            ),]
         );
     }
 
@@ -2235,9 +1974,9 @@ mod tests {
     fn test_self_closing_vs_empty_regular_tags() {
         let (fragments, _) =
             parse_and_get_fragments(r#"<div></div><img src="test.jpg" /><span></span>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == r#"<div></div><img src="test.jpg"/><span></span>"#)
+        assert_fragments!(
+            fragments,
+            [raw(r#"<div></div><img src="test.jpg"/><span></span>"#),]
         );
     }
 
@@ -2249,16 +1988,8 @@ mod tests {
         let (fragments, records) = parse_and_get_fragments(
             r#"<for each="item in items" template="static"><span>Item</span></for>"#,
         );
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if
-            fl.item == "item" && fl.collection == "items" && fl.fragment_id == "static")
-        );
-        let stream = records.get("static").expect("Missing 'static' stream");
-        assert_eq!(stream.fragments.len(), 1);
-        assert!(
-            matches!(stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<span>Item</span>")
-        );
+        assert_fragments!(fragments, [for_loop("item", "items", "static"),]);
+        assert_stream!(records, "static", [raw("<span>Item</span>"),]);
     }
 
     #[test]
@@ -2269,29 +2000,22 @@ mod tests {
         let result = parser.parse("index.html", html);
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let records = parser.into_fragment_records();
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 1);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if
-            fl.item == "outerItem" && fl.collection == "outerItems" && fl.fragment_id == "static")
-        );
-        let static_stream = records.get("static").expect("Missing 'static' stream");
-        assert_eq!(static_stream.fragments.len(), 5);
-        assert!(
-            matches!(static_stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<div><span>")
-        );
-        assert!(
-            matches!(static_stream.fragments[1].fragment.as_ref(), Some(Fragment::Signal(s)) if s.value == "outerItem.name")
-        );
-        assert!(
-            matches!(static_stream.fragments[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</span>")
-        );
-        assert!(
-            matches!(static_stream.fragments[3].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if
-            fl.item == "innerItem" && fl.collection == "innerItems" && fl.fragment_id == "static")
+
+        assert_fragments!(
+            records["index.html"].fragments,
+            [for_loop("outerItem", "outerItems", "static"),]
         );
-        assert!(
-            matches!(static_stream.fragments[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</div>")
+
+        assert_stream!(
+            records,
+            "static",
+            [
+                raw("<div><span>"),
+                signal("outerItem.name"),
+                raw("</span>"),
+                for_loop("innerItem", "innerItems", "static"),
+                raw("</div>"),
+            ]
         );
     }
 
@@ -2302,15 +2026,8 @@ mod tests {
         // Port of: 'should handle <if> with multiple children'
         let (fragments, records) =
             parse_and_get_fragments(r#"<if condition="valid"><p>hello</p><p>world</p></if>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::IfCond(ic)) if ic.fragment_id == "if-1")
-        );
-        let if_stream = records.get("if-1").expect("Missing if-1");
-        assert_eq!(if_stream.fragments.len(), 1);
-        assert!(
-            matches!(if_stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<p>hello</p><p>world</p>")
-        );
+        assert_fragments!(fragments, [if_cond("if-1"),]);
+        assert_stream!(records, "if-1", [raw("<p>hello</p><p>world</p>"),]);
     }
 
     #[test]
@@ -2318,15 +2035,8 @@ mod tests {
         // Port of: 'should handle <for> with multiple children'
         let (fragments, records) =
             parse_and_get_fragments(r#"<for each="item in items"><p>hello</p><p>world</p></for>"#);
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if fl.fragment_id == "for-1")
-        );
-        let for_stream = records.get("for-1").expect("Missing for-1");
-        assert_eq!(for_stream.fragments.len(), 1);
-        assert!(
-            matches!(for_stream.fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<p>hello</p><p>world</p>")
-        );
+        assert_fragments!(fragments, [for_loop("item", "items", "for-1"),]);
+        assert_stream!(records, "for-1", [raw("<p>hello</p><p>world</p>"),]);
     }
 
     // ── Feature 3: Handlebars at beginning/end of text ──────────────────
@@ -2335,36 +2045,21 @@ mod tests {
     fn test_handlebars_at_beginning() {
         // Port of: 'should process handlebars from text at beginning'
         let (fragments, _) = parse_and_get_fragments("{{first}}");
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Signal(s)) if s.value == "first")
-        );
+        assert_fragments!(fragments, [signal("first"),]);
     }
 
     #[test]
     fn test_handlebars_at_beginning_and_raw() {
         // Port of: 'should process handlebars from text at beginning and raw'
         let (fragments, _) = parse_and_get_fragments("{{first}}test");
-        assert_eq!(fragments.len(), 2);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Signal(s)) if s.value == "first")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "test")
-        );
+        assert_fragments!(fragments, [signal("first"), raw("test"),]);
     }
 
     #[test]
     fn test_handlebars_raw_and_end() {
         // Port of: 'should process handlebars from text at raw and end'
         let (fragments, _) = parse_and_get_fragments("test{{first}}");
-        assert_eq!(fragments.len(), 2);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "test")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Signal(s)) if s.value == "first")
-        );
+        assert_fragments!(fragments, [raw("test"), signal("first"),]);
     }
 
     // ── Feature 4: Handlebars edge cases ────────────────────────────────
@@ -2373,43 +2068,28 @@ mod tests {
     fn test_handlebars_invalid_triple_open() {
         // Port of: 'should not process handlebars when invalid'
         let (fragments, _) = parse_and_get_fragments("{{{invalid}}");
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "{{{invalid}}")
-        );
+        assert_fragments!(fragments, [raw("{{{invalid}}"),]);
     }
 
     #[test]
     fn test_handlebars_four_open_braces() {
         // Port of: 'should not process handlebars when invalid since triple exists'
         let (fragments, _) = parse_and_get_fragments("{{{{invalid}}");
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "{{{{invalid}}")
-        );
+        assert_fragments!(fragments, [raw("{{{{invalid}}"),]);
     }
 
     #[test]
     fn test_handlebars_five_open_with_valid_double() {
         // Port of: 'should not process handlebars when invalid but with valid triple'
         let (fragments, _) = parse_and_get_fragments("{{{{{invalid}}");
-        assert_eq!(fragments.len(), 2);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "{{{")
-        );
-        assert!(
-            matches!(fragments[1].fragment.as_ref(), Some(Fragment::Signal(s)) if s.value == "invalid")
-        );
+        assert_fragments!(fragments, [raw("{{{"), signal("invalid"),]);
     }
 
     #[test]
     fn test_entities_preserved() {
         // Port of: 'should process entities correctly'
         let (fragments, _) = parse_and_get_fragments("<p>Hello&#125;World</p>");
-        assert_eq!(fragments.len(), 1);
-        assert!(
-            matches!(fragments[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<p>Hello&#125;World</p>")
-        );
+        assert_fragments!(fragments, [raw("<p>Hello&#125;World</p>"),]);
     }
 
     // ── Feature 5: DOCTYPE handling ─────────────────────────────────────
@@ -2438,41 +2118,25 @@ mod tests {
         let result = parser.parse("index.html", html);
         assert!(result.is_ok(), "Parse error: {:?}", result.err());
         let records = parser.into_fragment_records();
-        let entry = &records["index.html"].fragments;
 
         // <custom-element, :config(attrStart), class(attrSkip), style(attrSkip),
         // role(attrSkip), data-test(attrSkip), aria-test(attrSkip), >, component, </custom-element>
-        assert_eq!(entry.len(), 10);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element")
-        );
-        // :config with attrStart
-        assert!(
-            matches!(entry[1].fragment.as_ref(), Some(Fragment::Attribute(a)) if
-                a.name == ":config" && a.value == "config" && a.complex && a.attr_start)
-        );
-        // Skipped attrs
-        assert!(
-            matches!(entry[2].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "class" && a.attr_skip)
-        );
-        assert!(
-            matches!(entry[3].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "style" && a.attr_skip)
-        );
-        assert!(
-            matches!(entry[4].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "role" && a.attr_skip)
-        );
-        assert!(
-            matches!(entry[5].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "data-test" && a.attr_skip)
-        );
-        assert!(
-            matches!(entry[6].fragment.as_ref(), Some(Fragment::Attribute(a)) if a.name == "aria-test" && a.attr_skip)
-        );
-        assert!(matches!(entry[7].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == ">"));
-        assert!(
-            matches!(entry[8].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(entry[9].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "</custom-element>")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [
+                raw("<custom-element"),
+                // :config with attrStart
+                attr_complex_start(":config", "config"),
+                // Skipped attrs
+                attr_skip("class", "value0"),
+                attr_skip("style", "value1"),
+                attr_skip("role", "value2"),
+                attr_skip("data-test", "value3"),
+                attr_skip("aria-test", "value4"),
+                raw(">"),
+                component("custom-element"),
+                raw("</custom-element>"),
+            ]
         );
     }
 
@@ -2503,32 +2167,25 @@ mod tests {
         let records = parser.into_fragment_records();
 
         // Entry stream
-        let entry = &records["index.html"].fragments;
-        assert_eq!(entry.len(), 1);
-        assert!(
-            matches!(entry[0].fragment.as_ref(), Some(Fragment::ForLoop(fl)) if fl.fragment_id == "for-1")
+        assert_fragments!(
+            records["index.html"].fragments,
+            [for_loop("item", "items", "for-1"),]
         );
 
         // For stream
-        let for_stream = &records["for-1"].fragments;
-        assert_eq!(for_stream.len(), 5);
-        assert!(
-            matches!(for_stream[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-element>")
-        );
-        assert!(
-            matches!(for_stream[1].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-element")
-        );
-        assert!(
-            matches!(for_stream[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "<custom-button>")
-        );
-        assert!(
-            matches!(for_stream[3].fragment.as_ref(), Some(Fragment::Component(c)) if c.fragment_id == "custom-button")
-        );
-        assert!(
-            matches!(for_stream[4].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value == "Ok</custom-button></custom-element>")
+        assert_stream!(
+            records,
+            "for-1",
+            [
+                raw("<custom-element>"),
+                component("custom-element"),
+                raw("<custom-button>"),
+                component("custom-button"),
+                raw("Ok</custom-button></custom-element>"),
+            ]
         );
 
-        // Component streams
+        // Component streams — custom-element has contains() checks, keep manual
         let ce = &records["custom-element"].fragments;
         assert_eq!(ce.len(), 3);
         assert!(
@@ -2541,18 +2198,20 @@ mod tests {
             matches!(ce[2].fragment.as_ref(), Some(Fragment::Raw(raw)) if raw.value.contains("</custom-child><slot></slot></template>"))
         );
 
-        let cb = &records["custom-button"].fragments;
-        assert_eq!(cb.len(), 1);
-        assert!(
-            matches!(cb[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == "<template shadowrootmode=\"open\"><slot></slot></template>")
+        assert_stream!(
+            records,
+            "custom-button",
+            [raw(
+                "<template shadowrootmode=\"open\"><slot></slot></template>"
+            ),]
         );
 
-        let cc = &records["custom-child"].fragments;
-        assert_eq!(cc.len(), 1);
-        assert!(
-            matches!(cc[0].fragment.as_ref(), Some(Fragment::Raw(raw)) if
-                raw.value == "<template shadowrootmode=\"open\"><h1>Hello World!</h1></template>")
+        assert_stream!(
+            records,
+            "custom-child",
+            [raw(
+                "<template shadowrootmode=\"open\"><h1>Hello World!</h1></template>"
+            ),]
         );
     }
 

From c25fbb73020df38c77df080056a7eda3c375814c Mon Sep 17 00:00:00 2001
From: Mohamed Mansour <mmansour@microsoft.com>
Date: Mon, 23 Feb 2026 21:22:40 -0800
Subject: [PATCH 7/7] remove todo

---
 todo.md | 265 --------------------------------------------------------
 1 file changed, 265 deletions(-)
 delete mode 100644 todo.md

diff --git a/todo.md b/todo.md
deleted file mode 100644
index 3abda325..00000000
--- a/todo.md
+++ /dev/null
@@ -1,265 +0,0 @@
-# WebUI Rust Port — Feature Tracker
-
-Tracking parity between the prototype implementations and the Rust port.
-
-## Prototype Sources
-
-| Area | Source | Path |
-|------|--------|------|
-| Parser (build step) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/generator.test.js` |
-| Parser (fast-html) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/generator-fast-html.test.js` |
-| Handler (JS) | Node.js | `~/edge/src/edge_webui/packages/build/src/btr/handler.test.js` |
-| Handler (C++) | C++ | `~/edge/src/components/edge_build_time_rendering/webui_handler_unittest.cc` |
-
-## Rust Crates
-
-| Crate | Role | Tests |
-|-------|------|-------|
-| `webui-parser` | Build-step parser (equivalent to generator.js) | 35 |
-| `webui-handler` | Runtime renderer (equivalent to handler.js / C++ handler) | 7 |
-| `webui-protocol` | Proto schema + serialization | 13 |
-
----
-
-## ✅ Completed — Parser (`webui-parser`)
-
-| # | Prototype Test | Rust Test | Branch |
-|---|----------------|-----------|--------|
-| 1 | `should process raw text correctly` | `test_parse_signal` (partial) | pre-existing |
-| 2 | `should process signal correctly` | `test_parse_signal` | pre-existing |
-| 3 | `should process handlebars from text as signals` | `test_parse_raw_signal` | pre-existing |
-| 4 | `should process for stream correctly` | `test_parse_for_directive` | pre-existing |
-| 5 | `should process nested for streams correctly` | `test_nested_directives` | pre-existing |
-| 6 | `should process transient node if` | `test_parse_if_directive` | pre-existing |
-| 7 | `should process missing web components correctly` | `test_component_directive` | pre-existing |
-| 8 | `should process handlebars from attributes as signals` | `test_attribute_handlebars_in_href` | `attribute-fragments` |
-| 9 | `should process boolean attribute with handlebars expression` | `test_attribute_boolean_with_handlebars` | `attribute-fragments` |
-| 10 | `should process multiple boolean attributes` | `test_attribute_multiple_boolean` | `attribute-fragments` |
-| 11 | `should process a boolean attribute and a regular attribute together` | `test_attribute_boolean_and_regular_together` | `attribute-fragments` |
-| 12 | `should process a boolean attribute sandwiched between regular attributes` | `test_attribute_boolean_sandwiched` | `attribute-fragments` |
-| 13 | `should process html ending with boolean attribute correctly` | `test_attribute_boolean_ending` | `attribute-fragments` |
-| 14 | `should process boolean attribute with dotted path` | `test_attribute_boolean_dotted_path` | `attribute-fragments` |
-| 15 | `should process colon-prefixed attribute with handlebars` | `test_attribute_colon_prefixed_complex` | `attribute-fragments` |
-| 16 | `should process multiple colon-prefixed complex attributes` | `test_attribute_multiple_colon_prefixed` | `attribute-fragments` |
-| 17 | `should process mixed normal, boolean, and colon-prefixed attributes` | `test_attribute_mixed_normal_boolean_colon` | `attribute-fragments` |
-| 18 | `should reject boolean attribute without handlebars` | `test_attribute_reject_boolean_without_handlebars` | `attribute-fragments` |
-| 19 | `should reject boolean attribute with partial handlebars` | `test_attribute_reject_boolean_with_partial_handlebars` | `attribute-fragments` |
-| 20 | `should reject boolean attribute with plain value` | `test_attribute_reject_boolean_with_plain_value` | `attribute-fragments` |
-| 21 | `should process mixed attributes correctly` | `test_attribute_mixed_static_dynamic` | `attribute-fragments` |
-| 22 | `should inject body_start and body_end signal` | `test_body_signals` | `parser-p1-features` |
-| 23 | `should process nothing with empty for stream` | `test_empty_for_produces_nothing` | `parser-p1-features` |
-| 24 | `should process elements with children having self-closing tags` | `test_self_closing_svg_path` | `parser-p1-features` |
-| 25 | `should handle HTML5 void elements correctly` | `test_html5_void_elements` | `parser-p1-features` |
-| 26 | `should handle self-closing tags with attributes and signals` | `test_self_closing_with_dynamic_attributes` | `parser-p1-features` |
-| 27 | `should handle self-closing tags with boolean attributes` | `test_self_closing_with_boolean_attributes` | `parser-p1-features` |
-| 28 | `should handle multiple self-closing tags in sequence` | `test_multiple_self_closing_in_sequence` | `parser-p1-features` |
-| 29 | `should handle self-closing tags with mixed content types` | `test_self_closing_with_mixed_content` | `parser-p1-features` |
-| 30 | `should handle self-closing SVG elements correctly` | `test_self_closing_svg_elements` | `parser-p1-features` |
-| 31 | `should handle self-closing tags inside for loops` | `test_self_closing_inside_for_loop` | `parser-p1-features` |
-| 32 | `should handle self-closing tags with whitespace variations` | `test_self_closing_whitespace_variations` | `parser-p1-features` |
-| 33 | `should handle deeply nested self-closing tags` | `test_deeply_nested_self_closing` | `parser-p1-features` |
-| 34 | `should differentiate between self-closing and empty regular tags` | `test_self_closing_vs_empty_regular_tags` | `parser-p1-features` |
-
-## ✅ Completed — Handler (`webui-handler`)
-
-| # | Prototype Test | Rust Test |
-|---|----------------|-----------|
-| 1 | `RawStreamProducesCorrectOutput` / `should process raw stream` | `test_handle_raw` |
-| 2 | `SignalStreamProducesCorrectOutput` / `should process signal stream` | `test_handle_signal` |
-| 3 | `ForStreamProcessesCorrectly` / `should process for stream` | `test_handle_for_loop` |
-| 4 | `IfTrueStreamProducesCorrectOutput` / `should process if stream` | `test_handle_if_condition` |
-| 5 | `ComponentStreamProducesCorrectOutput` / `should process component stream` | `test_handle_component` |
-| 6 | (error case) | `test_missing_fragment` |
-| 7 | (error case) | `test_missing_signal_renders_empty` |
-
----
-
-## 🔲 Missing — Parser (`webui-parser`)
-
-### From `generator.test.js` (67 total tests, 34 ported)
-
-| # | Prototype Test | Category | Complexity |
-|---|----------------|----------|------------|
-| 1 | `should fail with invalid markup` | Error handling | Low |
-| 2 | `should process a complex raw text` | DOCTYPE + full page | Medium |
-| 3 | `should process signal attribute correctly with default value` | `<f-signal>` | Low |
-| 4 | `should process available web components` (with styles + tokens) | Component styles | Medium |
-| 5 | `should process available web components with legacy themes` | Component styles | Medium |
-| 6 | `should process available web components with slots` (attrStart, rawValue) | Component attrs | Medium |
-| 7 | `should process available web components with multiple slots and attributes` | Component attrs | Medium |
-| 8 | `handle multiple nested web components` | Nested components | Medium |
-| 9 | `should not wrap component with template if it already has a template element` | Template wrapping | Low |
-| 10 | `should not wrap styled component with template if it already has a template element` | Template wrapping | Low |
-| 11 | `should strip attributes starting "@" or ":" or "?" from the template` | Attr stripping | Low |
-| 12 | `should process handlebars from text at beginning` | Handlebars | Low |
-| 13 | `should process handlebars from text at beginning and raw` | Handlebars | Low |
-| 14 | `should process handlebars from text at raw and end` | Handlebars | Low |
-| 15 | `should not process handlebars when invalid` | Handlebars edge | Low |
-| 16 | `should not process handlebars when invalid since triple exists` | Handlebars edge | Low |
-| 17 | `should not process handlebars when invalid but with valid triple` | Handlebars edge | Low |
-| 18 | `should process entities correctly` | Entities | Low |
-| 19 | `should extract tokens from style tags` | CSS tokens | Medium |
-| 20 | `should process available web components correctly` (tokens merge) | CSS tokens | Medium |
-| 21 | `should process transient node f-signal` | `<f-signal>` | Low |
-| 22 | `should handle <if> with multiple children` | If directive | Low |
-| 23 | `should handle <for> with multiple children` | For directive | Low |
-| 24 | `should process transient node for with template` | Custom template attr | Low |
-| 25 | `should process recursive transient nodes` | Recursive template | Medium |
-| 26 | `should handle nested self-closing tags in components` | Component + self-close | Medium |
-| 27 | `should handle self-closing custom elements` | Component self-close | Medium |
-| 28 | `should handle meta tags and link tags correctly` | Void elements + attrs | Low |
-| 29 | `should set attrSkip for skipped component attributes` | attrSkip | Medium |
-| 30 | `should mark leading boolean component attribute with attrStart` | attrStart | Medium |
-| 31 | `should have estimatedBufferSize field set correctly` | Buffer size | Low |
-| 32 | `should render hydration attributes correctly for option template fast-html` | Hydration | Medium |
-| 33 | `should process transient node for` (standalone) | For directive | Low |
-
-### From `generator-fast-html.test.js` (11 tests, 0 ported)
-
-| # | Prototype Test | Category | Complexity |
-|---|----------------|----------|------------|
-| 1 | `should return empty string if no components are parsed` | Fast-html gen | Low |
-| 2 | `should create the f-template for single component` | Fast-html gen | Medium |
-| 3 | `should skip adding template for components that define it` | Fast-html gen | Medium |
-| 4 | `should create the f-template for multiple components` | Fast-html gen | Medium |
-| 5 | `should not create f-template for non js components` | Fast-html gen | Low |
-| 6 | `should create inner template for non js components when used` | Fast-html gen | Medium |
-| 7 | `should transform if tags to f-when` | Fast-html gen | Medium |
-| 8 | `should transform for tags to f-repeat` | Fast-html gen | Medium |
-| 9 | `should transform nested if and for tags properly` | Fast-html gen | Medium |
-| 10 | `should include complex attributes in generated templates` | Fast-html gen | Low |
-| 11 | `should normalize complex attributes across spacing and quoting variants` | Fast-html gen | Low |
-
-## 🔲 Missing — Handler (`webui-handler`)
-
-### From `handler.test.js` (62 tests, 7 ported)
-
-| # | Prototype Test | Category | Complexity |
-|---|----------------|----------|------------|
-| 1 | `should process nested for stream` | For loop | Low |
-| 2 | `should process nested for stream with signals` | For + signals | Medium |
-| 3 | `should process nested for stream with signals and top-level state` | For + global state | Medium |
-| 4 | `should process available web components with slots` | Component slots | Medium |
-| 5 | `handle multiple nested component stream` | Nested components | Medium |
-| 6 | `should process raw signals and not escape them` | Raw signals | Low |
-| 7 | `should process for and if streams with overlapping global and local states` | State scoping | Medium |
-| 8 | `should process for and if streams where global flag true does not take effect` | State scoping | Medium |
-| 9 | `should process recursive node refs correctly` | Recursive refs | Medium |
-| 10 | `should process component stream nested in for stream cannot access local state` | State scoping | Medium |
-| 11 | `should process nested for streams with hierarchical state access` | State scoping | Medium |
-| 12 | `should process component stream nested in for stream can ONLY access global state` | State scoping | Medium |
-| 13 | `should not resolve local item state with item moniker in component stream` | State scoping | Medium |
-| 14 | `should not use local item state for non-qualified access in ForStream` | State scoping | Low |
-| 15 | `should process nested for streams with interleaving if stream` | For + if nesting | High |
-| 16 | `should process nested for streams with interleaved if using outer state` | For + if nesting | High |
-| 17 | `should process nested for streams with interleaved if using inner state` | For + if nesting | High |
-| 18 | `should correctly merge local for stream item and global state when monikers match` | State merging | Medium |
-| 19 | `should process component stream nested in for stream with same-name global state` | State scoping | Medium |
-| 20 | `should use local item flag in if stream nested in for stream` | State scoping | Medium |
-| 21 | `should fallback to global when local flag is missing in for stream` | State fallback | Medium |
-| 22 | `should evaluate IfStream condition mixing operands from different scopes` | Mixed scopes | High |
-| 23 | `should render boolean attribute when value is true` | Boolean attrs | Low |
-| 24 | `should not render boolean attribute when value is false` | Boolean attrs | Low |
-| 25 | `should not render boolean attribute when value is missing` | Boolean attrs | Low |
-| 26 | `should render multiple boolean attributes correctly` | Boolean attrs | Low |
-| 27 | `should render boolean attribute for all truthy values` | Boolean attrs | Low |
-| 28 | `should not render boolean attribute for all falsy values except true` | Boolean attrs | Low |
-| 29 | `should render boolean attribute when evaluating to true` | Boolean attrs | Low |
-| 30 | `should not render boolean attribute when evaluating to false` | Boolean attrs | Low |
-| 31 | `should render attribute with value` | Simple attrs | Low |
-| 32 | `should render attribute with falsy numeric value` | Simple attrs | Low |
-| 33 | `should render mixed attributes correctly` | Template attrs | Medium |
-| 34 | `should add mixed attribute values to component attribute state` | Component attr state | Medium |
-| 35 | `should camelCase hyphenated mixed attributes in component attribute state` | Component attr state | Medium |
-| 36 | `should capture mixed attributes for nested component streams` | Component attr state | Medium |
-| 37 | `should capture mixed attributes across parent/child/grandchild` | Component attr state | High |
-| 38 | `should capture mixed attributes in nested components from for-stream` | Component attr state | High |
-| 39 | `should add multiple mixed attributes to component attribute state` | Component attr state | Medium |
-| 40 | `should prioritize component attribute state over global state` | State priority | Medium |
-| 41 | `should prioritize component attribute state over local and global state` | State priority | Medium |
-| 42 | `should handle boolean attribute as first component attribute` | Component bool attrs | Medium |
-| 43 | `should not resolve skipped component attributes defined in constants` | attrSkip | Medium |
-| 44 | `should handle hyphenated attributes in component attribute state via camelCase` | camelCase | Medium |
-| 45 | `should allow nested component to inherit attribute from parent` | Attr inheritance | Medium |
-| 46 | `should allow deeply nested component to inherit attribute from immediate parent` | Attr inheritance | Medium |
-| 47 | `should allow component to access complex attribute values` | Complex attrs | Medium |
-| 48 | `should pass for-stream moniker state into complex component attributes` | Complex + for | High |
-| 49 | `should pass nested for-stream monikers into complex component attributes` | Complex + nested for | High |
-| 50 | `should expose boolean component attribute state when true` | Bool component state | Medium |
-| 51 | `should expose boolean component attribute state when false` | Bool component state | Medium |
-| 52 | `should forward boolean component attribute state to nested components` | Bool component state | Medium |
-| 53 | `should handle boolean attribute as first component attribute` (2nd) | Bool component state | Medium |
-| 54 | `should not pollute parent scope with component attributes` | Scope isolation | Medium |
-| 55 | `should add hydration comments for signals, attributes, nested for/if streams` | Hydration | High |
-
-### From `webui_handler_unittest.cc` (40+ tests, 7 ported via JS equivalents)
-
-The C++ tests largely mirror the JS handler tests. Key additional patterns:
-- `SignalStreamWithDefaultValue` — default value rendering
-- `EmptyProtocolProducesNoOutput` — empty protocol edge case
-- `UnknownStreamTypeDoesNotAffectOutput` — robustness
-- `MalformedStateInputHandledGracefully` — error resilience
-- `BooleanAttributeStream*` — extensive boolean attribute rendering tests
-- `AttributeStreamWithValue` / `AttributeStreamWithTemplate` — attribute rendering
-- `MixedAttributeAddedToComponentAttributeState` — component attribute state management
-- `HydrationEnabledWithNestedForAndIfStreams` — hydration comment generation
-- `ComponentAttributeOverridesGlobalState` — state priority
-- `ComponentSpecialAttributeProvidesComplexState` — complex attribute state
-- `ComponentAttributesDoNotPolluteParentScope` — scope isolation
-
----
-
-## Summary
-
-| Area | Total Prototype Tests | Ported | Remaining |
-|------|----------------------|--------|-----------|
-| Parser (`generator.test.js`) | 67 | 34 | 33 |
-| Parser (`generator-fast-html.test.js`) | 11 | 0 | 11 |
-| Handler (`handler.test.js`) | 62 | 7 | 55 |
-| Handler (`webui_handler_unittest.cc`) | ~40 | 7 (overlap) | ~33 unique |
-| **Total** | **~180** | **~48** | **~132** |
-
-## Suggested Implementation Order
-
-### Phase 1 — Parser remaining low-hanging fruit
-- [ ] `<f-signal>` element (proto `default_value` + parser)
-- [ ] Custom `template` attribute on `<for>`
-- [ ] `<if>` / `<for>` with multiple children (may already work — verify)
-- [ ] Handlebars edge cases (invalid braces, entities)
-- [ ] DOCTYPE handling
-- [ ] Handlebars at beginning/end of text
-
-### Phase 2 — Component enhancements
-- [ ] Template wrapping logic (skip if already has `<template>`)
-- [ ] Strip `@`/`:`/`?` attrs from component templates
-- [ ] CSS style link injection into component templates
-- [ ] Component attribute passthrough (attrSkip, attrStart, rawValue)
-- [ ] Self-closing custom elements
-- [ ] Nested self-closing tags in components
-
-### Phase 3 — Handler core
-- [ ] Nested for loops with signal resolution
-- [ ] For + if state scoping (local vs global)
-- [ ] Raw signal rendering (no HTML escaping)
-- [ ] Boolean attribute rendering (true/false/missing/truthy/falsy)
-- [ ] Simple attribute rendering with value resolution
-- [ ] Template/mixed attribute rendering
-- [ ] Recursive node ref handling
-
-### Phase 4 — Handler component attributes
-- [ ] Component attribute state management
-- [ ] camelCase hyphenated attributes
-- [ ] Attribute inheritance across component nesting
-- [ ] Complex attribute state resolution
-- [ ] State priority (component > local > global)
-- [ ] Scope isolation (no parent pollution)
-- [ ] Skipped attributes (class, style, role, data-*, aria-*)
-
-### Phase 5 — Advanced
-- [ ] CSS token extraction from `var()` calls
-- [ ] Token signals in style comments
-- [ ] Hydration fragments and comment generation
-- [ ] `estimatedBufferSize` calculation
-- [ ] Fast-html generator (f-template, f-when, f-repeat)
-
-