Output logs in playground (#865)

* wip: running custom code

* feat: running code 🥳

* feat: bundling stdlib

* fix: fixing ci

* feat: better ux

* chore: removing useless deps

* chore: removing useless file

* chore: better method name

* fix: adjusting iframe height

* fix: safelly checking for import and exports

* refactor: better naming

* chore: adjusting code style

* refactor: moving logic to RenderOutputManager

* remove .mjs files

* add log

* update

* update

* WIP output console log

* complete console and react output

* polish log output

* explicitly add acorn as a dependency

---------

Co-authored-by: Diogo Mafra <diogomqbm13@gmail.com>
Co-authored-by: Diogo Mafra <diogo@mafra.sh>
Co-authored-by: Pedro Castro <aspeddro@gmail.com>

Author: 3 people

package-lock.json

@@ -23,8 +23,10 @@
     "@rescript/core": "^1.3.0",
     "@rescript/react": "^0.12.0-alpha.3",
     "@rescript/tools": "^0.5.0",
+    "acorn": "^8.11.3",
     "codemirror": "^5.54.0",
     "docson": "^2.1.0",
+    "escodegen": "^2.1.0",
     "eslint-config-next": "^13.1.1",
     "fuse.js": "^6.4.3",
     "gentype": "^3.44.0",
@@ -71,4 +73,4 @@
     "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.3.3"
   }
-}
+}

package.json

@@ -0,0 +1,63 @@
+type logLevel = [
+  | #log
+  | #warn
+  | #error
+]
+
+@react.component
+let make = (~compilerState, ~runOutput) => {
+  let (logs, setLogs) = React.useState(_ => [])
+
+  React.useEffect(() => {
+    let cb = e => {
+      let data = e["data"]
+      switch data["type"] {
+      | #...logLevel as logLevel =>
+        let args: array<string> = data["args"]
+        setLogs(previous => previous->Belt.Array.concat([(logLevel, args)]))
+      | _ => ()
+      }
+    }
+    Webapi.Window.addEventListener("message", cb)
+    Some(() => Webapi.Window.removeEventListener("message", cb))
+  }, [])
+
+  React.useEffect(() => {
+    if runOutput {
+      switch compilerState {
+      | CompilerManagerHook.Ready({result: Comp(Success({js_code}))}) =>
+        setLogs(_ => [])
+        let ast = AcornParse.parse(js_code)
+        let transpiled = AcornParse.removeImportsAndExports(ast)
+        EvalIFrame.sendOutput(transpiled)
+      | _ => ()
+      }
+    }
+    None
+  }, (compilerState, runOutput))
+
+  <div>
+    {switch logs {
+    | [] => React.null
+    | logs =>
+      let content =
+        logs
+        ->Belt.Array.mapWithIndex((i, (logLevel, log)) => {
+          let log = Js.Array2.joinWith(log, " ")
+          <pre
+            key={RescriptCore.Int.toString(i)}
+            className={switch logLevel {
+            | #log => ""
+            | #warn => "text-orange"
+            | #error => "text-fire"
+            }}>
+            {React.string(log)}
+          </pre>
+        })
+        ->React.array
+
+      <div className="whitespace-pre-wrap p-4 block"> content </div>
+    }}
+    <EvalIFrame />
+  </div>
+}

src/ConsolePanel.res

@@ -22,7 +22,7 @@ open CompilerManagerHook
 module Api = RescriptCompilerApi
 
 type layout = Column | Row
-type tab = JavaScript | Problems | Settings
+type tab = JavaScript | Problems | Settings | Console
 let breakingPoint = 1024
 
 module DropdownSelect = {
@@ -1054,6 +1054,20 @@ module Settings = {
 }
 
 module ControlPanel = {
+  let codeFromResult = (result: FinalResult.t): string => {
+    open Api
+    switch result {
+    | FinalResult.Comp(comp) =>
+      switch comp {
+      | CompilationResult.Success({js_code}) => js_code
+      | UnexpectedError(_)
+      | Unknown(_, _)
+      | Fail(_) => "/* No JS code generated */"
+      }
+    | Nothing
+    | Conv(_) => "/* No JS code generated */"
+    }
+  }
   module Button = {
     @react.component
     let make = (~children, ~onClick=?) =>
@@ -1134,8 +1148,11 @@ module ControlPanel = {
     ~state: CompilerManagerHook.state,
     ~dispatch: CompilerManagerHook.action => unit,
     ~editorCode: React.ref<string>,
+    ~runOutput,
+    ~toggleRunOutput,
   ) => {
     let router = Next.Router.useRouter()
+
     let children = switch state {
     | Init => React.string("Initializing...")
     | SwitchingCompiler(_ready, _version) => React.string("Switching Compiler...")
@@ -1168,12 +1185,14 @@ module ControlPanel = {
         Next.Router.replace(router, url)
         url
       }
-      <>
-        <div className="mr-2">
-          <Button onClick=onFormatClick> {React.string("Format")} </Button>
-        </div>
+
+      <div className="flex flex-row gap-x-2">
+        <ToggleButton checked=runOutput onChange={_ => toggleRunOutput()}>
+          {React.string("Auto-run")}
+        </ToggleButton>
+        <Button onClick=onFormatClick> {React.string("Format")} </Button>
         <ShareButton actionIndicatorKey createShareLink />
-      </>
+      </div>
     | _ => React.null
     }
 
@@ -1193,28 +1212,75 @@ let locMsgToCmError = (~kind: CodeMirror.Error.kind, locMsg: Api.LocMsg.t): Code
   }
 }
 
-module OutputPanel = {
-  let codeFromResult = (result: FinalResult.t): string => {
-    open Api
-    switch result {
-    | FinalResult.Comp(comp) =>
-      switch comp {
-      | CompilationResult.Success({js_code}) => js_code
-      | UnexpectedError(_)
-      | Unknown(_, _)
-      | Fail(_) => "/* No JS code generated */"
-      }
-    | Nothing
-    | Conv(_) => "/* No JS code generated */"
-    }
-  }
+// module RenderOutput = {
+//   @react.component
+//   let make = (~compilerState: CompilerManagerHook.state) => {
+//     React.useEffect(() => {
+//       let code = switch compilerState {
+//       | Ready(ready) =>
+//         switch ready.result {
+//         | Comp(Success(_)) => ControlPanel.codeFromResult(ready.result)->Some
+//         | _ => None
+//         }
+//       | _ => None
+//       }
+
+//       let _valid = switch code {
+//       | Some(code) =>
+//         switch RenderOutputManager.renderOutput(code) {
+//         | Ok(_) => true
+//         | Error(_) => false
+//         }
+//       | None => false
+//       }
+//       None
+//     }, [compilerState])
+
+//     <div className={""}>
+//       <iframe
+//         width="100%"
+//         id="iframe-eval"
+//         className="relative w-full text-gray-20"
+//         srcDoc=RenderOutputManager.Frame.srcdoc
+//       />
+//     </div>
+
+//     //     switch code {
+//     //     | Some(code) =>
+//     //       switch RenderOutputManager.renderOutput(code) {
+//     //       | Ok() =>
+//     //         <iframe
+//     //           width="100%"
+//     //           id="iframe-eval"
+//     //           className="relative w-full text-gray-20"
+//     //           srcDoc=RenderOutputManager.Frame.srcdoc
+//     //         />
+//     //       | Error() =>
+//     //         let code = `module App = {
+//     //   @react.component
+//     //   let make = () => {
+//     //     <ModuleName />
+//     //   }
+//     // }`
+//     //         <div className={"whitespace-pre-wrap p-4 block"}>
+//     //           <p className={"mb-2"}> {React.string("To render element create a module App")} </p>
+//     //           <pre> {HighlightJs.renderHLJS(~code, ~darkmode=true, ~lang="rescript", ())} </pre>
+//     //         </div>
+//     //       }
+
+//     //     | _ => React.null
+//     //     }
+//   }
+// }
 
+module OutputPanel = {
   @react.component
   let make = (
     ~compilerDispatch,
     ~compilerState: CompilerManagerHook.state,
     ~editorCode: React.ref<string>,
     ~currentTab: tab,
+    ~runOutput,
   ) => {
     /*
        We need the prevState to understand different
@@ -1232,17 +1298,18 @@ module OutputPanel = {
       | (_, Ready({result: Nothing})) => None
       | (Ready(prevReady), Ready(ready)) =>
         switch (prevReady.result, ready.result) {
-        | (_, Comp(Success(_))) => codeFromResult(ready.result)->Some
+        | (_, Comp(Success(_))) => ControlPanel.codeFromResult(ready.result)->Some
         | _ => None
         }
-      | (_, Ready({result: Comp(Success(_)) as result})) => codeFromResult(result)->Some
+      | (_, Ready({result: Comp(Success(_)) as result})) =>
+        ControlPanel.codeFromResult(result)->Some
       | (Ready({result: Comp(Success(_)) as result}), Compiling(_, _)) =>
-        codeFromResult(result)->Some
+        ControlPanel.codeFromResult(result)->Some
       | _ => None
       }
     | None =>
       switch compilerState {
-      | Ready(ready) => codeFromResult(ready.result)->Some
+      | Ready(ready) => ControlPanel.codeFromResult(ready.result)->Some
       | _ => None
       }
     }
@@ -1322,7 +1389,12 @@ module OutputPanel = {
 
     prevSelected.current = selected
 
-    let tabs = [(JavaScript, output), (Problems, errorPane), (Settings, settingsPane)]
+    let tabs = [
+      (Console, <ConsolePanel compilerState runOutput />),
+      (JavaScript, output),
+      (Problems, errorPane),
+      (Settings, settingsPane),
+    ]
 
     let body = Belt.Array.mapWithIndex(tabs, (i, (tab, content)) => {
       let className = currentTab == tab ? "block h-inherit" : "hidden"
@@ -1700,10 +1772,12 @@ let make = (~versions: array<string>) => {
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
 
-  let tabs = [JavaScript, Problems, Settings]
+  let tabs = [JavaScript, Console, Problems, Settings]
 
   let headers = Belt.Array.mapWithIndex(tabs, (i, tab) => {
     let title = switch tab {
+    // | RenderOutput => "Render Output"
+    | Console => "Console"
     | JavaScript => "JavaScript"
     | Problems => "Problems"
     | Settings => "Settings"
@@ -1722,12 +1796,17 @@ let make = (~versions: array<string>) => {
     </button>
   })
 
+  let (runOutput, setRunOutput) = React.useState(() => false)
+  let toggleRunOutput = () => setRunOutput(prev => !prev)
+
   <main className={"flex flex-col bg-gray-100 overflow-hidden"}>
     <ControlPanel
       actionIndicatorKey={Belt.Int.toString(actionCount)}
       state=compilerState
       dispatch=compilerDispatch
       editorCode
+      runOutput
+      toggleRunOutput
     />
     <div
       className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
@@ -1782,7 +1861,7 @@ let make = (~versions: array<string>) => {
           {React.array(headers)}
         </div>
         <div ref={ReactDOM.Ref.domRef(subPanelRef)} className="overflow-auto">
-          <OutputPanel currentTab compilerDispatch compilerState editorCode />
+          <OutputPanel currentTab compilerDispatch compilerState editorCode runOutput />
         </div>
       </div>
     </div>

src/Playground.res

@@ -0,0 +1,7 @@
+type t
+@module("../ffi/acorn-parse.js") external parse: string => t = "parse"
+
+@module("../ffi/acorn-parse.js") external hasEntryPoint: t => bool = "hasEntryPoint"
+
+@module("../ffi/acorn-parse.js")
+external removeImportsAndExports: t => string = "removeImportsAndExports"

src/bindings/AcornParse.res

@@ -1,4 +1,5 @@
 module Document = {
+  @val external document: Dom.element = "document"
   @scope("document") @val external createElement: string => Dom.element = "createElement"
   @scope("document") @val external createTextNode: string => Dom.element = "createTextNode"
 }
@@ -17,6 +18,15 @@ module Element = {
   @send external getBoundingClientRect: Dom.element => {..} = "getBoundingClientRect"
   @send external addEventListener: (Dom.element, string, unit => unit) => unit = "addEventListener"
 
+  @send
+  external getElementById: (Dom.element, string) => Js.nullable<Dom.element> = "getElementById"
+
+  type contentWindow
+  @get external contentWindow: Dom.element => option<contentWindow> = "contentWindow"
+
+  @send
+  external postMessage: (contentWindow, string, ~targetOrigin: string=?) => unit = "postMessage"
+
   module Style = {
     @scope("style") @set external width: (Dom.element, string) => unit = "width"
     @scope("style") @set external height: (Dom.element, string) => unit = "height"

src/bindings/Webapi.res

@@ -0,0 +1,70 @@
+let css = `body {
+  background-color: inherit;
+  color: CanvasText;
+  color-scheme: light dark;
+}`
+
+let srcDoc = `
+    <html>
+      <head>
+        <meta charset="UTF-8" />
+        <title>Playground Output</title>
+        <style>${css}</style>
+      </head>
+      <body>
+        <div id="root"></div>
+        <script
+          src="https://unpkg.com/react@17/umd/react.production.min.js"
+          crossorigin
+        ></script>
+        <script
+          src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
+          crossorigin
+        ></script>
+        <script>
+          window.addEventListener("message", (event) => {
+            try {
+              eval(event.data);
+            } catch (err) {
+              console.error(err);
+            }
+          });
+          const sendLog = (logLevel) => (...args) => {
+            let finalArgs = args.map(arg => {
+              if (typeof arg === 'object') {
+                return JSON.stringify(arg);
+              }
+              return arg;
+            });
+            parent.window.postMessage({ type: logLevel, args: finalArgs }, '*')
+          };
+          console.log = sendLog('log');
+          console.warn = sendLog('warn');
+          console.error = sendLog('error');
+        </script>
+      </body>
+    </html>
+  `
+
+let sendOutput = code => {
+  open Webapi
+
+  let frame =
+    Document.document
+    ->Element.getElementById("iframe-eval")
+    ->Js.Nullable.toOption
+
+  switch frame {
+  | Some(element) =>
+    switch element->Element.contentWindow {
+    | Some(win) => win->Element.postMessage(code, ~targetOrigin="*")
+    | None => ()
+    }
+  | None => ()
+  }
+}
+
+@react.component
+let make = () => {
+  <iframe width="100%" id="iframe-eval" className="relative w-full text-gray-20" srcDoc />
+}

src/common/EvalIFrame.res

@@ -0,0 +1,21 @@
+module Transpiler = {
+  let run = code =>
+    `(function () {
+  ${code}
+  const root = document.getElementById("root");
+  ReactDOM.render(App.make(), root);
+})();`
+}
+
+let renderOutput = code => {
+  let ast = AcornParse.parse(code)
+  let transpiled = AcornParse.removeImportsAndExports(ast)
+  switch AcornParse.hasEntryPoint(ast) {
+  | true =>
+    Transpiler.run(transpiled)->EvalIFrame.sendOutput
+    Ok()
+  | false =>
+    EvalIFrame.sendOutput(transpiled)
+    Error()
+  }
+}

src/common/RenderOutputManager.res

@@ -0,0 +1,16 @@
+@react.component
+let make = (~checked, ~onChange, ~children) => {
+  <label className="inline-flex items-center cursor-pointer">
+    <input type_="checkbox" value="" checked onChange className="sr-only peer" />
+    <div
+      className={`relative w-8 h-4 bg-gray-200
+      rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full 
+      rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white 
+      after:content-[''] after:absolute after:top-[2px] after:start-[4px] 
+      after:bg-white after:border-gray-300 after:border after:rounded-full 
+      after:h-3 after:w-3 after:transition-all dark:border-gray-600 
+      peer-checked:bg-sky`}
+    />
+    <span className={"ms-2 text-sm text-gray-900 dark:text-gray-300"}> {children} </span>
+  </label>
+}

src/components/ToggleButton.res

@@ -0,0 +1,62 @@
+import * as acorn from "acorn";
+import { walk } from "estree-walker";
+import * as escodegen from "escodegen";
+
+export function hasEntryPoint(ast) {
+  let existsApp = false;
+
+  walk(ast, {
+    enter(node) {
+      const isAppVar = node?.type === "VariableDeclaration" && 
+        node?.declarations[0]?.type === "VariableDeclarator" &&
+        node?.declarations[0]?.id.name === "App" &&
+        node?.declarations[0]?.id.type === "Identifier";
+
+      if (isAppVar) {
+        const isObject = node?.declarations[0].init.type === "ObjectExpression"
+        if (isObject) {
+          const hasMake = [...node?.declarations[0].init.properties].some(
+            p => p?.type === "Property" && p?.key?.type === "Identifier" && p?.key?.name === "make"
+          )
+          existsApp = hasMake
+        }
+      }
+    }
+  })
+
+  return existsApp
+}
+
+export function parse(code) {
+  return acorn.parse(code, {
+      ecmaVersion: 9,
+      sourceType: "module"
+  });
+}
+
+export function removeImportsAndExports(ast) {
+  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);
+}