resultPane
@@ -1322,7 +1357,12 @@ module OutputPanel = {
prevSelected.current = selected
- let tabs = [(JavaScript, output), (Problems, errorPane), (Settings, settingsPane)]
+ let tabs = [
+ (RenderOutput, renderOutputPane),
+ (JavaScript, output),
+ (Problems, errorPane),
+ (Settings, settingsPane),
+ ]
let body = Belt.Array.mapWithIndex(tabs, (i, (tab, content)) => {
let className = currentTab == tab ? "block h-inherit" : "hidden"
@@ -1344,7 +1384,8 @@ and the different jsx modes (classic and automatic).
module InitialContent = {
let original = `module Button = {
@react.component
- let make = (~count: int) => {
+ let make = () => {
+ let (count, setCount) = React.useState(_ => 0)
let times = switch count {
| 1 => "once"
| 2 => "twice"
@@ -1352,12 +1393,18 @@ module InitialContent = {
}
let msg = "Click me " ++ times
-
+
}
}
-`
- let since_10_1 = `@@jsxConfig({ version: 4, mode: "automatic" })
+module App = {
+ @react.component
+ let make = () => {
+
+ }
+}
+`
+ let since_10_1 = `@@jsxConfig({ version: 4, mode: "classic" })
module CounterMessage = {
@react.component
@@ -1408,7 +1455,6 @@ module App = {
}
`
}
-
// Please note:
// ---
// The Playground is still a work in progress
@@ -1704,13 +1750,14 @@ let default = (~props: Try.props) => {
"flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
}
- let tabs = [JavaScript, Problems, Settings]
+ let tabs = [RenderOutput, JavaScript, Problems, Settings]
let headers = Belt.Array.mapWithIndex(tabs, (i, tab) => {
let title = switch tab {
| JavaScript => "JavaScript"
| Problems => "Problems"
| Settings => "Settings"
+ | RenderOutput => "Render Output"
}
let onMouseDown = evt => {
ReactEvent.Mouse.preventDefault(evt)
diff --git a/src/common/RenderOutputManager.res b/src/common/RenderOutputManager.res
new file mode 100644
index 000000000..2ff0f979b
--- /dev/null
+++ b/src/common/RenderOutputManager.res
@@ -0,0 +1,74 @@
+module Transpiler = {
+ @module("../ffi/removeImportsAndExports") external transpile: string => string = "default"
+
+ let run = code =>
+ `
+ (function () {
+ ${transpile(code)}
+ const root = document.getElementById("root");
+ ReactDOM.render(App.make(), root);
+ })();
+ `
+}
+
+module Frame = {
+ type document
+ type element
+ type contentWindow
+ @send external postMessage: (contentWindow, string, string) => unit = "postMessage"
+ @get external contentWindow: element => option
= "contentWindow"
+ @send external getElementById: (document, string) => Js.nullable = "getElementById"
+ @val external doc: document = "document"
+
+ let srcdoc = `
+
+
+
+ Playground Output
+
+
+
+
+
+
+
+
+
+
+ `
+
+ let sendOutput = code => {
+ let frame = Js.toOption(doc->getElementById("iframe-eval"))
+ switch frame {
+ | Some(element) =>
+ switch element->contentWindow {
+ | Some(win) => win->postMessage(code, "*")
+ | None => ()
+ }
+ | None => ()
+ }
+ }
+}
+
+let renderOutput = code =>
+ switch code {
+ | Some(code) => Transpiler.run(code)->Frame.sendOutput
+ | None => ()
+ }
diff --git a/src/ffi/removeImportsAndExports.js b/src/ffi/removeImportsAndExports.js
new file mode 100644
index 000000000..7060b0d8d
--- /dev/null
+++ b/src/ffi/removeImportsAndExports.js
@@ -0,0 +1,36 @@
+import * as acorn from "acorn";
+import { walk } from "estree-walker";
+import * as escodegen from "escodegen";
+
+function removeImportsAndExports(code) {
+ const ast = acorn.parse(code, {
+ ecmaVersion: 9,
+ });
+
+ walk(ast, {
+ enter(node) {
+ const isImport =
+ node?.type === "ImportDeclaration" ||
+ (node?.type === "VariableDeclaration" &&
+ node?.declarations[0]?.init?.type === "CallExpression" &&
+ node?.declarations[0]?.init?.callee?.name === "require");
+ const isExport =
+ node?.type === "ExportDefaultDeclaration" ||
+ node?.type === "ExportNamedDeclaration" ||
+ node?.type === "ExportAllDeclaration" ||
+ (node?.type === "ExpressionStatement" &&
+ node?.expression?.type === "AssignmentExpression" &&
+ node?.expression?.operator === "=" &&
+ (node?.expression?.left?.object?.name === "exports" ||
+ (node?.expression?.left?.object?.name === "module" &&
+ node?.expression?.left?.property?.name === "exports")));
+ if (isImport || isExport) {
+ this.remove();
+ }
+ },
+ });
+
+ return escodegen.generate(ast);
+}
+
+export default removeImportsAndExports;