web_sys_comparison/
web_sys_comparison.rs

1use sledgehammer::{channel::MaybeId, *};
2use wasm_bindgen::JsCast;
3
4fn main() {
5    let window = web_sys::window().unwrap();
6    let document = window.document().unwrap();
7    let body = document.body().unwrap();
8
9    // create an element using web-sys
10    let div = document.create_element("div").unwrap();
11    let web_sys_element = document.create_element("p").unwrap();
12    web_sys_element
13        .set_attribute("style", "color: blue")
14        .unwrap();
15    web_sys_element.set_text_content(Some("Hello from web-sys!"));
16    let svg = document
17        .create_element_ns(Some("http://www.w3.org/2000/svg"), "svg")
18        .unwrap();
19    svg.set_attribute_ns(Some("http://www.w3.org/2000/svg"), "width", "100%")
20        .unwrap();
21    div.append_child(&web_sys_element).unwrap();
22    div.append_child(&svg).unwrap();
23
24    // append the new node to the body
25    body.append_child(&div).unwrap();
26
27    let mut channel = MsgChannel::default();
28
29    // assign the NodeId(0) to the body element from web-sys
30    channel.set_node(NodeId(0), JsCast::dyn_into(body).unwrap());
31
32    // create an element using sledgehammer
33    channel.build_full_element(
34        ElementBuilder::new(Element::div.into())
35            .id(NodeId(1))
36            .children(&[
37                ElementBuilder::new(Element::p.into())
38                    .id(NodeId(2))
39                    .attrs(&[(Attribute::style.into(), "color: blue")])
40                    .into(),
41                ElementBuilder::new("svg".in_namespace("http://www.w3.org/2000/svg").into())
42                    .attrs(&[(
43                        "width".in_namespace("http://www.w3.org/2000/svg").into(),
44                        "100%",
45                    )])
46                    .into(),
47            ]),
48    );
49
50    channel.set_text("Hello from sledehammer!", MaybeId::Node(NodeId(2)));
51
52    // append the new node to the body
53    channel.append_child(
54        MaybeId::Node(NodeId(0)),
55        sledgehammer::channel::MaybeId::Node(NodeId(1)),
56    );
57
58    // execute the queued operations
59    channel.flush();
60
61    // we can also get web-sys nodes out of sledgehammer
62    let element = channel.get_node(NodeId(2));
63    let text = element.text_content().map(|t| t + " + web-sys");
64    element.set_text_content(text.as_deref());
65}
web_sys_comparison/web_sys_comparison.rs

web_sys_comparison/
web_sys_comparison.rs
