aboutsummaryrefslogtreecommitdiff
path: root/test/example
diff options
context:
space:
mode:
Diffstat (limited to 'test/example')
-rw-r--r--test/example/application/README.md0
-rw-r--r--test/example/application/counter.gleam86
-rw-r--r--test/example/index.html52
-rw-r--r--test/example/main.gleam73
-rw-r--r--test/example/src/main.gleam56
5 files changed, 82 insertions, 185 deletions
diff --git a/test/example/application/README.md b/test/example/application/README.md
deleted file mode 100644
index e69de29..0000000
--- a/test/example/application/README.md
+++ /dev/null
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 @@
<!DOCTYPE html>
<html lang="en" hidden>
-
-<head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module">
- // `example` is set up as an alias in our `package.json` to point to
- // some of Gleam's build artifacts.
- import { main } from 'example/main.mjs'
+ // `example` is set up as an alias in our `package.json` to point to
+ // some of Gleam's build artifacts.
+ import { main } from "example/src/main.mjs";
- document.addEventListener('DOMContentLoaded', main)
+ document.addEventListener("DOMContentLoaded", main);
- // This is so dumb. Parcel refuses to work with https imports, and when
- // we try to use a script tag it "helpfully" strips the `type="module"`
- // attribute meaning the shim doesn't work anyway.
- //
- // Here we're manually creating the script and setting its source using
- // a string to stop parcle meddling with it. It works but,, eesh.
- document.querySelector('head').appendChild((() => {
- const script = document.createElement('script')
- script.type = 'module'
- script.innerHTML = `import 'https://cdn.skypack.dev/twind/shim'`
+ // This is so dumb. Parcel refuses to work with https imports, and when
+ // we try to use a script tag it "helpfully" strips the `type="module"`
+ // attribute meaning the shim doesn't work anyway.
+ //
+ // Here we're manually creating the script and setting its source using
+ // a string to stop parcle meddling with it. It works but,, eesh.
+ document.querySelector("head").appendChild(
+ (() => {
+ const script = document.createElement("script");
+ script.type = "module";
+ script.innerHTML = `import 'https://cdn.skypack.dev/twind/shim'`;
- return script
- })())
+ return script;
+ })()
+ );
</script>
-</head>
+ </head>
-<body class="bg-gray-100 mx-8 md:mx-32 lg:mx-64">
+ <body class="bg-gray-100 mx-8 md:mx-32 lg:mx-64">
<div data-lustre-container class="prose lg:prose-xl p-8"></div>
-</body>
-
-</html> \ No newline at end of file
+ </body>
+</html>
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)),
+ ],
+ )
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-18 23:10:31 +0000