Automatically sync playground URL (#937)

* remove useless interface file (Next.res is now pure bindings)

* use history replaceState for shallow replace on create share link

* update playground URL continuously

* track module system in playground url

* on compiler switch use esmodule by default

Author: tsnobip

src/Playground.res

@@ -1102,7 +1102,7 @@ module ControlPanel = {
       | CopySuccess
 
     @react.component
-    let make = (~createShareLink: unit => string, ~actionIndicatorKey: string) => {
+    let make = (~actionIndicatorKey: string) => {
       let (state, setState) = React.useState(() => Init)
 
       React.useEffect(() => {
@@ -1112,8 +1112,7 @@ module ControlPanel = {
 
       let onClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
-        let url = createShareLink()
-        let ret = copyToClipboard(url)
+        let ret = copyToClipboard(Webapi.Window.Location.href)
         if ret {
           setState(_ => CopySuccess)
         }
@@ -1134,7 +1133,6 @@ module ControlPanel = {
     }
   }
 
-  @val @scope(("window", "location")) external origin: string = "origin"
   @react.component
   let make = (
     ~actionIndicatorKey: string,
@@ -1144,46 +1142,22 @@ module ControlPanel = {
     ~runOutput,
     ~toggleRunOutput,
   ) => {
-    let router = Next.Router.useRouter()
-
     let children = switch state {
     | Init => React.string("Initializing...")
     | SwitchingCompiler(_ready, _version) => React.string("Switching Compiler...")
-    | Compiling(ready, _)
-    | Ready(ready) =>
+    | Compiling(_, _)
+    | Ready(_) =>
       let onFormatClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
         dispatch(Format(editorCode.current))
       }
 
-      let createShareLink = () => {
-        let params = switch ready.targetLang {
-        | Res => []
-        | lang => [("ext", Api.Lang.toExt(lang))]
-        }
-
-        let version = ready.selected.compilerVersion
-
-        Array.push(params, ("version", "v" ++ version))->ignore
-
-        Array.push(
-          params,
-          ("code", editorCode.current->LzString.compressToEncodedURIComponent),
-        )->ignore
-
-        let querystring = params->Array.map(((key, value)) => key ++ "=" ++ value)->Array.join("&")
-
-        let url = origin ++ router.route ++ "?" ++ querystring
-        Next.Router.replace(router, url)
-        url
-      }
-
       <div className="flex flex-row gap-x-2">
         <ToggleButton checked=runOutput onChange={_ => toggleRunOutput()}>
           {React.string("Auto-run")}
         </ToggleButton>
         <Button onClick=onFormatClick> {React.string("Format")} </Button>
-        <ShareButton actionIndicatorKey createShareLink />
+        <ShareButton actionIndicatorKey />
       </div>
     | _ => React.null
     }
@@ -1455,6 +1429,8 @@ let make = (~versions: array<string>) => {
   | _ => Api.Lang.Res
   }
 
+  let initialModuleSystem = Dict.get(router.query, "module")
+
   let initialContent = switch (Dict.get(router.query, "code"), initialLang) {
   | (Some(compressedCode), _) => LzString.decompressToEncodedURIComponent(compressedCode)
   | (None, Reason) => initialReContent
@@ -1473,6 +1449,7 @@ let make = (~versions: array<string>) => {
   let onAction = _ => setActionCount(prev => prev > 1000000 ? 0 : prev + 1)
   let (compilerState, compilerDispatch) = useCompilerManager(
     ~initialVersion?,
+    ~initialModuleSystem?,
     ~initialLang,
     ~onAction,
     ~versions,

src/bindings/Next.resi

@@ -48,6 +48,17 @@ module Window = {
   @scope("window") @val external innerWidth: int = "innerWidth"
   @scope("window") @val external innerHeight: int = "innerHeight"
   @scope("window") @val external scrollY: int = "scrollY"
+
+  module History = {
+    @scope(("window", "history")) @val
+    external pushState: (nullable<'a>, @as(json`""`) _, ~url: string=?) => unit = "pushState"
+    @scope(("window", "history")) @val
+    external replaceState: (nullable<'a>, @as(json`""`) _, ~url: string=?) => unit = "replaceState"
+  }
+
+  module Location = {
+    @scope(("window", "location")) @val external href: string = "href"
+  }
 }
 
 module Fetch = {

src/bindings/Webapi.res

@@ -242,6 +242,21 @@ type action =
   | CompileCode(Lang.t, string)
   | UpdateConfig(Config.t)
 
+let createUrl = (pathName, ready) => {
+  let params = switch ready.targetLang {
+  | Res => []
+  | lang => [("ext", RescriptCompilerApi.Lang.toExt(lang))]
+  }
+  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("&")
+  let url = pathName ++ "?" ++ querystring
+  url
+}
+
+let defaultModuleSystem = "esmodule"
+
 // ~initialLang:
 // The target language the compiler should be set to during
 // playground initialization.  If the compiler doesn't support the language, it
@@ -255,12 +270,14 @@ type action =
 //  cases where the output didn't visually change)
 let useCompilerManager = (
   ~initialVersion: option<Semver.t>=?,
+  ~initialModuleSystem=defaultModuleSystem,
   ~initialLang: Lang.t=Res,
   ~onAction: option<action => unit>=?,
   ~versions: array<Semver.t>,
   (),
 ) => {
   let (state, setState) = React.useState(_ => Init)
+  let router = Next.Router.useRouter()
 
   // Dispatch method for the public interface
   let dispatch = (action: action): unit => {
@@ -417,7 +434,7 @@ let useCompilerManager = (
               // internal compiler state with our playground state.
               let config = {
                 ...instance->Compiler.getConfig,
-                module_system: "esmodule",
+                module_system: initialModuleSystem,
                 ?open_modules,
               }
               instance->Compiler.setConfig(config)
@@ -470,7 +487,11 @@ let useCompilerManager = (
           let apiVersion = apiVersion->Version.fromString
           let open_modules = getOpenModules(~apiVersion, ~libraries)
 
-          let config = {...instance->Compiler.getConfig, ?open_modules}
+          let config = {
+            ...instance->Compiler.getConfig,
+            module_system: defaultModuleSystem,
+            ?open_modules,
+          }
           instance->Compiler.setConfig(config)
 
           let selected = {
@@ -528,8 +549,10 @@ let useCompilerManager = (
         }
 
         setState(_ => Ready({...ready, result: FinalResult.Comp(compResult)}))
-      | SetupFailed(_)
-      | Ready(_) => ()
+      | SetupFailed(_) => ()
+      | Ready(ready) =>
+        let url = createUrl(router.route, ready)
+        Webapi.Window.History.replaceState(null, ~url)
       }
     }
 

src/common/CompilerManagerHook.res

@@ -59,8 +59,11 @@ type action =
 
 let useCompilerManager: (
   ~initialVersion: Semver.t=?,
+  ~initialModuleSystem: string=?,
   ~initialLang: Lang.t=?,
   ~onAction: action => unit=?,
   ~versions: array<Semver.t>,
   unit,
 ) => (state, action => unit)
+
+let createUrl: (string, ready) => string