render react

Author: tsnobip

src/ConsolePanel.res

@@ -5,9 +5,7 @@ type logLevel = [
 ]
 
 @react.component
-let make = (~compilerState, ~runOutput) => {
-  let (logs, setLogs) = React.useState(_ => [])
-
+let make = (~logs, ~setLogs) => {
   React.useEffect(() => {
     let cb = e => {
       let data = e["data"]
@@ -22,20 +20,6 @@ let make = (~compilerState, ~runOutput) => {
     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
@@ -58,6 +42,5 @@ let make = (~compilerState, ~runOutput) => {
 
       <div className="whitespace-pre-wrap p-4 block"> content </div>
     }}
-    <EvalIFrame />
   </div>
 }

src/Playground.res

@@ -22,7 +22,7 @@ open CompilerManagerHook
 module Api = RescriptCompilerApi
 
 type layout = Column | Row
-type tab = JavaScript | Problems | Settings | Console
+type tab = JavaScript | RenderOutput | Console | Problems | Settings
 let breakingPoint = 1024
 
 module DropdownSelect = {
@@ -1212,67 +1212,6 @@ let locMsgToCmError = (~kind: CodeMirror.Error.kind, locMsg: Api.LocMsg.t): Code
   }
 }
 
-// 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 = (
@@ -1389,8 +1328,11 @@ module OutputPanel = {
 
     prevSelected.current = selected
 
+    let (logs, setLogs) = React.useState(_ => [])
+
     let tabs = [
-      (Console, <ConsolePanel compilerState runOutput />),
+      (RenderOutput, <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />),
+      (Console, <ConsolePanel logs setLogs />),
       (JavaScript, output),
       (Problems, errorPane),
       (Settings, settingsPane),
@@ -1416,68 +1358,51 @@ and the different jsx modes (classic and automatic).
 module InitialContent = {
   let original = `module Button = {
   @react.component
-  let make = (~count) => {
+  let make = () => {
+    let (count, setCount) = React.useState(_ => 0)
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
     | n => n->Belt.Int.toString ++ " times"
     }
     let text = \`Click me $\{times\}\`
 
-    <button> {text->React.string} </button>
+    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
+  }
+}
+
+module App = {
+  @react.component
+  let make = () => {
+    <Button />
   }
 }
 `
 
-  let since_10_1 = `@@jsxConfig({ version: 4, mode: "automatic" })
+  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 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 />
   }
 }
+
 `
 }
 
@@ -1772,11 +1697,11 @@ let make = (~versions: array<string>) => {
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
 
-  let tabs = [JavaScript, Console, Problems, Settings]
+  let tabs = [JavaScript, RenderOutput, Console, Problems, Settings]
 
   let headers = Belt.Array.mapWithIndex(tabs, (i, tab) => {
     let title = switch tab {
-    // | RenderOutput => "Render Output"
+    | RenderOutput => "Render Output"
     | Console => "Console"
     | JavaScript => "JavaScript"
     | Problems => "Problems"

src/RenderPanel.res

@@ -0,0 +1,33 @@
+let wrapReactApp = code =>
+  `(function () {
+  ${code}
+  if (!window.reactRoot){
+    const container = document.getElementById("root");
+    const root = ReactDOM.createRoot(container);
+    window.reactRoot = root;
+  }
+  const appContainer$$ = () => App.make();
+  window.reactRoot.render(appContainer$$());
+})();`
+
+@react.component
+let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) => {
+  React.useEffect(() => {
+    if runOutput {
+      switch compilerState {
+      | CompilerManagerHook.Ready({result: Comp(Success({js_code}))}) =>
+        clearLogs()
+        let ast = AcornParse.parse(js_code)
+        let transpiled = AcornParse.removeImportsAndExports(ast)
+        switch AcornParse.hasEntryPoint(ast) {
+        | true => transpiled->wrapReactApp->EvalIFrame.sendOutput
+        | false => EvalIFrame.sendOutput(transpiled)
+        }
+      | _ => ()
+      }
+    }
+    None
+  }, (compilerState, runOutput))
+
+  <EvalIFrame />
+}

src/common/EvalIFrame.res

@@ -4,6 +4,8 @@ let css = `body {
   color-scheme: light dark;
 }`
 
+let reactVersion = "18.2.0"
+
 let srcDoc = `
     <html>
       <head>
@@ -41,18 +43,15 @@ let srcDoc = `
 let sendOutput = code => {
   open Webapi
 
-  let frame =
-    Document.document
-    ->Element.getElementById("iframe-eval")
-    ->Js.Nullable.toOption
+  let frame = Document.document->Element.getElementById("iframe-eval")
 
   switch frame {
-  | Some(element) =>
+  | Value(element) =>
     switch element->Element.contentWindow {
     | Some(win) => win->Element.postMessage(code, ~targetOrigin="*")
-    | None => ()
+    | None => RescriptCore.Console.error("contentWindow not found")
     }
-  | None => ()
+  | Null | Undefined => RescriptCore.Console.error("iframe not found")
   }
 }