Support import of [@react.component] components whose props require conversion. #226
Conversation
Support importing compoinents that require conversion while being defined as React classes in JS. The function wrapping uses React.createElement to wrap the class component as a function component with the appropriate conversion for props.
This allows more flexibility in checking whether a function is an imported/exported component or not, where the type itself can be checked, not just the converter.
Import and export [@reaxct.component] components with type React.ComponenyType<...>. Keep on using React.FV<...> for callbacks.
|
@lalnuo @Coobaha this is relevant for issue #210. This supports the uses case in https://gist.github.com/lalnuo/f8f3728476e9535115815dae97657eab, where However, if instead of a direct function call, JSX were used as in 5fde78b, then a cleaner solution would be possible, to always use type (Strictly speaking, the FC type would not be sound, because of the corner case where How does that sound? |
…nd React.FC. This drops the use of React.FC. The ImportHooks example shows the changes required to user .tsx code in case it was using render props as functions directly. Now, one needs to use JSX calls instead. No change required if JSX was used already.
…Class. Emitting ComponentClass when exporting via wrapReasonForJs is theoretically more precise, though it's not clear how to take advantage of the knowledge that a component is *not* a function components. So it seems cleaner to always generate ComponentType instead.
Apply a wrap via React.createElement in all cases where a component requiring conversion is in an import position. E.g. when exporting a function components with one prop being a component type requiring conversion. Add an example illustrating the case.
cristianoc
changed the title
Support import of
[@react.component]components whose props require conversion.The conversion is performed by wrapping the component with a
React.createElementcall,so it works whether the component is a function or a class.
The wrapping conversion applies to all components in import position. For example, an imported component is in import position, but also a render prop of an exported component is.
No wrapping is performed for components in export position, relying on an invariant: if a component is in export position and requires conversion, then it is a function component (and not a class component). The invariant is maintained by construction for
[@react.component]created on the Reason side, and by wrapping for components imported from JS (in import position).All the TypeScript components are now typed with
React.ComponentType<...>.If existing code was using e.g. render props of type
React.FC<...>,direct function calls
foo(props)should now be replaced with JSX calls<foo props=... />.