diff options
| 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/example | |
| parent | 6d314230346336ba5b452b1df39b908ffa666f45 (diff) | |
| download | lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.tar.gz lustre-f350db196bcab490b8a6b67f9536f0b9b7322073.zip | |
♻️ 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.
Diffstat (limited to 'test/example')
| -rw-r--r-- | test/example/index.html | 37 | ||||
| -rw-r--r-- | test/example/src/main.gleam | 56 |
2 files changed, 0 insertions, 93 deletions
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)), - ], - ) -} |