From 6dd763d118618a683c24862be7fec42b47eecd0d Mon Sep 17 00:00:00 2001 From: Diogo Mafra Date: Thu, 27 May 2021 22:30:18 -0300 Subject: [PATCH 01/18] wip: running custom code --- package.json | 11 + src/Playground.mjs | 72 +- src/Playground.res | 83 + src/ffi/srcdoc.html | 61 + src/ffi/transpile-to-eval.js | 37 + yarn.lock | 5672 ++++++++++++++++++++++++++++++++++ 6 files changed, 5930 insertions(+), 6 deletions(-) create mode 100644 src/ffi/srcdoc.html create mode 100644 src/ffi/transpile-to-eval.js create mode 100644 yarn.lock diff --git a/package.json b/package.json index 13eb8b41d..e5b656cd6 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,14 @@ "@ryyppy/rescript-promise": "^0.0.2", "codemirror": "^5.54.0", "docson": "^2.1.0", + "@zeit/next-css": "^1.0.1", + "acorn": "^8.2.4", + "bs-fetch": "^0.3.1", + "codemirror": "^5.54.0", + "docson": "^2.1.0", + "escodegen": "^2.0.0", + "esm": "^3.2.25", + "estree-walker": "^3.0.0", "fuse.js": "^6.4.3", "gentype": "^3.44.0", "glob": "^7.1.4", @@ -25,6 +33,9 @@ "prettier": "^1.18.2", "react": "^16.13.1", "react-dom": "^16.13.1", + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-live": "^2.2.3", "remark-parse": "^7.0.1", "remark-slug": "^5.1.2", "remark-stringify": "^7.0.3", diff --git a/src/Playground.mjs b/src/Playground.mjs index 4896d8d02..e625c6787 100644 --- a/src/Playground.mjs +++ b/src/Playground.mjs @@ -21,6 +21,7 @@ import * as HighlightJs from "./common/HighlightJs.mjs"; import * as CompilerManagerHook from "./common/CompilerManagerHook.mjs"; import * as RescriptCompilerApi from "./bindings/RescriptCompilerApi.mjs"; import * as WarningFlagDescription from "./common/WarningFlagDescription.mjs"; +import TranspileToEval from "./ffi/transpile-to-eval"; if (typeof window !== "undefined" && typeof window.navigator !== "undefined") { require("codemirror/mode/javascript/javascript"); @@ -1695,6 +1696,7 @@ function Playground$OutputPanel(Props) { "", false ]; + var code = match$2[0]; var codeElement = React.createElement("pre", { className: "whitespace-pre-wrap overflow-y-auto p-4 " + ( match$2[1] ? "block" : "hidden" @@ -1702,7 +1704,57 @@ function Playground$OutputPanel(Props) { style: { height: "calc(100vh - 11.5rem)" } - }, HighlightJs.renderHLJS(undefined, true, match$2[0], "js", undefined)); + }, HighlightJs.renderHLJS(undefined, true, code, "js", undefined)); + var outputPane; + var exit$4 = 0; + if (typeof compilerState === "number") { + outputPane = React.createElement("div", undefined); + } else { + switch (compilerState.TAG | 0) { + case /* Ready */2 : + case /* Compiling */3 : + exit$4 = 1; + break; + default: + outputPane = React.createElement("div", undefined); + } + } + if (exit$4 === 1) { + var match$3 = compilerState._0.result; + var exit$5 = 0; + if (typeof match$3 === "number") { + outputPane = React.createElement("div", undefined); + } else if (match$3.TAG === /* Conv */0) { + if (match$3._0.TAG === /* Success */0) { + exit$5 = 2; + } else { + outputPane = React.createElement("div", undefined); + } + } else if (match$3._0.TAG === /* Success */1) { + exit$5 = 2; + } else { + outputPane = React.createElement("div", undefined); + } + if (exit$5 === 2) { + outputPane = React.createElement(React.Fragment, { + children: null + }, React.createElement("button", { + onClick: (function (param) { + var iframeWin = document.getElementById("iframe-eval").contentWindow; + if (iframeWin !== undefined) { + return iframeWin.postMessage(TranspileToEval(code), "*"); + } + + }) + }, "Run"), React.createElement("iframe", { + id: "iframe-eval", + height: "300px", + srcDoc: "\n \n \n \n \n \n \n Document\n \n\n \n
\n \n \n \n \n\n ", + width: "250px" + })); + } + + } var output = React.createElement("div", { className: "relative w-full bg-gray-95 text-gray-20", style: { @@ -1752,12 +1804,12 @@ function Playground$OutputPanel(Props) { } else { switch (compilerState.TAG | 0) { case /* Ready */2 : - var match$3 = compilerState._0.result; - selected = typeof match$3 === "number" ? 1 : ( - match$3.TAG === /* Conv */0 ? ( - match$3._0.TAG === /* Success */0 ? 0 : 1 + var match$4 = compilerState._0.result; + selected = typeof match$4 === "number" ? 1 : ( + match$4.TAG === /* Conv */0 ? ( + match$4._0.TAG === /* Success */0 ? 0 : 1 ) : ( - match$3._0.TAG === /* Success */1 ? 0 : 1 + match$4._0.TAG === /* Success */1 ? 0 : 1 ) ); break; @@ -1789,6 +1841,14 @@ function Playground$OutputPanel(Props) { height: "50%" } }, settingsPane) + }, + { + title: "Result", + content: React.createElement("div", { + style: { + height: "50%" + } + }, outputPane) } ]; var makeTabClass = function (active) { diff --git a/src/Playground.res b/src/Playground.res index fa830f9b3..767a727f1 100644 --- a/src/Playground.res +++ b/src/Playground.res @@ -1330,6 +1330,85 @@ module OutputPanel = { {HighlightJs.renderHLJS(~code, ~darkmode=true, ~lang="js", ())} + module Transpiler = { + @module("./ffi/transpile-to-eval") external transpile: string => string = "default" + + let srcdoc = ` + + + + + + + Document + + + +
+ + + + + + ` + type document + type contentWindow = { + @uncurry + postMessage: (. string, string) => unit + } + type element = { + contentWindow: option + } + @send external getElementById: (document, string) => element = "getElementById" + @val external doc: document = "document" + } + + let runCode = () => { + let iframeWin = Transpiler.getElementById(Transpiler.doc, "iframe-eval").contentWindow + switch iframeWin { + | Some(win) => win.postMessage(. Transpiler.transpile(code), "*") + | None => () + } + } + + let outputPane: React.element = switch compilerState { + | Compiling(ready, _) + | Ready(ready) => + switch ready.result { + | Comp(Success(_)) + | Conv(Success(_)) => { + + +