aboutsummaryrefslogtreecommitdiff
path: root/test-apps/change-tag/src
diff options
context:
space:
mode:
authorHayleigh Thompson <me@hayleigh.dev>2024-03-31 21:19:11 +0100
committerHayleigh Thompson <me@hayleigh.dev>2024-03-31 21:19:11 +0100
commit2514ca0272a3b5270915b1ee9e48a9c4244b2749 (patch)
treea328a236b14f0c0cfa01c3d15059935af9b19e14 /test-apps/change-tag/src
parent3aa3500ed177cbd5b0ab5b4b68a8a45aee4e56d2 (diff)
downloadlustre-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.gleam66
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)])]
+ _ -> []
+ }),
+ ]),
+ )
+}