From af7c2e44f3bb3e52cea363c4188a39fc1924931f Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Sun, 22 May 2022 03:46:24 +0100 Subject: :construction: Experiment using monaco editor for the lustre playground. --- test/playground.mjs | 7 +++++++ test/playground/index.html | 37 +++++++++++++++++++++++++++++++++++++ test/playground/main.gleam | 32 ++++++++++++++++++++++++++++++++ test/playground/monaco.gleam | 15 +++++++++++++++ 4 files changed, 91 insertions(+) create mode 100644 test/playground.mjs create mode 100644 test/playground/index.html create mode 100644 test/playground/main.gleam create mode 100644 test/playground/monaco.gleam (limited to 'test') 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 @@ + + + + + + + + Lustre Playground + + + + + +
+ + + \ 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 -- cgit v1.2.3