diff options
Diffstat (limited to 'examples/nested')
-rw-r--r-- | examples/nested/gleam.toml | 7 | ||||
-rw-r--r-- | examples/nested/manifest.toml | 11 | ||||
-rw-r--r-- | examples/nested/src/nested.gleam | 57 |
3 files changed, 75 insertions, 0 deletions
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) +} |