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
|
# Lustre
[](https://hex.pm/packages/lustre)
An Elm-inspired framework for building web apps in Gleam!
```gleam
import gleam/int
import lustre
import lustre/element.{text}
import lustre/element/html.{div, button, p}
import lustre/event.{on_click}
pub fn main() {
let app = lustre.simple(init, update, view)
let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil)
Nil
}
fn init(_) {
0
}
type Msg {
Incr
Decr
}
fn update(model, msg) {
case msg {
Incr -> model + 1
Decr -> model - 1
}
}
fn view(model) {
let count = int.to_string(model)
div([], [
button([on_click(Incr)], [text(" + ")]),
p([], [text(count)]),
button([on_click(Decr)], [text(" - ")])
])
}
```
## Documentation
You can find the official documentation over at [lustre.build](https://lustre.build). Note
that if you're viewing the documentation published on [Hexdocs](https://hexdocs.pm/lustre/index.html),
you may find that things are missing! Because of the way Gleam's documentation is
generated, packages and functions that target _only_ JavaScript don't get documented.
## Installation
Lustre is available on [Hex](https://hex.pm/packages/lustre). You can install
it like any other Hex package:
```sh
$ gleam add lustre
```
|
