dioxus-core 0.3.1

Core functionality for Dioxus - a concurrent renderer-agnostic Virtual DOM for interactive user experiences
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

use dioxus::core::Mutation::*;
use dioxus::prelude::*;
use dioxus_core::ElementId;

/// Should push the text node onto the stack and modify it
#[test]
fn nested_passthru_creates() {
    fn app(cx: Scope) -> Element {
        cx.render(rsx! {
            pass_thru {
                pass_thru {
                    pass_thru {
                        div { "hi" }
                    }
                }
            }
        })
    }

    #[inline_props]
    fn pass_thru<'a>(cx: Scope<'a>, children: Element<'a>) -> Element {
        cx.render(rsx!(children))
    }

    let mut dom = VirtualDom::new(app);
    let edits = dom.rebuild().santize();

    assert_eq!(
        edits.edits,
        [
            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
            AppendChildren { m: 1, id: ElementId(0) },
        ]
    )
}

/// Should load all the templates and append them
///
/// Take note on how we don't spit out the template for child_comp since it's entirely dynamic
#[test]
fn nested_passthru_creates_add() {
    fn app(cx: Scope) -> Element {
        cx.render(rsx! {
            child_comp {
                "1"
                child_comp {
                    "2"
                    child_comp {
                        "3"
                        div {
                            "hi"
                        }
                    }
                }
            }
        })
    }

    #[inline_props]
    fn child_comp<'a>(cx: Scope, children: Element<'a>) -> Element {
        cx.render(rsx! { children })
    }

    let mut dom = VirtualDom::new(app);

    assert_eq!(
        dom.rebuild().santize().edits,
        [
            // load 1
            LoadTemplate { name: "template", index: 0, id: ElementId(1) },
            // load 2
            LoadTemplate { name: "template", index: 0, id: ElementId(2) },
            // load 3
            LoadTemplate { name: "template", index: 0, id: ElementId(3) },
            // load div that contains 4
            LoadTemplate { name: "template", index: 1, id: ElementId(4) },
            AppendChildren { id: ElementId(0), m: 4 },
        ]
    );
}

/// note that the template is all dynamic roots - so it doesn't actually get cached as a template
#[test]
fn dynamic_node_as_root() {
    fn app(cx: Scope) -> Element {
        let a = 123;
        let b = 456;
        cx.render(rsx! { "{a}" "{b}" })
    }

    let mut dom = VirtualDom::new(app);
    let edits = dom.rebuild().santize();

    // Since the roots were all dynamic, they should not cause any template muations
    assert!(edits.templates.is_empty());

    // The root node is text, so we just create it on the spot
    assert_eq!(
        edits.edits,
        [
            CreateTextNode { value: "123", id: ElementId(1) },
            CreateTextNode { value: "456", id: ElementId(2) },
            AppendChildren { id: ElementId(0), m: 2 }
        ]
    )
}