lustre | counter

From f350db196bcab490b8a6b67f9536f0b9b7322073 Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Mon, 10 Jul 2023 23:11:32 +0100 Subject: =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Replace=20React=20with=20diffhtml?= =?UTF-8?q?=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :wrench: Remove react dependency, add vite for running examples. * :heavy_plus_sign: Update stdlib version to 0.29 * :fire: Remove old examples. * :sparkles: Vendor diffhtml and update runtime ffi code to replace react. * :recycle: Refactor all the things now react is gone. * :memo: Remove references to react in the readme. * :sparkles: Create a simple counter example. --- test/counter.gleam | 73 ++++++++++++++++++++++++++++++++++++++++++++ test/counter.html | 15 +++++++++ test/example/index.html | 37 ---------------------- test/example/src/main.gleam | 56 --------------------------------- test/lustre_test.gleam | 3 -- test/playground.mjs | 7 ----- test/playground/index.html | 37 ---------------------- test/playground/main.gleam | 28 ----------------- test/playground/monaco.gleam | 15 --------- test/test_ffi.mjs | 5 --- 10 files changed, 88 insertions(+), 188 deletions(-) create mode 100644 test/counter.gleam create mode 100644 test/counter.html delete mode 100644 test/example/index.html delete mode 100644 test/example/src/main.gleam delete mode 100644 test/lustre_test.gleam delete mode 100644 test/playground.mjs delete mode 100644 test/playground/index.html delete mode 100644 test/playground/main.gleam delete mode 100644 test/playground/monaco.gleam delete mode 100644 test/test_ffi.mjs (limited to 'test') diff --git a/test/counter.gleam b/test/counter.gleam new file mode 100644 index 0000000..5a5326b --- /dev/null +++ b/test/counter.gleam @@ -0,0 +1,73 @@ +// IMPORTS --------------------------------------------------------------------- + +import gleam/int +import gleam/io +import gleam/option.{None} +import lustre +import lustre/element.{Element, button, div, text} +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, view) + let assert Ok(dispatch) = lustre.start(app, "body") + + dispatch(Incr) + dispatch(Incr) + dispatch(Incr) +} + +// MODEL ----------------------------------------------------------------------- + +type Model = + Int + +fn init() -> Model { + 0 +} + +// UPDATE ---------------------------------------------------------------------- + +type Msg { + Incr + Decr + Reset +} + +fn update(model: Model, msg: Msg) -> Model { + case msg { + Incr -> model + 1 + Decr -> model - 1 + Reset -> 0 + } +} + +// VIEW ------------------------------------------------------------------------ + +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")]), + button( + [ + event.on( + "click", + fn(_) { + io.println("Do nothing") + None + }, + ), + ], + [text("Do Nothing")], + ), + div([], [text(int.to_string(model))]), + ], + ) +} diff --git a/test/counter.html b/test/counter.html new file mode 100644 index 0000000..2589c00 --- /dev/null +++ b/test/counter.html @@ -0,0 +1,15 @@ + + + + + + lustre | counter + + + + + diff --git a/test/example/index.html b/test/example/index.html deleted file mode 100644 index da38644..0000000 --- a/test/example/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - Document - - - - - -

- - diff --git a/test/example/src/main.gleam b/test/example/src/main.gleam deleted file mode 100644 index 7c9400f..0000000 --- a/test/example/src/main.gleam +++ /dev/null @@ -1,56 +0,0 @@ -// 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)), - ], - ) -} diff --git a/test/lustre_test.gleam b/test/lustre_test.gleam deleted file mode 100644 index 382d1e4..0000000 --- a/test/lustre_test.gleam +++ /dev/null @@ -1,3 +0,0 @@ -pub fn main () { - Nil -} \ No newline at end of file diff --git a/test/playground.mjs b/test/playground.mjs deleted file mode 100644 index 54d77a8..0000000 --- a/test/playground.mjs +++ /dev/null @@ -1,7 +0,0 @@ -import * as Lustre from 'lustre/ffi.mjs' -import * as React from 'react' -import Editor from '@monaco-editor/react' - -export const monaco = (attributes) => (dispatch) => { - return React.createElement(Editor, Lustre.toProps(attributes, dispatch), null) -} diff --git a/test/playground/index.html b/test/playground/index.html deleted file mode 100644 index c20cc48..0000000 --- a/test/playground/index.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - Lustre Playground - - - - - -

- - - \ No newline at end of file diff --git a/test/playground/main.gleam b/test/playground/main.gleam deleted file mode 100644 index 0b0bbe1..0000000 --- a/test/playground/main.gleam +++ /dev/null @@ -1,28 +0,0 @@ -import gleam/io -import lustre -import lustre/attribute.{attribute} -import playground/monaco - -pub type Action { - OnInput(String) -} - -pub fn main() { - let init = "// Write some Gleam code here" - - let update = fn(_, action) { - case action { - OnInput(input) -> io.debug(input) - } - } - - let render = fn(state) { - monaco.render([ - attribute("value", state), - monaco.on_change(fn(code, dispatch) { dispatch(OnInput(code)) }), - ]) - } - - lustre.simple(init, update, render) - |> lustre.start("[data-lustre-container]") -} diff --git a/test/playground/monaco.gleam b/test/playground/monaco.gleam deleted file mode 100644 index 14958ac..0000000 --- a/test/playground/monaco.gleam +++ /dev/null @@ -1,15 +0,0 @@ -import gleam/dynamic -import lustre/attribute.{ Attribute } -import lustre/element.{ Element } -import lustre/event - -pub external fn render (attributes: List(Attribute(action))) -> Element(action) - = "../playground.mjs" "monaco" - -pub fn on_change (handler: fn (String, fn (action) -> Nil) -> Nil) -> Attribute(action) { - event.on("change", fn (e, dispatch) { - let assert Ok(code) = dynamic.string(e) - - handler(code, dispatch) - }) -} \ No newline at end of file diff --git a/test/test_ffi.mjs b/test/test_ffi.mjs deleted file mode 100644 index e4fc06a..0000000 --- a/test/test_ffi.mjs +++ /dev/null @@ -1,5 +0,0 @@ -export const after = (f, delay) => { - const id = window.setTimeout(() => { - f(id) - }, delay) -} -- cgit v1.2.3