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
|
# Lustre
> A framework for building create web apps – powered by Gleam and React!
[](https://hex.pm/packages/lustre)
[](https://hexdocs.pm/lustre/)
```gleam
import gleam/int
import lustre
import lustre/element.{ button, div, p, text }
import lustre/event.{ dispatch, on_click }
pub fn main () {
let app = lustre.application(0, update, render)
lustre.start(app, "#app")
}
type Action {
Incr
Decr
}
fn update (state, action) {
case action {
Incr -> state + 1
Decr -> state - 1
}
}
fn render (state) {
div([], [
button([ on_click(dispatch(Decr)) ], [ text("-") ]),
p([], [ text(int.to_string(state)) ]),
button([ on_click(dispatch(Incr)) ], [ text("+") ])
])
}
```
> ❗️ This package relies on Gleam's JavaScript FFI and will not work if your are
> targeting Erlang.
---
## Installation
If available on Hex, this package can be added to your Gleam project:
```sh
gleam add lustre
```
and its documentation can be found at <https://hexdocs.pm/eval>. You will also
need to install `react` and `react-dom` from npm:
```sh
npm i react react-dom
```
---
## Development
First, make sure you have both Gleam and Node.js installed, then:
```bash
npm i
npm start
```
This sets up `chokidar` to watch our gleam source code and runs the compiler
whenever we make a change. It also starts a server that will serve the examples
located in `test/examples/`.
|
