TypeScript: type children of imported components as React.ReactNode

Author: cristianoc

Changes.md

@@ -1,4 +1,5 @@
 # master
+- TypeScript: type children of imported components as `React.ReactNode`.
 
 # 4.2.0
 - Add basic support for inherited type definitions in polymorphic variants e.g. `type color = [red | blue]`. No support for conversion at the moment.

examples/typescript-react-example/src/ImportHookDefault.gen.tsx

@@ -9,28 +9,28 @@ import {default as defaultNotChecked} from './hookExample';
 // In case of type error, check the type of 'make' in 'ImportHookDefault.re' and './hookExample'.
 export const makeTypeChecked: React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: ImportHooks_renderMe<string>
 }> = makeNotChecked;
 
 // Export 'make' early to allow circular import from the '.bs.js' file.
 export const make: unknown = makeTypeChecked as React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: ImportHooks_renderMe<string>
 }>;
 
 // In case of type error, check the type of 'default' in 'ImportHookDefault.re' and './hookExample'.
 export const defaultTypeChecked: React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: ImportHooks_renderMe<string>
 }> = defaultNotChecked;
 
 // Export '$$default' early to allow circular import from the '.bs.js' file.
 export const $$default: unknown = defaultTypeChecked as React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: ImportHooks_renderMe<string>
 }>;
 

examples/typescript-react-example/src/ImportHooks.gen.tsx

@@ -9,14 +9,14 @@ import {foo as fooNotChecked} from './hookExample';
 // In case of type error, check the type of 'makeRenamed' in 'ImportHooks.re' and './hookExample'.
 export const makeRenamedTypeChecked: React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: renderMe<any>
 }> = makeRenamedNotChecked;
 
 // Export 'makeRenamed' early to allow circular import from the '.bs.js' file.
 export const makeRenamed: unknown = makeRenamedTypeChecked as React.ComponentType<{
   readonly person: person; 
-  readonly children: JSX.Element; 
+  readonly children: React.ReactNode; 
   readonly renderMe: renderMe<any>
 }>;
 

examples/typescript-react-example/src/hookExample.tsx

@@ -6,7 +6,7 @@ export const foo = (x: {
 
 type Props = {
   readonly person: { readonly name: string; readonly age: number };
-  readonly children: JSX.Element;
+  readonly children: React.ReactNode;
   readonly renderMe: React.ComponentType<{
     randomString: string;
     readonly poly: string;

src/EmitJs.ml

@@ -174,11 +174,30 @@ let rec emitCodeItem ~config ~emitters ~moduleItemsEmitter ~env ~fileName
     let type_ =
       match type_ with
       | Function
-          ({argTypes = [{aType = Object (_, fields)}]; retType} as function_)
+          ({
+             argTypes = [({aType = Object (closedFlag, fields)} as argType)];
+             retType;
+           } as function_)
         when retType |> EmitType.isTypeFunctionComponent ~config ~fields ->
         let componentName =
           match importFile with "." | ".." -> None | _ -> Some importFile
         in
+        let fields =
+          fields
+          |> List.map (fun (field : field) ->
+                 match
+                   field.nameJS = "children"
+                   && field.type_ |> EmitType.isTypeReactElement ~config
+                 with
+                 | true -> {field with type_ = EmitType.typeReactChild ~config}
+                 | false -> field)
+        in
+        let function_ =
+          {
+            function_ with
+            argTypes = [{argType with aType = Object (closedFlag, fields)}];
+          }
+        in
         Function {function_ with componentName}
       | _ -> type_
     in