Add support for explicit declaration that class extends React.Component (fixes jsx-eslint#68)

Author: gausie

lib/util/Components.js

@@ -5,6 +5,7 @@
 'use strict';
 
 var util = require('util');
+var doctrine = require('doctrine');
 var variableUtil = require('./variable');
 var pragmaUtil = require('./pragma');
 
@@ -160,12 +161,41 @@ function componentRule(rule, context) {
      * @returns {Boolean} True if the node is a React ES6 component, false if not
      */
     isES6Component: function(node) {
+      if (utils.isExplicitComponent(node)) {
+        return true;
+      }
+
       if (!node.superClass) {
         return false;
       }
       return new RegExp('^(' + pragma + '\\.)?Component$').test(sourceCode.getText(node.superClass));
     },
 
+    /**
+     * Check if the node is explicitly declared as a descendant of a React Component
+     *
+     * @param {ASTNode} node The AST node being checked (can be a ReturnStatement or an ArrowFunctionExpression).
+     * @returns {Boolean} True if the node is explicitly declared as a descendant of a React Component, false if not
+     */
+    isExplicitComponent: function(node) {
+      var comment = sourceCode.getJSDocComment(node);
+
+      if (comment === null) {
+        return false;
+      }
+
+      var commentAst = doctrine.parse(comment.value, {
+        unwrap: true,
+        tags: ['extends', 'augments']
+      });
+
+      var relevantTags = commentAst.tags.filter(function(tag) {
+        return tag.name === 'React.Component';
+      });
+
+      return relevantTags.length > 0;
+    },
+
     /**
      * Check if the node is returning JSX
      *

package.json

@@ -22,6 +22,9 @@
   },
   "homepage": "https://github.com/yannickcr/eslint-plugin-react",
   "bugs": "https://github.com/yannickcr/eslint-plugin-react/issues",
+  "dependencies": {
+    "doctrine": "^1.2.0"
+  },
   "devDependencies": {
     "babel-eslint": "6.0.4",
     "coveralls": "2.11.9",

tests/lib/rules/prop-types.js

@@ -1274,6 +1274,22 @@ ruleTester.run('prop-types', rule, {
         column: 35,
         type: 'Identifier'
       }]
+    }, {
+      code: [
+        '/** @extends React.Component */',
+        'class Hello extends ChildComponent {',
+        '  render() {',
+        '    return <div>Hello {this.props.name}</div>;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parserOptions: parserOptions,
+      errors: [{
+        message: '\'name\' is missing in props validation',
+        line: 4,
+        column: 35,
+        type: 'Identifier'
+      }]
     }, {
       code: [
         'class Hello extends React.Component {',