feat: implement Dynamic DOM as rendering source of truth (#30)

This is the foundational architecture change that makes w3cos-dom's
Document the primary data model, enabling runtime DOM manipulation
via standard W3C APIs (createElement, appendChild, etc.).

Runtime (w3cos-runtime/src/dom.rs):
- Thread-local Document with W3C API wrappers: create_element,
  create_text_node, append_child, remove_child, insert_before,
  set_attribute, set_style_property, set_text_content, class_list_*,
  add_event_listener, query_selector, get_element_by_id, etc.
- DOM dirty tracking (is_document_dirty / clear_document_dirty)
- to_component_tree() bridge for rendering pipeline
- 8 unit tests

Event loop (window.rs):
- New App::new_dom(setup) constructor + run_dom() entry point
- rebuild_if_dirty() now checks both signal dirty AND DOM dirty
- DOM mode: setup runs once to build initial DOM, subsequent changes
  trigger to_component_tree() -> layout -> render automatically
- run_app_dom() public API in lib.rs
- Backward compatible: existing Component-mode apps unchanged

Compiler (codegen.rs):
- New generate_dom() backend: emits w3cos_runtime::dom::* calls
  instead of Component::column/row/text constructors
- Maps Column->div, Row->div+flex-direction:row, Button->button,
  Text->text node, Image->img, TextInput->input
- Style properties emitted as set_style_property() CSS calls

DOM improvements (w3cos-dom):
- NodeId::from_u32() for runtime API bridge
- Improved to_component_tree(): respects flex-direction for Row/Column,
  handles img, input, heading defaults (h1-h6 sizes), more HTML tags
- Event bubbling: dispatch_with_bubbling() walks parent chain
- Document::dispatch_event_bubbling() convenience method

Closes #30

Made-with: Cursor

Author: wangnaihe

crates/w3cos-compiler/src/codegen.rs

@@ -366,6 +366,209 @@ fn gen_dimension(val: &str) -> String {
     "Dimension::Auto".to_string()
 }
 
+// ---------------------------------------------------------------------------
+// DOM codegen backend — generates document.createElement / appendChild calls
+// ---------------------------------------------------------------------------
+
+/// Generate Rust code that builds a DOM tree using w3cos_runtime::dom APIs.
+pub fn generate_dom(tree: &AppTree) -> Result<String> {
+    let is_reactive = !tree.signals.is_empty();
+    let signal_names: Vec<&str> = tree.signals.iter().map(|s| s.name.as_str()).collect();
+    let mut body = String::new();
+
+    if is_reactive {
+        for (i, sig) in tree.signals.iter().enumerate() {
+            body.push_str(&format!(
+                "    let _ = w3cos_runtime::state::create_signal({});\n    let {} = w3cos_runtime::state::get_signal({});\n",
+                sig.initial, sig.name, i
+            ));
+        }
+        body.push('\n');
+    }
+
+    let mut counter = 0;
+    let root_var = gen_dom_node(&tree.root, &mut body, &mut counter, 1, &signal_names);
+    body.push_str(&format!("\n    let body = w3cos_runtime::dom::body_id();\n"));
+    body.push_str(&format!(
+        "    w3cos_runtime::dom::append_child(body, {root_var});\n"
+    ));
+
+    let imports = if is_reactive {
+        "use w3cos_std::EventAction;\n"
+    } else {
+        ""
+    };
+
+    Ok(format!(
+        r#"//! Auto-generated by w3cos compiler — do not edit (DOM mode).
+{imports}
+fn main() {{
+    w3cos_runtime::run_app_dom(setup).expect("W3C OS app crashed");
+}}
+
+fn setup() {{
+{body}}}
+"#
+    ))
+}
+
+fn gen_dom_node(
+    node: &Node,
+    out: &mut String,
+    counter: &mut usize,
+    depth: usize,
+    signal_names: &[&str],
+) -> String {
+    let indent = "    ".repeat(depth);
+    let var = format!("n{}", *counter);
+    *counter += 1;
+
+    match &node.kind {
+        NodeKind::Text(content) => {
+            let text = node.text.as_deref().unwrap_or(content.as_str());
+            let text_expr = gen_text_expr(text, signal_names);
+            out.push_str(&format!(
+                "{indent}let {var} = w3cos_runtime::dom::create_text_node(&{text_expr});\n"
+            ));
+        }
+        NodeKind::Button(label) => {
+            let lbl = node.label.as_deref().unwrap_or(label.as_str());
+            out.push_str(&format!(
+                "{indent}let {var} = w3cos_runtime::dom::create_element(\"button\");\n"
+            ));
+            out.push_str(&format!(
+                "{indent}w3cos_runtime::dom::set_text_content({var}, {lbl:?});\n"
+            ));
+            gen_dom_style_calls(&node.style, &var, out, &indent);
+            if let Some(ref action_str) = node.on_click {
+                let action = gen_event_action(action_str, signal_names);
+                out.push_str(&format!(
+                    "{indent}w3cos_runtime::dom::add_event_listener({var}, \"click\", {action});\n"
+                ));
+            }
+        }
+        NodeKind::Image(src) => {
+            let src_val = node.src.as_deref().unwrap_or(src.as_str());
+            out.push_str(&format!(
+                "{indent}let {var} = w3cos_runtime::dom::create_element(\"img\");\n"
+            ));
+            out.push_str(&format!(
+                "{indent}w3cos_runtime::dom::set_attribute({var}, \"src\", {src_val:?});\n"
+            ));
+            gen_dom_style_calls(&node.style, &var, out, &indent);
+        }
+        NodeKind::TextInput => {
+            let placeholder = node.placeholder.as_deref().unwrap_or("Enter text");
+            out.push_str(&format!(
+                "{indent}let {var} = w3cos_runtime::dom::create_element(\"input\");\n"
+            ));
+            out.push_str(&format!(
+                "{indent}w3cos_runtime::dom::set_attribute({var}, \"type\", \"text\");\n"
+            ));
+            out.push_str(&format!(
+                "{indent}w3cos_runtime::dom::set_attribute({var}, \"placeholder\", {placeholder:?});\n"
+            ));
+            gen_dom_style_calls(&node.style, &var, out, &indent);
+        }
+        NodeKind::Column | NodeKind::Row | NodeKind::Box => {
+            let tag = "div";
+            out.push_str(&format!(
+                "{indent}let {var} = w3cos_runtime::dom::create_element({tag:?});\n"
+            ));
+
+            // Set flex-direction for Row
+            if matches!(node.kind, NodeKind::Row) {
+                out.push_str(&format!(
+                    "{indent}w3cos_runtime::dom::set_style_property({var}, \"flex-direction\", \"row\");\n"
+                ));
+            }
+
+            gen_dom_style_calls(&node.style, &var, out, &indent);
+
+            if let Some(ref action_str) = node.on_click {
+                let action = gen_event_action(action_str, signal_names);
+                out.push_str(&format!(
+                    "{indent}w3cos_runtime::dom::add_event_listener({var}, \"click\", {action});\n"
+                ));
+            }
+
+            for child in &node.children {
+                let child_var = gen_dom_node(child, out, counter, depth, signal_names);
+                out.push_str(&format!(
+                    "{indent}w3cos_runtime::dom::append_child({var}, {child_var});\n"
+                ));
+            }
+        }
+    }
+
+    var
+}
+
+fn gen_dom_style_calls(style: &StyleDecl, var: &str, out: &mut String, indent: &str) {
+    let sp = |prop: &str, val: &str| {
+        format!("{indent}w3cos_runtime::dom::set_style_property({var}, {prop:?}, {val:?});\n")
+    };
+
+    if let Some(gap) = style.gap {
+        out.push_str(&sp("gap", &format!("{gap}px")));
+    }
+    if let Some(p) = style.padding {
+        out.push_str(&sp("padding", &format!("{p}px")));
+    }
+    if let Some(fs) = style.font_size {
+        out.push_str(&sp("font-size", &format!("{fs}px")));
+    }
+    if let Some(fw) = style.font_weight {
+        out.push_str(&sp("font-weight", &fw.to_string()));
+    }
+    if let Some(ref c) = style.color {
+        out.push_str(&sp("color", c));
+    }
+    if let Some(ref bg) = style.background {
+        out.push_str(&sp("background-color", bg));
+    }
+    if let Some(br) = style.border_radius {
+        out.push_str(&sp("border-radius", &format!("{br}px")));
+    }
+    if let Some(bw) = style.border_width {
+        out.push_str(&sp("border-width", &format!("{bw}px")));
+    }
+    if let Some(ref bc) = style.border_color {
+        out.push_str(&sp("border-color", bc));
+    }
+    if let Some(ref ai) = style.align_items {
+        out.push_str(&sp("align-items", ai));
+    }
+    if let Some(ref jc) = style.justify_content {
+        out.push_str(&sp("justify-content", jc));
+    }
+    if let Some(ref w) = style.width {
+        out.push_str(&sp("width", w));
+    }
+    if let Some(ref h) = style.height {
+        out.push_str(&sp("height", h));
+    }
+    if let Some(fg) = style.flex_grow {
+        out.push_str(&sp("flex-grow", &fg.to_string()));
+    }
+    if let Some(ref d) = style.display {
+        out.push_str(&sp("display", d));
+    }
+    if let Some(ref p) = style.position {
+        out.push_str(&sp("position", p));
+    }
+    if let Some(ref ov) = style.overflow {
+        out.push_str(&sp("overflow", ov));
+    }
+    if let Some(ref t) = style.top { out.push_str(&sp("top", t)); }
+    if let Some(ref r) = style.right { out.push_str(&sp("right", r)); }
+    if let Some(ref b) = style.bottom { out.push_str(&sp("bottom", b)); }
+    if let Some(ref l) = style.left { out.push_str(&sp("left", l)); }
+    if let Some(zi) = style.z_index {
+        out.push_str(&sp("z-index", &zi.to_string()));
+    }
+}
+
 #[cfg(test)]
 mod tests {
     use crate::parser::{AppTree, Node, NodeKind, StyleDecl};

crates/w3cos-dom/src/document.rs

@@ -216,12 +216,60 @@ impl Document {
                     };
                 }
 
+                let is_row = matches!(
+                    style.flex_direction,
+                    w3cos_std::style::FlexDirection::Row
+                        | w3cos_std::style::FlexDirection::RowReverse
+                );
+
                 match node.tag.as_str() {
                     "body" | "div" | "section" | "main" | "article" | "nav" | "header"
-                    | "footer" => w3cos_std::Component::column(style, children),
-                    "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" => {
-                        if let Some(text) = &node.text_content {
+                    | "footer" | "aside" | "form" | "fieldset" | "ul" | "ol" | "dl" => {
+                        if is_row {
+                            w3cos_std::Component::row(style, children)
+                        } else {
+                            w3cos_std::Component::column(style, children)
+                        }
+                    }
+                    "span" | "label" | "em" | "strong" | "code" | "small" | "li" | "dd"
+                    | "dt" => {
+                        if let Some(text) = &node.text_content
+                            && children.is_empty()
+                        {
                             w3cos_std::Component::text(text, style)
+                        } else if is_row {
+                            w3cos_std::Component::row(style, children)
+                        } else {
+                            w3cos_std::Component::column(style, children)
+                        }
+                    }
+                    "p" => {
+                        if let Some(text) = &node.text_content
+                            && children.is_empty()
+                        {
+                            w3cos_std::Component::text(text, style)
+                        } else {
+                            w3cos_std::Component::column(style, children)
+                        }
+                    }
+                    "h1" | "h2" | "h3" | "h4" | "h5" | "h6" => {
+                        if let Some(text) = &node.text_content {
+                            let mut heading_style = style;
+                            let default_size = match node.tag.as_str() {
+                                "h1" => 32.0,
+                                "h2" => 24.0,
+                                "h3" => 20.0,
+                                "h4" => 18.0,
+                                "h5" => 16.0,
+                                _ => 14.0,
+                            };
+                            if heading_style.font_size == 16.0 {
+                                heading_style.font_size = default_size;
+                            }
+                            if heading_style.font_weight == 400 {
+                                heading_style.font_weight = 700;
+                            }
+                            w3cos_std::Component::text(text, heading_style)
                         } else {
                             w3cos_std::Component::column(style, children)
                         }
@@ -230,7 +278,32 @@ impl Document {
                         let label = node.text_content.as_deref().unwrap_or("Button");
                         w3cos_std::Component::button(label, style)
                     }
-                    _ => w3cos_std::Component::column(style, children),
+                    "img" => {
+                        let src = node
+                            .attributes
+                            .iter()
+                            .find(|(k, _)| k == "src")
+                            .map(|(_, v)| v.as_str())
+                            .unwrap_or("");
+                        w3cos_std::Component::image(src, style)
+                    }
+                    "input" => {
+                        let placeholder = node
+                            .attributes
+                            .iter()
+                            .find(|(k, _)| k == "placeholder")
+                            .map(|(_, v)| v.as_str())
+                            .unwrap_or("");
+                        let value = node.text_content.as_deref().unwrap_or("");
+                        w3cos_std::Component::text_input(value, placeholder, style)
+                    }
+                    _ => {
+                        if is_row {
+                            w3cos_std::Component::row(style, children)
+                        } else {
+                            w3cos_std::Component::column(style, children)
+                        }
+                    }
                 }
             }
         }
@@ -239,6 +312,16 @@ impl Document {
     pub fn node_count(&self) -> usize {
         self.nodes.len()
     }
+
+    /// Dispatch an event with bubbling through the DOM tree.
+    pub fn dispatch_event_bubbling(&mut self, event: &mut crate::events::Event) {
+        let parents: std::collections::HashMap<NodeId, Option<NodeId>> = self
+            .nodes
+            .iter()
+            .map(|n| (n.id, n.parent))
+            .collect();
+        self.events.dispatch_with_bubbling(&parents, event);
+    }
 }
 
 impl Default for Document {

crates/w3cos-dom/src/events.rs

@@ -133,6 +133,27 @@ impl EventRegistry {
             }
         }
     }
+
+    /// Dispatch an event with W3C-standard bubbling up the DOM tree.
+    /// Fires listeners on the target first, then walks up via parent pointers.
+    pub fn dispatch_with_bubbling(
+        &mut self,
+        parents: &std::collections::HashMap<NodeId, Option<NodeId>>,
+        event: &mut Event,
+    ) {
+        let mut current = Some(event.target);
+        while let Some(node_id) = current {
+            for (listener_node, listener) in self.listeners.iter_mut() {
+                if *listener_node == node_id && listener.event_type == event.event_type {
+                    (listener.handler)(event);
+                    if event.stop_propagation {
+                        return;
+                    }
+                }
+            }
+            current = parents.get(&node_id).copied().flatten();
+        }
+    }
 }
 
 impl Default for EventRegistry {

crates/w3cos-dom/src/node.rs

@@ -8,6 +8,10 @@ impl NodeId {
     pub fn as_u32(self) -> u32 {
         self.0
     }
+
+    pub fn from_u32(v: u32) -> Self {
+        Self(v)
+    }
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]