-
Notifications
You must be signed in to change notification settings - Fork 349
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for React 19 new APIs #846
base: main
Are you sure you want to change the base?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we added iterator stuff in melange, can you reuse that?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
otherwise we should add what we need
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we default the name use
to Js.Promise.t('a)
and add useAny
for 'a => 'b
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)useOptimistic
Experimental.use
toExperimental.usePromise
and addExperimental.useContext
I left out all the canary stuff: React.promise/React.context/useActionState/async components. In future PRs will do
ref
as prop