diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-22 03:46:24 +0100 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2022-05-22 03:46:24 +0100 |
| commit | af7c2e44f3bb3e52cea363c4188a39fc1924931f (patch) | |
| tree | 3d6747c9f63d2221e453718b1dd41ea824f0987e /test | |
| parent | d408e6b8bd47b8c5ac5d2218943c11d576705583 (diff) | |
| download | lustre-af7c2e44f3bb3e52cea363c4188a39fc1924931f.tar.gz lustre-af7c2e44f3bb3e52cea363c4188a39fc1924931f.zip | |
:construction: Experiment using monaco editor for the lustre playground.
Diffstat (limited to 'test')
| -rw-r--r-- | test/playground.mjs | 7 | ||||
| -rw-r--r-- | test/playground/index.html | 37 | ||||
| -rw-r--r-- | test/playground/main.gleam | 32 | ||||
| -rw-r--r-- | test/playground/monaco.gleam | 15 |
4 files changed, 91 insertions, 0 deletions
diff --git a/test/playground.mjs b/test/playground.mjs new file mode 100644 index 0000000..54d77a8 --- /dev/null +++ b/test/playground.mjs @@ -0,0 +1,7 @@ +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 new file mode 100644 index 0000000..c20cc48 --- /dev/null +++ b/test/playground/index.html @@ -0,0 +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"> + <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 new file mode 100644 index 0000000..6b7f7f7 --- /dev/null +++ b/test/playground/main.gleam @@ -0,0 +1,32 @@ +import gleam/io +import lustre +import lustre/attribute.{ Attribute, attribute } +import lustre/element.{ Element } +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 new file mode 100644 index 0000000..f0927ca --- /dev/null +++ b/test/playground/monaco.gleam @@ -0,0 +1,15 @@ +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) { + assert Ok(code) = dynamic.string(e) + + handler(code, dispatch) + }) +}
\ No newline at end of file |