Add support for nextProps to prop-types (fixes #814)

Author: Yannick Croissant

lib/rules/prop-types.js

@@ -15,7 +15,8 @@ var annotations = require('../util/annotations');
 // Constants
 // ------------------------------------------------------------------------------
 
-var DIRECT_PROPS_REGEX = /^props\s*(\.|\[)/;
+var PROPS_REGEX = /^(props|nextProps)$/;
+var DIRECT_PROPS_REGEX = /^(props|nextProps)\s*(\.|\[)/;
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -81,6 +82,39 @@ module.exports = {
       return value;
     }
 
+    /**
+     * Check if we are in a class constructor
+     * @return {boolean} true if we are in a class constructor, false if not
+     */
+    function inConstructor() {
+      var scope = context.getScope();
+      while (scope) {
+        if (scope.block && scope.block.parent && scope.block.parent.kind === 'constructor') {
+          return true;
+        }
+        scope = scope.upper;
+      }
+      return false;
+    }
+
+    /**
+     * Check if we are in a class constructor
+     * @return {boolean} true if we are in a class constructor, false if not
+     */
+    function inComponentWillReceiveProps() {
+      var scope = context.getScope();
+      while (scope) {
+        if (
+          scope.block && scope.block.parent &&
+          scope.block.parent.key && scope.block.parent.key.name === 'componentWillReceiveProps'
+        ) {
+          return true;
+        }
+        scope = scope.upper;
+      }
+      return false;
+    }
+
     /**
      * Checks if we are using a prop
      * @param {ASTNode} node The AST node being checked.
@@ -92,7 +126,8 @@ module.exports = {
         node.object.type === 'ThisExpression' && node.property.name === 'props'
       );
       var isStatelessFunctionUsage = node.object.name === 'props';
-      return isClassUsage || isStatelessFunctionUsage;
+      var isNextPropsUsage = node.object.name === 'nextProps' && inComponentWillReceiveProps();
+      return isClassUsage || isStatelessFunctionUsage || isNextPropsUsage;
     }
 
     /**
@@ -464,21 +499,6 @@ module.exports = {
       }
     }
 
-    /**
-     * Check if we are in a class constructor
-     * @return {boolean} true if we are in a class constructor, false if not
-     */
-    function inConstructor() {
-      var scope = context.getScope();
-      while (scope) {
-        if (scope.block && scope.block.parent && scope.block.parent.kind === 'constructor') {
-          return true;
-        }
-        scope = scope.upper;
-      }
-      return false;
-    }
-
     /**
      * Retrieve the name of a property node
      * @param {ASTNode} node The AST node with the property.
@@ -487,8 +507,9 @@ module.exports = {
     function getPropertyName(node) {
       var isDirectProp = DIRECT_PROPS_REGEX.test(sourceCode.getText(node));
       var isInClassComponent = utils.getParentES6Component() || utils.getParentES5Component();
-      var isNotInConstructor = !inConstructor(node);
-      if (isDirectProp && isInClassComponent && isNotInConstructor) {
+      var isNotInConstructor = !inConstructor();
+      var isNotInComponentWillReceiveProps = !inComponentWillReceiveProps();
+      if (isDirectProp && isInClassComponent && isNotInConstructor && isNotInComponentWillReceiveProps) {
         return void 0;
       }
       if (!isDirectProp) {
@@ -561,13 +582,13 @@ module.exports = {
             // let {props: {firstname}} = this
             var thisDestructuring = (
               !hasSpreadOperator(node.id.properties[i]) &&
-              (node.id.properties[i].key.name === 'props' || node.id.properties[i].key.value === 'props') &&
+              (PROPS_REGEX.test(node.id.properties[i].key.name) || PROPS_REGEX.test(node.id.properties[i].key.value)) &&
               node.id.properties[i].value.type === 'ObjectPattern'
             );
             // let {firstname} = props
             var directDestructuring =
-              node.init.name === 'props' &&
-              (utils.getParentStatelessComponent() || inConstructor())
+              PROPS_REGEX.test(node.init.name) &&
+              (utils.getParentStatelessComponent() || inConstructor() || inComponentWillReceiveProps())
             ;
 
             if (thisDestructuring) {
@@ -600,7 +621,10 @@ module.exports = {
           usedPropTypes.push({
             name: name,
             allNames: allNames,
-            node: !isDirectProp && !inConstructor(node) ? node.parent.property : node.property
+            node: (
+              !isDirectProp && !inConstructor() && !inComponentWillReceiveProps() ? node.parent.property :
+              node.property
+            )
           });
           break;
         case 'destructuring':
@@ -612,7 +636,7 @@ module.exports = {
 
             var currentNode = node;
             allNames = [];
-            while (currentNode.property && currentNode.property.name !== 'props') {
+            while (currentNode.property && !PROPS_REGEX.test(currentNode.property.name)) {
               allNames.unshift(currentNode.property.name);
               currentNode = currentNode.object;
             }
@@ -813,8 +837,8 @@ module.exports = {
         // let {firstname} = props
         var directDestructuring =
           destructuring &&
-          node.init.name === 'props' &&
-          (utils.getParentStatelessComponent() || inConstructor())
+          PROPS_REGEX.test(node.init.name) &&
+          (utils.getParentStatelessComponent() || inConstructor() || inComponentWillReceiveProps())
         ;
 
         if (!thisDestructuring && !directDestructuring) {

tests/lib/rules/prop-types.js

@@ -2575,6 +2575,47 @@ ruleTester.run('prop-types', rule, {
       errors: [
         {message: '\'foo\' is missing in props validation'}
       ]
+    }, {
+      code: [
+        'class Hello extends Component {',
+        '  static propTypes = {',
+        '    bar: PropTypes.func',
+        '  }',
+        '  componentWillReceiveProps(nextProps) {',
+        '    if (nextProps.foo) {',
+        '      return;',
+        '    }',
+        '  }',
+        '  render() {',
+        '    return <div bar={this.props.bar} />;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [
+        {message: '\'foo\' is missing in props validation'}
+      ]
+    }, {
+      code: [
+        'class Hello extends Component {',
+        '  static propTypes = {',
+        '    bar: PropTypes.func',
+        '  }',
+        '  componentWillReceiveProps(nextProps) {',
+        '    const {foo} = nextProps;',
+        '    if (foo) {',
+        '      return;',
+        '    }',
+        '  }',
+        '  render() {',
+        '    return <div bar={this.props.bar} />;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parser: 'babel-eslint',
+      errors: [
+        {message: '\'foo\' is missing in props validation'}
+      ]
     }
   ]
 });