Playground toggles for jsx preserve mode and experimental features (#1107)

* Playground toggles for jsx preserve and experimental features

* Make compiler config camelCase

* Check apiVersion to ensure only supported methods are called

Author: fhammerschmidt

src/Playground.res

@@ -13,6 +13,38 @@ module Api = RescriptCompilerApi
 
 type layout = Column | Row
 type tab = JavaScript | Output | Problems | Settings
+
+module JsxCompilation = {
+  type t =
+    | Plain
+    | PreserveJsx
+
+  let getLabel = (mode: t): string =>
+    switch mode {
+    | Plain => "Plain JS functions"
+    | PreserveJsx => "Preserve JSX"
+    }
+
+  let toBool = (mode: t): bool =>
+    switch mode {
+    | Plain => false
+    | PreserveJsx => true
+    }
+
+  let fromBool = (bool): t => bool ? PreserveJsx : Plain
+}
+
+module ExperimentalFeatures = {
+  type t = LetUnwrap
+
+  let getLabel = (feature: t): string =>
+    switch feature {
+    | LetUnwrap => "let?"
+    }
+
+  let list = [LetUnwrap]
+}
+
 let breakingPoint = 1024
 
 module DropdownSelect = {
@@ -31,23 +63,23 @@ module DropdownSelect = {
   }
 }
 
-module ToggleSelection = {
-  module SelectionOption = {
-    @react.component
-    let make = (~label, ~isActive, ~disabled, ~onClick) => {
-      <button
-        className={"mr-1 px-2 py-1 rounded inline-block " ++ if isActive {
-          "bg-fire text-white font-bold"
-        } else {
-          "bg-gray-80 opacity-50 hover:opacity-80"
-        }}
-        onClick
-        disabled>
-        {React.string(label)}
-      </button>
-    }
+module SelectionOption = {
+  @react.component
+  let make = (~label, ~isActive, ~disabled, ~onClick) => {
+    <button
+      className={"mr-1 px-2 py-1 rounded inline-block " ++ if isActive {
+        "bg-fire text-white font-bold"
+      } else {
+        "bg-gray-80 opacity-50 hover:opacity-80"
+      }}
+      onClick
+      disabled>
+      {React.string(label)}
+    </button>
   }
+}
 
+module ToggleSelection = {
   @react.component
   let make = (
     ~onChange: 'a => unit,
@@ -842,7 +874,7 @@ module Settings = {
     ~config: Api.Config.t,
     ~keyMapState: (CodeMirror.KeyMap.t, (CodeMirror.KeyMap.t => CodeMirror.KeyMap.t) => unit),
   ) => {
-    let {Api.Config.warn_flags: warn_flags} = config
+    let {Api.Config.warnFlags: warnFlags} = config
     let (keyMap, setKeyMap) = keyMapState
 
     let availableTargetLangs = Api.Version.availableLanguages(readyState.selected.apiVersion)
@@ -857,22 +889,41 @@ module Settings = {
         }
       let config = {
         ...config,
-        warn_flags: flags->normalizeEmptyFlags->WarningFlagDescription.Parser.tokensToString,
+        warnFlags: flags->normalizeEmptyFlags->WarningFlagDescription.Parser.tokensToString,
       }
       setConfig(config)
     }
 
-    let onModuleSystemUpdate = module_system => {
-      let config = {...config, module_system}
+    let onModuleSystemUpdate = moduleSystem => {
+      let config = {...config, moduleSystem}
+      setConfig(config)
+    }
+
+    let onJsxPreserveModeUpdate = compilation => {
+      let jsxPreserveMode = JsxCompilation.toBool(compilation)
+      let config = {...config, jsxPreserveMode}
+      setConfig(config)
+    }
+
+    let onExperimentalFeaturesUpdate = feature => {
+      let features = config.experimentalFeatures->Option.getOr([])
+
+      let experimentalFeatures = if features->Array.includes(feature) {
+        features->Array.filter(x => x !== feature)
+      } else {
+        [...features, feature]
+      }
+
+      let config = {...config, experimentalFeatures}
       setConfig(config)
     }
 
-    let warnFlagTokens = WarningFlagDescription.Parser.parse(warn_flags)->Result.getOr([])
+    let warnFlagTokens = WarningFlagDescription.Parser.parse(warnFlags)->Result.getOr([])
 
     let onWarningFlagsResetClick = _evt => {
       setConfig({
         ...config,
-        warn_flags: "+a-4-9-20-40-41-42-50-61-102-109",
+        warnFlags: "+a-4-9-20-40-41-42-50-61-102-109",
       })
     }
 
@@ -996,10 +1047,42 @@ module Settings = {
         <ToggleSelection
           values=["commonjs", "esmodule"]
           toLabel={value => value}
-          selected=config.module_system
+          selected=config.moduleSystem
           onChange=onModuleSystemUpdate
         />
       </div>
+      {readyState.selected.apiVersion->RescriptCompilerApi.Version.isMinimumVersion(V6)
+        ? <>
+            <div className="mt-6">
+              <div className=titleClass> {React.string("JSX")} </div>
+              <ToggleSelection
+                values=[JsxCompilation.Plain, PreserveJsx]
+                toLabel=JsxCompilation.getLabel
+                selected={config.jsxPreserveMode->Option.getOr(false)->JsxCompilation.fromBool}
+                onChange=onJsxPreserveModeUpdate
+              />
+            </div>
+            <div className="mt-6">
+              <div className=titleClass> {React.string("Experimental Features")} </div>
+              {ExperimentalFeatures.list
+              ->Array.map(feature => {
+                let key = (feature :> string)
+
+                <SelectionOption
+                  key
+                  disabled=false
+                  label={feature->ExperimentalFeatures.getLabel}
+                  isActive={config.experimentalFeatures
+                  ->Option.getOr([])
+                  ->Array.includes(key)}
+                  onClick={_evt => onExperimentalFeaturesUpdate(key)}
+                />
+              })
+              ->React.array}
+            </div>
+          </>
+        : React.null}
+
       <div className="mt-6">
         <div className=titleClass> {React.string("Loaded Libraries")} </div>
         <ul>
@@ -1440,7 +1523,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   | [v] => Some(v) // only single version available. maybe local dev.
   | versions => {
       let lastStableVersion = versions->Array.find(version => version.preRelease->Option.isNone)
-      switch Dict.get(router.query, "version") {
+      switch Dict.get(router.query, (CompilerManagerHook.Version :> string)) {
       | Some(version) => version->Semver.parse
       | None =>
         switch Url.getVersionFromStorage(Playground) {
@@ -1451,14 +1534,20 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     }
   }
 
-  let initialLang = switch Dict.get(router.query, "ext") {
+  let initialLang = switch Dict.get(router.query, (CompilerManagerHook.Ext :> string)) {
   | Some("re") => Api.Lang.Reason
   | _ => Api.Lang.Res
   }
 
-  let initialModuleSystem = Dict.get(router.query, "module")
+  let initialModuleSystem = Dict.get(router.query, (Module :> string))
+  let initialJsxPreserveMode = Dict.get(router.query, (JsxPreserve :> string))->Option.isSome
+
+  let initialExperimentalFeatures =
+    Dict.get(router.query, (Experiments :> string))->Option.mapOr([], str =>
+      str->String.split(",")->Array.map(String.trim)
+    )
 
-  let initialContent = switch (Dict.get(router.query, "code"), initialLang) {
+  let initialContent = switch (Dict.get(router.query, (Code :> string)), initialLang) {
   | (Some(compressedCode), _) => LzString.decompressToEncodedURIComponent(compressedCode)
   | (None, Reason) => initialReContent
   | (None, Res) =>
@@ -1477,6 +1566,8 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     ~bundleBaseUrl,
     ~initialVersion?,
     ~initialModuleSystem?,
+    ~initialJsxPreserveMode,
+    ~initialExperimentalFeatures,
     ~initialLang,
     ~onAction,
     ~versions,

src/bindings/RescriptCompilerApi.res

@@ -28,12 +28,16 @@ module Lang = {
 }
 
 module Version = {
+  type numbered =
+    | @as(1) V1
+    | @as(2) V2
+    | @as(3) V3
+    | @as(4) V4
+    | @as(5) V5
+    | @as(6) V6
+
   type t =
-    | V1
-    | V2
-    | V3
-    | V4
-    | V5
+    | ...numbered
     | UnknownVersion(string)
 
   // Helps finding the right API version
@@ -57,6 +61,7 @@ module Version = {
     | list{"3"} => V3
     | list{"4"} => V4
     | list{"5"} => V5
+    | list{"6"} => V6
     | _ => UnknownVersion(apiVersion)
     }
 
@@ -67,6 +72,7 @@ module Version = {
     | V3 => "3.0"
     | V4 => "4.0"
     | V5 => "5.0"
+    | V6 => "6.0"
     | UnknownVersion(version) => version
     }
 
@@ -75,9 +81,15 @@ module Version = {
   let availableLanguages = t =>
     switch t {
     | V1 => [Lang.Reason, Res]
-    | V2 | V3 | V4 | V5 => [Lang.Res]
+    | V2 | V3 | V4 | V5 | V6 => [Lang.Res]
     | UnknownVersion(_) => [Res]
     }
+
+  let isMinimumVersion = (version: t, minimum: numbered) =>
+    switch version {
+    | ...numbered as version => version >= minimum
+    | UnknownVersion(_) => false
+    }
 }
 
 module LocMsg = {
@@ -392,10 +404,12 @@ module ConversionResult = {
 
 module Config = {
   type t = {
-    module_system: string,
-    warn_flags: string,
+    @as("module_system") moduleSystem: string,
+    @as("warn_flags") warnFlags: string,
     uncurried?: bool,
-    open_modules?: array<string>,
+    @as("open_modules") openModules?: array<string>,
+    @as("experimental_features") experimentalFeatures?: array<string>,
+    @as("jsx_preserve_mode") jsxPreserveMode?: bool,
   }
 }
 
@@ -469,17 +483,31 @@ module Compiler = {
 
   @send external setOpenModules: (t, array<string>) => bool = "setOpenModules"
 
-  let setConfig = (t: t, config: Config.t): unit => {
-    let moduleSystem = switch config.module_system {
+  @send external setExperimentalFeatures: (t, array<string>) => bool = "setExperimentalFeatures"
+
+  @send external setJsxPreserveMode: (t, bool) => bool = "setJsxPreserveMode"
+
+  let setConfig = (t: t, config: Config.t, version: Version.t): unit => {
+    let moduleSystem = switch config.moduleSystem {
     | "commonjs" => #nodejs->Some
     | "esmodule" => #es6->Some
     | _ => None
     }
 
     Option.forEach(moduleSystem, moduleSystem => t->setModuleSystem(moduleSystem)->ignore)
-    Option.forEach(config.open_modules, modules => t->setOpenModules(modules)->ignore)
 
-    t->setWarnFlags(config.warn_flags)->ignore
+    if version->Version.isMinimumVersion(V4) {
+      Option.forEach(config.openModules, modules => t->setOpenModules(modules)->ignore)
+    }
+
+    if version->Version.isMinimumVersion(V6) {
+      Option.forEach(config.experimentalFeatures, features =>
+        t->setExperimentalFeatures(features)->ignore
+      )
+      Option.forEach(config.jsxPreserveMode, toggle => t->setJsxPreserveMode(toggle)->ignore)
+    }
+
+    t->setWarnFlags(config.warnFlags)->ignore
   }
 
   @send

src/bindings/RescriptCompilerApi.resi

@@ -19,12 +19,16 @@ module Lang: {
 }
 
 module Version: {
+  type numbered =
+    | @as(1) V1
+    | @as(2) V2
+    | @as(3) V3
+    | @as(4) V4
+    | @as(5) V5
+    | @as(6) V6
+
   type t =
-    | V1
-    | V2
-    | V3
-    | V4
-    | V5
+    | ...numbered
     | UnknownVersion(string)
 
   // Helps finding the right API version
@@ -35,6 +39,8 @@ module Version: {
   let defaultTargetLang: Lang.t
 
   let availableLanguages: t => array<Lang.t>
+
+  let isMinimumVersion: (t, numbered) => bool
 }
 
 module LocMsg: {
@@ -158,11 +164,14 @@ module ConversionResult: {
 
 module Config: {
   type t = {
-    module_system: string,
-    warn_flags: string,
+    @as("module_system") moduleSystem: string,
+    @as("warn_flags") warnFlags: string,
     /** Only available in apiVersion > 3 (= ReScript 11+) */
     uncurried?: bool,
-    open_modules?: array<string>,
+    @as("open_modules") openModules?: array<string>,
+    /** Only available in apiVersion >= 6 (= ReScript 12+) */
+    @as("experimental_features") experimentalFeatures?: array<string>,
+    @as("jsx_preserve_mode") jsxPreserveMode?: bool,
   }
 }
 
@@ -201,7 +210,7 @@ module Compiler: {
 
   let setWarnFlags: (t, string) => bool
   let setOpenModules: (t, array<string>) => bool
-  let setConfig: (t, Config.t) => unit
+  let setConfig: (t, Config.t, Version.t) => unit
 
   // General format function
   let convertSyntax: (~fromLang: Lang.t, ~toLang: Lang.t, ~code: string, t) => ConversionResult.t