Playground toggles for jsx preserve and experimental features

fhammerschmidt · fhammerschmidt · commit 140440b9735b · 2025-09-10T00:44:23.000+02:00
diff --git a/src/Playground.res b/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,
@@ -867,6 +899,25 @@ module Settings = {
       setConfig(config)
     }
 
+    let onJsxPreserveModeUpdate = compilation => {
+      let jsx_preserve_mode = JsxCompilation.toBool(compilation)
+      let config = {...config, jsx_preserve_mode}
+      setConfig(config)
+    }
+
+    let onExperimentalFeaturesUpdate = feature => {
+      let features = config.experimental_features->Option.getOr([])
+
+      let experimental_features = if features->Array.includes(feature) {
+        features->Array.filter(x => x !== feature)
+      } else {
+        [...features, feature]
+      }
+
+      let config = {...config, experimental_features}
+      setConfig(config)
+    }
+
     let warnFlagTokens = WarningFlagDescription.Parser.parse(warn_flags)->Result.getOr([])
 
     let onWarningFlagsResetClick = _evt => {
@@ -1000,6 +1051,40 @@ module Settings = {
           onChange=onModuleSystemUpdate
         />
       </div>
+      {switch readyState.selected.apiVersion {
+      | V1 | V2 | V3 | V4 | V5 | UnknownVersion(_) => React.null
+      | V6 =>
+        <>
+          <div className="mt-6">
+            <div className=titleClass> {React.string("JSX")} </div>
+            <ToggleSelection
+              values=[JsxCompilation.Plain, PreserveJsx]
+              toLabel=JsxCompilation.getLabel
+              selected={config.jsx_preserve_mode->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.experimental_features
+                ->Option.getOr([])
+                ->Array.includes(key)}
+                onClick={_evt => onExperimentalFeaturesUpdate(key)}
+              />
+            })
+            ->React.array}
+          </div>
+        </>
+      }}
+
       <div className="mt-6">
         <div className=titleClass> {React.string("Loaded Libraries")} </div>
         <ul>
@@ -1440,7 +1525,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 +1536,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 +1568,8 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     ~bundleBaseUrl,
     ~initialVersion?,
     ~initialModuleSystem?,
+    ~initialJsxPreserveMode,
+    ~initialExperimentalFeatures,
     ~initialLang,
     ~onAction,
     ~versions,
diff --git a/src/bindings/RescriptCompilerApi.res b/src/bindings/RescriptCompilerApi.res
@@ -34,6 +34,7 @@ module Version = {
     | V3
     | V4
     | V5
+    | V6
     | UnknownVersion(string)
 
   // Helps finding the right API version
@@ -57,6 +58,7 @@ module Version = {
     | list{"3"} => V3
     | list{"4"} => V4
     | list{"5"} => V5
+    | list{"6"} => V6
     | _ => UnknownVersion(apiVersion)
     }
 
@@ -67,6 +69,7 @@ module Version = {
     | V3 => "3.0"
     | V4 => "4.0"
     | V5 => "5.0"
+    | V6 => "6.0"
     | UnknownVersion(version) => version
     }
 
@@ -75,7 +78,7 @@ 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]
     }
 }
@@ -396,6 +399,8 @@ module Config = {
     warn_flags: string,
     uncurried?: bool,
     open_modules?: array<string>,
+    experimental_features?: array<string>,
+    jsx_preserve_mode?: bool,
   }
 }
 
@@ -469,6 +474,10 @@ module Compiler = {
 
   @send external setOpenModules: (t, array<string>) => bool = "setOpenModules"
 
+  @send external setExperimentalFeatures: (t, array<string>) => bool = "setExperimentalFeatures"
+
+  @send external setJsxPreserveMode: (t, bool) => bool = "setJsxPreserveMode"
+
   let setConfig = (t: t, config: Config.t): unit => {
     let moduleSystem = switch config.module_system {
     | "commonjs" => #nodejs->Some
@@ -478,6 +487,10 @@ module Compiler = {
 
     Option.forEach(moduleSystem, moduleSystem => t->setModuleSystem(moduleSystem)->ignore)
     Option.forEach(config.open_modules, modules => t->setOpenModules(modules)->ignore)
+    Option.forEach(config.experimental_features, features =>
+      t->setExperimentalFeatures(features)->ignore
+    )
+    Option.forEach(config.jsx_preserve_mode, toggle => t->setJsxPreserveMode(toggle)->ignore)
 
     t->setWarnFlags(config.warn_flags)->ignore
   }
diff --git a/src/bindings/RescriptCompilerApi.resi b/src/bindings/RescriptCompilerApi.resi
@@ -25,6 +25,7 @@ module Version: {
     | V3
     | V4
     | V5
+    | V6
     | UnknownVersion(string)
 
   // Helps finding the right API version
@@ -163,6 +164,9 @@ module Config: {
     /** Only available in apiVersion > 3 (= ReScript 11+) */
     uncurried?: bool,
     open_modules?: array<string>,
+    /** Only available in apiVersion >= 6 (= ReScript 12+) */
+    experimental_features?: array<string>,
+    jsx_preserve_mode?: bool,
   }
 }
 
diff --git a/src/common/CompilerManagerHook.res b/src/common/CompilerManagerHook.res
@@ -84,7 +84,8 @@ let getLibrariesForVersion = (~version: Semver.t): array<string> => {
 let getOpenModules = (~apiVersion: Version.t, ~libraries: array<string>): option<array<string>> =>
   switch apiVersion {
   | V1 | V2 | V3 | UnknownVersion(_) => None
-  | V4 | V5 => libraries->Array.some(el => el === "@rescript/core") ? Some(["RescriptCore"]) : None
+  | V4 | V5 | V6 =>
+    libraries->Array.some(el => el === "@rescript/core") ? Some(["RescriptCore"]) : None
   }
 
 /*
@@ -191,15 +192,37 @@ type action =
   | ToggleAutoRun
   | RunCode
 
+type queryParams =
+  | @as("ext") Ext
+  | @as("version") Version
+  | @as("module") Module
+  | @as("jsxPreserve") JsxPreserve
+  | @as("experiments") Experiments
+  | @as("code") Code
+
 let createUrl = (pathName, ready) => {
   let params = switch ready.targetLang {
   | Res => []
-  | lang => [("ext", RescriptCompilerApi.Lang.toExt(lang))]
+  | lang => [(Ext, RescriptCompilerApi.Lang.toExt(lang))]
+  }
+
+  Array.push(params, (Version, "v" ++ ready.selected.compilerVersion))
+  Array.push(params, (Module, ready.selected.config.module_system))
+
+  if ready.selected.config.jsx_preserve_mode->Option.getOr(false) {
+    Array.push(params, (JsxPreserve, "true"))
   }
-  Array.push(params, ("version", "v" ++ ready.selected.compilerVersion))
-  Array.push(params, ("module", ready.selected.config.module_system))
-  Array.push(params, ("code", ready.code->LzString.compressToEncodedURIComponent))
-  let querystring = params->Array.map(((key, value)) => key ++ "=" ++ value)->Array.join("&")
+
+  switch ready.selected.config.experimental_features {
+  | Some([]) | None => ()
+  | Some(features) => Array.push(params, (Experiments, features->Array.join(",")))
+  }
+
+  // Put code last as it is the longest param.
+  Array.push(params, (Code, ready.code->LzString.compressToEncodedURIComponent))
+
+  let querystring =
+    params->Array.map(((key, value)) => (key :> string) ++ "=" ++ value)->Array.join("&")
   let url = pathName ++ "?" ++ querystring
   url
 }
@@ -221,6 +244,8 @@ let useCompilerManager = (
   ~bundleBaseUrl: string,
   ~initialVersion: option<Semver.t>=?,
   ~initialModuleSystem=defaultModuleSystem,
+  ~initialJsxPreserveMode=false,
+  ~initialExperimentalFeatures=[],
   ~initialLang: Lang.t=Res,
   ~onAction: option<action => unit>=?,
   ~versions: array<Semver.t>,
@@ -421,6 +446,8 @@ let useCompilerManager = (
               let config = {
                 ...instance->Compiler.getConfig,
                 module_system: initialModuleSystem,
+                experimental_features: initialExperimentalFeatures,
+                jsx_preserve_mode: initialJsxPreserveMode,
                 ?open_modules,
               }
               instance->Compiler.setConfig(config)
@@ -529,7 +556,7 @@ let useCompilerManager = (
             )
           | Lang.Res => instance->Compiler.resCompile(code)
           }
-        | V5 =>
+        | V5 | V6 =>
           switch lang {
           | Lang.Res => instance->Compiler.resCompile(code)
           | _ => CompilationResult.UnexpectedError(`Can't handle with lang: ${lang->Lang.toString}`)
@@ -601,6 +628,8 @@ let useCompilerManager = (
     dispatchError,
     initialVersion,
     initialModuleSystem,
+    initialJsxPreserveMode,
+    initialExperimentalFeatures,
     initialLang,
     versions,
     router.route,
diff --git a/src/common/CompilerManagerHook.resi b/src/common/CompilerManagerHook.resi
@@ -8,6 +8,14 @@ module FinalResult: {
     | Nothing
 }
 
+type queryParams =
+  | @as("ext") Ext
+  | @as("version") Version
+  | @as("module") Module
+  | @as("jsxPreserve") JsxPreserve
+  | @as("experiments") Experiments
+  | @as("code") Code
+
 type selected = {
   id: Semver.t, // The id used for loading the compiler bundle (ideally should be the same as compilerVersion)
   apiVersion: Version.t, // The playground API version in use
@@ -56,6 +64,8 @@ let useCompilerManager: (
   ~bundleBaseUrl: string,
   ~initialVersion: Semver.t=?,
   ~initialModuleSystem: string=?,
+  ~initialJsxPreserveMode: bool=?,
+  ~initialExperimentalFeatures: array<string>=?,
   ~initialLang: Lang.t=?,
   ~onAction: action => unit=?,
   ~versions: array<Semver.t>,
