diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2023-12-22 01:37:39 +0000 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-12-22 11:01:21 +0000 |
commit | ff3a5e7ce450f1007ae39a47f4e1b431da04a23d (patch) | |
tree | e355b8c8cbc5c662b8f700360672d43ae1dce519 /examples/components.gleam | |
parent | ec7b40fc801e5f5af372f7b0b6524ee0bfcf8d3c (diff) | |
download | lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.tar.gz lustre-ff3a5e7ce450f1007ae39a47f4e1b431da04a23d.zip |
:recycle: Refactor example apps to use lustre/try instead of vite.
Diffstat (limited to 'examples/components.gleam')
-rw-r--r-- | examples/components.gleam | 94 |
1 files changed, 0 insertions, 94 deletions
diff --git a/examples/components.gleam b/examples/components.gleam deleted file mode 100644 index e813708..0000000 --- a/examples/components.gleam +++ /dev/null @@ -1,94 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/dynamic -import gleam/function -import gleam/int -import gleam/list -import gleam/map -import gleam/result -import lustre -import lustre/attribute -import lustre/effect -import lustre/element.{element, text} -import lustre/element/html.{button, div, li, ol, p, slot} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - let assert Ok(_) = - lustre.component( - "custom-counter", - counter_init, - counter_update, - counter_view, - 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, view) - let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil) - - Nil -} - -fn init(_) { - [] -} - -fn update(history, msg) { - case msg { - "reset" -> [] - _ -> [msg, ..history] - } -} - -fn view(history) { - let on_custom_click = event.on("custom-click", function.constant(Ok("click"))) - - div([], [ - button([event.on_click("reset")], [text("Reset")]), - ol([], list.map(history, fn(msg) { li([], [text(msg)]) })), - element( - "custom-counter", - [on_custom_click, attribute.property("count", list.length(history))], - [ol([], list.map(history, fn(msg) { li([], [text(msg)]) }))], - ), - ]) -} - -// 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_view(count) { - div([], [ - button([event.on_click(Clicked)], [text("Click me!")]), - p([], [text("Count: "), text(int.to_string(count))]), - slot([]), - ]) -} |