From 0cbfb11f09d67cd98e8a60d0fa351f8396d3f774 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Wed, 19 Jul 2023 10:49:57 +0100 Subject: :truck: Move examples into a subdirectory so they're more obviously not tests. --- test/counter.gleam | 56 -------------------- test/counter.html | 15 ------ test/examples/counter.gleam | 56 ++++++++++++++++++++ test/examples/counter.html | 17 ++++++ test/examples/index.html | 21 ++++++++ test/examples/input.gleam | 123 ++++++++++++++++++++++++++++++++++++++++++++ test/examples/input.html | 54 +++++++++++++++++++ test/examples/nested.gleam | 57 ++++++++++++++++++++ test/examples/nested.html | 17 ++++++ test/input.gleam | 123 -------------------------------------------- test/input.html | 52 ------------------- test/nested.gleam | 57 -------------------- test/nested.html | 15 ------ 13 files changed, 345 insertions(+), 318 deletions(-) delete mode 100644 test/counter.gleam delete mode 100644 test/counter.html create mode 100644 test/examples/counter.gleam create mode 100644 test/examples/counter.html create mode 100644 test/examples/index.html create mode 100644 test/examples/input.gleam create mode 100644 test/examples/input.html create mode 100644 test/examples/nested.gleam create mode 100644 test/examples/nested.html delete mode 100644 test/input.gleam delete mode 100644 test/input.html delete mode 100644 test/nested.gleam delete mode 100644 test/nested.html diff --git a/test/counter.gleam b/test/counter.gleam deleted file mode 100644 index 126aecc..0000000 --- a/test/counter.gleam +++ /dev/null @@ -1,56 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/int -import lustre -import lustre/element.{Element, t} -import lustre/html.{button, div, p} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // A `simple` lustre application doesn't produce `Cmd`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, "body") -} - -// MODEL ----------------------------------------------------------------------- - -pub type Model = - Int - -pub fn init() -> Model { - 0 -} - -// UPDATE ---------------------------------------------------------------------- - -pub opaque type Msg { - Incr - Decr - Reset -} - -pub fn update(model: Model, msg: Msg) -> Model { - case msg { - Incr -> model + 1 - Decr -> model - 1 - Reset -> 0 - } -} - -// VIEW ------------------------------------------------------------------------ - -pub fn render(model: Model) -> Element(Msg) { - div( - [], - [ - button([event.on_click(Incr)], [t("+")]), - button([event.on_click(Decr)], [t("-")]), - button([event.on_click(Reset)], [t("Reset")]), - p([], [t(int.to_string(model))]), - ], - ) -} diff --git a/test/counter.html b/test/counter.html deleted file mode 100644 index 2589c00..0000000 --- a/test/counter.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - lustre | counter - - - - - diff --git a/test/examples/counter.gleam b/test/examples/counter.gleam new file mode 100644 index 0000000..0bff35b --- /dev/null +++ b/test/examples/counter.gleam @@ -0,0 +1,56 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/int +import lustre +import lustre/element.{Element, t} +import lustre/html.{button, div, p} +import lustre/event + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // A `simple` lustre application doesn't produce `Cmd`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]") +} + +// MODEL ----------------------------------------------------------------------- + +pub type Model = + Int + +pub fn init() -> Model { + 0 +} + +// UPDATE ---------------------------------------------------------------------- + +pub opaque type Msg { + Incr + Decr + Reset +} + +pub fn update(model: Model, msg: Msg) -> Model { + case msg { + Incr -> model + 1 + Decr -> model - 1 + Reset -> 0 + } +} + +// VIEW ------------------------------------------------------------------------ + +pub fn render(model: Model) -> Element(Msg) { + div( + [], + [ + button([event.on_click(Incr)], [t("+")]), + button([event.on_click(Decr)], [t("-")]), + button([event.on_click(Reset)], [t("Reset")]), + p([], [t(int.to_string(model))]), + ], + ) +} diff --git a/test/examples/counter.html b/test/examples/counter.html new file mode 100644 index 0000000..2b120fd --- /dev/null +++ b/test/examples/counter.html @@ -0,0 +1,17 @@ + + + + + + lustre | counter + + + + +
+ + diff --git a/test/examples/index.html b/test/examples/index.html new file mode 100644 index 0000000..1dda01b --- /dev/null +++ b/test/examples/index.html @@ -0,0 +1,21 @@ + + + + + + lustre | examples + + + +
  • + input +
    • +
  • + counter +
    • +
  • + nested +
    • +     + + diff --git a/test/examples/input.gleam b/test/examples/input.gleam new file mode 100644 index 0000000..9916000 --- /dev/null +++ b/test/examples/input.gleam @@ -0,0 +1,123 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/dynamic +import gleam/string +import lustre +import lustre/attribute.{attribute} +import lustre/element.{Element, t} +import lustre/event +import lustre/html.{div, input, label, pre} + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // A `simple` lustre application doesn't produce `Cmd`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 +} + +// MODEL ----------------------------------------------------------------------- + +type Model { + Model(email: String, password: String, remember_me: Bool) +} + +fn init() -> Model { + Model(email: "", password: "", remember_me: False) +} + +// UPDATE ---------------------------------------------------------------------- + +type Msg { + Typed(Input, String) + Toggled(Control, Bool) +} + +type Input { + Email + Password +} + +type Control { + RememberMe +} + +fn update(model: Model, msg: Msg) -> Model { + case msg { + Typed(Email, email) -> Model(..model, email: email) + Typed(Password, password) -> Model(..model, password: password) + Toggled(RememberMe, remember_me) -> Model(..model, remember_me: remember_me) + } +} + +// RENDER ---------------------------------------------------------------------- + +fn render(model: Model) -> Element(Msg) { + div( + [attribute.class("container")], + [ + card([ + email_input(model.email), + password_input(model.password), + remember_checkbox(model.remember_me), + pre([attribute.class("debug")], [t(string.inspect(model))]), + ]), + ], + ) +} + +fn card(content: List(Element(a))) -> Element(a) { + div([attribute.class("card")], [div([], content)]) +} + +fn email_input(value: String) -> Element(Msg) { + render_input(Email, "email", "email-input", value, "Email address") +} + +fn password_input(value: String) -> Element(Msg) { + render_input(Password, "password", "password-input", value, "Password") +} + +fn render_input( + field: Input, + type_: String, + id: String, + value: String, + text: String, +) -> Element(Msg) { + div( + [attribute.class("input")], + [ + label([attribute.for(id)], [t(text)]), + input([ + attribute.id(id), + attribute.name(id), + attribute.type_(type_), + attribute.required(True), + attribute.value(dynamic.from(value)), + event.on_input(fn(value) { Typed(field, value) }), + ]), + ], + ) +} + +fn remember_checkbox(checked: Bool) -> Element(Msg) { + div( + [attribute.class("flex items-center")], + [ + input([ + attribute.id("remember-me"), + attribute.name("remember-me"), + attribute.type_("checkbox"), + attribute.checked(checked), + attribute.class("checkbox"), + event.on_click(Toggled(RememberMe, !checked)), + ]), + label([attribute.for("remember-me")], [t("Remember me")]), + ], + ) +} diff --git a/test/examples/input.html b/test/examples/input.html new file mode 100644 index 0000000..273dffa --- /dev/null +++ b/test/examples/input.html @@ -0,0 +1,54 @@ + + + + + + lustre | forms + + + + + + + +
    + + diff --git a/test/examples/nested.gleam b/test/examples/nested.gleam new file mode 100644 index 0000000..bd94abe --- /dev/null +++ b/test/examples/nested.gleam @@ -0,0 +1,57 @@ +// IMPORTS --------------------------------------------------------------------- + +import examples/counter +import gleam/list +import gleam/map.{Map} +import gleam/pair +import lustre +import lustre/element.{Element} +import lustre/html.{div} + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // A `simple` lustre application doesn't produce `Cmd`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 +} + +// MODEL ----------------------------------------------------------------------- + +type Model = + Map(Int, counter.Model) + +fn init() -> Model { + use counters, id <- list.fold(list.range(1, 10), map.new()) + + map.insert(counters, id, counter.init()) +} + +// UPDATE ---------------------------------------------------------------------- + +type Msg = + #(Int, counter.Msg) + +fn update(model: Model, msg: Msg) -> Model { + let #(id, counter_msg) = msg + let assert Ok(counter) = map.get(model, id) + + map.insert(model, id, counter.update(counter, counter_msg)) +} + +// RENDER ---------------------------------------------------------------------- + +fn render(model: Model) -> Element(Msg) { + let counters = { + use rest, id, counter <- map.fold(model, []) + let el = element.map(counter.render(counter), pair.new(id, _)) + + [el, ..rest] + } + + div([], counters) +} diff --git a/test/examples/nested.html b/test/examples/nested.html new file mode 100644 index 0000000..420b159 --- /dev/null +++ b/test/examples/nested.html @@ -0,0 +1,17 @@ + + + + + + lustre | nested + + + + +
    + + diff --git a/test/input.gleam b/test/input.gleam deleted file mode 100644 index b2e85a9..0000000 --- a/test/input.gleam +++ /dev/null @@ -1,123 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/dynamic -import gleam/string -import lustre -import lustre/attribute.{attribute} -import lustre/element.{Element, t} -import lustre/event -import lustre/html.{div, input, label, pre} - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // A `simple` lustre application doesn't produce `Cmd`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, "body") - - Nil -} - -// MODEL ----------------------------------------------------------------------- - -type Model { - Model(email: String, password: String, remember_me: Bool) -} - -fn init() -> Model { - Model(email: "", password: "", remember_me: False) -} - -// UPDATE ---------------------------------------------------------------------- - -type Msg { - Typed(Input, String) - Toggled(Control, Bool) -} - -type Input { - Email - Password -} - -type Control { - RememberMe -} - -fn update(model: Model, msg: Msg) -> Model { - case msg { - Typed(Email, email) -> Model(..model, email: email) - Typed(Password, password) -> Model(..model, password: password) - Toggled(RememberMe, remember_me) -> Model(..model, remember_me: remember_me) - } -} - -// RENDER ---------------------------------------------------------------------- - -fn render(model: Model) -> Element(Msg) { - div( - [attribute.class("container")], - [ - card([ - email_input(model.email), - password_input(model.password), - remember_checkbox(model.remember_me), - pre([attribute.class("debug")], [t(string.inspect(model))]), - ]), - ], - ) -} - -fn card(content: List(Element(a))) -> Element(a) { - div([attribute.class("card")], [div([], content)]) -} - -fn email_input(value: String) -> Element(Msg) { - render_input(Email, "email", "email-input", value, "Email address") -} - -fn password_input(value: String) -> Element(Msg) { - render_input(Password, "password", "password-input", value, "Password") -} - -fn render_input( - field: Input, - type_: String, - id: String, - value: String, - text: String, -) -> Element(Msg) { - div( - [attribute.class("input")], - [ - label([attribute.for(id)], [t(text)]), - input([ - attribute.id(id), - attribute.name(id), - attribute.type_(type_), - attribute.required(True), - attribute.value(dynamic.from(value)), - event.on_input(fn(value) { Typed(field, value) }), - ]), - ], - ) -} - -fn remember_checkbox(checked: Bool) -> Element(Msg) { - div( - [attribute.class("flex items-center")], - [ - input([ - attribute.id("remember-me"), - attribute.name("remember-me"), - attribute.type_("checkbox"), - attribute.checked(checked), - attribute.class("checkbox"), - event.on_click(Toggled(RememberMe, !checked)), - ]), - label([attribute.for("remember-me")], [t("Remember me")]), - ], - ) -} diff --git a/test/input.html b/test/input.html deleted file mode 100644 index 20b60ca..0000000 --- a/test/input.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - lustre | forms - - - - - - - - diff --git a/test/nested.gleam b/test/nested.gleam deleted file mode 100644 index b32a5a3..0000000 --- a/test/nested.gleam +++ /dev/null @@ -1,57 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import counter -import gleam/list -import gleam/map.{Map} -import gleam/pair -import lustre -import lustre/element.{Element} -import lustre/html.{div} - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // A `simple` lustre application doesn't produce `Cmd`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, "body") - - Nil -} - -// MODEL ----------------------------------------------------------------------- - -type Model = - Map(Int, counter.Model) - -fn init() -> Model { - use counters, id <- list.fold(list.range(1, 10), map.new()) - - map.insert(counters, id, counter.init()) -} - -// UPDATE ---------------------------------------------------------------------- - -type Msg = - #(Int, counter.Msg) - -fn update(model: Model, msg: Msg) -> Model { - let #(id, counter_msg) = msg - let assert Ok(counter) = map.get(model, id) - - map.insert(model, id, counter.update(counter, counter_msg)) -} - -// RENDER ---------------------------------------------------------------------- - -fn render(model: Model) -> Element(Msg) { - let counters = { - use rest, id, counter <- map.fold(model, []) - let el = element.map(counter.render(counter), pair.new(id, _)) - - [el, ..rest] - } - - div([], counters) -} diff --git a/test/nested.html b/test/nested.html deleted file mode 100644 index 8602345..0000000 --- a/test/nested.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - lustre | nested - - - - - -- cgit v1.2.3