Merge pull request #1404 from jseminck/prop-types-union

Add support for Flow IntersectionTypeAnnotation to prop-types and no-unused-prop-types

Author: ljharb

lib/rules/default-props-match-prop-types.js

@@ -163,23 +163,46 @@ module.exports = {
       }));
     }
 
+    /**
+     * Handles Props defined in IntersectionTypeAnnotation nodes
+     * e.g. type Props = PropsA & PropsB
+     * @param   {ASTNode} intersectionTypeAnnotation ObjectExpression node.
+     * @returns {Object[]}
+     */
+    function getPropertiesFromIntersectionTypeAnnotationNode(annotation) {
+      return annotation.types.reduce((properties, type) => {
+        annotation = resolveGenericTypeAnnotation(type);
+
+        if (annotation && annotation.id) {
+          annotation = findVariableByName(annotation.id.name);
+        }
+
+        return properties.concat(annotation.properties);
+      }, []);
+    }
+
     /**
      * Extracts a PropType from a TypeAnnotation node.
      * @param   {ASTNode} node TypeAnnotation node.
      * @returns {Object[]}     Array of PropType object representations, to be consumed by `addPropTypesToComponent`.
      */
     function getPropTypesFromTypeAnnotation(node) {
-      let properties;
+      let properties = [];
 
       switch (node.typeAnnotation.type) {
         case 'GenericTypeAnnotation':
           let annotation = resolveGenericTypeAnnotation(node.typeAnnotation);
 
-          if (annotation && annotation.id) {
-            annotation = findVariableByName(annotation.id.name);
+          if (annotation && annotation.type === 'IntersectionTypeAnnotation') {
+            properties = getPropertiesFromIntersectionTypeAnnotationNode(annotation);
+          } else {
+            if (annotation && annotation.id) {
+              annotation = findVariableByName(annotation.id.name);
+            }
+
+            properties = annotation ? (annotation.properties || []) : [];
           }
 
-          properties = annotation ? (annotation.properties || []) : [];
           break;
 
         case 'UnionTypeAnnotation':
@@ -314,7 +337,6 @@ module.exports = {
       if (!component) {
         return;
       }
-
       addPropTypesToComponent(component, getPropTypesFromTypeAnnotation(node.typeAnnotation, context));
     }
 

lib/rules/no-unused-prop-types.js

@@ -736,6 +736,26 @@ module.exports = {
             return;
           }
           break;
+        case 'IntersectionTypeAnnotation':
+          propTypes.types.forEach(annotation => {
+            const propsType = typeScope(annotation.id.name);
+            iterateProperties(propsType.properties, (key, value) => {
+              if (!value) {
+                ignorePropsValidation = true;
+                return;
+              }
+
+              let types = buildTypeAnnotationDeclarationTypes(value, key);
+              if (types === true) {
+                types = {};
+              }
+              types.fullName = key;
+              types.name = key;
+              types.node = value;
+              declaredPropTypes.push(types);
+            });
+          });
+          break;
         case null:
           break;
         default:

lib/rules/prop-types.js

@@ -12,7 +12,6 @@ const Components = require('../util/Components');
 const variable = require('../util/variable');
 const annotations = require('../util/annotations');
 const versionUtil = require('../util/version');
-
 // ------------------------------------------------------------------------------
 // Constants
 // ------------------------------------------------------------------------------
@@ -794,6 +793,18 @@ module.exports = {
             return;
           }
           break;
+        case 'IntersectionTypeAnnotation':
+          propTypes.types.forEach(annotation => {
+            const propsType = typeScope(annotation.id.name);
+            iterateProperties(propsType.properties, (key, value) => {
+              if (!value) {
+                ignorePropsValidation = true;
+                return;
+              }
+              declaredPropTypes[key] = buildTypeAnnotationDeclarationTypes(value);
+            });
+          });
+          break;
         case null:
           break;
         default:

tests/lib/rules/default-props-match-prop-types.js

@@ -682,6 +682,25 @@ ruleTester.run('default-props-match-prop-types', rule, {
       ].join('\n'),
       parser: 'babel-eslint'
     },
+    {
+      code: `
+        type PropsA = { foo?: string };
+        type PropsB = { bar?: string, fooBar: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props;
+          static defaultProps = {
+            foo: "foo",
+          }
+
+          render() {
+            return <div>{this.props.foo} - {this.props.bar}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint'
+    },
     {
       code: [
         'import type Props from "fake";',
@@ -1509,6 +1528,34 @@ ruleTester.run('default-props-match-prop-types', rule, {
           column: 36
         }
       ]
+    },
+    {
+      code: `
+        type PropsA = { foo: string };
+        type PropsB = { bar: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props;
+          static defaultProps = {
+            fooBar: "fooBar",
+            foo: "foo",
+          }
+
+          render() {
+            return <div>{this.props.foo} - {this.props.bar}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint',
+      errors: [
+        {
+          message: 'defaultProp "fooBar" has no corresponding propTypes declaration.'
+        },
+        {
+          message: 'defaultProp "foo" defined for isRequired propType.'
+        }
+      ]
     }
   ]
 });

tests/lib/rules/no-unused-prop-types.js

@@ -824,6 +824,21 @@ ruleTester.run('no-unused-prop-types', rule, {
         '}'
       ].join('\n'),
       parser: 'babel-eslint'
+    }, {
+      code: `
+      type PropsA = { a: string }
+      type PropsB = { b: string }
+      type Props = PropsA & PropsB;
+      
+      class MyComponent extends React.Component {
+        props: Props;
+        
+        render() {
+          return <div>{this.props.a} - {this.props.b}</div>
+        }
+      }
+      `,
+      parser: 'babel-eslint'
     }, {
       code: [
         'import type Props from "fake";',
@@ -2637,6 +2652,24 @@ ruleTester.run('no-unused-prop-types', rule, {
       errors: [
         {message: '\'unused\' PropType is defined but prop is never used'}
       ]
+    }, {
+      code: `
+      type PropsA = { a: string }
+      type PropsB = { b: string }
+      type Props = PropsA & PropsB;
+      
+      class MyComponent extends React.Component {
+        props: Props;
+        
+        render() {
+          return <div>{this.props.a}</div>
+        }
+      }
+      `,
+      parser: 'babel-eslint',
+      errors: [
+        {message: '\'b\' PropType is defined but prop is never used'}
+      ]
     }, {
       code: [
         'class Hello extends React.Component {',

tests/lib/rules/prop-types.js

@@ -1669,7 +1669,23 @@ ruleTester.run('prop-types', rule, {
       `,
       settings: {react: {flowVersion: '0.53'}},
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type PropsA = { foo: string };
+        type PropsB = { bar: string };
+        type Props = PropsA & PropsB;
+
+        class Bar extends React.Component {
+          props: Props;
+          
+          render() {
+            return <div>{this.props.foo} - {this.props.bar}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint'
     },
+
     // issue #1288
     `function Foo() {
       const props = {}
@@ -3256,6 +3272,24 @@ ruleTester.run('prop-types', rule, {
         type: 'Identifier'
       }],
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type PropsA = {foo: string };
+        type PropsB = { bar: string };
+        type Props = PropsA & PropsB;
+
+        class MyComponent extends React.Component {
+          props: Props;
+          
+          render() {
+            return <div>{this.props.foo} - {this.props.bar} - {this.props.fooBar}</div>
+          }
+        }
+      `,
+      parser: 'babel-eslint',
+      errors: [{
+        message: '\'fooBar\' is missing in props validation'
+      }]
     }
   ]
 });