update

Author: aspeddro

src/Playground.res

@@ -1183,27 +1183,10 @@ module ControlPanel = {
         url
       }
 
-      let compiledCode = switch state {
-      | Ready(ready) =>
-        switch ready.result {
-        | Comp(Success(_)) => codeFromResult(ready.result)->Some
-        | _ => None
-        }
-      | _ => None
-      }
-
-      let onRunOutputClick = evt => {
-        ReactEvent.Mouse.preventDefault(evt)
-        RenderOutputManager.renderOutput(compiledCode)
-      }
-
       <>
         <div className="mr-2">
           <Button onClick=onFormatClick> {React.string("Format")} </Button>
         </div>
-        <div className="mr-2">
-          <Button onClick={onRunOutputClick}> {React.string("Run")} </Button>
-        </div>
         <ShareButton actionIndicatorKey createShareLink />
       </>
     | _ => React.null
@@ -1225,6 +1208,67 @@ let locMsgToCmError = (~kind: CodeMirror.Error.kind, locMsg: Api.LocMsg.t): Code
   }
 }
 
+module RenderOutput = {
+  @react.component
+  let make = (~compilerState: CompilerManagerHook.state) => {
+    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
+    }
+
+    let a =
+      <div className={""}>
+        <iframe
+          width="100%"
+          id="iframe-eval"
+          className="relative w-full text-gray-20"
+          srcDoc=RenderOutputManager.Frame.srcdoc
+        />
+      </div>
+
+    a
+
+//     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 = (
@@ -1253,13 +1297,13 @@ module OutputPanel = {
         if type_ === "log" {
           let args: array<string> = data["args"]
 
-          setLogs(
-            previousLogs =>
-              previousLogs
-              ->Belt.Option.getWithDefault([])
-              ->Js.Array2.concat([args])
-              ->Some,
-          )
+          // setLogs(
+          //   previousLogs =>
+          //     logs
+          //     ->Belt.Option.getWithDefault([])
+          //     ->Js.Array2.concat([args])
+          //     ->Some,
+          // )
         }
       })
       None
@@ -1316,22 +1360,6 @@ module OutputPanel = {
         {HighlightJs.renderHLJS(~code, ~darkmode=true, ~lang="js", ())}
       </pre>
 
-    let renderOutputPane: React.element = switch compilerState {
-    | Compiling(ready, _)
-    | Ready(ready) =>
-      switch ready.result {
-      | Comp(Success(_)) =>
-        <iframe
-          width="100%"
-          id="iframe-eval"
-          className="relative w-full text-gray-20"
-          srcDoc=RenderOutputManager.Frame.srcdoc
-        />
-      | _ => React.null
-      }
-    | _ => React.null
-    }
-
     let consolePanel = switch logs {
     | Some(logs) =>
       let content =
@@ -1397,7 +1425,7 @@ module OutputPanel = {
     prevSelected.current = selected
 
     let tabs = [
-      (RenderOutput, renderOutputPane),
+      (RenderOutput, <RenderOutput compilerState />),
       (Console, consolePanel),
       (JavaScript, output),
       (Problems, errorPane),
@@ -1445,60 +1473,30 @@ module App = {
 }
 `
 
-  let since_10_1 = `@@jsxConfig({ version: 4, mode: "classic" })
+  let since_10_1 = `@@jsxConfig({version: 4, mode: "classic"})
 
-module CounterMessage = {
+module Button = {
   @react.component
-  let make = (~count, ~username=?) => {
+  let make = () => {
+    let (count, setCount) = React.useState(_ => 0)
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
-    | n => Belt.Int.toString(n) ++ " times"
-    }
-
-    let name = switch username {
-    | Some("") => "Anonymous"
-    | Some(name) => name
-    | None => "Anonymous"
+    | n => n->Int.toString ++ " times"
     }
+    let msg = \`Click me $\{times\}\`
 
-    <div> {React.string(\`Hello \$\{name\}, you clicked me \` ++ times)} </div>
+    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
   }
 }
 
-module Form = {
+module App = {
   @react.component
   let make = () => {
-    let (count, setCount) = React.useState(() => 0)
-    let (username, setUsername) = React.useState(() => "Anonymous")
-
-    <div>
-      {React.string("Username: ")}
-      <input
-        type_="text"
-        value={username}
-        onChange={evt => {
-          evt->ReactEvent.Form.preventDefault
-          let username = (evt->ReactEvent.Form.target)["value"]
-          setUsername(_prev => username)
-        }}
-      />
-      <button
-        onClick={_evt => {
-          setCount(prev => prev + 1)
-        }}>
-        {React.string("Click me")}
-      </button>
-      <button onClick={_evt => setCount(_ => 0)}> {React.string("Reset")} </button>
-      <CounterMessage count username />
-    </div>
+    <Button />
   }
 }
 
-module App = {
-  @react.component
-  let make = () => <Form/>
-}
 `
 }
 
@@ -1783,7 +1781,7 @@ let make = (~versions: array<string>) => {
   | _ => "rescript"
   }
 
-  let (currentTab, setCurrentTab) = React.useState(_ => RenderOutput)
+  let (currentTab, setCurrentTab) = React.useState(_ => JavaScript)
 
   let disabled = false
 
@@ -1793,7 +1791,7 @@ let make = (~versions: array<string>) => {
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
 
-  let tabs = [RenderOutput, Console, JavaScript, Problems, Settings]
+  let tabs = [JavaScript, RenderOutput, Console, Problems, Settings]
 
   let headers = Belt.Array.mapWithIndex(tabs, (i, tab) => {
     let title = switch tab {

src/bindings/Webapi.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"
 }
@@ -15,6 +16,14 @@ module Element = {
   @get external classList: Dom.element => ClassList.t = "classList"
   @send external getBoundingClientRect: Dom.element => {..} = "getBoundingClientRect"
 
+  @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, 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/common/RenderOutputManager.res

@@ -1,33 +1,35 @@
-module Transpiler = {
-  @module("../ffi/removeImportsAndExports") external transpile: string => string = "default"
+module AcornParse = {
+  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"
+}
 
+module Transpiler = {
   let run = code =>
     `(function () {
-  ${transpile(code)}
+  ${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> = "contentWindow"
-  @send external getElementById: (document, string) => Js.nullable<element> = "getElementById"
-  @val external doc: document = "document"
+  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>
-           * {
-             color: rgb(205, 205, 214);
-           }
-        </style>
+        <style>${css}</style>
       </head>
       <body>
         <div id="root"></div>
@@ -39,10 +41,6 @@ module Frame = {
           src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
           crossorigin
         ></script>
-        <script
-          src="https://bundleplayground.s3.sa-east-1.amazonaws.com/bundle.js"
-          crossorigin
-        ></script>
         <script>
           window.addEventListener("message", (event) => {
             try {
@@ -66,20 +64,31 @@ module Frame = {
   `
 
   let sendOutput = code => {
-    let frame = Js.toOption(doc->getElementById("iframe-eval"))
+    open Webapi
+
+    let frame =
+      Document.document
+      ->Element.getElementById("iframe-eval")
+      ->Js.Nullable.toOption
+
     switch frame {
     | Some(element) =>
-      switch element->contentWindow {
-      | Some(win) => win->postMessage(code, "*")
+      switch element->Element.contentWindow {
+      | Some(win) => win->Element.postMessage(code, "*")
       | None => ()
       }
     | None => ()
     }
   }
 }
 
-let renderOutput = code =>
-  switch code {
-  | Some(code) => Transpiler.run(code)->Frame.sendOutput
-  | None => ()
+let renderOutput = code => {
+  let ast = AcornParse.parse(code)
+  let transpiled = AcornParse.removeImportsAndExports(ast)
+  switch AcornParse.hasEntryPoint(ast) {
+  | true =>
+    Transpiler.run(transpiled)->Frame.sendOutput
+    Ok()
+  | false => Error()
   }
+}