Refactor for flow intersection and union Props

flow/react-docgen.js

@@ -40,6 +40,7 @@ type FlowTypeDescriptor = {
   elements?: Array<FlowTypeDescriptor>,
   type?: 'object' | 'function',
   signature?: flowObjectSignatureType | flowFunctionSignatureType,
+  alias?: string,
 };
 
 type PropDescriptor = {

src/handlers/__tests__/flowTypeDocBlockHandler-test.js

@@ -127,6 +127,52 @@ describe('flowTypeDocBlockHandler', () => {
       .not.toThrow();
   });
 
+  it('supports intersection proptypes', () => {
+    var definition = statement(`
+      (props: Props) => <div />;
+
+      var React = require('React');
+      import type Imported from 'something';
+
+      type BarProps = {
+        /** bar description */
+        bar: 'barValue'
+      }
+
+      type Props = Imported & BarProps & {
+        /** foo description */
+        foo: 'fooValue'
+      };
+    `).get('expression');
+
+    flowTypeDocBlockHandler(documentation, definition);
+
+    expect(documentation.descriptors).toEqual({
+      foo: {
+        description: 'foo description',
+      },
+      bar: {
+        description: 'bar description',
+      },
+    });
+
+    it('does not support union proptypes', () => {
+      var definition = statement(`
+        (props: Props) => <div />;
+
+        var React = require('React');
+        import type Imported from 'something';
+
+        type Other = { bar: 'barValue' };
+        type Props = Imported | Other | { foo: 'fooValue' };
+      `).get('expression');
+
+      expect(() => flowTypeDocBlockHandler(documentation, definition))
+        .toThrowError(TypeError, "react-docgen doesn't support Props of union types");
+    });
+  });
+
+
   describe('does not error for unreachable type', () => {
     function test(code) {
       var definition = statement(code).get('expression');

src/handlers/__tests__/flowTypeHandler-test.js

@@ -170,14 +170,13 @@ describe('flowTypeHandler', () => {
   it('supports intersection proptypes', () => {
     var definition = statement(`
       (props: Props) => <div />;
-     
+
       var React = require('React');
       import type Imported from 'something';
-  
+
       type Props = Imported & { foo: 'bar' };
     `).get('expression');
 
-
     flowTypeHandler(documentation, definition);
 
     expect(documentation.descriptors).toEqual({
@@ -188,24 +187,19 @@ describe('flowTypeHandler', () => {
     });
   });
 
-  it('supports union proptypes', () => {
+  it('does not support union proptypes', () => {
     var definition = statement(`
       (props: Props) => <div />;
-      
+
       var React = require('React');
       import type Imported from 'something';
 
-      type Props = Imported | { foo: 'bar' };
+      type Other = { bar: 'barValue' };
+      type Props = Imported | Other | { foo: 'fooValue' };
     `).get('expression');
 
-    flowTypeHandler(documentation, definition);
-
-    expect(documentation.descriptors).toEqual({
-      foo: {
-        flowType: {},
-        required: true,
-      },
-    });
+    expect(() => flowTypeHandler(documentation, definition))
+      .toThrowError(TypeError, "react-docgen doesn't support Props of union types");
   });
 
   describe('does not error for unreachable type', () => {

src/handlers/flowTypeDocBlockHandler.js

@@ -12,19 +12,23 @@
 
 import type Documentation from '../Documentation';
 import setPropDescription from '../utils/setPropDescription';
-import getFlowTypeFromReactComponent from '../utils/getFlowTypeFromReactComponent';
+import getFlowTypeFromReactComponent, {
+  applyToFlowTypeProperties,
+}  from '../utils/getFlowTypeFromReactComponent';
 
 /**
  * This handler tries to find flow Type annotated react components and extract
  * its types to the documentation. It also extracts docblock comments which are
  * inlined in the type definition.
  */
 export default function flowTypeDocBlockHandler(documentation: Documentation, path: NodePath) {
-  let flowTypesPath = getFlowTypeFromReactComponent(path);
+  const flowTypesPath = getFlowTypeFromReactComponent(path);
 
   if (!flowTypesPath) {
     return;
   }
 
-  flowTypesPath.get('properties').each(propertyPath => setPropDescription(documentation, propertyPath));
+  applyToFlowTypeProperties(flowTypesPath, propertyPath =>
+    setPropDescription(documentation, propertyPath)
+  );
 }

src/handlers/flowTypeHandler.js

@@ -14,30 +14,26 @@ import type Documentation from '../Documentation';
 
 import getFlowType from '../utils/getFlowType';
 import getPropertyName from '../utils/getPropertyName';
-import getFlowTypeFromReactComponent from '../utils/getFlowTypeFromReactComponent';
+import getFlowTypeFromReactComponent, {
+  applyToFlowTypeProperties,
+}  from '../utils/getFlowTypeFromReactComponent';
+import isUnreachableFlowType from '../utils/isUnreachableFlowType';
+import recast from 'recast';
+import resolveToValue from '../utils/resolveToValue';
+import { getDocblock } from '../utils/docblock';
+
+
+var {types: {namedTypes: types}} = recast;
 
 function setPropDescriptor(documentation: Documentation, path: NodePath): void {
   const propDescriptor = documentation.getPropDescriptor(getPropertyName(path));
   const type = getFlowType(path.get('value'));
-
   if (type) {
     propDescriptor.flowType = type;
     propDescriptor.required = !path.node.optional;
   }
 }
 
-function findAndSetTypes(documentation: Documentation, path: NodePath): void {
-  if (path.node.properties) {
-    path.get('properties').each(
-      propertyPath => setPropDescriptor(documentation, propertyPath)
-    );
-  } else if (path.node.types) {
-    path.get('types').each(
-      typesPath => findAndSetTypes(documentation, typesPath)
-    );
-  }
-}
-
 /**
  * This handler tries to find flow Type annotated react components and extract
  * its types to the documentation. It also extracts docblock comments which are
@@ -50,5 +46,7 @@ export default function flowTypeHandler(documentation: Documentation, path: Node
     return;
   }
 
-  findAndSetTypes(documentation, flowTypesPath);
+  applyToFlowTypeProperties(flowTypesPath, propertyPath => {
+      setPropDescriptor(documentation, propertyPath)
+  });
 }

src/utils/getFlowTypeFromReactComponent.js

@@ -51,7 +51,50 @@ export default (path: NodePath): ?NodePath  => {
   if (typePath && types.GenericTypeAnnotation.check(typePath.node)) {
     typePath = resolveToValue(typePath.get('id'));
     if (
-      !typePath || 
+      !typePath ||
+      types.Identifier.check(typePath.node) ||
+      isUnreachableFlowType(typePath)
+    ) {
+      return;
+    }
+
+    typePath = typePath.get('right');
+  }
+
+  return typePath;
+}
+
+export function applyToFlowTypeProperties(
+  path: NodePath,
+  callback: (propertyPath: NodePath) => void
+) {
+  if (path.node.properties) {
+    path.get('properties').each(
+      propertyPath => callback(propertyPath)
+    );
+  } else if (path.node.type == 'IntersectionTypeAnnotation') {
+    path.get('types').each(
+      typesPath => applyToFlowTypeProperties(typesPath, callback)
+    );
+  } else if (path.node.type == 'UnionTypeAnnotation') {
+    // The react-docgen output format does not currently allow
+    // for the expression of union types
+    throw new TypeError("react-docgen doesn't support Props of union types");
+  } else {
+    let typePath = resolveGenericTypeAnnotation(path);
+    if (typePath) {
+      applyToFlowTypeProperties(typePath, callback);
+    }
+  }
+}
+
+function resolveGenericTypeAnnotation(path: NodePath): ?NodePath {
+  // If the node doesn't have types or properties, try to get the type.
+  let typePath: ?NodePath;
+  if (path && types.GenericTypeAnnotation.check(path.node)) {
+    typePath = resolveToValue(path.get('id'));
+    if (
+      !typePath ||
       types.Identifier.check(typePath.node) ||
       isUnreachableFlowType(typePath)
     ) {