Support for React 19 #846

davesnx · 2024-07-16T10:26:03Z

This PR adds some of the new functions on React 19.

useActionState It relies on FormData and depends on melange.dom's PR (Add FormData under melange.dom melange-re/melange#1153, for passing the build and testing other stuff FormData is vendored which we won't publish with FormData here).
Binds to useOptimistic
Change Experimental.use to Experimental.usePromise and add Experimental.useContext
Change act in react-dom/test-utils
Add deprecation in ReactDOMTestUtils
Merged Enable ref as valid prop #862 into it
Merged Replace react dom's testing library with ReactTestingLibrary #859 into it

* 'main' of github.com:/reasonml/reason-react: feat(react): add startTransition (#838) feat(react): add isValidElement (#837)

* 'main' of github.com:/reasonml/reason-react: Remove type callback duplicate

src/FormData.ml

src/ReactDOM.re

src/FormData.ml

src/React.re

* 'main' of github.com:/reasonml/reason-react: fix: type of pipeable stream to allow objects with keys (#854) reason-react-ppx: + lower bound in ocaml add missing entries to changelog Fix multi-child fragment (#852) update compiler version in makefile cmd (#851) Add locations-check test (#844) fix: re-enable failing tests + fix location tests (#850) test: repro #840 (#842) Add CSS Box Alignment Module Level 3 (#847)

src/React.re

jchavarri · 2024-11-20T12:14:28Z

src/React.rei

+  [@mel.module "react"]
+  external useTransitionAsync:
+    unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =
+    "useTransition";


Prob out of scope, but now that new bindings are being added, and given they're new and experimental, it's good chance to use chatgpt to add comments to them? i got this for this one with some tweaking:

Suggested change

[@mel.module "react"]

external useTransitionAsync:

unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =

"useTransition";

/**

* `useTransitionAsync` is a binding to React's `useTransition` hook.

*

* This hook lets you update state without blocking the UI.

*

* ### Return Value

* - `(bool, callbackAsync(callbackAsync(unit, unit), unit))`: A tuple containing:

* - `bool`: Whether the transition is pending.

* - A function to start the transition.

*

* ### Example

* ```reason

* let (isPending, startTransition) = useTransitionAsync();

*

* /* Start a transition */

* startTransition(() => {

* /* Deferred update logic */

* });

*

* if (isPending) {

* /* Show loading indicator */

* }

* ```

*/

[@mel.module "react"]

external useTransitionAsync:

unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =

"useTransition";

I think this is a good idea but I'd recommend doing it in a future PR. this is already quite a bit dense for revewing.

jchavarri · 2024-11-20T12:15:25Z

src/ReactDOM.re

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


This comment and the one in rei were useful imo. Or were they not accurate?

@davesnx wasn't there something about this field that bothered you a bit?

can you link us to the issue about this? I think something about action being a function for RSC or something?

Reverting this commit.

action is problematic in React 19 since it overloads it. formAction and action in this PR they are sync (while in React can be async and have different behaviour), if users want to use it they would need to use createElement + cloneElement or one of those tricks.

src/React.re

jchavarri · 2024-11-20T12:20:44Z

src/React.rei

+    "useOptimistic";
+
+  [@mel.module "react"]
+  external useTransitionAsync:


Is it expected that there will be another external for useTransition? Otherwise, why the Async suffix?

useTransition is sync (and stable since R18) and this is Experimental.useTransitionAsync

jchavarri · 2024-11-20T12:22:00Z

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"]


If this is not gonna be in react-dom anymore, I find it confusing to keep it in ReactDOMTestUtils. Should we move it to React for consistency / principle of less surprise?

Good point, I should probably keep both and add a deprecation

idk if deprecation is necessary. A ton of other things are breaking upstream for React 19, so maybe we can just move it directly.

agree this should be moved to react.re if it's coming from require('react')

There are a few "react" in ReactDOM module. I might probably propose to have this as a strict rule and align those as well in a future PR

Co-authored-by: Javier Chávarri <[email protected]>

anmonteiro · 2024-11-24T05:39:48Z

src/React.re

+
+  /* https://react.dev/reference/react/useOptimistic */
+  [@mel.module "react"]
+  external useOptimistic:


can we @mel.uncurry some of these callbacks?

Since I don't want to push code to this branch directly, done here: #867

anmonteiro · 2024-11-24T05:48:49Z

src/React.re

+  /* https://react.dev/reference/react/useActionState */
+  [@mel.module "react"]
+  external useActionState:
+    (('state, FormData.t) => unit, 'state, ~permalink: bool=?) =>


should we add a unit argument at the end?

Since I don't want to push code to this branch directly, done here: #867

anmonteiro · 2024-11-24T05:53:50Z

@davesnx this is a big PR and there are some big changes. do you have a plan in your head or a link to something you've written about how to land these effectively in reason-react?

more specifically about this PR, how do you want to move forward and what's missing?

davesnx · 2024-11-25T10:57:58Z

I was planning on using the branch "19" as a release candidate branch for all PRs depending on it, test it different repos (ahrefs included) and, if everything is good then do the opam release

* '19' of github.com:/reasonml/reason-react: Update src/React.re Update src/React.re Update src/React.re

* Install melange-testing-library * Install melange-testing-library npm deps * Vendor melange-testing-library * Fix Form__test with RTL * Start migrating Hooks__test * Remove dependency * Remove unused code from Form__test * Add a jest-devtoolsgs * Add a jest-devtools * Migrate Hooks and Form into RTL * Add demo to manually test easily * Use Uncurried for tests * Migrate all React__test * Force install since we are dealing with R19 * Snapshot with lower {} * Remove jest from demo/dune * Add comment on install --force * Bind React.act and React.actAsync * Bind React.act and React.actAsync * Use React.act as async version only * Test react.act and react.actasync * Fix hola test :(

* Install melange-testing-library * Install melange-testing-library npm deps * Vendor melange-testing-library * Fix Form__test with RTL * Start migrating Hooks__test * Remove dependency * Remove unused code from Form__test * Add a jest-devtoolsgs * Add a jest-devtools * Migrate Hooks and Form into RTL * Add demo to manually test easily * Use Uncurried for tests * Migrate all React__test * Force install since we are dealing with R19 * Snapshot with lower {} * Enable ref in ppx * Add jest test for ref * Remove jest from demo/dune * Add comment on install --force * Improve test from checking ref * Bind React.act and React.actAsync * Bind React.act and React.actAsync

* 'main' of github.com:/reasonml/reason-react: Remove raise annotations and fix locations on errors (#863) ppx: support "custom children" in uppercase components without having to wrap in array literal (#823)

* '19' of github.com:/reasonml/reason-react: Enable ref as valid prop (#862) Replace react dom's testing library with ReactTestingLibrary (#859)

davesnx added 3 commits July 16, 2024 11:39

Add useTransition with async support

4d9eeca

Add useTransitionAsync into the interface

39189e0

Add useOptimistic

b869bd3

davesnx mentioned this pull request Jul 16, 2024

Add FormData under melange.dom melange-re/melange#1153

Merged

davesnx added 10 commits July 16, 2024 13:46

Rename use to usePromise and add useContext

e47a0ca

Move useTransitionAsync to Experimental

81942e4

Add formStatus to interface

b823e5c

Leftover from removing useTransitionAsync to Experimental

c4a7fdd

Add action_ and action_Async in ReactDOM props

fd7faa4

Fix reference to function on formStatus

97dd3d3

Merge branch 'main' of github.com:/reasonml/reason-react into 19

e56f547

* 'main' of github.com:/reasonml/reason-react: feat(react): add startTransition (#838) feat(react): add isValidElement (#837)

Embed FormData for now

06b1da6

Add test of Form with useOptimistic

9031415

Merge branch 'main' of github.com:/reasonml/reason-react into 19

52c8144

* 'main' of github.com:/reasonml/reason-react: Remove type callback duplicate

anmonteiro reviewed Aug 10, 2024

View reviewed changes

src/FormData.ml Outdated Show resolved Hide resolved

anmonteiro reviewed Aug 10, 2024

View reviewed changes

src/ReactDOM.re Outdated Show resolved Hide resolved

anmonteiro reviewed Aug 11, 2024

View reviewed changes

src/FormData.ml Outdated Show resolved Hide resolved

anmonteiro reviewed Aug 11, 2024

View reviewed changes

src/React.re Outdated Show resolved Hide resolved

anmonteiro reviewed Aug 11, 2024

View reviewed changes

src/React.re Show resolved Hide resolved

davesnx added 10 commits November 15, 2024 17:08

Embed FormData into ReactDOM

2190bb9

Move formStatus into ReactDOM

e3a97dd

Run formatter

ea1ff9a

Bind React.useActionState instead of ReactDOM.useFormState

a1cbb4f

Remove React.use being 'a => 'b

1ad8321

Revert change on ReactDOM's prop 'action'

447ca53

useAction state published in React.rei

50bde6a

Remove React.use being 'a => 'b

16090ac

Use act from 'react' inseat of react-dom/test-utils

e6fdb2e

davesnx mentioned this pull request Nov 19, 2024

Replace react dom's testing library with ReactTestingLibrary #859

Merged

davesnx mentioned this pull request Nov 19, 2024

useState uncurry #860

Draft

Snapshot with lower {}

ca13b5a

This was referenced Nov 20, 2024

Enable ref as valid prop #862

Merged

Remove raise annotations and fix locations on errors #863

Merged

feat: add more React canary hooks #829

Closed

jchavarri reviewed Nov 20, 2024

View reviewed changes

davesnx and others added 3 commits November 20, 2024 14:19

Update src/React.re

563d8af

Co-authored-by: Javier Chávarri <[email protected]>

Update src/React.re

9ce19ea

Co-authored-by: Javier Chávarri <[email protected]>

Update src/React.re

5636b99

Co-authored-by: Javier Chávarri <[email protected]>

anmonteiro reviewed Nov 24, 2024

View reviewed changes

davesnx added 3 commits November 25, 2024 15:27

Add uri comment back on action

cb48b76

Add deprecations on ReactDOMTestUtils

e78adcc

Merge branch '19' of github.com:/reasonml/reason-react into 19

f5f5579

* '19' of github.com:/reasonml/reason-react: Update src/React.re Update src/React.re Update src/React.re

davesnx force-pushed the 19 branch from 5481b9e to f5f5579 Compare November 25, 2024 14:49

davesnx added 2 commits November 25, 2024 18:36

davesnx changed the title ~~Support for React 19 new APIs~~ Support for React 19 Nov 25, 2024

davesnx added 5 commits November 25, 2024 19:28

Merge branch 'main' of github.com:/reasonml/reason-react into 19

ea1f768

* 'main' of github.com:/reasonml/reason-react: Remove raise annotations and fix locations on errors (#863) ppx: support "custom children" in uppercase components without having to wrap in array literal (#823)

Merge branch '19' of github.com:/reasonml/reason-react into 19

05ecc63

* '19' of github.com:/reasonml/reason-react: Enable ref as valid prop (#862) Replace react dom's testing library with ReactTestingLibrary (#859)

Migrate custom childrens test to RTL

e017f0b

Fix role for React__test

ba36dc2

Rollback change on _ppx

52e585a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for React 19 #846

Support for React 19 #846

davesnx commented Jul 16, 2024 •

edited

Loading

jchavarri Nov 20, 2024

anmonteiro Nov 24, 2024

jchavarri Nov 20, 2024

anmonteiro Nov 24, 2024

davesnx Nov 25, 2024

jchavarri Nov 20, 2024

davesnx Nov 25, 2024

jchavarri Nov 20, 2024

davesnx Nov 20, 2024

jchavarri Nov 20, 2024

anmonteiro Nov 24, 2024

davesnx Nov 25, 2024

anmonteiro Nov 24, 2024

davesnx Nov 25, 2024

anmonteiro Nov 24, 2024

davesnx Nov 25, 2024

anmonteiro commented Nov 24, 2024

davesnx commented Nov 25, 2024

-  [@mel.module "react"]
-  external useTransitionAsync:
-    unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =
-    "useTransition";
+  /**
+   * `useTransitionAsync` is a binding to React's `useTransition` hook.
+   *
+   * This hook lets you update state without blocking the UI.
+   *
+   * ### Return Value
+   * - `(bool, callbackAsync(callbackAsync(unit, unit), unit))`: A tuple containing:
+   *   - `bool`: Whether the transition is pending.
+   *   - A function to start the transition.
+   *
+   * ### Example
+   * ```reason
+   * let (isPending, startTransition) = useTransitionAsync();
+   *
+   * /* Start a transition */
+   * startTransition(() => {
+   *   /* Deferred update logic */
+   * });
+   *
+   * if (isPending) {
+   *   /* Show loading indicator */
+   * }
+   * ```
+   */
+  [@mel.module "react"]
+  external useTransitionAsync:
+    unit => (bool, callbackAsync(callbackAsync(unit, unit), unit)) =
+    "useTransition";

Support for React 19 #846

Are you sure you want to change the base?

Support for React 19 #846

Conversation

davesnx commented Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anmonteiro commented Nov 24, 2024

davesnx commented Nov 25, 2024

davesnx commented Jul 16, 2024 •

edited

Loading