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
|
// Similar to count app, with fragments and edge cases
// IMPORTS ---------------------------------------------------------------------
import gleam/int
import lustre/element.{text}
import lustre/element/html.{button, p}
import lustre/event
// MODEL -----------------------------------------------------------------------
pub type Model =
Int
pub fn init(count) {
count
}
// UPDATE ----------------------------------------------------------------------
pub type Msg {
Increment
Decrement
}
pub fn update(model, msg) {
case msg {
Increment -> model + 1
Decrement -> model - 1
}
}
// VIEW ------------------------------------------------------------------------
pub fn view(model) {
let count = int.to_string(model)
element.fragment([
element.fragment([p([], [element.text("start fragment")])]),
element.fragment([p([], [element.text("middle fragment")])]),
element.fragment([p([], [element.text(count)])]),
button([event.on_click(Decrement)], [text("-")]),
button([event.on_click(Increment)], [text("+")]),
p([], [element.text("order check, last element")]),
])
}
|
