Support import of [@react.component] components whose props require conversion.

Changes.md

@@ -1,3 +1,14 @@
+# master
+- Support import of `[@react.component]` components whose props require conversion.
+  The conversion is performed by wrapping the component with a `React.createElement` call,
+  so it works whether the component is a function or a class.
+
+  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=... />`.
+
+  See https://github.com/cristianoc/genType/pull/226.
+
 # 2.32.0
 - Fix issue where conversion functions are not be generated for types defined in other files when `"importPath": "node",` is set in `gentypeconfig`.
 

examples/commonjs-react-example/src/ImportHookDefault.gen.js

@@ -9,15 +9,15 @@
 const hookExample = require('./hookExample');
 
 // In case of type error, check the type of 'make' in 'ImportHookDefault.re' and './hookExample'.
-const makeTypeChecked: ({| +show: boolean, +Message?: string |}) => React$Node = hookExample;;
+const makeTypeChecked: React$ComponentType<{| +show: boolean, +Message?: string |}> = hookExample;;
 exports.makeTypeChecked = makeTypeChecked
 
 // Export 'make' early to allow circular import from the '.bs.js' file.
 const make: mixed = makeTypeChecked;;
 exports.make = make
 
 // In case of type error, check the type of 'default' in 'ImportHookDefault.re' and './hookExample'.
-const defaultTypeChecked: ({| +show: boolean, +Message?: string |}) => React$Node = hookExample;;
+const defaultTypeChecked: React$ComponentType<{| +show: boolean, +Message?: string |}> = hookExample;;
 exports.defaultTypeChecked = defaultTypeChecked
 
 // Export '$$default' early to allow circular import from the '.bs.js' file.

examples/flow-react-example/src/Hooks.gen.js

@@ -7,6 +7,9 @@
 // $FlowExpectedError: Reason checked type sufficiently
 type $any = any;
 
+// $FlowExpectedError: Reason checked type sufficiently
+import * as React from 'react';
+
 // $FlowExpectedError: Reason checked type sufficiently
 import * as Curry from 'bs-platform/lib/es6/curry.js';
 
@@ -130,3 +133,14 @@ export const polymorphicComponent: typeof(polymorphicComponent$$forTypeof) = fun
 const functionReturningReactElement$$forTypeof = function (_: {| +name: string |}) : React$Node { return null };
 
 export const functionReturningReactElement: typeof(functionReturningReactElement$$forTypeof) = HooksBS.functionReturningReactElement;
+
+// Type annotated function components are not checked by Flow, but typeof() works.
+const RenderPropRequiresConversion_make$$forTypeof = function (_: {| +renderVehicle: React$ComponentType<{| +number: number, +vehicle: vehicle |}> |}) : React$Node { return null };
+
+export const RenderPropRequiresConversion_make: typeof(RenderPropRequiresConversion_make$$forTypeof) = function Hooks_RenderPropRequiresConversion(Arg1: $any) {
+  const result = HooksBS.RenderPropRequiresConversion[0]({renderVehicle:function (Arg11: $any) {
+      const result1 = React.createElement(Arg1.renderVehicle, {number:Arg11.number, vehicle:{name:Arg11.vehicle[0]}});
+      return result1
+    }});
+  return result
+};

examples/flow-react-example/src/Hooks.re

@@ -17,12 +17,15 @@ let make = (~vehicle) => {
     <button onClick={_ => setCount(_ => count + 1)}>
       {React.string("Click me")}
     </button>
-    <ImportHooks person={name: "Mary", age: 71} renderMe={_ => React.null}>
+    <ImportHooks
+      person={name: "Mary", age: 71}
+      renderMe={x => React.string(x##randomString)}>
       {React.string("child1")}
       {React.string("child2")}
     </ImportHooks>
     <ImportHookDefault
-      person={name: "DefaultImport", age: 42} renderMe={_ => React.null}>
+      person={name: "DefaultImport", age: 42}
+      renderMe={x => React.string(x##randomString)}>
       {React.string("child1")}
       {React.string("child2")}
     </ImportHookDefault>
@@ -116,4 +119,22 @@ let polymorphicComponent = (~p as (x, _)) => React.string(x.name);
 
 [@genType]
 [@react.component]
-let functionReturningReactElement = (~name) => React.string(name);
+let functionReturningReactElement = (~name) => React.string(name);
+
+module RenderPropRequiresConversion = {
+  [@genType]
+  [@react.component]
+  let make =
+      (
+        ~renderVehicle:
+           {
+             .
+             "vehicle": vehicle,
+             "number": int,
+           } =>
+           React.element,
+      ) => {
+    let car = {name: "Car"};
+    renderVehicle({"vehicle": car, "number": 42});
+  };
+};

examples/flow-react-example/src/ImportHookDefault.gen.js

@@ -13,29 +13,32 @@ import {default as makeNotChecked} from './hookExample';
 // flowlint-next-line nonstrict-import:off
 import {default as defaultNotChecked} from './hookExample';
 
+// $FlowExpectedError: Reason checked type sufficiently
+import * as React from 'react';
+
 // In case of type error, check the type of 'make' in 'ImportHookDefault.re' and './hookExample'.
-export const makeTypeChecked: ({|
+export const makeTypeChecked: React$ComponentType<{|
   +person: person, 
   +children: React$Node, 
   +renderMe: ImportHooks_renderMe<string>
-|}) => React$Node = makeNotChecked;
+|}> = makeNotChecked;
 
 // Export 'make' early to allow circular import from the '.bs.js' file.
 export const make: mixed = function hookExample(Arg1: $any) {
-  const result = makeTypeChecked({person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
+  const result = React.createElement(makeTypeChecked, {person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
   return result
 };
 
 // In case of type error, check the type of 'default' in 'ImportHookDefault.re' and './hookExample'.
-export const defaultTypeChecked: ({|
+export const defaultTypeChecked: React$ComponentType<{|
   +person: person, 
   +children: React$Node, 
   +renderMe: ImportHooks_renderMe<string>
-|}) => React$Node = defaultNotChecked;
+|}> = defaultNotChecked;
 
 // Export '$$default' early to allow circular import from the '.bs.js' file.
 export const $$default: mixed = function hookExample(Arg1: $any) {
-  const result = defaultTypeChecked({person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
+  const result = React.createElement(defaultTypeChecked, {person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
   return result
 };
 

examples/flow-react-example/src/ImportHooks.gen.js

@@ -13,16 +13,19 @@ import {makeRenamed as makeRenamedNotChecked} from './hookExample';
 // flowlint-next-line nonstrict-import:off
 import {foo as fooNotChecked} from './hookExample';
 
+// $FlowExpectedError: Reason checked type sufficiently
+import * as React from 'react';
+
 // In case of type error, check the type of 'makeRenamed' in 'ImportHooks.re' and './hookExample'.
-export const makeRenamedTypeChecked: <a>({|
+export const makeRenamedTypeChecked: React$ComponentType<{|
   +person: person, 
   +children: React$Node, 
-  +renderMe: renderMe<a>
-|}) => React$Node = makeRenamedNotChecked;
+  +renderMe: renderMe<$any>
+|}> = makeRenamedNotChecked;
 
 // Export 'makeRenamed' early to allow circular import from the '.bs.js' file.
 export const makeRenamed: mixed = function hookExample<a>(Arg1: $any) {
-  const result = makeRenamedTypeChecked({person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
+  const result = React.createElement(makeRenamedTypeChecked, {person:{name:Arg1.person[0], age:Arg1.person[1]}, children:Arg1.children, renderMe:Arg1.renderMe});
   return result
 };
 
@@ -37,4 +40,4 @@ export const foo: mixed = function (Argperson: $any) {
 
 export type person = {| +name: string, +age: number |};
 
-export type renderMe<a> = ({| +randomString: string, +poly: a |}) => React$Node;
+export type renderMe<a> = React$ComponentType<{| +randomString: string, +poly: a |}>;

examples/flow-react-example/src/ImportHooks.re

@@ -6,12 +6,11 @@ type person = {
 
 [@genType]
 type renderMe('a) =
-  {
+  React.component({
     .
     "randomString": string,
     "poly": 'a,
-  } =>
-  React.element;
+  });
 
 [@genType.import "./hookExample"] [@react.component]
 external make:

examples/flow-react-example/src/hookExample.js

@@ -6,15 +6,27 @@ export const foo = function(x: { +person: { +name: string, +age: number } }) {
   return x.person.name;
 };
 
-export const make = (x: {
+type Props = {|
   +person: { +name: string, +age: number },
-  +children: React.Node
-}) => (
-  <div>
-    {" "}
-    {x.person.name} {x.children}{" "}
-  </div>
-);
+  +children: React.Node,
+  +renderMe: React.ComponentType<{|
+    +randomString: string,
+    +poly: string
+  |}>
+|};
+
+export class make extends React.Component<Props> {
+  render() {
+    const RenderMe = this.props.renderMe;
+    return (
+      <div>
+        {" "}
+        {this.props.person.name} {this.props.children}{" "}
+        <RenderMe randomString="random-string" poly="" />
+      </div>
+    );
+  }
+}
 
 export const makeRenamed = make;