Removing a wrapping function for a binding

,
1

In SomeModule I have the following binding to an external React component.

module Item = {
  type props = {
    key: string,
    children: React.element,
  }

  @obj external makeProps : (~key: string, ~children: React.element, unit) => props = ""
  @module("react-stately") @val external make : props => React.element = "Item"
}

The issue is that the external React component contains some extra methods that a framework (React Aria/React Stately) depends on. However ReScript outputs the following code when the component is used.

React.createElement((function (prim) {
                          return SomeModule.Item(prim);
                        }), {
                        key: "home",
                        children: "Home"
                      })

As can be seen the SomeModule.Item imported component is being wrapped in a function. This breaks access to any extra methods it has and in turn breaks the library I’m trying to bind to.

Is there a way to remove the unneeded wrapped anonymous function so that the library can do its thing?

EDIT:

There seems to be a bit of a special heuristic in the compiler since when I add a let make = make in the Item module then the wrapper function disappears on the usage site. However, Item is then defined in JavaScript as

function make(prim) {
  return ReactStately.Item(prim);
}

var Item = {
  make: make
};

Rather than importing directly from React Stately.

The above JS would work if the compiler output instead:

var Item = {
  make: ReactStately.Item
};
1 Like
2

Found the actual answer. In Type of external react component - #2 by ryyppy I saw @ryyppy use makeType. While I don’t quite understand what’s that for, actually adding that as a type correctly removes the wrapping function.

module Item = {
  type props = {
    key: string,
    children: React.element,
  }
  type makeType = props => React.element

  @obj external makeProps : (~key: string, ~children: React.element, unit) => props = ""
  @module("react-stately") @val external make : makeType = "Item"
}

import * as ReactStately from "react-stately";

React.createElement(ReactStately.Item, {
                        key: "home",
                        children: "Home"
                      })