aboutsummaryrefslogtreecommitdiff
path: root/test
diff options
context:
space:
mode:
Diffstat (limited to 'test')
-rw-r--r--test/counter.gleam73
-rw-r--r--test/counter.html15
-rw-r--r--test/example/index.html37
-rw-r--r--test/example/src/main.gleam56
-rw-r--r--test/lustre_test.gleam3
-rw-r--r--test/playground.mjs7
-rw-r--r--test/playground/index.html37
-rw-r--r--test/playground/main.gleam28
-rw-r--r--test/playground/monaco.gleam15
-rw-r--r--test/test_ffi.mjs5
10 files changed, 88 insertions, 188 deletions
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 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>lustre | counter</title>
+
+ <script type="module">
+ import { main } from "../build/dev/javascript/lustre/counter.mjs";
+
+ document.addEventListener("DOMContentLoaded", main);
+ </script>
+ </head>
+ <body></body>
+</html>
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 @@
-<!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" />
- <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/src/main.mjs";
-
- 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'`;
-
- return script;
- })()
- );
- </script>
- </head>
-
- <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>
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 @@
-<!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">
- <title>Lustre Playground</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 'playground/main.mjs'
-
- 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'`
-
- return script
- })())
- </script>
-</head>
-
-<body class="bg-gray-100">
- <div data-lustre-container class="p-8 h-screen w-screen"></div>
-</body>
-
-</html> \ 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)
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-18 20:05:00 +0000