Support for React 19

ppx/test/lower.t/run.t

@@ -94,7 +94,7 @@
                           ([@merlin.hide] ReactDOM.domProps)(
                             ~children=
                               examples
-                              |> List.map(e =>
+                              |> List.map(e => {
                                    let Key = e.path;
                                    ReactDOM.jsxKeyed(
                                      ~key=Key,
@@ -120,7 +120,7 @@
                                      ),
                                      (),
                                    );
-                                 )
+                                 })
                               |> React.list,
                             (),
                           ),

src/React.re

@@ -469,6 +469,7 @@ external displayName: component('props) => option(string) = "displayName";
 
 /* This is used as return values */
 type callback('input, 'output) = 'input => 'output;
+type callbackAsync('input, 'output) = 'input => Js.Promise.t('output);
 
 /*
  * Yeah, we know this api isn't great. tl;dr: useReducer instead.
@@ -886,6 +887,71 @@ external useDebugValue: ('value, ~format: 'value => string=?, unit) => unit =
 
 module Experimental = {
   /* This module is used to bind to APIs for future versions of React. There is no guarantee of backwards compatibility or stability. */
+  [@mel.module "react"] external usePromise: Js.Promise.t('a) => 'a = "use";
+  [@mel.module "react"] external useContext: Context.t('a) => 'a = "use";
+  [@mel.module "react"]
+  external useTransitionAsync:
+    unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =
+    "useTransition";
+
+  /* https://es.react.dev/reference/react/useOptimistic */
+  [@mel.module "react"]
+  external useOptimistic:
+    ('state, ('state, 'optimisticValue) => 'state) =>
+    ('state, 'optimisticValue => unit) =
+    "useOptimistic";
+
+  module FormData = {
+    /* This file is embeded since https://github.com/melange-re/melange/pull/1153 gets merged */
+
+    type t;
+    type file;
+    type blob;
+    type entryValue;
+
+    [@mel.new] external make: unit => t = "FormData";
+    [@mel.send.pipe: t] external append: (string, string) => unit = "append";
+    [@mel.send.pipe: t] external delete: string => unit = "delete";
+    [@mel.send.pipe: t] external get: string => option(entryValue) = "get";
+    [@mel.send.pipe: t]
+    external getAll: string => array(entryValue) = "getAll";
+    [@mel.send.pipe: t] external set: (string, string) => unit = "set";
+    [@mel.send.pipe: t] external has: string => bool = "has";
+    [@mel.send] external keys: t => Js.Iterator.t(string) = "keys";
+    [@mel.send] external values: t => Js.Iterator.t(entryValue) = "values";
+
+    [@mel.send.pipe: t]
+    external appendObject: (string, Js.t({..}), ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external appendBlob: (string, blob, ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external appendFile: (string, file, ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external setObject: (string, Js.t({..}), ~filename: string=?) => unit =
+      "set";
+
+    [@mel.send.pipe: t]
+    external setBlob: (string, blob, ~filename: string=?) => unit = "set";
+
+    [@mel.send.pipe: t]
+    external setFile: (string, file, ~filename: string=?) => unit = "set";
+
+    [@mel.send]
+    external entries: t => Js.Iterator.t((string, entryValue)) = "entries";
+  };
 
-  [@mel.module "react"] external use: Js.Promise.t('a) => 'a = "use";
+  type formAction;
+
+  /* https://react.dev/reference/react/useActionState */
+  [@mel.module "react"]
+  external useActionState:
+    (('state, FormData.t) => unit, 'state, ~permalink: bool=?) =>
+    ('state, formAction, bool) =
+    "useActionState";
 };

src/React.rei

@@ -186,8 +186,9 @@ external useReducerWithMapState:
   ('state, 'action => unit) =
   "useReducer";
 
-/* This is used as return values  */
+/* This is used as return values */
 type callback('input, 'output) = 'input => 'output;
+type callbackAsync('input, 'output) = 'input => Js.Promise.t('output);
 
 [@mel.module "react"]
 external useSyncExternalStore:
@@ -565,15 +566,81 @@ module Uncurried: {
 };
 
 [@mel.module "react"]
-external startTransition: ([@mel.uncurry] (unit => unit)) => unit = "startTransition";
+external startTransition: ([@mel.uncurry] (unit => unit)) => unit =
+  "startTransition";
 
 [@mel.module "react"]
 external useTransition: unit => (bool, callback(callback(unit, unit), unit)) =
   "useTransition";
 
 module Experimental: {
   /* This module is used to bind to APIs for future versions of React. There is no guarantee of backwards compatibility or stability. */
-  [@mel.module "react"] external use: Js.Promise.t('a) => 'a = "use";
+  [@mel.module "react"] external usePromise: Js.Promise.t('a) => 'a = "use";
+  [@mel.module "react"] external useContext: Context.t('a) => 'a = "use";
+
+  [@mel.module "react"]
+  external useOptimistic:
+    ('state, ('state, 'optimisticValue) => 'state) =>
+    ('state, 'optimisticValue => unit) =
+    "useOptimistic";
+
+  [@mel.module "react"]
+  external useTransitionAsync:
+    unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =
+    "useTransition";
+
+  module FormData: {
+    /* This file is embeded since https://github.com/melange-re/melange/pull/1153 gets merged */
+
+    type t;
+    type file;
+    type blob;
+    type entryValue;
+
+    [@mel.new] external make: unit => t = "FormData";
+    [@mel.send.pipe: t] external append: (string, string) => unit = "append";
+    [@mel.send.pipe: t] external delete: string => unit = "delete";
+    [@mel.send.pipe: t] external get: string => option(entryValue) = "get";
+    [@mel.send.pipe: t]
+    external getAll: string => array(entryValue) = "getAll";
+    [@mel.send.pipe: t] external set: (string, string) => unit = "set";
+    [@mel.send.pipe: t] external has: string => bool = "has";
+    [@mel.send] external keys: t => Js.Iterator.t(string) = "keys";
+    [@mel.send] external values: t => Js.Iterator.t(entryValue) = "values";
+
+    [@mel.send.pipe: t]
+    external appendObject: (string, Js.t({..}), ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external appendBlob: (string, blob, ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external appendFile: (string, file, ~filename: string=?) => unit =
+      "append";
+
+    [@mel.send.pipe: t]
+    external setObject: (string, Js.t({..}), ~filename: string=?) => unit =
+      "set";
+
+    [@mel.send.pipe: t]
+    external setBlob: (string, blob, ~filename: string=?) => unit = "set";
+
+    [@mel.send.pipe: t]
+    external setFile: (string, file, ~filename: string=?) => unit = "set";
+
+    [@mel.send]
+    external entries: t => Js.Iterator.t((string, entryValue)) = "entries";
+  };
+
+  type formAction;
+
+  [@mel.module "react"]
+  external useActionState:
+    (('state, FormData.t) => unit, 'state, ~permalink: bool=?) =>
+    ('state, formAction, bool) =
+    "useActionState";
 };
 
 [@mel.set]

src/ReactDOM.re

@@ -652,7 +652,7 @@ type domProps = {
   [@mel.optional]
   acceptCharset: option(string),
   [@mel.optional]
-  action: option(string), /* uri */
+  action: option(string),
   [@mel.optional]
   allowFullScreen: option(bool),
   [@mel.optional]

src/ReactDOM.rei

@@ -653,7 +653,7 @@ type domProps = {
   [@mel.optional]
   acceptCharset: option(string),
   [@mel.optional]
-  action: option(string), /* uri */
+  action: option(string),
   [@mel.optional]
   allowFullScreen: option(bool),
   [@mel.optional]

src/ReactDOMServer.rei

@@ -4,5 +4,3 @@ external renderToString: React.element => string = "renderToString";
 [@mel.module "react-dom/server"]
 external renderToStaticMarkup: React.element => string =
   "renderToStaticMarkup";
-
-

src/ReactDOMTestUtils.re

@@ -2,7 +2,7 @@ type undefined = Js.undefined(unit);
 
 let undefined: undefined = Js.Undefined.empty;
 
-[@mel.module "react-dom/test-utils"]
+[@mel.module "react"]
 external reactAct: ((. unit) => undefined) => unit = "act";
 
 let act: (unit => unit) => unit =
@@ -15,7 +15,7 @@ let act: (unit => unit) => unit =
     reactAct(reactFunc);
   };
 
-[@mel.module "react-dom/test-utils"]
+[@mel.module "react"]
 external reactActAsync: ((. unit) => Js.Promise.t('a)) => Js.Promise.t(unit) =
   "act";
 

src/dune

@@ -14,7 +14,7 @@
   ReasonReactErrorBoundary)
  (preprocess
   (pps melange.ppx reason-react-ppx))
- (libraries melange.dom)
+ (libraries melange.dom melange.js)
  (modes melange))
 
 (library

test/Form__test.re

@@ -0,0 +1,153 @@
+open Jest;
+open Jest.Expect;
+open ReactDOMTestUtils;
+open Belt;
+
+module FormData = React.Experimental.FormData;
+
+/* https://react.dev/blog/2022/03/08/react-18-upgrade-guide#configuring-your-testing-environment */
+[%%mel.raw "globalThis.IS_REACT_ACT_ENVIRONMENT = true"];
+
+type message = {
+  text: string,
+  sending: bool,
+  key: int,
+};
+
+[@mel.send.pipe: Dom.element] external reset: unit = "reset";
+
+let (let.await) = (p, f) => Js.Promise.then_(f, p);
+
+module Thread = {
+  [@react.component]
+  let make = (~messages, ~sendMessage) => {
+    let formRef = React.useRef(Js.Nullable.null);
+    let (optimisticMessages, addOptimisticMessage) =
+      React.Experimental.useOptimistic(messages, (state, newMessage) =>
+        [
+          {text: newMessage, sending: true, key: List.length(state) + 1},
+          ...state,
+        ]
+      );
+
+    let formAction = formData => {
+      let formMessage = FormData.get("message", formData);
+      switch (formMessage) {
+      | Some(entry) =>
+        switch (Js.Types.classify(entry)) {
+        | JSString(text) =>
+          addOptimisticMessage(text);
+          switch (Js.Nullable.toOption(formRef.current)) {
+          | Some(form) => reset(form)
+          | None => ()
+          };
+          let.await _ = sendMessage(formData);
+          Js.Promise.resolve();
+        | _ => Js.Promise.resolve()
+        }
+      | None => Js.Promise.resolve()
+      };
+    };
+    <>
+      {{
+         optimisticMessages->Belt.List.map(message =>
+           <div key={Int.toString(message.key)}>
+             {React.string(message.text)}
+             {message.sending
+                ? React.null
+                : <small> {React.string("(Enviando...)")} </small>}
+           </div>
+         );
+       }
+       ->Belt.List.toArray
+       ->React.array}
+      {React.cloneElement(
+         ReactDOM.createElement(
+           "form",
+           ~props=ReactDOM.domProps(~ref=ReactDOM.Ref.domRef(formRef), ()),
+           [|
+             <input type_="text" name="message" placeholder="Hola!" />,
+             <button type_="submit"> {React.string("Enviar")} </button>,
+           |],
+         ),
+         {"action": formAction},
+       )}
+    </>;
+  };
+};
+
+module App = {
+  let deliverMessage = message => {
+    Js.Promise.resolve(message);
+  };
+
+  [@react.component]
+  let make = () => {
+    let (messages, setMessages) =
+      React.useState(() => [{text: "¡Hola!", sending: false, key: 1}]);
+
+    let sendMessage = formData => {
+      let formMessage = FormData.get("message", formData);
+      switch (formMessage) {
+      | Some(message) =>
+        let.await entry = deliverMessage(message);
+        switch (Js.Types.classify(entry)) {
+        | JSString(text) =>
+          let _ =
+            setMessages(messages =>
+              [{text, sending: true, key: 1}, ...messages]
+            );
+          Js.Promise.resolve();
+        | _ => Js.Promise.resolve()
+        };
+      | None => Js.Promise.resolve()
+      };
+    };
+
+    <Thread messages sendMessage />;
+  };
+};
+
+describe("Form with useOptimistic", () => {
+  let container = ref(None);
+
+  beforeEach(prepareContainer(container));
+  afterEach(cleanupContainer(container));
+
+  test("should render the form", () => {
+    let container = getContainer(container);
+    let root = ReactDOM.Client.createRoot(container);
+
+    act(() => ReactDOM.Client.render(root, <App />));
+
+    expect(
+      container
+      ->DOM.findBySelectorAndTextContent("button", "0")
+      ->Option.isSome,
+    )
+    ->toBe(true);
+
+    let button = container->DOM.findBySelector("button");
+
+    act(() => {
+      switch (button) {
+      | Some(button) => Simulate.click(button)
+      | None => ()
+      }
+    });
+
+    expect(
+      container
+      ->DOM.findBySelectorAndTextContent("button", "0")
+      ->Option.isSome,
+    )
+    ->toBe(false);
+
+    expect(
+      container
+      ->DOM.findBySelectorAndTextContent("button", "1")
+      ->Option.isSome,
+    )
+    ->toBe(true);
+  });
+});