Hi all
We are using ReactHookForms in our app that yields a decorator for our onSubmit method:
type handleSubmit<'data, 'err> = ((. Js.t<'data>, ReactEvent.Form.t) => Js.Promise.t<unit>) => (ReactEvent.Form.t) => unit
If im reading right. Rescript will reinterpret this as
((. Js.t<'data>, ReactEvent.Form.t) => Js.Promise.t<unit>), (ReactEvent.Form.t)) => unit
And then take it upon itself to manage the resolution of this function and only apply when a Form event is applied. It seems then that the react hook form decorator is not given an opportunity to run until submit is finally called? Do I have that right?
printing handleSubmit(callback) gives me
(param) { return o(a0, param); }
showing rescript holding onto the callback in a closure?
I dont see how Rescript can be so confident this is valid. I would expect the opposite since this is an external function its almost certainly impure?
Can you explain what the ‘ReactHookForms decorator’ is? Is it a PPX? Can you give a pointer to the project?
Alternatively, can you provide a sample of how the code should look if it were written in JS? Based on that we can provide guidance on how to bind to that from ReScript.
It is not confident… The compiler only infers from the information you’ve previously told it. The thing here is to be sure that you have the correct handleSubmit binding in order to handle this as type-safe as possible since it’s an external function that is almost certainly impure.
yawaramin:
ReactHookForms is a library for validating and submitting forms. js!
It provides a react hook that returns an object containing the function handleSubmit
you pass a handler with one signature to handleSubmit and it returns a function that can be passed to onSubmit. The implementation on the client side would be the same: handleSubmit(handleSubmitWithData). In Js that is be applied immediately on component render and in rescript it is deferred and called onSubmit.
it seems that handleSubmit is itself the product of a react useCallback hook so there may be more implication there im not sure…so im asking =D
Yes, it sounds very complex. Hence I asked for a code sample showing how to do it in JavaScript. Then we can advise you on how to bind it correctly in ReScript.
Ok Im just a little confused since the implementation is not under my control…
Anyway, I’ve created a repo with our bindings for you guys to see, and I’ll publish to npm after the dust settles. Thanks for taking the time!
I’m going to have to look at that more though since js doesnt have partial application and an argument missing in the rescript binding would make it be invoked sooner and not later
Thanks for posting the repo. If you can show an example of how the correct JS should look if it were hand-written, we can help write correct bindings for it.
OK, I’ve worked backwards from that JS sandbox, and come up with this Playground.
Crucially, if you check the JS output, the handleSubmit callback is not generating any closures, rather it is getting applied in the exact same way as the JS Sandbox.
I’m not sure if your use case is more complex than this–you linked to a pretty simple sandbox example–if you need any more, you should start from this basis and work from there.
Btw, going forward I recommend posting all the details upfront:
Code sample and expected behaviour vs actual behaviour