feat: implement Phase 1 interactive apps (reactive state, events, animations)

- Add reactive signal system (state.rs) with create/get/set/dirty tracking
- Add EventAction enum (Increment/Decrement/Set/Toggle) on Component
- Compiler: parse signal declarations, onClick attrs, {signal} interpolation
- Runtime: rebuild UI on signal change, execute event actions on click
- CSS transition animation (opacity, background) with 60fps frame loop
- Scroll support (overflow: scroll/hidden with mousewheel + clip)
- Image component with placeholder rendering
- TextInput component with keyboard input and blinking cursor
- Focus management (Tab/Shift+Tab cycling, Enter/Space activation)
- position: fixed (viewport-relative) and sticky (relative fallback)
- display: inline/inline-block via Taffy flex approximation
- Migrate all examples from .ts to .tsx syntax
- Reactive counter example with signal(0) + increment/decrement/reset
- 139 tests passing, clippy clean

Made-with: Cursor

Author: wangnaihe

Cargo.toml

@@ -24,6 +24,7 @@ w3cos-dom = { path = "crates/w3cos-dom" }
 w3cos-a11y = { path = "crates/w3cos-a11y" }
 w3cos-ai-bridge = { path = "crates/w3cos-ai-bridge" }
 png = "0.17"
+image = "0.25"
 
 # Layout: Taffy 0.9 — Flexbox + Grid + Block + position
 taffy = { version = "0.9", features = ["std", "flexbox", "grid", "block_layout", "content_size"] }

README.md

@@ -35,7 +35,7 @@ cd w3cos
 cargo build --release
 
 # Compile a TypeScript app to a native binary
-./target/release/w3cos build examples/showcase/app.ts -o showcase --release
+./target/release/w3cos build examples/showcase/app.tsx -o showcase --release
 ./showcase    # Opens a native window — no browser involved
 ```
 

ROADMAP.md

@@ -50,9 +50,6 @@
 - [ ] PWA manifest support
 - [ ] npm package compatibility (pure-logic packages)
 - [ ] Cross-compilation: Linux x86/ARM, macOS
-- [ ] Android container (Waydroid integration)
-- [ ] Wine integration for Windows apps
-
 ## Phase 4 — Operating System
 - [ ] Bootable ISO (Buildroot) available on GitHub Releases
 - [ ] W3C OS as system shell (replaces desktop environment)

crates/w3cos-compiler/src/codegen.rs

@@ -1,28 +1,64 @@
-use crate::parser::{AppTree, Node, NodeKind, StyleDecl};
+use crate::parser::{AppTree, Node, NodeKind, SignalDecl, StyleDecl};
 #[allow(unused_imports)]
 use anyhow::Context;
 use anyhow::Result;
 
 /// Generate a complete Rust main.rs that builds and runs a W3C OS application.
 pub fn generate(tree: &AppTree) -> Result<String> {
-    let component_code = gen_node(&tree.root, 0);
+    let is_reactive = !tree.signals.is_empty();
+    let signal_names: Vec<&str> = tree.signals.iter().map(|s| s.name.as_str()).collect();
+    let component_code = gen_node(&tree.root, 0, &signal_names);
 
-    Ok(format!(
-        r#"//! Auto-generated by w3cos compiler — do not edit.
+    if is_reactive {
+        let signal_inits = gen_signal_inits(&tree.signals);
+        Ok(format!(
+            r#"//! Auto-generated by w3cos compiler — do not edit.
+use w3cos_std::{{Component, EventAction, Style}};
+use w3cos_std::style::*;
+use w3cos_std::color::Color;
+
+fn main() {{
+    w3cos_runtime::run_app(build_ui).expect("W3C OS app crashed");
+}}
+
+fn build_ui() -> Component {{
+{signal_inits}
+{component_code}
+}}
+"#
+        ))
+    } else {
+        Ok(format!(
+            r#"//! Auto-generated by w3cos compiler — do not edit.
 use w3cos_std::{{Component, Style}};
 use w3cos_std::style::*;
 use w3cos_std::color::Color;
 
 fn main() {{
-    let root = build_ui();
-    w3cos_runtime::run_app(root).expect("W3C OS app crashed");
+    w3cos_runtime::run_app(build_ui).expect("W3C OS app crashed");
 }}
 
 fn build_ui() -> Component {{
 {component_code}
 }}
 "#
-    ))
+        ))
+    }
+}
+
+fn gen_signal_inits(signals: &[SignalDecl]) -> String {
+    signals
+        .iter()
+        .enumerate()
+        .map(|(i, sig)| {
+            format!(
+                "    let _ = w3cos_runtime::state::create_signal({initial});\n    let {name} = w3cos_runtime::state::get_signal({i});",
+                initial = sig.initial,
+                name = sig.name,
+            )
+        })
+        .collect::<Vec<_>>()
+        .join("\n")
 }
 
 /// Generate a Cargo.toml for the compiled application.
@@ -82,18 +118,32 @@ fn find_workspace_root() -> Result<std::path::PathBuf> {
     )
 }
 
-fn gen_node(node: &Node, depth: usize) -> String {
+fn gen_node(node: &Node, depth: usize, signal_names: &[&str]) -> String {
     let indent = "    ".repeat(depth + 1);
     let style_code = gen_style(&node.style, depth + 1);
 
     match &node.kind {
         NodeKind::Text(content) => {
             let text = node.text.as_deref().unwrap_or(content.as_str());
-            format!("{indent}Component::text({text:?}, {style_code})")
+            let text_expr = gen_text_expr(text, signal_names);
+            format!("{indent}Component::text({text_expr}, {style_code})")
         }
         NodeKind::Button(label) => {
             let lbl = node.label.as_deref().unwrap_or(label.as_str());
-            format!("{indent}Component::button({lbl:?}, {style_code})")
+            if let Some(ref action_str) = node.on_click {
+                let action = gen_event_action(action_str, signal_names);
+                format!("{indent}Component::button_with_click({lbl:?}, {style_code}, {action})")
+            } else {
+                format!("{indent}Component::button({lbl:?}, {style_code})")
+            }
+        }
+        NodeKind::Image(src) => {
+            let src_val = node.src.as_deref().unwrap_or(src.as_str());
+            format!("{indent}Component::image({src_val:?}, {style_code})")
+        }
+        NodeKind::TextInput => {
+            let placeholder = node.placeholder.as_deref().unwrap_or("Enter text");
+            format!("{indent}Component::text_input(\"\", {placeholder:?}, {style_code})")
         }
         NodeKind::Column | NodeKind::Row | NodeKind::Box => {
             let constructor = match &node.kind {
@@ -108,7 +158,7 @@ fn gen_node(node: &Node, depth: usize) -> String {
                 let items: Vec<String> = node
                     .children
                     .iter()
-                    .map(|c| gen_node(c, depth + 2))
+                    .map(|c| gen_node(c, depth + 2, signal_names))
                     .collect();
                 format!("vec![\n{},\n{indent}]", items.join(",\n"))
             };
@@ -117,6 +167,53 @@ fn gen_node(node: &Node, depth: usize) -> String {
     }
 }
 
+fn gen_text_expr(text: &str, signal_names: &[&str]) -> String {
+    if !text.contains('{') {
+        return format!("{text:?}");
+    }
+    // Check for {signal_name} interpolation
+    for (i, name) in signal_names.iter().enumerate() {
+        let placeholder = format!("{{{name}}}");
+        if text == placeholder {
+            return format!("w3cos_runtime::state::get_signal({i}).to_string()");
+        }
+        if text.contains(&placeholder) {
+            return format!(
+                "{text:?}.replace(\"{placeholder}\", &w3cos_runtime::state::get_signal({i}).to_string())"
+            );
+        }
+    }
+    format!("{text:?}")
+}
+
+fn gen_event_action(action_str: &str, signal_names: &[&str]) -> String {
+    let parts: Vec<&str> = action_str.split(':').collect();
+    if parts.len() < 2 {
+        return "EventAction::None".to_string();
+    }
+
+    let action_type = parts[0].trim();
+    let signal_name = parts[1].trim();
+    let signal_id = signal_names
+        .iter()
+        .position(|&n| n == signal_name)
+        .unwrap_or(0);
+
+    match action_type {
+        "increment" => format!("EventAction::Increment({signal_id})"),
+        "decrement" => format!("EventAction::Decrement({signal_id})"),
+        "toggle" => format!("EventAction::Toggle({signal_id})"),
+        "set" => {
+            let value = parts
+                .get(2)
+                .and_then(|v| v.trim().parse::<i64>().ok())
+                .unwrap_or(0);
+            format!("EventAction::Set({signal_id}, {value})")
+        }
+        _ => "EventAction::None".to_string(),
+    }
+}
+
 fn gen_style(s: &StyleDecl, depth: usize) -> String {
     let indent = "    ".repeat(depth);
     let mut fields = Vec::new();
@@ -272,7 +369,11 @@ mod tests {
                 children: vec![],
                 text: Some("hello".to_string()),
                 label: None,
+                on_click: None,
+                src: None,
+                placeholder: None,
             },
+            signals: vec![],
         };
         let rust = generate(&tree).unwrap();
         assert!(rust.contains("Component::text(\"hello\""));
@@ -289,7 +390,11 @@ mod tests {
                 children: vec![],
                 text: None,
                 label: Some("click me".to_string()),
+                on_click: None,
+                src: None,
+                placeholder: None,
             },
+            signals: vec![],
         };
         let rust = generate(&tree).unwrap();
         assert!(rust.contains("Component::button(\"click me\""));
@@ -308,18 +413,28 @@ mod tests {
                         children: vec![],
                         text: Some("a".to_string()),
                         label: None,
+                        on_click: None,
+                        src: None,
+                        placeholder: None,
                     },
                     Node {
                         kind: NodeKind::Text("b".to_string()),
                         style: StyleDecl::default(),
                         children: vec![],
                         text: Some("b".to_string()),
                         label: None,
+                        on_click: None,
+                        src: None,
+                        placeholder: None,
                     },
                 ],
                 text: None,
                 label: None,
+                on_click: None,
+                src: None,
+                placeholder: None,
             },
+            signals: vec![],
         };
         let rust = generate(&tree).unwrap();
         assert!(rust.contains("Component::column"));
@@ -328,6 +443,26 @@ mod tests {
         assert!(rust.contains("vec!["));
     }
 
+    #[test]
+    fn codegen_text_input_produces_component_text_input() {
+        let tree = AppTree {
+            root: Node {
+                kind: NodeKind::TextInput,
+                style: StyleDecl::default(),
+                children: vec![],
+                text: None,
+                label: None,
+                on_click: None,
+                src: None,
+                placeholder: Some("Enter name".to_string()),
+            },
+            signals: vec![],
+        };
+        let rust = generate(&tree).unwrap();
+        assert!(rust.contains("Component::text_input"));
+        assert!(rust.contains("\"Enter name\""));
+    }
+
     #[test]
     fn codegen_row_with_style() {
         let mut style = StyleDecl::default();
@@ -339,7 +474,11 @@ mod tests {
                 children: vec![],
                 text: None,
                 label: None,
+                on_click: None,
+                src: None,
+                placeholder: None,
             },
+            signals: vec![],
         };
         let rust = generate(&tree).unwrap();
         assert!(rust.contains("Component::row"));
@@ -358,10 +497,33 @@ mod tests {
                 children: vec![],
                 text: Some("styled".to_string()),
                 label: None,
+                on_click: None,
+                src: None,
+                placeholder: None,
             },
+            signals: vec![],
         };
         let rust = generate(&tree).unwrap();
         assert!(rust.contains("Color::from_hex(\"#fff\")"));
         assert!(rust.contains("Color::from_hex(\"#e94560\")"));
     }
+
+    #[test]
+    fn codegen_image_produces_component_image() {
+        let tree = AppTree {
+            root: Node {
+                kind: NodeKind::Image("path.png".to_string()),
+                style: StyleDecl::default(),
+                children: vec![],
+                text: None,
+                label: None,
+                on_click: None,
+                src: Some("path.png".to_string()),
+                placeholder: None,
+            },
+            signals: vec![],
+        };
+        let rust = generate(&tree).unwrap();
+        assert!(rust.contains("Component::image(\"path.png\""));
+    }
 }