Fix intersection and union flow types (#118)

* Refactor for flow intersection and union Props

Refactor to resolve, when possible, a list of props
from a flow intersection type and to throw an error
when encountering a Props of union type.

This change addresses a bug found in the flowTypeDocBlockHandler
while a props type that is an IntersectionTypeAnnotation or a
UnionTypeAnnotation.

Union types throw an error, rather than generating misleading documentation.
When given a union type, flow will enforce that props conform to only one of
the union-ed types. The documentation format, which lists a single set of props
can't express this.

Fix lint errors

* Enable no-undef and no-unused-variables eslint rules

* Do not throw if union type encountered, but silently ignore

Author: danez

.eslintrc

@@ -4,10 +4,13 @@
     "comma-dangle": [1, "always-multiline"],
     "no-underscore-dangle": 0,
     "quotes": [2, "single", "avoid-escape"],
-    "strict": 0
+    "strict": 0,
+    "no-unused-vars": 2,
+    "no-undef": 2
   },
   "env": {
-    "node": true
+    "node": true,
+    "es6": true
   },
   "globals": {
     "ASTNode": true,

flow/react-docgen.js

@@ -41,6 +41,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,21 @@ 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(() => flowTypeHandler(documentation, definition))
+      .not.toThrow();
 
-    expect(documentation.descriptors).toEqual({
-      foo: {
-        flowType: {},
-        required: true,
-      },
-    });
+    expect(documentation.descriptors).toEqual({});
   });
 
   describe('does not error for unreachable type', () => {

src/handlers/componentMethodsHandler.js

@@ -15,7 +15,6 @@ import getMemberValuePath from '../utils/getMemberValuePath';
 import getMethodDocumentation from '../utils/getMethodDocumentation';
 import isReactComponentClass from '../utils/isReactComponentClass';
 import isReactComponentMethod from '../utils/isReactComponentMethod';
-import isReactCreateClassCall from '../utils/isReactCreateClassCall';
 
 import type Documentation from '../Documentation';
 

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,19 @@ 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';
 
 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 +39,7 @@ export default function flowTypeHandler(documentation: Documentation, path: Node
     return;
   }
 
-  findAndSetTypes(documentation, flowTypesPath);
+  applyToFlowTypeProperties(flowTypesPath, propertyPath => {
+      setPropDescriptor(documentation, propertyPath)
+  });
 }

src/utils/__tests__/getMethodDocumentation-test.js

@@ -14,11 +14,11 @@ jest.disableAutomock();
 
 describe('getMethodDocumentation', () => {
   let getMethodDocumentation;
-  let expression, statement;
+  let statement;
 
   beforeEach(() => {
     getMethodDocumentation = require('../getMethodDocumentation').default;
-    ({expression, statement} = require('../../../tests/utils'));
+    ({ statement } = require('../../../tests/utils'));
   });
 
   describe('name', () => {

src/utils/__tests__/getTypeAnnotation-test.js

@@ -13,12 +13,12 @@
 jest.disableAutomock();
 
 describe('getTypeAnnotation', () => {
-  var expression, statement;
+  var expression;
   var getTypeAnnotation;
 
   beforeEach(() => {
     getTypeAnnotation = require('../getTypeAnnotation').default;
-    ({expression, statement} = require('../../../tests/utils'));
+    ({expression} = require('../../../tests/utils'));
   });
 
   it('detects simple type', () => {

src/utils/getFlowTypeFromReactComponent.js

@@ -10,7 +10,6 @@
  *
  */
 
-import getPropertyName from './getPropertyName';
 import getTypeAnnotation from '../utils/getTypeAnnotation';
 import getMemberValuePath from '../utils/getMemberValuePath';
 import isReactComponentClass from '../utils/isReactComponentClass';
@@ -51,7 +50,48 @@ 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
+    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)
     ) {