diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2023-07-19 22:04:39 +0100 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-07-19 22:04:39 +0100 |
| commit | df6bb5880a69aeb8b39e089bd8367701d1a320dc (patch) | |
| tree | f334b89559f1f9ef20b66ee5b9aa65ace0baaef9 | |
| parent | 59d7782b65eaf6b2bab6bbcfa9ec97cf9f6d3c73 (diff) | |
| download | lustre-df6bb5880a69aeb8b39e089bd8367701d1a320dc.tar.gz lustre-df6bb5880a69aeb8b39e089bd8367701d1a320dc.zip | |
:sparkles: Create a contrived example showing off the component api.
| -rw-r--r-- | test/examples/components.gleam | 97 | ||||
| -rw-r--r-- | test/examples/components.html | 17 |
2 files changed, 114 insertions, 0 deletions
diff --git a/test/examples/components.gleam b/test/examples/components.gleam new file mode 100644 index 0000000..2479eb1 --- /dev/null +++ b/test/examples/components.gleam @@ -0,0 +1,97 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/dynamic +import gleam/int +import gleam/list +import gleam/map +import gleam/option.{Some} +import gleam/result +import lustre +import lustre/attribute +import lustre/effect +import lustre/element.{h, t} +import lustre/event +import lustre/html.{button, div, li, ol, p} + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + let assert Ok(_) = + lustre.component( + "custom-counter", + counter_init, + counter_update, + counter_render, + map.from_list([ + #( + "count", + fn(attr) { + dynamic.int(attr) + |> result.map(GotCount) + }, + ), + ]), + ) + + // A `simple` lustre application doesn't produce `Effect`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]") + + Nil +} + +fn init() { + [] +} + +fn update(history, msg) { + [msg, ..history] +} + +fn render(history) { + let on_custom_click = { + use _ <- event.on("custom-click") + Some("click") + } + div( + [], + [ + ol([], list.map(history, fn(msg) { li([], [t(msg)]) })), + h( + "custom-counter", + [on_custom_click, attribute.property("count", list.length(history))], + [], + ), + ], + ) +} + +// COUNTER --------------------------------------------------------------------- + +fn counter_init() { + #(0, effect.none()) +} + +type CounterMsg { + GotCount(Int) + Clicked +} + +fn counter_update(count, msg) { + case msg { + GotCount(count) -> #(count, effect.none()) + Clicked -> #(count, event.emit("custom-click", Nil)) + } +} + +fn counter_render(count) { + div( + [], + [ + button([event.on_click(Clicked)], [t("Click me!")]), + p([], [t("Count: "), t(int.to_string(count))]), + ], + ) +} diff --git a/test/examples/components.html b/test/examples/components.html new file mode 100644 index 0000000..f4b4530 --- /dev/null +++ b/test/examples/components.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>lustre | components</title> + + <script type="module"> + import { main } from "../../build/dev/javascript/lustre/examples/components.mjs"; + + document.addEventListener("DOMContentLoaded", main); + </script> + </head> + <body> + <div data-lustre-app></div> + </body> +</html> |