sauron 0.70.0

A versatile web framework and library for building client-side and/or server-side web applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

use sauron::{
    html::{attributes::*, *},
    *,
};

use test_fixtures::simple_program;
use wasm_bindgen_test::*;

mod test_fixtures;

wasm_bindgen_test_configure!(run_in_browser);
#[wasm_bindgen_test]
fn test_multiple_replace() {
    console_log::init_with_level(log::Level::Trace).ok();
    console_error_panic_hook::set_once();

    let document = web_sys::window().unwrap().document().unwrap();

    let old: Node<()> = main(
        vec![class("multi_replace")],
        vec![ul(
            vec![class("todo")],
            vec![
                li(vec![key(1)], vec![text("item1")]),
                li(vec![key(2)], vec![text("item2")]),
                li(vec![key(3)], vec![text("item3")]),
            ],
        )],
    );

    // we remove the key1
    let update1: Node<()> = main(
        vec![class("multi_replace")],
        vec![ul(
            vec![class("todo")],
            vec![
                li(vec![key(10)], vec![text("item10")]),
                li(vec![key(20)], vec![text("item20")]),
                li(vec![key(30)], vec![text("item30")]),
            ],
        )],
    );

    let patches = diff(&old, &update1);
    log::debug!("patches: {:#?}", patches);

    let mut old_html = String::new();
    old.render(&mut old_html).expect("must render");

    let mut simple_program = simple_program();
    simple_program
        .update_dom_with_vdom(old)
        .expect("must update dom");

    let container = document
        .query_selector(".multi_replace")
        .expect("must not error")
        .expect("must exist");

    let expected = "<main class=\"multi_replace\"><ul class=\"todo\"><li key=\"1\">item1</li><li key=\"2\">item2</li><li key=\"3\">item3</li></ul></main>";

    assert_eq!(expected, container.outer_html());

    simple_program
        .update_dom_with_vdom(update1)
        .expect("must not error");

    let container = document
        .query_selector(".multi_replace")
        .expect("must not error")
        .expect("must exist");

    let expected1 = "<main class=\"multi_replace\"><ul class=\"todo\"><li key=\"10\">item10</li><li key=\"20\">item20</li><li key=\"30\">item30</li></ul></main>";

    assert_eq!(expected1, container.outer_html());
}

#[wasm_bindgen_test]
fn test_multiple_replace_and_parent_is_replaced_too() {
    console_log::init_with_level(log::Level::Trace).ok();
    console_error_panic_hook::set_once();

    let document = web_sys::window().unwrap().document().unwrap();

    let old: Node<()> = main(
        vec![class("parent_replaced"), key("parent-old")],
        vec![ul(
            vec![class("todo")],
            vec![
                li(vec![key(1)], vec![text("item1")]),
                li(vec![key(2)], vec![text("item2")]),
                li(vec![key(3)], vec![text("item3")]),
            ],
        )],
    );

    // we remove the key1
    let update1: Node<()> = main(
        vec![class("parent_replaced"), key("parent-new")],
        vec![ul(
            vec![class("todo")],
            vec![
                li(vec![key(10)], vec![text("item10")]),
                li(vec![key(20)], vec![text("item20")]),
                li(vec![key(30)], vec![text("item30")]),
            ],
        )],
    );

    let patches = diff(&old, &update1);
    log::debug!("patches: {:#?}", patches);

    let mut old_html = String::new();
    old.render(&mut old_html).expect("must render");

    let mut simple_program = simple_program();
    simple_program
        .update_dom_with_vdom(old)
        .expect("must update dom");

    let container = document
        .query_selector(".parent_replaced")
        .expect("must not error")
        .expect("must exist");

    let expected = "<main class=\"parent_replaced\" key=\"parent-old\"><ul class=\"todo\"><li key=\"1\">item1</li><li key=\"2\">item2</li><li key=\"3\">item3</li></ul></main>";

    assert_eq!(expected, container.outer_html());

    simple_program
        .update_dom_with_vdom(update1)
        .expect("must not error");

    let container = document
        .query_selector(".parent_replaced")
        .expect("must not error")
        .expect("must exist");

    let expected1 = "<main class=\"parent_replaced\" key=\"parent-new\"><ul class=\"todo\"><li key=\"10\">item10</li><li key=\"20\">item20</li><li key=\"30\">item30</li></ul></main>";

    assert_eq!(expected1, container.outer_html());
}