Integrations with libraries like React Aria (heavy prop-spread use)

I’m looking to adopt React Aria because I think what they do to make accessible interfaces easily is really great. However, one thing I notice (and see in similar TypeScript/JavaScript React code-bases) is that they rely heavily on spreading a number of opaque properties onto a dom element.

I’ve find this really difficult to model in ReScript because prop-spread is not (yet) there and the type of all used properties may not be available.

For example for React Aria we may have a Js.Nullable.t<ReactEvent.Mouse.t => unit> property, which then requires the following to actually be put onto a dom element:

let { property } = allProps
let property = property->Js.Nullable.toOption
<div ?property />

This isn’t too bad for a single property but making just a React Aria menu item work requires 30 props that need to be found in the source code (because the type doc just says DOMProperties).

How are others solving this problem? Are there alternative libraries for these use-cases? What other libraries suffer these issues when we try to use them with ReScript?

The most obvious route forward may be to make ReScript more flexible (there are some proposals open for this), though I personally think this removes some of the advantages of ReScript by introducing some of the problems of JavaScript. Another more labour intensive route is to re-implement these libraries in ReScript. I think they’d be good additions to the ecosystem but I’d love to hear a) what problems people are running into to help prioritise effort and b) what kind of API they’d like to see when we rebuild in ReScript.

3 Likes

Yeah, this is a tough one, there is no real way to generically model the spread operator. Object composition is very difficult with ReScript

You could build a combiner function for specific object types, but that might get tedious.

1 Like