:construction: Experiment using monaco editor for the lustre playground.

1 files changed, 32 insertions, 0 deletions

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]")
+}