♻️ Replace React with diffhtml (#10)

* :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.
author: Hayleigh Thompson <me@hayleigh.dev> 2023-07-10 23:11:32 +0100
committer: GitHub <noreply@github.com> 2023-07-10 23:11:32 +0100
commit: f350db196bcab490b8a6b67f9536f0b9b7322073 (patch)
tree: 59664ca671be2cfdb473424ca1bf737cf12622e8 /test
parent: 6d314230346336ba5b452b1df39b908ffa666f45 (diff)
download: lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.tar.gz
lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.zip
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)
-}
author	Hayleigh Thompson <me@hayleigh.dev>	2023-07-10 23:11:32 +0100
committer	GitHub <noreply@github.com>	2023-07-10 23:11:32 +0100
commit	f350db196bcab490b8a6b67f9536f0b9b7322073 (patch)
tree	59664ca671be2cfdb473424ca1bf737cf12622e8 /test
parent	6d314230346336ba5b452b1df39b908ffa666f45 (diff)
download	lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.tar.gz lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.zip