diff options
author | Hayleigh Thompson <me@hayleigh.dev> | 2024-03-31 21:19:11 +0100 |
---|---|---|
committer | Hayleigh Thompson <me@hayleigh.dev> | 2024-03-31 21:19:11 +0100 |
commit | 2514ca0272a3b5270915b1ee9e48a9c4244b2749 (patch) | |
tree | a328a236b14f0c0cfa01c3d15059935af9b19e14 /test-apps/change-tag/src | |
parent | 3aa3500ed177cbd5b0ab5b4b68a8a45aee4e56d2 (diff) | |
download | lustre-2514ca0272a3b5270915b1ee9e48a9c4244b2749.tar.gz lustre-2514ca0272a3b5270915b1ee9e48a9c4244b2749.zip |
:alembic: Create a collection of test apps to cover previously reported bugs.
Diffstat (limited to 'test-apps/change-tag/src')
-rw-r--r-- | test-apps/change-tag/src/app.gleam | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/test-apps/change-tag/src/app.gleam b/test-apps/change-tag/src/app.gleam new file mode 100644 index 0000000..78c29d2 --- /dev/null +++ b/test-apps/change-tag/src/app.gleam @@ -0,0 +1,66 @@ +import gleam/int +import lustre +import lustre/attribute +import lustre/element.{type Element, element} +import lustre/element/html +import lustre/event +// These examples are written with `lustre/ui` in mind. They'll work regardless, +// but to see what `lustre/ui` can do make sure to run each of these examples with +// the `--use-example-styles` flag: +// +// $ gleam run -m lustre/dev start --use-example-styles +// +// In your own apps, make sure to add the `lustre/ui` dependency and include the +// stylesheet somewhere. +import lustre/ui + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + let app = lustre.simple(init, update, view) + let assert Ok(_) = lustre.start(app, "#app", Nil) +} + +// MODEL ----------------------------------------------------------------------- + +type Model = + String + +fn init(_) -> Model { + "div" +} + +// UPDATE ---------------------------------------------------------------------- + +pub opaque type Msg { + Swap +} + +fn update(model: Model, msg: Msg) -> Model { + case msg { + Swap if model == "div" -> "p" + Swap if model == "p" -> "div" + _ -> model + } +} + +// VIEW ------------------------------------------------------------------------ + +fn view(model: Model) -> Element(Msg) { + let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")] + + ui.centre( + [attribute.style(styles)], + ui.stack([], [ + ui.button([event.on_click(Swap)], [element.text("change tag")]), + element(model, [], case model { + "div" -> [ + html.p([], [html.text("this is a ")]), + html.p([], [html.text(model)]), + ] + "p" -> [html.span([], [html.text("but this is a " <> model)])] + _ -> [] + }), + ]), + ) +} |