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
use crate::;
/// A trait that tells `Something<T>` is behaving like a [`Value<T>`].
///
/// Generic components should accept [`Reactive<T>`] instead of [`Value<T>`] to be more flexible,
/// so that types wrapping a Value can implement Reactive and be used in those components.
///
/// Automatically implemented for the [Value] itself.
///
/// Example:
///
/// ```rust
/// use vertigo::{component, EmbedDom, Context, dom, DomNode, Reactive, Value, transaction};
///
/// // Define reactive object with `Value` wrapped
/// #[derive(Clone, PartialEq)]
/// struct Lisper {
/// inner: Value<String>
/// }
///
/// // Implement `EmbedDom` so it can be easily rendered
/// impl EmbedDom for Lisper {
/// fn embed(self) -> DomNode {
/// self.inner.embed()
/// }
/// }
///
/// // Implement `Reactive`
/// impl Reactive<String> for Lisper {
/// fn set(&self, val: String) {
/// let lisp = val.replace('r', "w");
/// self.inner.set(lisp)
/// }
///
/// fn get(&self, ctx: &Context) -> std::string::String {
/// self.inner.get(ctx)
/// }
///
/// fn change(&self, change_fn: impl FnOnce(&mut String)) {
/// self.inner.change(|val| {
/// change_fn(val);
/// *val = val.replace('r', "w");
/// });
/// }
/// }
///
/// // Exemplary generic component
/// #[component]
/// fn Print<R>(saying: R)
/// where
/// R: Reactive<String> + EmbedDom
/// {
/// dom! {
/// <quote>{saying}</quote>
/// }
/// }
///
/// // Create reactive object
/// let lisper = Lisper {
/// inner: Value::new("".to_string())
/// };
///
/// // Use reactive object in generic component
/// let _ = dom! {
/// <div>
/// <Print saying={&lisper} />
/// </div>
/// };
///
/// lisper.set("Eating raisins and radishes".to_string());
///
/// transaction(|context| {
/// assert_eq!(lisper.get(context), "Eating waisins and wadishes");
/// })
/// ```