Merge pull request #1400 from jseminck/flow-53-hoc

Add support to ClassExpressions in the prop-types rule

Author: yannickcr

lib/rules/prop-types.js

@@ -65,6 +65,7 @@ module.exports = {
     // Used to track the type annotations in scope.
     // Necessary because babel's scopes do not track type annotations.
     let stack = null;
+    const classExpressions = [];
 
     const MISSING_MESSAGE = '\'{{name}}\' is missing in props validation';
 
@@ -173,7 +174,7 @@ module.exports = {
      * @returns {Boolean} True if the node is a class with generic prop types, false if not.
      */
     function isSuperTypeParameterPropsDeclaration(node) {
-      if (node && node.type === 'ClassDeclaration') {
+      if (node && (node.type === 'ClassDeclaration' || node.type === 'ClassExpression')) {
         if (node.superTypeParameters && node.superTypeParameters.params.length > 0) {
           return true;
         }
@@ -881,6 +882,7 @@ module.exports = {
       while (annotation && (annotation.type === 'TypeAnnotation' || annotation.type === 'NullableTypeAnnotation')) {
         annotation = annotation.typeAnnotation;
       }
+
       if (annotation.type === 'GenericTypeAnnotation' && typeScope(annotation.id.name)) {
         return typeScope(annotation.id.name);
       }
@@ -929,6 +931,13 @@ module.exports = {
         }
       },
 
+      ClassExpression: function(node) {
+        // TypeParameterDeclaration need to be added to typeScope in order to handle ClassExpressions.
+        // This visitor is executed before TypeParameterDeclaration are scoped, therefore we postpone
+        // processing class expressions until when the program exists.
+        classExpressions.push(node);
+      },
+
       ClassProperty: function(node) {
         if (isAnnotatedClassPropsDeclaration(node)) {
           markPropTypesAsDeclared(node, resolveTypeAnnotation(node));
@@ -1020,6 +1029,14 @@ module.exports = {
         typeScope(node.id.name, node.right);
       },
 
+      TypeParameterDeclaration: function(node) {
+        const identifier = node.params[0];
+
+        if (identifier.typeAnnotation) {
+          typeScope(identifier.name, identifier.typeAnnotation.typeAnnotation);
+        }
+      },
+
       Program: function() {
         stack = [{}];
       },
@@ -1033,6 +1050,12 @@ module.exports = {
       },
 
       'Program:exit': function() {
+        classExpressions.forEach(node => {
+          if (isSuperTypeParameterPropsDeclaration(node)) {
+            markPropTypesAsDeclared(node, resolveSuperParameterPropsType(node));
+          }
+        });
+
         stack = null;
         const list = components.list();
         // Report undeclared proptypes for all classes

tests/lib/rules/prop-types.js

@@ -1684,6 +1684,44 @@ ruleTester.run('prop-types', rule, {
         }
       `,
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type Props = { foo: string }
+        function higherOrderComponent<Props>() {
+          return class extends React.Component<Props> {
+            render() {
+              return <div>{this.props.foo}</div>
+            }
+          }
+        }
+      `,
+      parser: 'babel-eslint'
+    }, {
+      code: `
+        function higherOrderComponent<P: { foo: string }>() {
+          return class extends React.Component<P> {
+            render() {
+              return <div>{this.props.foo}</div>
+            }
+          }
+        }
+      `,
+      parser: 'babel-eslint'
+    }, {
+      code: `
+        const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): CpmponentType<P> => (
+          class extends React.Component<P> {
+            constructor(props) {
+              super(props);
+              this.state = {foo: props.foo}
+            }
+            render() {
+              return <div>Hello World</div>
+            }
+          }
+        )
+      `,
+      parser: 'babel-eslint'
     },
 
     // issue #1288
@@ -3272,6 +3310,53 @@ ruleTester.run('prop-types', rule, {
         type: 'Identifier'
       }],
       parser: 'babel-eslint'
+    }, {
+      code: `
+        type Props = { foo: string }
+        function higherOrderComponent<Props>() {
+          return class extends React.Component<Props> {
+            render() {
+              return <div>{this.props.foo} - {this.props.bar}</div>
+            }
+          }
+        }
+      `,
+      errors: [{
+        message: '\'bar\' is missing in props validation'
+      }],
+      parser: 'babel-eslint'
+    }, {
+      code: `
+        function higherOrderComponent<P: { foo: string }>() {
+          return class extends React.Component<P> {
+            render() {
+              return <div>{this.props.foo} - {this.props.bar}</div>
+            }
+          }
+        }
+      `,
+      errors: [{
+        message: '\'bar\' is missing in props validation'
+      }],
+      parser: 'babel-eslint'
+    }, {
+      code: `
+        const withOverlayState = <P: {foo: string}>(WrappedComponent: ComponentType<P>): CpmponentType<P> => (
+          class extends React.Component<P> {
+            constructor(props) {
+              super(props);
+              this.state = {foo: props.foo, bar: props.bar}
+            }
+            render() {
+              return <div>Hello World</div>
+            }
+          }
+        )
+      `,
+      errors: [{
+        message: '\'bar\' is missing in props validation'
+      }],
+      parser: 'babel-eslint'
     }, {
       code: `
         type PropsA = {foo: string };