webui_wasm/
lib.rs

1// Copyright (c) Microsoft Corporation.
2// Licensed under the MIT license.
3
4//! WebAssembly bindings for the WebUI framework.
5//!
6//! This crate can be built as three WASM variants:
7//! - **handler** - render pre-built protocol bytes with state.
8//! - **parser** - build protocol bytes from virtual files.
9//! - **all** - parser plus handler exports for playground-style live preview.
10
11mod error;
12
13#[cfg(all(not(feature = "handler"), not(feature = "parser")))]
14compile_error!("microsoft-webui-wasm requires at least one of the `handler` or `parser` features");
15
16#[cfg(feature = "handler")]
17mod handler;
18#[cfg(feature = "parser")]
19mod parser;
20
21#[cfg(feature = "handler")]
22pub use handler::{protocol_tokens, render, render_component_templates, render_partial};
23#[cfg(feature = "parser")]
24pub use parser::build_protocol;
25
26#[cfg(all(test, feature = "handler", feature = "parser"))]
27mod tests {
28    use super::*;
29    use crate::error::WasmError;
30    use std::collections::HashMap;
31    use webui_protocol::WebUIProtocol;
32
33    fn render_files_for_test(
34        files: &HashMap<String, String>,
35        state_json: &str,
36        entry: &str,
37        request_path: &str,
38    ) -> Result<String, WasmError> {
39        let protocol = parser::parse_to_protocol(files, entry)?;
40        handler::render_protocol_to_string(&protocol, state_json, entry, request_path, None)
41    }
42
43    #[test]
44    fn test_simple_render() {
45        let mut files = HashMap::new();
46        files.insert(
47            "index.html".to_string(),
48            "<h1>Hello, {{name}}!</h1>".to_string(),
49        );
50
51        let result = render_files_for_test(&files, r#"{"name": "WebUI"}"#, "index.html", "/");
52        assert_eq!(result.unwrap(), "<h1>Hello, WebUI!</h1>");
53    }
54
55    #[test]
56    fn test_missing_entry_file() {
57        let files = HashMap::new();
58        let result = render_files_for_test(&files, "{}", "index.html", "/");
59        assert!(result.is_err());
60        let err = result.unwrap_err().to_string();
61        assert!(err.contains("not found"), "Unexpected error: {}", err);
62    }
63
64    #[test]
65    fn test_build_protocol_surfaces_invalid_w_ref() {
66        let mut files = HashMap::new();
67        files.insert(
68            "index.html".to_string(),
69            "<my-card>Hi</my-card>".to_string(),
70        );
71        files.insert(
72            "my-card.html".to_string(),
73            r#"<div><input w-ref="myInput" /></div>"#.to_string(),
74        );
75
76        let result = parser::build_protocol_inner(&files, "index.html");
77        assert!(result.is_err());
78        let err = result.unwrap_err().to_string();
79        assert!(
80            err.contains("invalid w-ref binding"),
81            "Unexpected error: {err}"
82        );
83        assert!(
84            err.contains("component <my-card> · element <input>"),
85            "Unexpected error: {err}"
86        );
87    }
88
89    #[test]
90    fn test_render_files_surfaces_invalid_event_handler() {
91        let mut files = HashMap::new();
92        files.insert("index.html".to_string(), "<my-btn>x</my-btn>".to_string());
93        files.insert(
94            "my-btn.html".to_string(),
95            r#"<div><button @click="e.preventDefault()">x</button></div>"#.to_string(),
96        );
97
98        let result = render_files_for_test(&files, "{}", "index.html", "/");
99        assert!(result.is_err());
100        let err = result.unwrap_err().to_string();
101        assert!(
102            err.contains("invalid @click handler"),
103            "Unexpected error: {err}"
104        );
105        assert!(
106            err.contains("component <my-btn> · element <button>"),
107            "Unexpected error: {err}"
108        );
109    }
110
111    #[test]
112    fn test_with_component() {
113        let mut files = HashMap::new();
114        files.insert(
115            "index.html".to_string(),
116            "<my-card>World</my-card>".to_string(),
117        );
118        files.insert(
119            "my-card.html".to_string(),
120            "<div class=\"card\"><slot></slot></div>".to_string(),
121        );
122
123        let result = render_files_for_test(&files, "{}", "index.html", "/");
124        assert!(result.is_ok(), "Render failed: {:?}", result);
125        let html = result.as_deref().unwrap_or("");
126        assert!(html.contains("card"), "Expected card class in: {}", html);
127    }
128
129    #[test]
130    fn test_with_for_loop() {
131        let mut files = HashMap::new();
132        files.insert(
133            "index.html".to_string(),
134            "<for each=\"item in items\">{{item.name}}, </for>".to_string(),
135        );
136
137        let state = r#"{"items": [{"name": "A"}, {"name": "B"}]}"#;
138        let result = render_files_for_test(&files, state, "index.html", "/");
139        assert!(result.is_ok(), "Render failed: {:?}", result);
140        let html = result.as_deref().unwrap_or("");
141        assert!(html.contains("A"), "Expected 'A' in: {}", html);
142        assert!(html.contains("B"), "Expected 'B' in: {}", html);
143    }
144
145    #[test]
146    fn test_with_if_condition() {
147        let mut files = HashMap::new();
148        files.insert(
149            "index.html".to_string(),
150            "<if condition=\"show\">Visible</if>".to_string(),
151        );
152
153        let result_true = render_files_for_test(&files, r#"{"show": true}"#, "index.html", "/");
154        assert_eq!(result_true.unwrap(), "Visible");
155
156        let result_false = render_files_for_test(&files, r#"{"show": false}"#, "index.html", "/");
157        assert_eq!(result_false.unwrap(), "");
158    }
159
160    #[test]
161    fn test_invalid_state_json() {
162        let mut files = HashMap::new();
163        files.insert("index.html".to_string(), "<p>Hi</p>".to_string());
164
165        let result = render_files_for_test(&files, "not json", "index.html", "/");
166        assert!(result.is_err());
167        let err = result.unwrap_err().to_string();
168        assert!(
169            err.contains("State JSON error"),
170            "Unexpected error: {}",
171            err
172        );
173    }
174
175    #[test]
176    fn test_component_with_css() {
177        let mut files = HashMap::new();
178        files.insert(
179            "index.html".to_string(),
180            "<my-card>Content</my-card>".to_string(),
181        );
182        files.insert(
183            "my-card.html".to_string(),
184            "<p><slot></slot></p>".to_string(),
185        );
186        files.insert("my-card.css".to_string(), "p { color: red; }".to_string());
187
188        let result = render_files_for_test(&files, "{}", "index.html", "/");
189        assert!(result.is_ok(), "Render failed: {:?}", result);
190        let html = result.as_deref().unwrap_or("");
191        assert!(
192            html.contains("<style>p { color: red; }</style>"),
193            "Expected inline <style> tag in: {}",
194            html
195        );
196        assert!(
197            !html.contains("<link"),
198            "Should not have external <link> tag in: {}",
199            html
200        );
201    }
202
203    #[test]
204    fn test_raw_signal() {
205        let mut files = HashMap::new();
206        files.insert(
207            "index.html".to_string(),
208            "<div>{{{raw_html}}}</div>".to_string(),
209        );
210
211        let result =
212            render_files_for_test(&files, r#"{"raw_html": "<b>bold</b>"}"#, "index.html", "/");
213        assert!(result.is_ok(), "Render failed: {:?}", result);
214        let html = result.as_deref().unwrap_or("");
215        assert!(
216            html.contains("<b>bold</b>"),
217            "Expected raw HTML in: {}",
218            html
219        );
220    }
221
222    #[test]
223    fn test_static_html_passthrough() {
224        let mut files = HashMap::new();
225        files.insert(
226            "index.html".to_string(),
227            "<h1>Static</h1><p>Content</p>".to_string(),
228        );
229
230        let result = render_files_for_test(&files, "{}", "index.html", "/");
231        assert_eq!(result.unwrap(), "<h1>Static</h1><p>Content</p>");
232    }
233
234    #[test]
235    fn test_protocol_tokens_empty() {
236        let protocol = WebUIProtocol::new(HashMap::new());
237        let bytes = protocol.to_protobuf().unwrap();
238        let decoded = WebUIProtocol::from_protobuf(&bytes).unwrap();
239        assert!(decoded.tokens.is_empty());
240    }
241
242    #[test]
243    fn test_protocol_tokens_roundtrip() {
244        let tokens = vec![
245            "colorBrandBackground".to_string(),
246            "fontSizeBase300".to_string(),
247        ];
248        let protocol = WebUIProtocol::with_tokens(HashMap::new(), tokens.clone());
249        let bytes = protocol.to_protobuf().unwrap();
250        let decoded = WebUIProtocol::from_protobuf(&bytes).unwrap();
251        assert_eq!(decoded.tokens, tokens);
252    }
253
254    #[test]
255    fn test_protocol_tokens_preserves_order() {
256        let tokens = vec!["zeta".to_string(), "alpha".to_string(), "zeta".to_string()];
257        let protocol = WebUIProtocol::with_tokens(HashMap::new(), tokens.clone());
258        let bytes = protocol.to_protobuf().unwrap();
259        let decoded = WebUIProtocol::from_protobuf(&bytes).unwrap();
260        assert_eq!(decoded.tokens, tokens);
261    }
262}
webui_wasm/lib.rs

webui_wasm/
lib.rs
