Use new WebAPI

package.json

@@ -30,10 +30,13 @@
   "devDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rescript": "^11.0.0"
+    "rescript": "^12.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@rescript/webapi": "^0.1.0-experimental-82a7689"
   }
 }

rescript.json

@@ -5,8 +5,11 @@
     "mode": "classic"
   },
   "sources": [{ "dir": "src", "subdirs": true }],
-  "package-specs": [{ "module": "commonjs", "in-source": true }],
+  "package-specs": [{ "module": "esmodule", "in-source": true }],
   "suffix": ".bs.js",
+  "bs-dependencies": [
+    "@rescript/webapi"
+  ],
   "bs-dev-dependencies": [],
   "bsc-flags": [],
   "uncurried": false

src/ReactDOM.res

@@ -6,14 +6,17 @@
  calls and add the appropriate `require("react-dom")` in the file calling this `render` */
 
 // Helper so that ReactDOM itself doesn't bring any runtime
+
+open WebAPI
+
 @val @return(nullable)
-external querySelector: string => option<Dom.element> = "document.querySelector"
+external querySelector: string => option<DOMAPI.element> = "document.querySelector"
 
 @module("react-dom")
 @deprecated(
   "ReactDOM.render is no longer supported in React 18. Use ReactDOM.Client.createRoot instead."
 )
-external render: (React.element, Dom.element) => unit = "render"
+external render: (React.element, DOMAPI.element) => unit = "render"
 
 module Client = {
   module Root = {
@@ -25,37 +28,37 @@ module Client = {
   }
 
   @module("react-dom/client")
-  external createRoot: Dom.element => Root.t = "createRoot"
+  external createRoot: DOMAPI.element => Root.t = "createRoot"
 
   @module("react-dom/client")
-  external hydrateRoot: (Dom.element, React.element) => Root.t = "hydrateRoot"
+  external hydrateRoot: (DOMAPI.element, React.element) => Root.t = "hydrateRoot"
 }
 
 @module("react-dom")
 @deprecated(
   "ReactDOM.hydrate is no longer supported in React 18. Use ReactDOM.Client.hydrateRoot instead."
 )
-external hydrate: (React.element, Dom.element) => unit = "hydrate"
+external hydrate: (React.element, DOMAPI.element) => unit = "hydrate"
 
 @module("react-dom")
-external createPortal: (React.element, Dom.element) => React.element = "createPortal"
+external createPortal: (React.element, DOMAPI.element) => React.element = "createPortal"
 
 @module("react-dom")
 @deprecated(
   "ReactDOM.unmountComponentAtNode is no longer supported in React 18. Use ReactDOM.Client.Root.unmount instead."
 )
-external unmountComponentAtNode: Dom.element => unit = "unmountComponentAtNode"
+external unmountComponentAtNode: DOMAPI.element => unit = "unmountComponentAtNode"
 
-external domElementToObj: Dom.element => {..} = "%identity"
+external domElementToObj: DOMAPI.element => {..} = "%identity"
 
 type style = ReactDOMStyle.t
 
 type domRef = JsxDOM.domRef
 
 module Ref = {
   type t = domRef
-  type currentDomRef = React.ref<Js.nullable<Dom.element>>
-  type callbackDomRef = Js.nullable<Dom.element> => unit
+  type currentDomRef = React.ref<Js.nullable<DOMAPI.element>>
+  type callbackDomRef = Js.nullable<DOMAPI.element> => unit
 
   external domRef: currentDomRef => domRef = "%identity"
   external callbackDomRef: callbackDomRef => domRef = "%identity"
@@ -77,7 +80,7 @@ module Props = {
     @optional
     key: string,
     @optional
-    ref: Js.nullable<Dom.element> => unit,
+    ref: Js.nullable<DOMAPI.element> => unit,
     /* accessibility */
     /* https://www.w3.org/TR/wai-aria-1.1/ */
     /* https://accessibilityresources.org/<aria-tag> is a great resource for these */