Document

From 10bc93f41efdd9aab25e1e0d29b02b3b961158c5 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Thu, 27 Apr 2023 21:52:15 +0100 Subject: :bookmark: Code for 3.0.0-rc.1 --- test/example/application/README.md | 0 test/example/application/counter.gleam | 86 ---------------------------------- test/example/index.html | 52 ++++++++++---------- test/example/main.gleam | 73 ----------------------------- test/example/src/main.gleam | 56 ++++++++++++++++++++++ 5 files changed, 82 insertions(+), 185 deletions(-) delete mode 100644 test/example/application/README.md delete mode 100644 test/example/application/counter.gleam delete mode 100644 test/example/main.gleam create mode 100644 test/example/src/main.gleam (limited to 'test') diff --git a/test/example/application/README.md b/test/example/application/README.md deleted file mode 100644 index e69de29..0000000 diff --git a/test/example/application/counter.gleam b/test/example/application/counter.gleam deleted file mode 100644 index 62d8599..0000000 --- a/test/example/application/counter.gleam +++ /dev/null @@ -1,86 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import gleam/int -import lustre -import lustre/attribute.{ style } -import lustre/cmd.{ Cmd } -import lustre/element.{ button, div, p, text } -import lustre/event.{ on_click } - -// MAIN ------------------------------------------------------------------------ - -pub fn main () -> Nil { - let selector = "[data-lustre-container]" - let program = lustre.application(init(), update, render) - - // `lustre.start` can return an `Error` if no DOM element is found that matches - // the selector. This is a fatal error for our examples, so we panic if that - // happens. - let assert Ok(_) = lustre.start(program, selector) - - Nil -} - -// STATE ----------------------------------------------------------------------- - -pub type State { - State( - count: Int, - clock: Bool, - timer_id: Int - ) -} - -pub fn init () -> #(State, Cmd(Action)) { - #(State(0, True, 0), tick()) -} - -// UPDATE ---------------------------------------------------------------------- - -pub type Action { - Incr - Decr - Tick -} - -pub fn update (state, action) { - case action { - Incr -> - #(State(..state, count: state.count + 1), cmd.none()) - - Decr -> - #(State(..state, count: state.count - 1), cmd.none()) - - Tick -> - #(State(..state, count: state.count + 1), - case state.clock { - True -> - tick() - - False -> - cmd.none() - } - ) - } -} - -external fn after (f: fn () -> any, delay: Int) -> Nil - = "" "window.setTimeout" - -fn tick () -> Cmd(Action) { - cmd.from(fn (dispatch) { - after(fn () { - dispatch(Tick) - }, 1000) - }) -} - -// RENDER ---------------------------------------------------------------------- - -pub fn render (state: State) { - div([ style([ #("display", "flex") ]) ], [ - button([ on_click(Decr) ], [ text("-") ]), - p([], [ int.to_string(state.count) |> text ]), - button([ on_click(Incr) ], [ text("+") ]), - ]) -} diff --git a/test/example/index.html b/test/example/index.html index f7432b9..da38644 100644 --- a/test/example/index.html +++ b/test/example/index.html @@ -1,37 +1,37 @@ - - - - - + + + + Document - + - +

- - - \ No newline at end of file + + diff --git a/test/example/main.gleam b/test/example/main.gleam deleted file mode 100644 index 21c4067..0000000 --- a/test/example/main.gleam +++ /dev/null @@ -1,73 +0,0 @@ -// IMPORTS --------------------------------------------------------------------- - -import lustre -import lustre/cmd.{ Cmd } -import lustre/element.{ Element } - -import example/application/counter - -// MAIN ------------------------------------------------------------------------ - -pub fn main () -> Nil { - let selector = "[data-lustre-container]" - let program = lustre.application(init(), update, render) - - // `lustre.start` can return an `Error` if no DOM element is found that matches - // the selector. This is a fatal error for our examples, so we panic if that - // happens. - let assert Ok(dispatch) = lustre.start(program, selector) - - dispatch(Counter(counter.Incr)) - dispatch(Counter(counter.Incr)) - dispatch(Counter(counter.Incr)) - - Nil -} - -// STATE ----------------------------------------------------------------------- - -type State { - State( - counter: counter.State - ) -} - -fn init () -> #(State, Cmd(Action)) { - let #(counter, counter_cmds) = counter.init() - let state = State( - counter - ) - - #(state, cmd.map(counter_cmds, Counter)) -} - -// UPDATE ---------------------------------------------------------------------- - -type Action { - Counter(counter.Action) -} - -fn update (state: State, action: Action) -> #(State, Cmd(Action)) { - case action { - Counter(counter_action) -> { - let #(counter, counter_cmds) = counter.update(state.counter, counter_action) - let state = State( - counter - ) - - #(state, cmd.map(counter_cmds, Counter)) - } - } -} - -// RENDER ---------------------------------------------------------------------- - -fn render (state: State) -> Element(Action) { - element.div([], [ - element.details([], [ - element.summary([], [ element.text("Counter") ]), - counter.render(state.counter) - |> element.map(Counter) - ]) - ]) -} diff --git a/test/example/src/main.gleam b/test/example/src/main.gleam new file mode 100644 index 0000000..7c9400f --- /dev/null +++ b/test/example/src/main.gleam @@ -0,0 +1,56 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/javascript/promise.{Promise} +import gleam/string +import lustre +import lustre/cmd.{Cmd} +import lustre/element.{Element} +import lustre/event + +// MAIN ------------------------------------------------------------------------ + +pub fn main() -> Promise(fn(Msg) -> Nil) { + let selector = "[data-lustre-container]" + let program = lustre.application(init(), update, render) + + use _ <- promise.tap(lustre.start(program, selector)) + Nil +} + +// MODEL ----------------------------------------------------------------------- + +type Model = + Int + +fn init() -> #(Model, Cmd(Msg)) { + #(0, cmd.none()) +} + +// UPDATE ---------------------------------------------------------------------- + +pub opaque type Msg { + SetCount(Int) +} + +fn update(_: Model, msg: Msg) -> #(Model, Cmd(Msg)) { + case msg { + SetCount(n) -> #(n, cmd.none()) + } +} + +// RENDER ---------------------------------------------------------------------- + +fn render(model: Model) -> Element(Msg) { + element.div( + [], + [ + element.map( + fn() { + element.button([event.on_click(model + 1)], [element.text("+")]) + }, + SetCount, + ), + element.text(string.inspect(model)), + ], + ) +} -- cgit v1.2.3