simplify states

Author: tsnobip

src/OutputPanel.res

@@ -2,14 +2,14 @@
 let make = (~compilerState, ~appendLog) => {
   let validReact = switch compilerState {
   | CompilerManagerHook.Executing({state: {validReactCode: true}})
-  | Compiling({validReactCode: true})
+  | Compiling({state: {validReactCode: true}})
   | Ready({validReactCode: true}) => true
   | _ => false
   }
 
   let logs = switch compilerState {
   | CompilerManagerHook.Executing({state: {logs}})
-  | Compiling({logs})
+  | Compiling({state: {logs}})
   | Ready({logs}) => logs
   | _ => []
   }

src/Playground.res

@@ -1038,20 +1038,6 @@ 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=?) =>
@@ -1144,7 +1130,7 @@ module ControlPanel = {
 
       let autoRun = switch state {
       | CompilerManagerHook.Executing({state: {autoRun: true}})
-      | Compiling({autoRun: true})
+      | Compiling({state: {autoRun: true}})
       | Ready({autoRun: true}) => true
       | _ => false
       }
@@ -1211,77 +1197,24 @@ module OutputPanel = {
     ~editorCode: React.ref<string>,
     ~currentTab: tab,
   ) => {
-    /*
-       We need the prevState to understand different
-       state transitions, and to be able to keep displaying
-       old results until those transitions are done.
-
-       Goal was to reduce the UI flickering during different
-       state transitions
- */
-    let prevState = React.useRef(None)
-
-    let cmCode = switch prevState.current {
-    | Some(prev) =>
-      switch (prev, compilerState) {
-      | (_, Ready({result: Nothing})) => None
-      | (Ready(prevReady), Ready(ready)) =>
-        switch (prevReady.result, ready.result) {
-        | (_, Comp(Success(_))) => ControlPanel.codeFromResult(ready.result)->Some
-        | _ => None
-        }
-      | (_, Ready({result: Comp(Success(_)) as result})) =>
-        ControlPanel.codeFromResult(result)->Some
-      | (Ready({result: Comp(Success(_)) as result}), Compiling(_)) =>
-        ControlPanel.codeFromResult(result)->Some
-      | (_, Executing({jsCode})) => Some(jsCode)
-      | _ => None
-      }
-    | None =>
-      switch compilerState {
-      | Ready(ready) => ControlPanel.codeFromResult(ready.result)->Some
-      | _ => None
-      }
-    }
-
-    prevState.current = Some(compilerState)
-
-    let resultPane = switch compilerState {
-    | Compiling(ready)
-    | Ready(ready)
-    | Executing({state: ready}) =>
-      switch ready.result {
-      | Comp(Success(_))
-      | Conv(Success(_)) => React.null
-      | _ =>
-        <ResultPane
-          targetLang=ready.targetLang
-          compilerVersion=ready.selected.compilerVersion
-          result=ready.result
-        />
-      }
-
-    | _ => React.null
-    }
-
-    let (code, showCm) = switch cmCode {
-    | None => ("", false)
-    | Some(code) => (code, true)
-    }
-
-    let codeElement =
-      <pre className={"whitespace-pre-wrap p-4 " ++ (showCm ? "block" : "hidden")}>
-        {HighlightJs.renderHLJS(~code, ~darkmode=true, ~lang="js", ())}
-      </pre>
-
     let output =
       <div className="text-gray-20">
-        resultPane
-        codeElement
+        {switch compilerState {
+        | Compiling({previousJsCode: Some(jsCode)})
+        | Executing({jsCode})
+        | Ready({result: Comp(Success({jsCode}))}) =>
+          <pre className={"whitespace-pre-wrap p-4 "}>
+            {HighlightJs.renderHLJS(~code=jsCode, ~darkmode=true, ~lang="js", ())}
+          </pre>
+        | Ready({result: Conv(Success(_))}) => React.null
+        | Ready({result, targetLang, selected}) =>
+          <ResultPane targetLang compilerVersion=selected.compilerVersion result />
+        | _ => React.null
+        }}
       </div>
 
     let errorPane = switch compilerState {
-    | Compiling(ready)
+    | Compiling({state: ready})
     | Ready(ready)
     | Executing({state: ready})
     | SwitchingCompiler(ready, _) =>
@@ -1296,7 +1229,7 @@ module OutputPanel = {
 
     let settingsPane = switch compilerState {
     | Ready(ready)
-    | Compiling(ready)
+    | Compiling({state: ready})
     | Executing({state: ready})
     | SwitchingCompiler(ready, _) =>
       let config = ready.selected.config
@@ -1671,8 +1604,8 @@ let make = (~versions: array<string>) => {
   }
 
   let cmHoverHints = switch compilerState {
-  | Ready({result: FinalResult.Comp(Success({type_hints}))}) =>
-    Array.map(type_hints, hint => {
+  | Ready({result: FinalResult.Comp(Success({typeHints}))}) =>
+    Array.map(typeHints, hint => {
       switch hint {
       | TypeDeclaration({start, end, hint})
       | Binding({start, end, hint})

src/bindings/RescriptCompilerApi.res

@@ -237,18 +237,20 @@ module TypeHint = {
 
 module CompileSuccess = {
   type t = {
-    js_code: string,
+    @as("js_code")
+    jsCode: string,
     warnings: array<Warning.t>,
-    type_hints: array<TypeHint.t>,
+    @as("type_hints")
+    typeHints: array<TypeHint.t>,
     time: float, // total compilation time
   }
 
   let decode = (~time: float, json): t => {
     open Json.Decode
     {
-      js_code: field("js_code", string, json),
+      jsCode: field("js_code", string, json),
       warnings: field("warnings", array(Warning.decode, ...), json),
-      type_hints: withDefault([], field("type_hints", array(TypeHint.decode, ...), ...), json),
+      typeHints: withDefault([], field("type_hints", array(TypeHint.decode, ...), ...), json),
       time,
     }
   }

src/bindings/RescriptCompilerApi.resi

@@ -104,9 +104,11 @@ module TypeHint: {
 
 module CompileSuccess: {
   type t = {
-    js_code: string,
+    @as("js_code")
+    jsCode: string,
     warnings: array<Warning.t>,
-    type_hints: array<TypeHint.t>, // Not supported in older versions <= 9.0.1 (will always be [])
+    @as("type_hints")
+    typeHints: array<TypeHint.t>, // Not supported in older versions <= 9.0.1 (will always be [])
     time: float, // total compilation time
   }
 

src/common/CompilerManagerHook.res

@@ -178,7 +178,7 @@ type state =
   | SetupFailed(string)
   | SwitchingCompiler(ready, Semver.t) // (ready, targetId, libraries)
   | Ready(ready)
-  | Compiling(ready)
+  | Compiling({state: ready, previousJsCode: option<string>})
   | Executing({state: ready, jsCode: string})
 
 type action =
@@ -245,12 +245,19 @@ let useCompilerManager = (
         | Ready(ready) =>
           ready.selected.instance->Compiler.setConfig(config)
           let selected = {...ready.selected, config}
-          Compiling({...ready, selected})
+          Compiling({state: {...ready, selected}, previousJsCode: None})
         | _ => state
         }
       | CompileCode(lang, code) =>
         switch state {
-        | Ready(ready) => Compiling({...ready, code, targetLang: lang})
+        | Ready(ready) =>
+          Compiling({
+            state: {...ready, code, targetLang: lang},
+            previousJsCode: switch ready.result {
+            | Comp(Success({jsCode})) => Some(jsCode)
+            | _ => None
+            },
+          })
         | _ => state
         }
       | SwitchLanguage({lang, code}) =>
@@ -348,13 +355,23 @@ let useCompilerManager = (
       | ToggleAutoRun =>
         switch state {
         | Ready({autoRun: true} as ready) => Ready({...ready, autoRun: false})
-        | Ready({autoRun: false} as ready) => Compiling({...ready, autoRun: true})
+        | Ready({autoRun: false} as ready) =>
+          Compiling({
+            state: {
+              ...ready,
+              autoRun: true,
+            },
+            previousJsCode: switch ready.result {
+            | Comp(Success({jsCode})) => Some(jsCode)
+            | _ => None
+            },
+          })
         | _ => state
         }
       | RunCode =>
         switch state {
-        | Ready({result: Comp(Success({js_code}))} as ready) =>
-          Executing({state: {...ready, autoRun: false}, jsCode: js_code})
+        | Ready({result: Comp(Success({jsCode}))} as ready) =>
+          Executing({state: {...ready, autoRun: false}, jsCode})
         | _ => state
         }
       }
@@ -487,7 +504,7 @@ let useCompilerManager = (
 
           dispatchError(CompilerLoadingError(msg))
         }
-      | Compiling({targetLang: lang, code, autoRun} as ready) =>
+      | Compiling({state: {targetLang: lang, code, autoRun} as ready}) =>
         let apiVersion = ready.selected.apiVersion
         let instance = ready.selected.instance
 
@@ -520,8 +537,7 @@ let useCompilerManager = (
         let ready = {...ready, result: FinalResult.Comp(compResult)}
         setState(_ =>
           switch (ready.result, autoRun) {
-          | (FinalResult.Comp(Success({js_code})), true) =>
-            Executing({state: ready, jsCode: js_code})
+          | (FinalResult.Comp(Success({jsCode})), true) => Executing({state: ready, jsCode})
           | _ => Ready(ready)
           }
         )

src/common/CompilerManagerHook.resi

@@ -39,7 +39,7 @@ type state =
   | SetupFailed(string)
   | SwitchingCompiler(ready, Semver.t) // (ready, targetId, libraries)
   | Ready(ready)
-  | Compiling(ready)
+  | Compiling({state: ready, previousJsCode: option<string>})
   | Executing({state: ready, jsCode: string})
 
 type action =