-
Notifications
You must be signed in to change notification settings - Fork 153
/
lib.rs
102 lines (82 loc) · 2.78 KB
/
lib.rs
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
//! A simple, cliché example demonstrating structure and syntax.
#[macro_use]
extern crate seed;
use seed::prelude::*;
use wasm_bindgen::prelude::*;
// Model
#[derive(Clone)]
struct Model {
count: i32,
what_we_count: String
}
// Setup a default here, for initialization later.
impl Default for Model {
fn default() -> Self {
Self {
count: 0,
what_we_count: "click".into()
}
}
}
// Update
#[derive(Clone)]
enum Msg {
Increment,
Decrement,
ChangeWWC(String),
}
/// The sole source of updating the model; returns a fresh one.
fn update(history: &History<Model, Msg>, msg: Msg, model: Model) -> Model {
match msg {
Msg::Increment => Model {count: model.count + 1, ..model},
Msg::Decrement => Model {count: model.count - 1, ..model},
Msg::ChangeWWC(what_we_count) => Model {what_we_count, ..model }
}
}
// View
/// A simple component.
fn success_level(clicks: i32) -> El<Msg> {
let descrip = match clicks {
0 ... 3 => "Not very many 🙁",
4 ... 7 => "An OK amount 😐",
8 ... 999 => "Good job! 🙂",
_ => "You broke it 🙃"
};
p![ descrip ]
}
/// The top-level component we pass to the virtual dom. Must accept a ref to the model as its
/// only argument, and output a single El.
fn view(model: Model) -> El<Msg> {
let plural = if model.count == 1 {""} else {"s"};
let text = format!("{} {}{} so far", model.count, model.what_we_count, plural);
// Attrs, Style, Events, and children may be defined separately.
let outer_style = style!{
"display" => "flex";
"flex-direction" => "column";
"text-align" => "center"
};
div![ outer_style,
h1![ "The Grand Total" ],
div![
style!{
// Example of conditional logic in a style.
"color" => if model.count > 4 {"purple"} else {"gray"};
// When passing numerical values to style!, "px" is implied.
"border" => "2px solid #004422"; "padding" => 20
},
// We can use normal Rust code and comments in the view.
h3![ text ],
button![ simple_ev("click", Msg::Increment), "+" ],
button![ simple_ev("click", Msg::Decrement), "-" ],
// Optionally-displaying an element
if model.count >= 10 { h2![ style!{"padding" => 50}, "Nice!" ] } else { seed::empty() }
],
success_level(model.count), // Incorporating a separate component
h3![ "What precisely is it we're counting?" ],
input![ attrs!{"value" => model.what_we_count}, input_ev("input", Msg::ChangeWWC) ]
]
}
#[wasm_bindgen]
pub fn render() {
seed::run(Model::default(), update, view, "main", None);
}