Support for React 19 new APIs #846
Conversation
* 'main' of github.com:/reasonml/reason-react: Remove type callback duplicate
| @@ -0,0 +1,53 @@ | |||
| (* Provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data". *) | |||
|
|
|||
| module Iterator = struct | |||
There was a problem hiding this comment.
I think we added iterator stuff in melange, can you reuse that?
There was a problem hiding this comment.
otherwise we should add what we need
There was a problem hiding this comment.
Totally, added it here to make it pass (that's why it's a draft pr) until I can use melange.dom for this
| @@ -648,7 +648,7 @@ type domProps = { | |||
| [@mel.optional] | |||
| acceptCharset: option(string), | |||
| [@mel.optional] | |||
| action: option(string), /* uri */ | |||
| action: option(FormData.t => Js.Promise.t(unit)), /* Since action is taken by "form" as string and React 19 accepts a callback we keep a 'action_' field to avoid a breaking change. */ | |||
There was a problem hiding this comment.
what do you mean by "keep a 'action_'" field? isn't the field still named action (without underscore?)
There was a problem hiding this comment.
I believe this is now a breaking change because we don't accept a string for action anymore
There was a problem hiding this comment.
I couldn't find a way to keep both (you can't have 2 mel.as with the same name), so it's either we don't support action like this (and users could cloneElement it) or we break with action.
Not fan of either
There was a problem hiding this comment.
as I understand action is only for <form>? maybe create <Form />, a separate component specifically for RSC apps, not to make API more complex for a majority of use cases?
There was a problem hiding this comment.
we thought we'd be able to support this by e.g. adding @mel.unwrap support in @@deriving jsProperties but it turns out it's unsound (some discussion in melange-re/melange#1162).
it'd be kinda nice if ppxlib allowed to make the original type abstract, which would remove the unsoundness.
| type blob | ||
| type entryValue | ||
|
|
||
| let classify : entryValue -> [> `String of string | `File of file ] = |
There was a problem hiding this comment.
I think we could just use Js.Types.classify as I mentioned in the melange PR comment.
| @@ -886,6 +887,31 @@ 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 use: 'a => 'b = "use"; | |||
There was a problem hiding this comment.
should we default the name use to Js.Promise.t('a) and add useAny for 'a => 'b?
There was a problem hiding this comment.
What's the use case for use : 'a -> 'b, which is essentially Obj.magic?
| [@mel.module "react"] | ||
| external useOptimistic: | ||
| ('state, ('state, 'optimisticValue) => 'state) => | ||
| ('state, 'optimisticValue => unit) = |
There was a problem hiding this comment.
addOptimistic is the dispatching function to call when you have an optimistic update. It takes one argument, optimisticValue, of any type and will call the updateFn with state and optimisticValue.
if it'll call the updateFn it will return 'state
| ('state, 'optimisticValue => unit) = | |
| ('state, 'optimisticValue => 'state) = |
There was a problem hiding this comment.
nevermind, definitely typed says it returns void:
This PR adds some of the new functions on React 19.
useFormStatus. It relies on FormData and depends on melange.dom (build is failing since isn't solved: Add FormData under melange.dom melange-re/melange#1153)useOptimisticExperimental.usetoExperimental.usePromiseand addExperimental.useContextI left out all the canary stuff: React.promise/React.context/useActionState/async components. In future PRs will do
refas prop