silkenweb 0.10.0

A library for building web apps
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

use futures_signals::{
    signal::Mutable,
    signal_vec::{MutableVec, SignalVecExt},
};
use silkenweb::{
    dom::Template,
    elements::{
        html::{div, Div},
        HtmlElement,
    },
    node::{
        element::{Const, ParentElement, TextParentElement},
        Node,
    },
    task::render_now,
    value::Sig,
};
use silkenweb_macros::cfg_browser;

async fn check<Param: 'static>(
    template: &Div<Template<Param>, Const>,
    param: Param,
    expected: &str,
) {
    render_now().await;
    let node: Node = template.instantiate(&param).into();
    assert_eq!(node.to_string(), expected);
}

isomorphic_test! {
    async fn template_text() {
        let template: Div<Template<String>, Const> = div().on_instantiate(|div, s| div.text(s)).freeze();
        check(&template, "Hello, world!".to_string(), r#"<div>Hello, world!</div>"#).await;
        check(&template, "Goodbye!".to_string(), r#"<div>Goodbye!</div>"#).await;
    }
}

isomorphic_test! {
    async fn template_attribute() {
        let template: Div<Template<String>, Const> = div().on_instantiate(|div, s| div.id(s)).freeze();
        check(&template, "my-id".to_string(), r#"<div id="my-id"></div>"#).await;
        check(&template, "my-other-id".to_string(), r#"<div id="my-other-id"></div>"#).await;
    }
}

isomorphic_test! {
    async fn template_child() {
        let template: Div<Template<String>, Const> = div().on_instantiate(|d, s| d.child(div().id(s))).freeze();
        check(&template, "my-id".to_string(), r#"<div><div id="my-id"></div></div>"#).await;
        check(&template, "my-other-id".to_string(), r#"<div><div id="my-other-id"></div></div>"#).await;
    }
}

isomorphic_test! {
    async fn template_text_signal() {
        let text = Mutable::new("Hello, world!".to_string());
        let template: Div<Template<()>, Const> = div().text(Sig(text.signal_cloned())).freeze();
        check(&template, (), r#"<div>Hello, world!</div>"#).await;
        text.set("Goodbye!".to_string());
        check(&template, (), r#"<div>Goodbye!</div>"#).await;
    }
}

isomorphic_test! {
    async fn template_attribute_signal() {
        let text = Mutable::new("my-id".to_string());
        let template: Div<Template<()>, Const> = div().id(Sig(text.signal_cloned())).freeze();
        check(&template, (), r#"<div id="my-id"></div>"#).await;
        text.set("my-other-id".to_string());
        check(&template, (), r#"<div id="my-other-id"></div>"#).await;
    }
}

isomorphic_test! {
    async fn template_children_signal() {
        let children: MutableVec<usize> = MutableVec::new();
        let children_signal = children.signal_vec().map(|i| div().text(i.to_string()));
        let template: Div<Template<()>, Const> = div().children_signal(children_signal).freeze();
        children.lock_mut().push(0);
        check(&template, (), r#"<div><div>0</div></div>"#).await;
        children.lock_mut().push(1);
        check(&template, (), r#"<div><div>0</div><div>1</div></div>"#).await;
        children.lock_mut().insert(1, 2);
        check(&template, (), r#"<div><div>0</div><div>2</div><div>1</div></div>"#).await;
        children.lock_mut().set(1, 3);
        check(&template, (), r#"<div><div>0</div><div>3</div><div>1</div></div>"#).await;
        children.lock_mut().remove(1);
        check(&template, (), r#"<div><div>0</div><div>1</div></div>"#).await;
        children.lock_mut().clear();
        check(&template, (), r#"<div></div>"#).await;
    }
}

#[cfg_browser(false)]
mod dry {
    use silkenweb::{
        dom::{Dry, Template},
        elements::html::{div, Div},
        node::element::{Const, ParentElement, TextParentElement},
        task::{server::render_now_sync, sync_scope},
    };

    #[test]
    fn dry_clone_node_is_deep() {
        sync_scope(|| {
            let template: Div<Template<String, Dry>, Const> = div()
                .child(div().on_instantiate(|div, s| div.text(s)))
                .freeze();
            render_now_sync();
            let node1 = template.instantiate(&"Hello, world!".to_string()).freeze();
            let expected_node1 = r#"<div><div>Hello, world!</div></div>"#;
            assert_eq!(node1.to_string(), expected_node1);

            render_now_sync();
            let node2 = template.instantiate(&"Goodbye!".to_string()).freeze();
            assert_eq!(node2.to_string(), r#"<div><div>Goodbye!</div></div>"#);

            // If the dry clone isn't deep, this will fail.
            assert_eq!(node1.to_string(), expected_node1);
        })
    }
}