vertigo 0.13.0

Reactive Real-DOM library with SSR for Rust
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
143
144

use std::rc::Rc;

use crate::{
    Computed, DomComment, DomNode, Value, driver_module::get_driver_dom, struct_mut::ValueMut,
};

/// Render a computed value as a DOM node.
pub fn render_value<T: Clone + PartialEq + 'static>(
    computed: Computed<T>,
    render: impl Fn(T) -> DomNode + 'static,
) -> DomNode {
    render_value_option(computed, move |value| -> Option<DomNode> {
        Some(render(value))
    })
}

/// Render a computed value as an optional DOM node.
pub fn render_value_option<T: Clone + PartialEq + 'static>(
    computed: Computed<T>,
    render: impl Fn(T) -> Option<DomNode> + 'static,
) -> DomNode {
    let render = Rc::new(render);

    DomComment::new_marker("v", move |parent_id, comment_id, content| {
        let current_node: ValueMut<Option<DomNode>> = ValueMut::new(None);

        Some(computed.clone().subscribe({
            let render = render.clone();
            let content = content.clone();

            move |value| {
                let new_element = render(value).inspect(|new_element| {
                    get_driver_dom().insert_before(
                        parent_id,
                        new_element.id_dom(),
                        Some(comment_id),
                    );
                });

                content.set(new_element.iter().map(|node| node.id_dom()).collect());

                current_node.change(|current| {
                    *current = new_element;
                });
            }
        }))
    })
    .into()
}

impl<T: Clone + PartialEq + 'static> Computed<T> {
    /// Render value inside this [`Computed`]. See [`Value::render_value()`] for examples.
    pub fn render_value(&self, render: impl Fn(T) -> DomNode + 'static) -> DomNode {
        render_value(self.clone(), render)
    }

    /// Render optional value inside this [`Computed`]. See [`Value::render_value_option()`] for examples.
    pub fn render_value_option(&self, render: impl Fn(T) -> Option<DomNode> + 'static) -> DomNode {
        render_value_option(self.clone(), render)
    }
}

impl<T: Clone + PartialEq + 'static> Value<T> {
    /// Render value (reactively transforms `T` into `DomNode`)
    ///
    /// See [`computed_tuple`](crate::computed_tuple) if you want to render multiple values.
    ///
    /// ```rust
    /// use vertigo::{dom, Value};
    ///
    /// let my_value = Value::new(5);
    ///
    /// let element = my_value.render_value(|bare_value| dom! { <div>{bare_value}</div> });
    ///
    /// dom! {
    ///     <div>
    ///         {element}
    ///     </div>
    /// };
    /// ```
    pub fn render_value(&self, render: impl Fn(T) -> DomNode + 'static) -> DomNode {
        self.to_computed().render_value(render)
    }

    /// Render optional value (reactively transforms `T` into `Option<DomNode>`)
    ///
    /// See [`computed_tuple`](crate::computed_tuple) if you want to render multiple values.
    ///
    /// ```rust
    /// use vertigo::{dom, Value};
    ///
    /// let value1 = Value::new(Some(5));
    /// let value2 = Value::new(None::<i32>);
    ///
    /// let element1 = value1.render_value_option(|bare_value|
    ///     bare_value.map(|value| dom! { <div>{value}</div> })
    /// );
    /// let element2 = value2.render_value_option(|bare_value|
    ///     match bare_value {
    ///         Some(value) => Some(dom! { <div>{value}</div> }),
    ///         None => Some(dom! { <div>"default"</div> }),
    ///     }
    /// );
    ///
    /// dom! {
    ///     <div>
    ///         {element1}
    ///         {element2}
    ///     </div>
    /// };
    /// ```
    pub fn render_value_option(&self, render: impl Fn(T) -> Option<DomNode> + 'static) -> DomNode {
        self.to_computed().render_value_option(render)
    }
}

/// Render a [`Value`] or [`Computed`] as a [`DomNode`].
///
/// Prefer the inherent methods [`Value::render_value`] / [`Computed::render_value`].
/// This trait is useful in generic code.
pub trait RenderValue<T> {
    fn render_value(&self, render: impl Fn(T) -> DomNode + 'static) -> DomNode;
    fn render_value_option(&self, render: impl Fn(T) -> Option<DomNode> + 'static) -> DomNode;
}

impl<T: Clone + PartialEq + 'static> RenderValue<T> for Computed<T> {
    fn render_value(&self, render: impl Fn(T) -> DomNode + 'static) -> DomNode {
        Computed::render_value(self, render)
    }

    fn render_value_option(&self, render: impl Fn(T) -> Option<DomNode> + 'static) -> DomNode {
        Computed::render_value_option(self, render)
    }
}

impl<T: Clone + PartialEq + 'static> RenderValue<T> for Value<T> {
    fn render_value(&self, render: impl Fn(T) -> DomNode + 'static) -> DomNode {
        Value::render_value(self, render)
    }

    fn render_value_option(&self, render: impl Fn(T) -> Option<DomNode> + 'static) -> DomNode {
        Value::render_value_option(self, render)
    }
}