diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-14 10:26:39 +0100 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-14 10:26:39 +0100 |
commit | 9f76cbc815a29425d4b297fc5a60ebfa1777b929 (patch) | |
tree | cdfc627cec56207b42249b6772335f03de4177fa | |
parent | beab31ed70c81259cf4940232d7200d144d87e34 (diff) | |
download | lustre-9f76cbc815a29425d4b297fc5a60ebfa1777b929.tar.gz lustre-9f76cbc815a29425d4b297fc5a60ebfa1777b929.zip |
:sparkles: Create a simple counter example.
-rw-r--r-- | test/example/index.html | 23 | ||||
-rw-r--r-- | test/example/main.gleam | 35 | ||||
-rw-r--r-- | test/lustre_test.gleam | 3 |
3 files changed, 61 insertions, 0 deletions
diff --git a/test/example/index.html b/test/example/index.html new file mode 100644 index 0000000..baaf9ed --- /dev/null +++ b/test/example/index.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Document</title> + + <script type="module"> + // `example` is set up as an alias in our `package.json` to point to + // some of Gleam's build artifacts. + import { main } from 'example/main.mjs' + + document.addEventListener('DOMContentLoaded', main) + </script> +</head> + +<body> + <div data-lustre-container></div> +</body> + +</html>
\ No newline at end of file diff --git a/test/example/main.gleam b/test/example/main.gleam new file mode 100644 index 0000000..cd9a71e --- /dev/null +++ b/test/example/main.gleam @@ -0,0 +1,35 @@ +import gleam/int +import lustre +import lustre/attribute.{ style } +import lustre/element.{ button, div, p, text } +import lustre/event.{ dispatch, on_click } + +pub fn main () { + let selector = "[data-lustre-container]" + let program = lustre.application(0, update, render) + + lustre.start(program, selector) +} + +type Action { + Incr + Decr +} + +fn update (state, action) { + case action { + Incr -> + state + 1 + + Decr -> + state - 1 + } +} + +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("+") ]) + ]) +} diff --git a/test/lustre_test.gleam b/test/lustre_test.gleam new file mode 100644 index 0000000..382d1e4 --- /dev/null +++ b/test/lustre_test.gleam @@ -0,0 +1,3 @@ +pub fn main () { + Nil +}
\ No newline at end of file |