Migrate to rescript webapi

Author: aspeddro

package-lock.json

@@ -24,6 +24,7 @@
     "@headlessui/react": "^2.2.4",
     "@mdx-js/loader": "^3.1.0",
     "@rescript/react": "^0.14.0-rc.1",
+    "@rescript/webapi": "^0.1.0-experimental-03eae8b",
     "codemirror": "^5.54.0",
     "docson": "^2.1.0",
     "escodegen": "^2.1.0",

package.json

@@ -5,7 +5,11 @@
     "version": 4
   },
   "bs-dependencies": [
-    "@rescript/react"
+    "@rescript/react",
+    "@rescript/webapi"
+  ],
+  "bsc-flags": [
+    "-open WebAPI.Global"
   ],
   "sources": [
     {

rescript.json

@@ -95,7 +95,7 @@ module SidebarTree = {
     let version = url->Url.getVersionString
 
     let moduleRoute =
-      Webapi.URL.make("file://" ++ router.asPath).pathname
+      WebAPI.URL.make(~url="file://" ++ router.asPath).pathname
       ->String.replace(`/docs/manual/${version}/api/`, "")
       ->String.split("/")
 

src/ApiDocs.res

@@ -17,8 +17,8 @@ let make = (~logs, ~appendLog) => {
       | _ => ()
       }
     }
-    Webapi.Window.addEventListener("message", cb)
-    Some(() => Webapi.Window.removeEventListener("message", cb))
+    WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Custom("message"), cb)
+    Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Custom("message"), cb))
   }, [appendLog])
 
   <div className="px-2 py-6 relative flex flex-col flex-1 overflow-y-hidden">

src/ConsolePanel.res

@@ -1064,7 +1064,7 @@ module ControlPanel = {
 
       let onClick = evt => {
         ReactEvent.Mouse.preventDefault(evt)
-        let ret = copyToClipboard(Webapi.Window.Location.href)
+        let ret = copyToClipboard(window.location.href)
         if ret {
           setState(_ => CopySuccess)
         }
@@ -1129,12 +1129,12 @@ module ControlPanel = {
       }
 
       React.useEffect(() => {
-        Webapi.Window.addEventListener("keydown", onKeyDown)
-        Some(() => Webapi.Window.removeEventListener("keydown", onKeyDown))
+        WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Keydown, onKeyDown)
+        Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Keydown, onKeyDown))
       }, [])
 
       let runButtonText = {
-        let userAgent = Webapi.Window.Navigator.userAgent
+        let userAgent = window.navigator.userAgent
         let run = "Run"
         if userAgent->String.includes("iPhone") || userAgent->String.includes("Android") {
           run
@@ -1496,9 +1496,7 @@ let make = (~versions: array<string>) => {
     None
   }, (compilerState, compilerDispatch))
 
-  let (layout, setLayout) = React.useState(_ =>
-    Webapi.Window.innerWidth < breakingPoint ? Column : Row
-  )
+  let (layout, setLayout) = React.useState(_ => window.innerWidth < breakingPoint ? Column : Row)
 
   let isDragging = React.useRef(false)
 
@@ -1510,26 +1508,34 @@ let make = (~versions: array<string>) => {
   let subPanelRef = React.useRef(Nullable.null)
 
   let onResize = () => {
-    let newLayout = Webapi.Window.innerWidth < breakingPoint ? Column : Row
+    let newLayout = window.innerWidth < breakingPoint ? Column : Row
     setLayout(_ => newLayout)
     switch panelRef.current->Nullable.toOption {
     | Some(element) =>
-      let offsetTop = Webapi.Element.getBoundingClientRect(element)["top"]
-      Webapi.Element.Style.height(element, `calc(100vh - ${offsetTop->Float.toString}px)`)
+      let offsetTop = WebAPI.Element.getBoundingClientRect(element).top
+      WebAPI.Element.setAttribute(
+        element,
+        ~qualifiedName="style",
+        ~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
+      )
     | None => ()
     }
 
     switch subPanelRef.current->Nullable.toOption {
     | Some(element) =>
-      let offsetTop = Webapi.Element.getBoundingClientRect(element)["top"]
-      Webapi.Element.Style.height(element, `calc(100vh - ${offsetTop->Float.toString}px)`)
+      let offsetTop = WebAPI.Element.getBoundingClientRect(element).top
+      WebAPI.Element.setAttribute(
+        element,
+        ~qualifiedName="style",
+        ~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
+      )
     | None => ()
     }
   }
 
   React.useEffect(() => {
-    Webapi.Window.addEventListener("resize", onResize)
-    Some(() => Webapi.Window.removeEventListener("resize", onResize))
+    WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Resize, onResize)
+    Some(() => WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Resize, onResize))
   }, [])
 
   // To force CodeMirror render scrollbar on first render
@@ -1552,30 +1558,50 @@ let make = (~versions: array<string>) => {
           subPanelRef.current->Nullable.toOption,
         ) {
         | (Some(panelElement), Some(leftElement), Some(rightElement), Some(subElement)) =>
-          let rectPanel = Webapi.Element.getBoundingClientRect(panelElement)
+          let rectPanel = WebAPI.Element.getBoundingClientRect(panelElement)
 
           // Update OutputPanel height
-          let offsetTop = Webapi.Element.getBoundingClientRect(subElement)["top"]
-          Webapi.Element.Style.height(subElement, `calc(100vh - ${offsetTop->Float.toString}px)`)
+          let offsetTop = WebAPI.Element.getBoundingClientRect(subElement).top
+          WebAPI.Element.setAttribute(
+            subElement,
+            ~qualifiedName="style",
+            ~value=`height: calc(100vh - ${offsetTop->Float.toString}px)`,
+          )
 
           switch layout {
           | Row =>
-            let delta = Int.toFloat(position) -. rectPanel["left"]
+            let delta = Int.toFloat(position) -. rectPanel.left
 
-            let leftWidth = delta /. rectPanel["width"] *. 100.0
-            let rightWidth = (rectPanel["width"] -. delta) /. rectPanel["width"] *. 100.0
+            let leftWidth = delta /. rectPanel.width *. 100.0
+            let rightWidth = (rectPanel.width -. delta) /. rectPanel.width *. 100.0
 
-            Webapi.Element.Style.width(leftElement, `${leftWidth->Float.toString}%`)
-            Webapi.Element.Style.width(rightElement, `${rightWidth->Float.toString}%`)
+            WebAPI.Element.setAttribute(
+              leftElement,
+              ~qualifiedName="style",
+              ~value=`width: ${leftWidth->Float.toString}%`,
+            )
+            WebAPI.Element.setAttribute(
+              rightElement,
+              ~qualifiedName="style",
+              ~value=`width: ${rightWidth->Float.toString}%`,
+            )
 
           | Column =>
-            let delta = Int.toFloat(position) -. rectPanel["top"]
+            let delta = Int.toFloat(position) -. rectPanel.top
 
-            let topHeight = delta /. rectPanel["height"] *. 100.
-            let bottomHeight = (rectPanel["height"] -. delta) /. rectPanel["height"] *. 100.
+            let topHeight = delta /. rectPanel.height *. 100.
+            let bottomHeight = (rectPanel.height -. delta) /. rectPanel.height *. 100.
 
-            Webapi.Element.Style.height(leftElement, `${topHeight->Float.toString}%`)
-            Webapi.Element.Style.height(rightElement, `${bottomHeight->Float.toString}%`)
+            WebAPI.Element.setAttribute(
+              leftElement,
+              ~qualifiedName="style",
+              ~value=`height: ${topHeight->Float.toString}%`,
+            )
+            WebAPI.Element.setAttribute(
+              rightElement,
+              ~qualifiedName="style",
+              ~value=`height: ${bottomHeight->Float.toString}%`,
+            )
           }
         | _ => ()
         }
@@ -1594,15 +1620,15 @@ let make = (~versions: array<string>) => {
       onMove(position)
     }
 
-    Webapi.Window.addEventListener("mousemove", onMouseMove)
-    Webapi.Window.addEventListener("touchmove", onTouchMove)
-    Webapi.Window.addEventListener("mouseup", onMouseUp)
+    WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Mousemove, onMouseMove)
+    WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Touchmove, onTouchMove)
+    WebAPI.Window.addEventListener(window, WebAPI.EventAPI.Mouseup, onMouseUp)
 
     Some(
       () => {
-        Webapi.Window.removeEventListener("mousemove", onMouseMove)
-        Webapi.Window.removeEventListener("touchmove", onTouchMove)
-        Webapi.Window.removeEventListener("mouseup", onMouseUp)
+        WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Mousemove, onMouseMove)
+        WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Touchmove, onTouchMove)
+        WebAPI.Window.removeEventListener(window, WebAPI.EventAPI.Mouseup, onMouseUp)
       },
     )
   }, [layout])
@@ -1765,10 +1791,10 @@ let make = (~versions: array<string>) => {
     />
     <div
       className={`flex ${layout == Column ? "flex-col" : "flex-row"}`}
-      ref={ReactDOM.Ref.domRef(panelRef)}>
+      ref={ReactDOM.Ref.domRef(panelRef->Obj.magic)}>
       // Left Panel
       <div
-        ref={ReactDOM.Ref.domRef(leftPanelRef)}
+        ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
         className={`${layout == Column ? "h-2/4" : "!h-full"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}>
@@ -1785,10 +1811,10 @@ let make = (~versions: array<string>) => {
             | None => ()
             | Some(timer) => clearTimeout(timer)
             }
-            let timer = setTimeout(() => {
+            let timer = setTimeout(~handler=() => {
               timeoutCompile.current()
               typingTimer.current = None
-            }, 100)
+            }, ~timeout=100)
             typingTimer.current = Some(timer)
           }}
           onMarkerFocus={rowCol => setFocusedRowCol(_prev => Some(rowCol))}
@@ -1797,7 +1823,7 @@ let make = (~versions: array<string>) => {
       </div>
       // Separator
       <div
-        ref={ReactDOM.Ref.domRef(separatorRef)}
+        ref={ReactDOM.Ref.domRef((Obj.magic(separatorRef): React.ref<Nullable.t<Dom.element>>))}
         // TODO: touch-none not applied
         className={`flex items-center justify-center touch-none select-none bg-gray-70 opacity-30 hover:opacity-50 rounded-lg ${layout ==
             Column
@@ -1812,14 +1838,16 @@ let make = (~versions: array<string>) => {
       </div>
       // Right Panel
       <div
-        ref={ReactDOM.Ref.domRef(rightPanelRef)}
+        ref={ReactDOM.Ref.domRef(rightPanelRef->Obj.magic)}
         className={`${layout == Column ? "h-6/15" : "!h-inherit"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}>
         <div className={"flex flex-wrap justify-between w-full " ++ (disabled ? "opacity-50" : "")}>
           {React.array(headers)}
         </div>
-        <div ref={ReactDOM.Ref.domRef(subPanelRef)} className="overflow-auto">
+        <div
+          ref={ReactDOM.Ref.domRef((Obj.magic(subPanelRef): React.ref<Nullable.t<Dom.element>>))}
+          className="overflow-auto">
           <OutputPanel currentTab compilerDispatch compilerState editorCode />
         </div>
       </div>

src/Playground.res

@@ -33,10 +33,8 @@ let default = props => {
 
 let getStaticProps: Next.GetStaticProps.t<props, _> = async _ => {
   let versions = {
-    let response = await Webapi.Fetch.fetch(
-      "https://cdn.rescript-lang.org/playground-bundles/versions.json",
-    )
-    let json = await Webapi.Fetch.Response.json(response)
+    let response = await fetch("https://cdn.rescript-lang.org/playground-bundles/versions.json")
+    let json = await WebAPI.Response.json(response)
     json
     ->JSON.Decode.array
     ->Option.getOrThrow

src/Try.res

@@ -1,5 +1,5 @@
-type window = {document: Dom.document}
-type t = {window: window}
+type window = {document: WebAPI.DOMAPI.document}
+type t = {window: WebAPI.DOMAPI.window}
 
 @module("jsdom") @new
 external make: string => t = "JSDOM"