Add support for typeof types and React.* types (#224)

* Add support for typeof types and React.* types

* Remove unused import

Author: danez

src/utils/__tests__/getFlowType-test.js

@@ -195,4 +195,57 @@ describe('getFlowType', () => {
 
     expect(getFlowType(typePath)).toEqual({ name: 'string' });
   });
+
+  it('handles typeof types', () => {
+    var typePath = statement(`
+      var x: typeof MyType = {};
+
+      type MyType = { a: string, b: ?xyz };
+    `).get('declarations', 0).get('id').get('typeAnnotation').get('typeAnnotation');
+
+    expect(getFlowType(typePath)).toEqual({name: 'signature', type: 'object', signature: {
+      properties: [
+        { key: 'a', value: { name: 'string', required: true } },
+        { key: 'b', value: { name: 'xyz', nullable: true, required: true } },
+      ],
+    }, raw: '{ a: string, b: ?xyz }'});
+  });
+
+  describe('React types', () => {
+    function test(type, expected) {
+      var typePath = statement(`
+        var x: ${type} = 2;
+
+        type Props = { x: string };
+      `).get('declarations', 0).get('id').get('typeAnnotation').get('typeAnnotation');
+
+      expect(getFlowType(typePath)).toEqual({ ...expected, name: type.replace('.', '').replace(/<.+>/, ''), raw: type });
+    }
+
+    const types = {
+      'React.Node': {},
+      'React.Key': {},
+      'React.ElementType': {},
+      'React.ChildrenArray<string>': { 'elements': [{ 'name': 'string' } ] },
+      'React.Element<any>': { 'elements': [{ 'name': 'any' } ] },
+      'React.Ref<typeof Component>': { 'elements': [{ 'name': 'Component' } ] },
+      'React.ElementProps<Component>': { 'elements': [{ 'name': 'Component' } ] },
+      'React.ElementRef<Component>': { 'elements': [{ 'name': 'Component' } ] },
+      'React.ComponentType<Props>': {
+        'elements': [{
+          'name': 'signature',
+          'raw': '{ x: string }',
+          'signature': {
+            'properties': [{ 'key': 'x', 'value': { 'name': 'string', 'required': true } }],
+          },
+          'type': 'object',
+        }]
+      },
+      'React.StatelessFunctionalComponent<Props2>': { 'elements': [{ 'name': 'Props2' } ] },
+    };
+
+    Object.keys(types).forEach(type => {
+      it(type, () => test(type, types[type]));
+    });
+  });
 });

src/utils/getFlowType.js

@@ -17,7 +17,6 @@ import printValue from './printValue';
 import recast from 'recast';
 import getTypeAnnotation from '../utils/getTypeAnnotation';
 import resolveToValue from '../utils/resolveToValue';
-import isUnreachableFlowType from '../utils/isUnreachableFlowType';
 
 const { types: { namedTypes: types } } = recast;
 
@@ -44,6 +43,7 @@ const namedTypes = {
   FunctionTypeAnnotation: handleFunctionTypeAnnotation,
   IntersectionTypeAnnotation: handleIntersectionTypeAnnotation,
   TupleTypeAnnotation: handleTupleTypeAnnotation,
+  TypeofTypeAnnotation: handleTypeofTypeAnnotation,
 };
 
 function getFlowTypeWithRequirements(path: NodePath): FlowTypeDescriptor {
@@ -55,7 +55,12 @@ function getFlowTypeWithRequirements(path: NodePath): FlowTypeDescriptor {
 }
 
 function handleGenericTypeAnnotation(path: NodePath) {
-  let type = { name: path.node.id.name };
+  let type;
+  if (types.QualifiedTypeIdentifier.check(path.node.id)) {
+    type = handleQualifiedTypeIdentifier(path.get('id'));
+  } else {
+    type = { name: path.node.id.name };
+  }
 
   if (path.node.typeParameters) {
     const params = path.get('typeParameters').get('params');
@@ -67,8 +72,7 @@ function handleGenericTypeAnnotation(path: NodePath) {
     };
   } else {
     let resolvedPath = resolveToValue(path.get('id'));
-
-    if (!isUnreachableFlowType(resolvedPath)) {
+    if (resolvedPath && resolvedPath.node.right) {
       type = getFlowType(resolvedPath.get('right'));
     }
   }
@@ -166,6 +170,16 @@ function handleTupleTypeAnnotation(path: NodePath) {
   return type;
 }
 
+function handleTypeofTypeAnnotation(path: NodePath) {
+  return getFlowType(path.get('argument'));
+}
+
+function handleQualifiedTypeIdentifier(path: NodePath) {
+  if (path.node.qualification.name !== 'React') return;
+
+  return { name: `React${path.node.id.name}`, raw: printValue(path) };
+}
+
 /**
  * Tries to identify the flow type by inspecting the path for known
  * flow type names. This method doesn't check whether the found type is actually

src/utils/getFlowTypeFromReactComponent.js

@@ -95,11 +95,7 @@ function resolveGenericTypeAnnotation(path: NodePath): ?NodePath {
   let typePath: ?NodePath;
   if (path && types.GenericTypeAnnotation.check(path.node)) {
     typePath = resolveToValue(path.get('id'));
-    if (
-      !typePath ||
-      types.Identifier.check(typePath.node) ||
-      isUnreachableFlowType(typePath)
-    ) {
+    if (isUnreachableFlowType(typePath)) {
       return;
     }