aboutsummaryrefslogtreecommitdiff
path: root/test/examples/counter.gleam
diff options
context:
space:
mode:
Diffstat (limited to 'test/examples/counter.gleam')
-rw-r--r--test/examples/counter.gleam56
1 files changed, 56 insertions, 0 deletions
diff --git a/test/examples/counter.gleam b/test/examples/counter.gleam
new file mode 100644
index 0000000..0bff35b
--- /dev/null
+++ b/test/examples/counter.gleam
@@ -0,0 +1,56 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/int
+import lustre
+import lustre/element.{Element, t}
+import lustre/html.{button, div, p}
+import lustre/event
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+ // A `simple` lustre application doesn't produce `Cmd`s. These are best to
+ // start with if you're just getting started with lustre or you know you don't
+ // need the runtime to manage any side effects.
+ let app = lustre.simple(init, update, render)
+ let assert Ok(_) = lustre.start(app, "[data-lustre-app]")
+}
+
+// MODEL -----------------------------------------------------------------------
+
+pub type Model =
+ Int
+
+pub fn init() -> Model {
+ 0
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+ Incr
+ Decr
+ Reset
+}
+
+pub fn update(model: Model, msg: Msg) -> Model {
+ case msg {
+ Incr -> model + 1
+ Decr -> model - 1
+ Reset -> 0
+ }
+}
+
+// VIEW ------------------------------------------------------------------------
+
+pub fn render(model: Model) -> Element(Msg) {
+ div(
+ [],
+ [
+ button([event.on_click(Incr)], [t("+")]),
+ button([event.on_click(Decr)], [t("-")]),
+ button([event.on_click(Reset)], [t("Reset")]),
+ p([], [t(int.to_string(model))]),
+ ],
+ )
+}