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