diff options
Diffstat (limited to 'test/example/application/counter.gleam')
-rw-r--r-- | test/example/application/counter.gleam | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/test/example/application/counter.gleam b/test/example/application/counter.gleam new file mode 100644 index 0000000..0433c1e --- /dev/null +++ b/test/example/application/counter.gleam @@ -0,0 +1,57 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/int +import lustre +import lustre/attribute.{ style } +import lustre/element.{ button, div, p, text } +import lustre/event.{ dispatch, on_click } + +// MAIN ------------------------------------------------------------------------ + +pub fn main () -> Nil { + let selector = "[data-lustre-container]" + let program = lustre.application(init(), update, render) + + // `lustre.start` can return an `Error` if no DOM element is found that matches + // the selector. This is a fatal error for our examples, so we panic if that + // happens. + assert Ok(_) = lustre.start(program, selector) + + Nil +} + +// STATE ----------------------------------------------------------------------- + +pub type State + = Int + +pub fn init () -> State { + 0 +} + +// UPDATE ---------------------------------------------------------------------- + +pub type Action { + Incr + Decr +} + +pub fn update (state, action) { + case action { + Incr -> + state + 1 + + Decr -> + state - 1 + } +} + +// RENDER ---------------------------------------------------------------------- + +pub fn render (state) { + div([ style([ #("display", "flex") ]) ], [ + button([ on_click(dispatch(Decr)) ], [ text("-") ]), + p([], [ int.to_string(state) |> text ]), + button([ on_click(dispatch(Incr)) ], [ text("+") ]) + ]) +} |