Towards handling V4 components import.

Author: cristianoc

jscomp/gentype/EmitJs.ml

@@ -162,6 +162,7 @@ let rec emitCodeItem ~config ~emitters ~moduleItemsEmitter ~env ~fileName
                retType;
              } as function_)
           when retType |> EmitType.isTypeFunctionComponent ~fields ->
+            (* JSX V3 *)
             let componentName =
               match importFile with "." | ".." -> None | _ -> Some importFile
             in
@@ -182,6 +183,43 @@ let rec emitCodeItem ~config ~emitters ~moduleItemsEmitter ~env ~fileName
               }
             in
             Function { function_ with componentName }
+        | Function
+            ({
+               argTypes = [ { aType = Ident { name } as propsType; aName } ];
+               retType;
+             } as function_)
+          when Filename.check_suffix name "props"
+               && retType |> EmitType.isTypeFunctionComponent ~fields:[] -> (
+            let _ = function_ in
+            let _ = propsType in
+            match typeGetInlined propsType with
+            | Object (closedFlags, fields) ->
+                (* JSX V3 *)
+                let componentName =
+                  match importFile with
+                  | "." | ".." -> None
+                  | _ -> Some importFile
+                in
+                let fields =
+                  Ext_list.filter_map fields (fun (field : field) ->
+                      match field.nameJS with
+                      | "children"
+                        when field.type_ |> EmitType.isTypeReactElement ->
+                          Some { field with type_ = EmitType.typeReactChild }
+                      | "key" ->
+                          (* Filter out key, which is added to the props type definition in V4 *)
+                          None
+                      | _ -> Some field)
+                in
+                let function_ =
+                  {
+                    function_ with
+                    argTypes =
+                      [ { aType = Object (closedFlags, fields); aName } ];
+                  }
+                in
+                Function { function_ with componentName }
+            | _ -> type_)
         | _ -> type_
       in
       let converter = type_ |> typeGetConverter in

jscomp/gentype_tests/typescript-react-example/src/JSXV4.gen.tsx

@@ -7,10 +7,32 @@ import {make as makeNotChecked} from './hookExample';
 import * as React from 'react';
 
 // In case of type error, check the type of 'make' in 'JSXV4.re' and './hookExample'.
-export const makeTypeChecked: <a>(_1:props<JSX.Element,person,JSX.Element,renderMe<a>>) => JSX.Element = makeNotChecked;
+export const makeTypeChecked: React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: {
+    readonly name: string; 
+    readonly age: number
+  }; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: React.ComponentType<{
+    readonly randomString: string; 
+    readonly poly: any
+  }>
+}> = makeNotChecked;
 
 // Export 'make' early to allow circular import from the '.bs.js' file.
-export const make: unknown = makeTypeChecked as <a>(_1:props<JSX.Element,person,JSX.Element,renderMe<a>>) => JSX.Element;
+export const make: unknown = makeTypeChecked as React.ComponentType<{
+  readonly actions?: JSX.Element; 
+  readonly person: {
+    readonly name: string; 
+    readonly age: number
+  }; 
+  readonly children: React.ReactNode; 
+  readonly renderMe: React.ComponentType<{
+    readonly randomString: string; 
+    readonly poly: any
+  }>
+}>;
 
 // tslint:disable-next-line:no-var-requires
 const JSXV4BS = require('./JSXV4.bs');

lib/4.06.1/whole_compiler.ml

@@ -240372,6 +240372,7 @@ let rec emitCodeItem ~config ~emitters ~moduleItemsEmitter ~env ~fileName
                retType;
              } as function_)
           when retType |> EmitType.isTypeFunctionComponent ~fields ->
+            (* JSX V3 *)
             let componentName =
               match importFile with "." | ".." -> None | _ -> Some importFile
             in
@@ -240392,6 +240393,43 @@ let rec emitCodeItem ~config ~emitters ~moduleItemsEmitter ~env ~fileName
               }
             in
             Function { function_ with componentName }
+        | Function
+            ({
+               argTypes = [ { aType = Ident { name } as propsType; aName } ];
+               retType;
+             } as function_)
+          when Filename.check_suffix name "props"
+               && retType |> EmitType.isTypeFunctionComponent ~fields:[] -> (
+            let _ = function_ in
+            let _ = propsType in
+            match typeGetInlined propsType with
+            | Object (closedFlags, fields) ->
+                (* JSX V3 *)
+                let componentName =
+                  match importFile with
+                  | "." | ".." -> None
+                  | _ -> Some importFile
+                in
+                let fields =
+                  Ext_list.filter_map fields (fun (field : field) ->
+                      match field.nameJS with
+                      | "children"
+                        when field.type_ |> EmitType.isTypeReactElement ->
+                          Some { field with type_ = EmitType.typeReactChild }
+                      | "key" ->
+                          (* Filter out key, which is added to the props type definition in V4 *)
+                          None
+                      | _ -> Some field)
+                in
+                let function_ =
+                  {
+                    function_ with
+                    argTypes =
+                      [ { aType = Object (closedFlags, fields); aName } ];
+                  }
+                in
+                Function { function_ with componentName }
+            | _ -> type_)
         | _ -> type_
       in
       let converter = type_ |> typeGetConverter in