use dispatch for execution

Author: tsnobip

src/ConsolePanel.res

@@ -3,22 +3,23 @@ type logLevel = [
   | #warn
   | #error
 ]
+type log = {level: logLevel, content: array<string>}
 
 @react.component
-let make = (~logs, ~setLogs) => {
+let make = (~logs, ~appendLog) => {
   React.useEffect(() => {
     let cb = e => {
       let data = e["data"]
       switch data["type"] {
       | #...logLevel as logLevel =>
         let args: array<string> = data["args"]
-        setLogs(previous => previous->Array.concat([(logLevel, args)]))
+        appendLog(logLevel, args)
       | _ => ()
       }
     }
     Webapi.Window.addEventListener("message", cb)
     Some(() => Webapi.Window.removeEventListener("message", cb))
-  }, [])
+  }, [appendLog])
 
   <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>
@@ -30,7 +31,7 @@ let make = (~logs, ~setLogs) => {
     | logs =>
       let content =
         logs
-        ->Array.mapWithIndex(((logLevel, log), i) => {
+        ->Array.mapWithIndex(({level: logLevel, content: log}, i) => {
           let log = Array.join(log, " ")
           <pre
             key={RescriptCore.Int.toString(i)}

src/OutputPanel.res

@@ -1,8 +1,21 @@
 @react.component
-let make = (~runOutput, ~compilerState, ~logs, ~setLogs) => {
+let make = (~compilerState, ~appendLog) => {
+  let validReact = switch compilerState {
+  | CompilerManagerHook.Executing({state: {validReactCode: true}})
+  | Compiling({validReactCode: true})
+  | Ready({validReactCode: true}) => true
+  | _ => false
+  }
+
+  let logs = switch compilerState {
+  | CompilerManagerHook.Executing({state: {logs}})
+  | Compiling({logs})
+  | Ready({logs}) => logs
+  | _ => []
+  }
   <div className="h-full flex flex-col overflow-y-hidden">
-    <RenderPanel runOutput compilerState clearLogs={() => setLogs(_ => [])} />
+    <RenderPanel validReact />
     <hr className="border-gray-60" />
-    <ConsolePanel logs setLogs />
+    <ConsolePanel logs appendLog />
   </div>
 }

src/Playground.res

@@ -1130,21 +1130,27 @@ module ControlPanel = {
     ~state: CompilerManagerHook.state,
     ~dispatch: CompilerManagerHook.action => unit,
     ~editorCode: React.ref<string>,
-    ~runOutput,
-    ~toggleRunOutput,
   ) => {
     let children = switch state {
     | Init => React.string("Initializing...")
     | SwitchingCompiler(_ready, _version) => React.string("Switching Compiler...")
-    | Compiling(_, _)
+    | Compiling(_)
+    | Executing(_)
     | Ready(_) =>
       let onFormatClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
         dispatch(Format(editorCode.current))
       }
 
+      let autoRun = switch state {
+      | CompilerManagerHook.Executing({state: {autoRun: true}})
+      | Compiling({autoRun: true})
+      | Ready({autoRun: true}) => true
+      | _ => false
+      }
+
       <div className="flex flex-row gap-x-2">
-        <ToggleButton checked=runOutput onChange={_ => toggleRunOutput()}>
+        <ToggleButton checked=autoRun onChange={_ => dispatch(ToggleAutoRun)}>
           {React.string("Auto-run")}
         </ToggleButton>
         <Button onClick=onFormatClick> {React.string("Format")} </Button>
@@ -1176,7 +1182,6 @@ module OutputPanel = {
     ~compilerState: CompilerManagerHook.state,
     ~editorCode: React.ref<string>,
     ~currentTab: tab,
-    ~runOutput,
   ) => {
     /*
        We need the prevState to understand different
@@ -1199,8 +1204,9 @@ module OutputPanel = {
         }
       | (_, Ready({result: Comp(Success(_)) as result})) =>
         ControlPanel.codeFromResult(result)->Some
-      | (Ready({result: Comp(Success(_)) as result}), Compiling(_, _)) =>
+      | (Ready({result: Comp(Success(_)) as result}), Compiling(_)) =>
         ControlPanel.codeFromResult(result)->Some
+      | (_, Executing({jsCode})) => Some(jsCode)
       | _ => None
       }
     | None =>
@@ -1213,8 +1219,9 @@ module OutputPanel = {
     prevState.current = Some(compilerState)
 
     let resultPane = switch compilerState {
-    | Compiling(ready, _)
-    | Ready(ready) =>
+    | Compiling(ready)
+    | Ready(ready)
+    | Executing({state: ready}) =>
       switch ready.result {
       | Comp(Success(_))
       | Conv(Success(_)) => React.null
@@ -1246,8 +1253,9 @@ module OutputPanel = {
       </div>
 
     let errorPane = switch compilerState {
-    | Compiling(ready, _)
+    | Compiling(ready)
     | Ready(ready)
+    | Executing({state: ready})
     | SwitchingCompiler(ready, _) =>
       <ResultPane
         targetLang=ready.targetLang
@@ -1260,7 +1268,8 @@ module OutputPanel = {
 
     let settingsPane = switch compilerState {
     | Ready(ready)
-    | Compiling(ready, _)
+    | Compiling(ready)
+    | Executing({state: ready})
     | SwitchingCompiler(ready, _) =>
       let config = ready.selected.config
       let setConfig = config => compilerDispatch(UpdateConfig(config))
@@ -1273,7 +1282,9 @@ module OutputPanel = {
     let prevSelected = React.useRef(0)
 
     let selected = switch compilerState {
-    | Compiling(_, _) => prevSelected.current
+    | Executing(_)
+    | Compiling(_) =>
+      prevSelected.current
     | Ready(ready) =>
       switch ready.result {
       | Comp(Success(_))
@@ -1285,10 +1296,10 @@ module OutputPanel = {
 
     prevSelected.current = selected
 
-    let (logs, setLogs) = React.useState(_ => [])
+    let appendLog = (level, content) => compilerDispatch(AppendLog({level, content}))
 
     let tabs = [
-      (Output, <OutputPanel runOutput compilerState logs setLogs />),
+      (Output, <OutputPanel compilerState appendLog />),
       (JavaScript, output),
       (Problems, errorPane),
       (Settings, settingsPane),
@@ -1483,7 +1494,7 @@ let make = (~versions: array<string>) => {
       }
 
     None
-  }, [compilerState])
+  }, (compilerState, compilerDispatch))
 
   let (layout, setLayout) = React.useState(_ =>
     Webapi.Window.innerWidth < breakingPoint ? Column : Row
@@ -1693,17 +1704,12 @@ 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={Int.toString(actionCount)}
       state=compilerState
       dispatch=compilerDispatch
       editorCode
-      runOutput
-      toggleRunOutput
     />
     <div
       className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
@@ -1758,7 +1764,7 @@ let make = (~versions: array<string>) => {
           {React.array(headers)}
         </div>
         <div ref={ReactDOM.Ref.domRef(subPanelRef)} className="overflow-auto">
-          <OutputPanel currentTab compilerDispatch compilerState editorCode runOutput />
+          <OutputPanel currentTab compilerDispatch compilerState editorCode />
         </div>
       </div>
     </div>

src/RenderPanel.res

@@ -1,68 +1,5 @@
-let wrapReactApp = code =>
-  `(function () {
-  ${code}
-  window.reactRoot.render(React.createElement(App.make, {}));
-})();`
-
-let capitalizeFirstLetter = string => {
-  let firstLetter = string->String.charAt(0)->String.toUpperCase
-  `${firstLetter}${string->String.sliceToEnd(~start=1)}`
-}
-
 @react.component
-let make = (~compilerState: CompilerManagerHook.state, ~clearLogs, ~runOutput) => {
-  let (validReact, setValidReact) = React.useState(() => false)
-  React.useEffect(() => {
-    if runOutput {
-      switch compilerState {
-      | CompilerManagerHook.Ready({selected, result: Comp(Success({js_code}))}) =>
-        clearLogs()
-        open Babel
-
-        let ast = Parser.parse(js_code, {sourceType: "module"})
-        let {entryPointExists, code, imports} = PlaygroundValidator.validate(ast)
-        let imports = imports->Dict.mapValues(path => {
-          let filename = path->String.sliceToEnd(~start=9) // the part after "./stdlib/"
-          let filename = switch selected.id {
-          | {major: 12, minor: 0, patch: 0, preRelease: Some(Alpha(alpha))} if alpha < 8 =>
-            let filename = if filename->String.startsWith("core__") {
-              filename->String.sliceToEnd(~start=6)
-            } else {
-              filename
-            }
-            capitalizeFirstLetter(filename)
-          | {major} if major < 12 && filename->String.startsWith("core__") =>
-            capitalizeFirstLetter(filename)
-          | _ => filename
-          }
-          let compilerVersion = switch selected.id {
-          | {major: 12, minor: 0, patch: 0, preRelease: Some(Alpha(alpha))} if alpha < 8 => {
-              Semver.major: 12,
-              minor: 0,
-              patch: 0,
-              preRelease: Some(Alpha(8)),
-            }
-          | {major, minor} if (major === 11 && minor < 2) || major < 11 => {
-              major: 11,
-              minor: 2,
-              patch: 0,
-              preRelease: Some(Beta(1)),
-            }
-          | version => version
-          }
-          CompilerManagerHook.CdnMeta.getStdlibRuntimeUrl(compilerVersion, filename)
-        })
-
-        entryPointExists
-          ? code->wrapReactApp->EvalIFrame.sendOutput(imports)
-          : EvalIFrame.sendOutput(code, imports)
-        setValidReact(_ => entryPointExists)
-      | _ => ()
-      }
-    }
-    None
-  }, (compilerState, runOutput))
-
+let make = (~validReact) => {
   <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

src/RenderPanel.resi

@@ -1,6 +1,2 @@
 @react.component
-let make: (
-  ~compilerState: CompilerManagerHook.state,
-  ~clearLogs: unit => unit,
-  ~runOutput: bool,
-) => Jsx.element
+let make: (~validReact: bool) => Jsx.element