From ff3a5e7ce450f1007ae39a47f4e1b431da04a23d Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Fri, 22 Dec 2023 01:37:39 +0000 Subject: :recycle: Refactor example apps to use lustre/try instead of vite. --- examples/README.md | 26 +++++++ examples/components.gleam | 94 ------------------------ examples/components.html | 17 ----- examples/components/gleam.toml | 7 ++ examples/components/manifest.toml | 11 +++ examples/components/src/components.gleam | 94 ++++++++++++++++++++++++ examples/counter.gleam | 53 -------------- examples/counter.html | 17 ----- examples/counter/gleam.toml | 7 ++ examples/counter/manifest.toml | 11 +++ examples/counter/src/counter.gleam | 53 ++++++++++++++ examples/index.html | 27 ------- examples/input.gleam | 120 ------------------------------- examples/input.html | 54 -------------- examples/input/gleam.toml | 7 ++ examples/input/manifest.toml | 11 +++ examples/input/src/input.gleam | 120 +++++++++++++++++++++++++++++++ examples/nested.gleam | 57 --------------- examples/nested.html | 17 ----- examples/nested/gleam.toml | 7 ++ examples/nested/manifest.toml | 11 +++ examples/nested/src/nested.gleam | 57 +++++++++++++++ examples/svg.gleam | 103 -------------------------- examples/svg.html | 17 ----- examples/svg/gleam.toml | 7 ++ examples/svg/manifest.toml | 11 +++ examples/svg/src/svg.gleam | 103 ++++++++++++++++++++++++++ 27 files changed, 543 insertions(+), 576 deletions(-) create mode 100644 examples/README.md delete mode 100644 examples/components.gleam delete mode 100644 examples/components.html create mode 100644 examples/components/gleam.toml create mode 100644 examples/components/manifest.toml create mode 100644 examples/components/src/components.gleam delete mode 100644 examples/counter.gleam delete mode 100644 examples/counter.html create mode 100644 examples/counter/gleam.toml create mode 100644 examples/counter/manifest.toml create mode 100644 examples/counter/src/counter.gleam delete mode 100644 examples/index.html delete mode 100644 examples/input.gleam delete mode 100644 examples/input.html create mode 100644 examples/input/gleam.toml create mode 100644 examples/input/manifest.toml create mode 100644 examples/input/src/input.gleam delete mode 100644 examples/nested.gleam delete mode 100644 examples/nested.html create mode 100644 examples/nested/gleam.toml create mode 100644 examples/nested/manifest.toml create mode 100644 examples/nested/src/nested.gleam delete mode 100644 examples/svg.gleam delete mode 100644 examples/svg.html create mode 100644 examples/svg/gleam.toml create mode 100644 examples/svg/manifest.toml create mode 100644 examples/svg/src/svg.gleam (limited to 'examples') diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..2c601ea --- /dev/null +++ b/examples/README.md @@ -0,0 +1,26 @@ +# Lustre examples + +Each of these examples is a complete Gleam project that contains a Lustre app +that demos or tests a particular feature of Lustre. To run any of them, navigate +to the example's directory and first run: + +```sh +$ gleam build +``` + +Then serve the app using `lustre/try`: + +```sh +$ gleam run -m lustre/try +``` + +If you do not specify a target, this will attempt to serve the app using an Erlang +HTTP server. If you'd prefer to serve using Node, you can specify the JavaScript +target instead: + +```sh +$ gleam run -m lustre/try --target javascript +``` + +Or you may additionally supply the `--runtime deno` flag to serve using Deno rather +than Node. 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([]), - ]) -} diff --git a/examples/components.html b/examples/components.html deleted file mode 100644 index f4b4530..0000000 --- a/examples/components.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - lustre | components - - - - -
- - diff --git a/examples/components/gleam.toml b/examples/components/gleam.toml new file mode 100644 index 0000000..131d773 --- /dev/null +++ b/examples/components/gleam.toml @@ -0,0 +1,7 @@ +name = "components" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" } \ No newline at end of file diff --git a/examples/components/manifest.toml b/examples/components/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/components/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/components/src/components.gleam b/examples/components/src/components.gleam new file mode 100644 index 0000000..85fc583 --- /dev/null +++ b/examples/components/src/components.gleam @@ -0,0 +1,94 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/dynamic +import gleam/function +import gleam/int +import gleam/list +import gleam/dict +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, + dict.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([]), + ]) +} diff --git a/examples/counter.gleam b/examples/counter.gleam deleted file mode 100644 index 37af39a..0000000 --- a/examples/counter.gleam +++ /dev/null @@ -1,53 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/int -import lustre -import lustre/element.{type Element, text} -import lustre/element/html.{button, div, p} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // 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) -} - -// 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 view(model: Model) -> Element(Msg) { - div([], [ - button([event.on_click(Incr)], [text("+")]), - button([event.on_click(Decr)], [text("-")]), - button([event.on_click(Reset)], [text("Reset")]), - p([], [text(int.to_string(model))]), - ]) -} diff --git a/examples/counter.html b/examples/counter.html deleted file mode 100644 index 2b120fd..0000000 --- a/examples/counter.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - lustre | counter - - - - -
- - diff --git a/examples/counter/gleam.toml b/examples/counter/gleam.toml new file mode 100644 index 0000000..2a5f0f5 --- /dev/null +++ b/examples/counter/gleam.toml @@ -0,0 +1,7 @@ +name = "counter" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" } \ No newline at end of file diff --git a/examples/counter/manifest.toml b/examples/counter/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/counter/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/counter/src/counter.gleam b/examples/counter/src/counter.gleam new file mode 100644 index 0000000..37af39a --- /dev/null +++ b/examples/counter/src/counter.gleam @@ -0,0 +1,53 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/int +import lustre +import lustre/element.{type Element, text} +import lustre/element/html.{button, div, p} +import lustre/event + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // 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) +} + +// 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 view(model: Model) -> Element(Msg) { + div([], [ + button([event.on_click(Incr)], [text("+")]), + button([event.on_click(Decr)], [text("-")]), + button([event.on_click(Reset)], [text("Reset")]), + p([], [text(int.to_string(model))]), + ]) +} diff --git a/examples/index.html b/examples/index.html deleted file mode 100644 index 70d4196..0000000 --- a/examples/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - lustre | examples - - - -
  • - input -
    • -
  • - counter -
    • -
  • - nested -
    • -
  • - svg -
    • -
  • - components -
    • -     - - diff --git a/examples/input.gleam b/examples/input.gleam deleted file mode 100644 index 6425b0c..0000000 --- a/examples/input.gleam +++ /dev/null @@ -1,120 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/dynamic -import gleam/string -import lustre -import lustre/attribute.{attribute} -import lustre/element.{type Element, text} -import lustre/element/html.{div, input, label, pre} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // 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 -} - -// 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 view(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")], [ - string.inspect(model) - |> string.replace("(", "(\n ") - |> string.replace(", ", ",\n ") - |> string.replace(")", "\n)") - |> text, - ]), - ]), - ]) -} - -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, - label_: String, -) -> Element(Msg) { - div([attribute.class("input")], [ - label([attribute.for(id)], [text(label_)]), - 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")], [text("Remember me")]), - ]) -} diff --git a/examples/input.html b/examples/input.html deleted file mode 100644 index 3bd6463..0000000 --- a/examples/input.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - lustre | forms - - - - - - - -
    - - diff --git a/examples/input/gleam.toml b/examples/input/gleam.toml new file mode 100644 index 0000000..5d891e8 --- /dev/null +++ b/examples/input/gleam.toml @@ -0,0 +1,7 @@ +name = "input" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" } \ No newline at end of file diff --git a/examples/input/manifest.toml b/examples/input/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/input/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/input/src/input.gleam b/examples/input/src/input.gleam new file mode 100644 index 0000000..6425b0c --- /dev/null +++ b/examples/input/src/input.gleam @@ -0,0 +1,120 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/dynamic +import gleam/string +import lustre +import lustre/attribute.{attribute} +import lustre/element.{type Element, text} +import lustre/element/html.{div, input, label, pre} +import lustre/event + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // 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 +} + +// 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 view(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")], [ + string.inspect(model) + |> string.replace("(", "(\n ") + |> string.replace(", ", ",\n ") + |> string.replace(")", "\n)") + |> text, + ]), + ]), + ]) +} + +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, + label_: String, +) -> Element(Msg) { + div([attribute.class("input")], [ + label([attribute.for(id)], [text(label_)]), + 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")], [text("Remember me")]), + ]) +} diff --git a/examples/nested.gleam b/examples/nested.gleam deleted file mode 100644 index 89e68f0..0000000 --- a/examples/nested.gleam +++ /dev/null @@ -1,57 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import examples/counter -import gleam/list -import gleam/map.{type Map} -import gleam/pair -import lustre -import lustre/element.{type Element} -import lustre/element/html.{div} - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // 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 -} - -// 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(Nil)) -} - -// 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 view(model: Model) -> Element(Msg) { - let counters = { - use rest, id, counter <- map.fold(model, []) - let el = element.map(counter.view(counter), pair.new(id, _)) - - [el, ..rest] - } - - div([], counters) -} diff --git a/examples/nested.html b/examples/nested.html deleted file mode 100644 index 420b159..0000000 --- a/examples/nested.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - lustre | nested - - - - -
    - - diff --git a/examples/nested/gleam.toml b/examples/nested/gleam.toml new file mode 100644 index 0000000..dd00c99 --- /dev/null +++ b/examples/nested/gleam.toml @@ -0,0 +1,7 @@ +name = "nested" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" } \ No newline at end of file diff --git a/examples/nested/manifest.toml b/examples/nested/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/nested/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/nested/src/nested.gleam b/examples/nested/src/nested.gleam new file mode 100644 index 0000000..89e68f0 --- /dev/null +++ b/examples/nested/src/nested.gleam @@ -0,0 +1,57 @@ +// IMPORTS --------------------------------------------------------------------- + +import examples/counter +import gleam/list +import gleam/map.{type Map} +import gleam/pair +import lustre +import lustre/element.{type Element} +import lustre/element/html.{div} + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // 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 +} + +// 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(Nil)) +} + +// 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 view(model: Model) -> Element(Msg) { + let counters = { + use rest, id, counter <- map.fold(model, []) + let el = element.map(counter.view(counter), pair.new(id, _)) + + [el, ..rest] + } + + div([], counters) +} diff --git a/examples/svg.gleam b/examples/svg.gleam deleted file mode 100644 index 93be5e3..0000000 --- a/examples/svg.gleam +++ /dev/null @@ -1,103 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/int -import lustre -import lustre/attribute.{attribute} -import lustre/element.{type Element, text} -import lustre/element/html.{button, div, p, svg} -import lustre/element/svg.{path} -import lustre/event - -// MAIN ------------------------------------------------------------------------ - -pub fn main() { - // 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) -} - -// 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 view(model: Model) -> Element(Msg) { - div([], [ - button([event.on_click(Incr)], [ - plus([attribute.style([#("color", "red")])]), - ]), - button([event.on_click(Decr)], [minus([])]), - button([event.on_click(Reset)], [text("Reset")]), - p([], [text(int.to_string(model))]), - ]) -} - -fn plus(attrs) { - svg( - [ - attribute("width", "15"), - attribute("height", "15"), - attribute("viewBox", "0 0 15 15"), - attribute("fill", "none"), - ..attrs - ], - [ - path([ - attribute( - "d", - "M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z", - ), - attribute("fill", "currentColor"), - attribute("fill-rule", "evenodd"), - attribute("clip-rule", "evenodd"), - ]), - ], - ) -} - -fn minus(attrs) { - svg( - [ - attribute("width", "15"), - attribute("height", "15"), - attribute("viewBox", "0 0 15 15"), - attribute("fill", "none"), - ..attrs - ], - [ - path([ - attribute( - "d", - "M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z", - ), - attribute("fill", "currentColor"), - attribute("fill-rule", "evenodd"), - attribute("clip-rule", "evenodd"), - ]), - ], - ) -} diff --git a/examples/svg.html b/examples/svg.html deleted file mode 100644 index 12af526..0000000 --- a/examples/svg.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - lustre | svg - - - - -
    - - diff --git a/examples/svg/gleam.toml b/examples/svg/gleam.toml new file mode 100644 index 0000000..b755f57 --- /dev/null +++ b/examples/svg/gleam.toml @@ -0,0 +1,7 @@ +name = "svg" +version = "1.0.0" +target = "javascript" + +[dependencies] +gleam_stdlib = "~> 0.34" +lustre = { path = "../../" } \ No newline at end of file diff --git a/examples/svg/manifest.toml b/examples/svg/manifest.toml new file mode 100644 index 0000000..715dadc --- /dev/null +++ b/examples/svg/manifest.toml @@ -0,0 +1,11 @@ +# This file was generated by Gleam +# You typically do not need to edit this file + +packages = [ + { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" }, + { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." }, +] + +[requirements] +gleam_stdlib = { version = "~> 0.34" } +lustre = { path = "../../" } diff --git a/examples/svg/src/svg.gleam b/examples/svg/src/svg.gleam new file mode 100644 index 0000000..93be5e3 --- /dev/null +++ b/examples/svg/src/svg.gleam @@ -0,0 +1,103 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/int +import lustre +import lustre/attribute.{attribute} +import lustre/element.{type Element, text} +import lustre/element/html.{button, div, p, svg} +import lustre/element/svg.{path} +import lustre/event + +// MAIN ------------------------------------------------------------------------ + +pub fn main() { + // 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) +} + +// 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 view(model: Model) -> Element(Msg) { + div([], [ + button([event.on_click(Incr)], [ + plus([attribute.style([#("color", "red")])]), + ]), + button([event.on_click(Decr)], [minus([])]), + button([event.on_click(Reset)], [text("Reset")]), + p([], [text(int.to_string(model))]), + ]) +} + +fn plus(attrs) { + svg( + [ + attribute("width", "15"), + attribute("height", "15"), + attribute("viewBox", "0 0 15 15"), + attribute("fill", "none"), + ..attrs + ], + [ + path([ + attribute( + "d", + "M8 2.75C8 2.47386 7.77614 2.25 7.5 2.25C7.22386 2.25 7 2.47386 7 2.75V7H2.75C2.47386 7 2.25 7.22386 2.25 7.5C2.25 7.77614 2.47386 8 2.75 8H7V12.25C7 12.5261 7.22386 12.75 7.5 12.75C7.77614 12.75 8 12.5261 8 12.25V8H12.25C12.5261 8 12.75 7.77614 12.75 7.5C12.75 7.22386 12.5261 7 12.25 7H8V2.75Z", + ), + attribute("fill", "currentColor"), + attribute("fill-rule", "evenodd"), + attribute("clip-rule", "evenodd"), + ]), + ], + ) +} + +fn minus(attrs) { + svg( + [ + attribute("width", "15"), + attribute("height", "15"), + attribute("viewBox", "0 0 15 15"), + attribute("fill", "none"), + ..attrs + ], + [ + path([ + attribute( + "d", + "M2.25 7.5C2.25 7.22386 2.47386 7 2.75 7H12.25C12.5261 7 12.75 7.22386 12.75 7.5C12.75 7.77614 12.5261 8 12.25 8H2.75C2.47386 8 2.25 7.77614 2.25 7.5Z", + ), + attribute("fill", "currentColor"), + attribute("fill-rule", "evenodd"), + attribute("clip-rule", "evenodd"), + ]), + ], + ) +} -- cgit v1.2.3