From 2767d13fcb9fb05ebe9077a30a4b3a6880a4c80b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 24 May 2024 16:16:02 +0200
Subject: [PATCH 01/10] render react

---
 src/ConsolePanel.res               |  19 +----
 src/Playground.res                 | 127 ++++++-----------------------
 src/RenderPanel.res                |  33 ++++++++
 src/common/EvalIFrame.res          |  13 ++-
 src/common/RenderOutputManager.res |  21 -----
 5 files changed, 66 insertions(+), 147 deletions(-)
 create mode 100644 src/RenderPanel.res
 delete mode 100644 src/common/RenderOutputManager.res

diff --git a/src/ConsolePanel.res b/src/ConsolePanel.res
index 2777aea2b..04833c5ff 100644
--- a/src/ConsolePanel.res
+++ b/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>
 }
diff --git a/src/Playground.res b/src/Playground.res
index c42eb3be5..817fdf800 100644
--- a/src/Playground.res
+++ b/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 = {
@@ -1204,67 +1204,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 = (
@@ -1381,8 +1320,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),
@@ -1408,7 +1350,8 @@ 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"
@@ -1416,60 +1359,42 @@ module InitialContent = {
     }
     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 />
   }
 }
+
 `
 }
 
@@ -1763,11 +1688,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 = Array.mapWithIndex(tabs, (tab, i) => {
     let title = switch tab {
-    // | RenderOutput => "Render Output"
+    | RenderOutput => "Render Output"
     | Console => "Console"
     | JavaScript => "JavaScript"
     | Problems => "Problems"
diff --git a/src/RenderPanel.res b/src/RenderPanel.res
new file mode 100644
index 000000000..4e54c94bf
--- /dev/null
+++ b/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 />
+}
diff --git a/src/common/EvalIFrame.res b/src/common/EvalIFrame.res
index 5ba690705..ffda7261c 100644
--- a/src/common/EvalIFrame.res
+++ b/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")
-    ->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")
   }
 }
 
diff --git a/src/common/RenderOutputManager.res b/src/common/RenderOutputManager.res
deleted file mode 100644
index 6df4c17b3..000000000
--- a/src/common/RenderOutputManager.res
+++ /dev/null
@@ -1,21 +0,0 @@
-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()
-  }
-}

From 96ca1cea3de8934a55ce4d3ba30b9752fb8daf19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 24 May 2024 17:59:35 +0200
Subject: [PATCH 02/10] fix jsx runtime import

---
 src/Playground.res        |  2 +-
 src/RenderPanel.res       |  5 -----
 src/common/EvalIFrame.res | 20 ++++++++++++++++++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/Playground.res b/src/Playground.res
index 817fdf800..1823f530a 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -1371,7 +1371,7 @@ module App = {
 }
 `
 
-  let since_10_1 = `@@jsxConfig({version: 4, mode: "classic"})
+  let since_10_1 = `@@jsxConfig({version: 4, mode: "automatic"})
 
 module Button = {
   @react.component
diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index 4e54c94bf..295c56eee 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -1,11 +1,6 @@
 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$$());
 })();`
diff --git a/src/common/EvalIFrame.res b/src/common/EvalIFrame.res
index ffda7261c..2df6b528c 100644
--- a/src/common/EvalIFrame.res
+++ b/src/common/EvalIFrame.res
@@ -15,6 +15,26 @@ let srcDoc = `
       </head>
       <body>
         <div id="root"></div>
+        <script type="importmap">
+          {
+            "imports": {
+              "@jsxImportSource": "https://esm.sh/react@${reactVersion}",
+              "react-dom/client": "https://esm.sh/react-dom@${reactVersion}/client",
+              "react": "https://esm.sh/react@${reactVersion}",
+              "react/jsx-runtime": "https://esm.sh/react@${reactVersion}/jsx-runtime"
+            }
+          }
+        </script>
+        <script type="module">
+          import * as ReactDOM from 'react-dom/client';
+          import * as React from 'react';
+          import * as JsxRuntime from 'react/jsx-runtime';
+          const container = document.getElementById("root");
+          const root = ReactDOM.createRoot(container);
+          window.reactRoot = root;
+          window.React = React;
+          window.JsxRuntime = JsxRuntime;
+        </script>
         <script>
           window.addEventListener("message", (event) => {
             try {

From 1694e946ec9b410797a06be43d83203a6e1c91ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 24 May 2024 18:19:36 +0200
Subject: [PATCH 03/10] put back initial content

---
 src/Playground.res | 55 ++++++++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/Playground.res b/src/Playground.res
index 1823f530a..d96595deb 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -1350,8 +1350,7 @@ and the different jsx modes (classic and automatic).
 module InitialContent = {
   let original = `module Button = {
   @react.component
-  let make = () => {
-    let (count, setCount) = React.useState(_ => 0)
+  let make = (~count) => {
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
@@ -1359,42 +1358,60 @@ module InitialContent = {
     }
     let text = \`Click me $\{times\}\`
 
-    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
-  }
-}
-
-module App = {
-  @react.component
-  let make = () => {
-    <Button />
+    <button> {text->React.string} </button>
   }
 }
 `
 
-  let since_10_1 = `@@jsxConfig({version: 4, mode: "automatic"})
+  let since_10_1 = `@@jsxConfig({ version: 4, mode: "automatic" })
 
-module Button = {
+module CounterMessage = {
   @react.component
-  let make = () => {
-    let (count, setCount) = React.useState(_ => 0)
+  let make = (~count, ~username=?) => {
     let times = switch count {
     | 1 => "once"
     | 2 => "twice"
-    | n => n->Int.toString ++ " times"
+    | n => Belt.Int.toString(n) ++ " times"
     }
-    let msg = \`Click me $\{times\}\`
 
-    <button onClick={_ => setCount(c => c + 1)}> {msg->React.string} </button>
+    let name = switch username {
+    | Some("") => "Anonymous"
+    | Some(name) => name
+    | None => "Anonymous"
+    }
+
+    <div> {React.string(\`Hello \$\{name\}, you clicked me \` ++ times)} </div>
   }
 }
 
 module App = {
   @react.component
   let make = () => {
-    <Button />
+    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>
   }
 }
-
 `
 }
 

From 90ad5e45089077d584a2486665a8e4239100b612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 24 May 2024 23:41:47 +0200
Subject: [PATCH 04/10] fix App render

---
 src/RenderPanel.res | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index 295c56eee..86335ae3f 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -1,8 +1,7 @@
 let wrapReactApp = code =>
   `(function () {
   ${code}
-  const appContainer$$ = () => App.make();
-  window.reactRoot.render(appContainer$$());
+  window.reactRoot.render(React.createElement(App.make, {}));
 })();`
 
 @react.component

From 8678feae3e128e61bf54552cee1e3be33ff42bea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Sat, 25 May 2024 18:37:25 +0200
Subject: [PATCH 05/10] add instructions

---
 src/ConsolePanel.res |  7 ++++++-
 src/RenderPanel.res  | 19 ++++++++++++++-----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/ConsolePanel.res b/src/ConsolePanel.res
index 04833c5ff..76ac4d969 100644
--- a/src/ConsolePanel.res
+++ b/src/ConsolePanel.res
@@ -22,7 +22,12 @@ let make = (~logs, ~setLogs) => {
 
   <div>
     {switch logs {
-    | [] => React.null
+    | [] =>
+      <div className="m-2">
+        {React.string(
+          "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
+        )}
+      </div>
     | logs =>
       let content =
         logs
diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index 86335ae3f..25bafc12f 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -6,6 +6,7 @@ let wrapReactApp = code =>
 
 @react.component
 let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) => {
+  let (validReact, setValidReact) = React.useState(() => false)
   React.useEffect(() => {
     if runOutput {
       switch compilerState {
@@ -13,15 +14,23 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
         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)
-        }
+        let isValidReact = AcornParse.hasEntryPoint(ast)
+        isValidReact
+          ? transpiled->wrapReactApp->EvalIFrame.sendOutput
+          : EvalIFrame.sendOutput(transpiled)
+        setValidReact(_ => isValidReact)
       | _ => ()
       }
     }
     None
   }, (compilerState, runOutput))
 
-  <EvalIFrame />
+  <div className="m-2">
+    {validReact
+      ? React.null
+      : React.string(
+          "Create a React component called 'App' if you want to render it here, then enable 'Auto-run'.",
+        )}
+    <EvalIFrame />
+  </div>
 }

From 2c172a9485351fefd290e47176cf6100cfcfb6d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Sat, 25 May 2024 18:50:31 +0200
Subject: [PATCH 06/10] improve log output a bit

---
 src/common/EvalIFrame.res | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/common/EvalIFrame.res b/src/common/EvalIFrame.res
index 2df6b528c..a787de295 100644
--- a/src/common/EvalIFrame.res
+++ b/src/common/EvalIFrame.res
@@ -45,12 +45,17 @@ let srcDoc = `
           });
           const sendLog = (logLevel) => (...args) => {
             let finalArgs = args.map(arg => {
-              if (typeof arg === 'object') {
-                return JSON.stringify(arg);
+              if (arg === undefined) {
+                return 'undefined';
+              }
+              else if (typeof arg === 'object') {
+                return JSON.stringify(arg, Object.getOwnPropertyNames(arg));
+              } else if (typeof arg === 'function') {
+                return '[function]';
               }
               return arg;
             });
-            parent.window.postMessage({ type: logLevel, args: finalArgs }, '*')
+            parent.window.postMessage({ type: logLevel, args: finalArgs }, '*');
           };
           console.log = sendLog('log');
           console.warn = sendLog('warn');

From bc6ab0b349777a606a67a3fda95032b0b5afe6b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 31 May 2024 09:15:48 +0200
Subject: [PATCH 07/10] use padding instead of margin for render panel

---
 src/RenderPanel.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index 25bafc12f..ea297c055 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -25,7 +25,7 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
     None
   }, (compilerState, runOutput))
 
-  <div className="m-2">
+  <div className="p-2">
     {validReact
       ? React.null
       : React.string(

From 7ad8e16af7b607eee443d502d650f676d1c9ba65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Tsnobiladz=C3=A9?= <paul.tsnobiladze@gmail.com>
Date: Fri, 31 May 2024 09:59:00 +0200
Subject: [PATCH 08/10] stack the react and console panels

---
 src/ConsolePanel.res | 11 +++++------
 src/OutputPanel.res  |  8 ++++++++
 src/Playground.res   | 10 ++++------
 src/RenderPanel.res  |  7 +++++--
 4 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 src/OutputPanel.res

diff --git a/src/ConsolePanel.res b/src/ConsolePanel.res
index 76ac4d969..78a549959 100644
--- a/src/ConsolePanel.res
+++ b/src/ConsolePanel.res
@@ -20,14 +20,13 @@ let make = (~logs, ~setLogs) => {
     Some(() => Webapi.Window.removeEventListener("message", cb))
   }, [])
 
-  <div>
+  <div className="px-2 py-6 relative">
+    <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
-      <div className="m-2">
-        {React.string(
-          "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
-        )}
-      </div>
+      React.string(
+        "Add some 'Console.log' to your code and enable 'Auto-run' to see your logs here.",
+      )
     | logs =>
       let content =
         logs
diff --git a/src/OutputPanel.res b/src/OutputPanel.res
new file mode 100644
index 000000000..575281f42
--- /dev/null
+++ b/src/OutputPanel.res
@@ -0,0 +1,8 @@
+@react.component
+let make = (~runOutput, ~compilerState, ~logs, ~setLogs) => {
+  <div className="h-full">
+    <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />
+    <hr className="border-gray-60" />
+    <ConsolePanel logs setLogs />
+  </div>
+}
diff --git a/src/Playground.res b/src/Playground.res
index d96595deb..288a80197 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -22,7 +22,7 @@ open CompilerManagerHook
 module Api = RescriptCompilerApi
 
 type layout = Column | Row
-type tab = JavaScript | RenderOutput | Console | Problems | Settings
+type tab = JavaScript | Output | Problems | Settings
 let breakingPoint = 1024
 
 module DropdownSelect = {
@@ -1323,8 +1323,7 @@ module OutputPanel = {
     let (logs, setLogs) = React.useState(_ => [])
 
     let tabs = [
-      (RenderOutput, <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />),
-      (Console, <ConsolePanel logs setLogs />),
+      (Output, <OutputPanel runOutput compilerState logs setLogs />),
       (JavaScript, output),
       (Problems, errorPane),
       (Settings, settingsPane),
@@ -1705,12 +1704,11 @@ let make = (~versions: array<string>) => {
     "flex-1 items-center p-4 border-t-4 border-transparent " ++ activeClass
   }
 
-  let tabs = [JavaScript, RenderOutput, Console, Problems, Settings]
+  let tabs = [JavaScript, Output, Problems, Settings]
 
   let headers = Array.mapWithIndex(tabs, (tab, i) => {
     let title = switch tab {
-    | RenderOutput => "Render Output"
-    | Console => "Console"
+    | Output => "Output"
     | JavaScript => "JavaScript"
     | Problems => "Problems"
     | Settings => "Settings"
diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index ea297c055..cc8bd08d4 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -25,12 +25,15 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
     None
   }, (compilerState, runOutput))
 
-  <div className="p-2">
+  <div className={`px-2 relative ${validReact ? "h-1/2 py-2" : "h-auto py-6"}`}>
+    <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null
       : React.string(
           "Create a React component called 'App' if you want to render it here, then enable 'Auto-run'.",
         )}
-    <EvalIFrame />
+    <div className={validReact ? "h-full" : "h-0"}>
+      <EvalIFrame />
+    </div>
   </div>
 }

From ab9fd83d2713a178c5eb1c68d3930184a924430a Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <fh@cca.io>
Date: Sat, 1 Jun 2024 00:08:05 +0200
Subject: [PATCH 09/10] Adapt OutputPanel layout

---
 src/ConsolePanel.res      | 4 ++--
 src/OutputPanel.res       | 2 +-
 src/RenderPanel.res       | 2 +-
 src/common/EvalIFrame.res | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ConsolePanel.res b/src/ConsolePanel.res
index 78a549959..04f11d9b8 100644
--- a/src/ConsolePanel.res
+++ b/src/ConsolePanel.res
@@ -20,7 +20,7 @@ let make = (~logs, ~setLogs) => {
     Some(() => Webapi.Window.removeEventListener("message", cb))
   }, [])
 
-  <div className="px-2 py-6 relative">
+  <div className="px-2 py-6 relative flex flex-col flex-1 overflow-y-hidden">
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("Console")} </h2>
     {switch logs {
     | [] =>
@@ -44,7 +44,7 @@ let make = (~logs, ~setLogs) => {
         })
         ->React.array
 
-      <div className="whitespace-pre-wrap p-4 block"> content </div>
+      <div className="whitespace-pre-wrap p-4 overflow-auto"> content </div>
     }}
   </div>
 }
diff --git a/src/OutputPanel.res b/src/OutputPanel.res
index 575281f42..17d07ad90 100644
--- a/src/OutputPanel.res
+++ b/src/OutputPanel.res
@@ -1,6 +1,6 @@
 @react.component
 let make = (~runOutput, ~compilerState, ~logs, ~setLogs) => {
-  <div className="h-full">
+  <div className="h-full flex flex-col overflow-y-hidden">
     <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />
     <hr className="border-gray-60" />
     <ConsolePanel logs setLogs />
diff --git a/src/RenderPanel.res b/src/RenderPanel.res
index cc8bd08d4..c8cea5cf0 100644
--- a/src/RenderPanel.res
+++ b/src/RenderPanel.res
@@ -25,7 +25,7 @@ let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) =
     None
   }, (compilerState, runOutput))
 
-  <div className={`px-2 relative ${validReact ? "h-1/2 py-2" : "h-auto py-6"}`}>
+  <div className={`px-2 relative ${validReact ? "flex-1 py-2 overflow-y-auto" : "h-auto py-6"}`}>
     <h2 className="font-bold text-gray-5/50 absolute right-2 top-2"> {React.string("React")} </h2>
     {validReact
       ? React.null
diff --git a/src/common/EvalIFrame.res b/src/common/EvalIFrame.res
index a787de295..ed98d6d9a 100644
--- a/src/common/EvalIFrame.res
+++ b/src/common/EvalIFrame.res
@@ -82,5 +82,5 @@ let sendOutput = code => {
 
 @react.component
 let make = () => {
-  <iframe width="100%" id="iframe-eval" className="relative w-full text-gray-20" srcDoc />
+  <iframe width="100%" id="iframe-eval" className="relative h-full w-full text-gray-20" srcDoc />
 }

From fe7628fef223b877aadf4b466d0bd26062be5ef8 Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <fh@cca.io>
Date: Wed, 5 Jun 2024 09:08:22 +0200
Subject: [PATCH 10/10] Make eval less evil

---
 src/common/EvalIFrame.res | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/common/EvalIFrame.res b/src/common/EvalIFrame.res
index ed98d6d9a..3228b9c00 100644
--- a/src/common/EvalIFrame.res
+++ b/src/common/EvalIFrame.res
@@ -38,7 +38,9 @@ let srcDoc = `
         <script>
           window.addEventListener("message", (event) => {
             try {
-              eval(event.data);
+              // https://rollupjs.org/troubleshooting/#avoiding-eval
+              const eval2 = eval;
+              eval2(event.data);
             } catch (err) {
               console.error(err);
             }