From df6bb5880a69aeb8b39e089bd8367701d1a320dc Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Wed, 19 Jul 2023 22:04:39 +0100 Subject: :sparkles: Create a contrived example showing off the component api. --- test/examples/components.gleam | 97 ++++++++++++++++++++++++++++++++++++++++++ test/examples/components.html | 17 ++++++++ 2 files changed, 114 insertions(+) create mode 100644 test/examples/components.gleam create mode 100644 test/examples/components.html (limited to 'test') 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 @@ + + + + + + lustre | components + + + + +
+ + -- cgit v1.2.3