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 */

src/ReactEvent.res

@@ -5,40 +5,43 @@ module MakeEventWithType = (
     type t
   },
 ) => {
+  open WebAPI
+
   @get external bubbles: Type.t => bool = "bubbles"
   @get external cancelable: Type.t => bool = "cancelable"
   @get
-  external currentTarget: Type.t => {..} = "currentTarget" /* Should return Dom.eventTarget */
+  external currentTarget: Type.t => DOMAPI.node = "currentTarget"
   @get external defaultPrevented: Type.t => bool = "defaultPrevented"
   @get external eventPhase: Type.t => int = "eventPhase"
   @get external isTrusted: Type.t => bool = "isTrusted"
-  @get external nativeEvent: Type.t => {..} = "nativeEvent" /* Should return Dom.event */
+  @get external nativeEvent: Type.t => EventAPI.event = "nativeEvent"
   @send external preventDefault: Type.t => unit = "preventDefault"
   @send
   external isDefaultPrevented: Type.t => bool = "isDefaultPrevented"
   @send external stopPropagation: Type.t => unit = "stopPropagation"
   @send
   external isPropagationStopped: Type.t => bool = "isPropagationStopped"
-  @get external target: Type.t => {..} = "target" /* Should return Dom.eventTarget */
+  @get external target: Type.t => DOMAPI.node = "target"
   @get external timeStamp: Type.t => float = "timeStamp"
   @get external type_: Type.t => string = "type"
   @send external persist: Type.t => unit = "persist"
 }
 
+open WebAPI
+
 module Synthetic = {
   type tag = JsxEvent.Synthetic.tag
   type t = synthetic<tag>
   @get external bubbles: synthetic<'a> => bool = "bubbles"
   @get external cancelable: synthetic<'a> => bool = "cancelable"
   @get
-  external currentTarget: synthetic<'a> => {..} =
-    "currentTarget" /* Should return Dom.eventTarget */
+  external currentTarget: synthetic<'a> => DOMAPI.node = "currentTarget"
   @get
   external defaultPrevented: synthetic<'a> => bool = "defaultPrevented"
   @get external eventPhase: synthetic<'a> => int = "eventPhase"
   @get external isTrusted: synthetic<'a> => bool = "isTrusted"
   @get
-  external nativeEvent: synthetic<'a> => {..} = "nativeEvent" /* Should return Dom.event */
+  external nativeEvent: synthetic<'a> => EventAPI.event = "nativeEvent"
   @send
   external preventDefault: synthetic<'a> => unit = "preventDefault"
   @send
@@ -47,7 +50,7 @@ module Synthetic = {
   external stopPropagation: synthetic<'a> => unit = "stopPropagation"
   @send
   external isPropagationStopped: synthetic<'a> => bool = "isPropagationStopped"
-  @get external target: synthetic<'a> => {..} = "target" /* Should return Dom.eventTarget */
+  @get external target: synthetic<'a> => DOMAPI.node = "target"
   @get external timeStamp: synthetic<'a> => float = "timeStamp"
   @get external type_: synthetic<'a> => string = "type"
   @send external persist: synthetic<'a> => unit = "persist"
@@ -62,7 +65,7 @@ module Clipboard = {
   include MakeEventWithType({
     type t = t
   })
-  @get external clipboardData: t => {..} = "clipboardData" /* Should return Dom.dataTransfer */
+  @get external clipboardData: t => WebAPI.UIEventsAPI.dataTransfer = "clipboardData"
 }
 
 module Composition = {
@@ -103,7 +106,7 @@ module Focus = {
     type t = t
   })
   @get @return(nullable)
-  external relatedTarget: t => option<{..}> = "relatedTarget" /* Should return Dom.eventTarget */
+  external relatedTarget: t => option<EventAPI.eventTarget> = "relatedTarget"
 }
 
 module Form = {
@@ -134,7 +137,7 @@ module Mouse = {
   @get external pageX: t => int = "pageX"
   @get external pageY: t => int = "pageY"
   @get @return(nullable)
-  external relatedTarget: t => option<{..}> = "relatedTarget" /* Should return Dom.eventTarget */
+  external relatedTarget: t => option<EventAPI.eventTarget> = "relatedTarget"
   @get external screenX: t => int = "screenX"
   @get external screenY: t => int = "screenY"
   @get external shiftKey: t => bool = "shiftKey"
@@ -149,7 +152,7 @@ module Pointer = {
 
   // UIEvent
   @get external detail: t => int = "detail"
-  @get external view: t => Dom.window = "view" /* Should return DOMAbstractView/WindowProxy */
+  @get external view: t => DOMAPI.window = "view"
 
   // MouseEvent
   @get external screenX: t => int = "screenX"
@@ -172,7 +175,7 @@ module Pointer = {
   @get external buttons: t => int = "buttons"
 
   @get @return(nullable)
-  external relatedTarget: t => option<{..}> = "relatedTarget" /* Should return Dom.eventTarget */
+  external relatedTarget: t => option<EventAPI.eventTarget> = "relatedTarget"
 
   // PointerEvent
   @get external pointerId: t => Dom.eventPointerId = "pointerId"
@@ -202,14 +205,14 @@ module Touch = {
     type t = t
   })
   @get external altKey: t => bool = "altKey"
-  @get external changedTouches: t => {..} = "changedTouches" /* Should return Dom.touchList */
+  @get external changedTouches: t => UIEventsAPI.touchList = "changedTouches"
   @get external ctrlKey: t => bool = "ctrlKey"
   @send
   external getModifierState: (t, string) => bool = "getModifierState"
   @get external metaKey: t => bool = "metaKey"
   @get external shiftKey: t => bool = "shiftKey"
-  @get external targetTouches: t => {..} = "targetTouches" /* Should return Dom.touchList */
-  @get external touches: t => {..} = "touches" /* Should return Dom.touchList */
+  @get external targetTouches: t => UIEventsAPI.touchList = "targetTouches"
+  @get external touches: t => UIEventsAPI.touchList = "touches"
 }
 
 module UI = {
@@ -219,7 +222,7 @@ module UI = {
     type t = t
   })
   @get external detail: t => int = "detail"
-  @get external view: t => Dom.window = "view" /* Should return DOMAbstractView/WindowProxy */
+  @get external view: t => DOMAPI.window = "view"
 }
 
 module Wheel = {

src/RescriptReactRouter.res

@@ -55,7 +55,7 @@ let arrayToList = a => {
     if i < 0 {
       res
     } else {
-      tolist(i - 1, list{Array.unsafe_get(a, i), ...res})
+      tolist(i - 1, list{Array.getUnsafe(a, i), ...res})
     }
   tolist(Array.length(a) - 1, list{})
 }