React 18 (#46)

* React 18 support

* Fix module typo

* Uncurried useTransition

* Add ReactDOM.Client

* Fix build errors

* Address PR feedback

* Fix instances of useTransition

Co-authored-by: Tom Sherman <the.tomsherman@gmail.com>

Author: whitchapman

src/React.res

@@ -367,6 +367,60 @@ external useImperativeHandle7: (
   ('a, 'b, 'c, 'd, 'e, 'f, 'g),
 ) => unit = "useImperativeHandle"
 
+@module("react") external useId: unit => string = "useId"
+
+@module("react") external useDeferredValue: 'value => 'value = "useDeferredValue"
+
+@module("react")
+external useTransition: unit => (bool, (. unit => unit) => unit) = "useTransition"
+
+@module("react")
+external useInsertionEffect: (@uncurry (unit => option<unit => unit>)) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect0: (@uncurry (unit => option<unit => unit>), @as(json`[]`) _) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect1: (@uncurry (unit => option<unit => unit>), array<'a>) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect2: (@uncurry (unit => option<unit => unit>), ('a, 'b)) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect3: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c)) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect4: (@uncurry (unit => option<unit => unit>), ('a, 'b, 'c, 'd)) => unit =
+  "useInsertionEffect"
+@module("react")
+external useInsertionEffect5: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e),
+) => unit = "useInsertionEffect"
+@module("react")
+external useInsertionEffect6: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f),
+) => unit = "useInsertionEffect"
+@module("react")
+external useInsertionEffect7: (
+  @uncurry (unit => option<unit => unit>),
+  ('a, 'b, 'c, 'd, 'e, 'f, 'g),
+) => unit = "useInsertionEffect"
+
+@module("react")
+external useSyncExternalStore: (
+  ~subscribe: @uncurry ((unit => unit) => ((. unit) => unit)),
+  ~getSnapshot: @uncurry unit => 'state,
+) => 'state = "useSyncExternalStore"
+
+@module("react")
+external useSyncExternalStoreWithServerSnapshot: (
+  ~subscribe: @uncurry ((unit => unit) => ((. unit) => unit)),
+  ~getSnapshot: @uncurry unit => 'state,
+  ~getServerSnapshot: @uncurry unit => 'state,
+) => 'state = "useSyncExternalStore"
+
 module Uncurried = {
   @module("react")
   external useState: (@uncurry (unit => 'state)) => ('state, (. 'state => 'state) => unit) =
@@ -433,14 +487,6 @@ module Uncurried = {
   ) => callback<'input, 'output> = "useCallback"
 }
 
-type transitionConfig = {timeoutMs: int}
-
-@module("react")
-external useTransition: (
-  ~config: transitionConfig=?,
-  unit,
-) => (callback<callback<unit, unit>, unit>, bool) = "useTransition"
-
 @set
 external setDisplayName: (component<'props>, string) => unit = "displayName"
 

src/ReactDOM.bs.js

@@ -10,27 +10,35 @@
 external querySelector: string => option<Dom.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"
 
-module Experimental = {
-  type root
+module Client = {
 
-  @module("react-dom/client")
-  external createRoot: Dom.element => root = "createRoot"
+  module Root = {
+    type t
+
+    @send external render: (t, React.element) => unit = "render"
+
+    @send external unmount: (t, unit) => unit = "unmount"
+  }
 
   @module("react-dom/client")
-  external createBlockingRoot: Dom.element => root = "createBlockingRoot"
+  external createRoot: Dom.element => Root.t = "createRoot"
 
-  @send external render: (root, React.element) => unit = "render"
+  @module("react-dom/client")
+  external hydrateRoot: (Dom.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"
 
 @module("react-dom")
 external createPortal: (React.element, Dom.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 domElementToObj: Dom.element => {..} = "%identity"

src/ReactDOM.res

@@ -13,7 +13,7 @@ external querySelector: string => option<Dom.element> = "document.querySelector"
 external render: (React.element, Dom.element) => unit = "render"
 
 module Experimental = {
-  type root = ReactDOM.Experimental.root
+  type root = ReactDOM.Client.Root.t
 
   @module("react-dom")
   external createRoot: Dom.element => root = "createRoot"

src/v3/ReactDOM_V3.res

@@ -437,13 +437,8 @@ module Uncurried = {
   ) => callback<'input, 'output> = "useCallback"
 }
 
-type transitionConfig = React.transitionConfig
-
 @module("react")
-external useTransition: (
-  ~config: transitionConfig=?,
-  unit,
-) => (callback<callback<unit, unit>, unit>, bool) = "useTransition"
+external useTransition: unit => (bool, (. unit => unit) => unit) = "useTransition"
 
 @set
 external setDisplayName: (component<'props>, string) => unit = "displayName"