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 <[email protected]>
Co-authored-by: Diogo Mafra <[email protected]>
Co-authored-by: Pedro Castro <[email protected]>

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"