Fix component detection in prop-types and display-name (fixes #45)

Author: yannickcr

lib/rules/display-name.js

@@ -18,6 +18,19 @@ module.exports = function(context) {
   var MISSING_MESSAGE = 'Component definition is missing display name';
   var MISSING_MESSAGE_NAMED_COMP = '{{component}} component definition is missing display name';
 
+  /**
+   * Checks if the component must be validated
+   * @param {Object} component The component to process
+   * @returns {Boolean} True if the component must be validated, false if not.
+   */
+  function mustBeValidated(component) {
+    return (
+      component &&
+      component.isReactComponent &&
+      !component.hasDisplayName
+    );
+  }
+
   /**
    * Checks if we are declaring a display name
    * @param {ASTNode} node The AST node being checked.
@@ -45,9 +58,6 @@ module.exports = function(context) {
    * @param {Object} component The component to process
    */
   function reportMissingDisplayName(component) {
-    if (!component || component.hasDisplayName === true) {
-      return;
-    }
     context.report(
       component.node,
       component.name === componentUtil.DEFAULT_COMPONENT_NAME ? MISSING_MESSAGE : MISSING_MESSAGE_NAMED_COMP, {
@@ -87,7 +97,7 @@ module.exports = function(context) {
       var list = componentList.getList();
       // Report missing display name for all classes
       for (var component in list) {
-        if (!list.hasOwnProperty(component)) {
+        if (!list.hasOwnProperty(component) || !mustBeValidated(list[component])) {
           continue;
         }
         reportMissingDisplayName(list[component]);
@@ -98,7 +108,9 @@ module.exports = function(context) {
       if (!componentUtil.isReactComponent(context, node)) {
         return;
       }
-      componentList.set(context, node);
+      componentList.set(context, node, {
+        isReactComponent: true
+      });
     }
   };
 

lib/rules/prop-types.js

@@ -54,6 +54,20 @@ module.exports = function(context) {
     return ignored.indexOf(name) !== -1;
   }
 
+  /**
+   * Checks if the component must be validated
+   * @param {Object} component The component to process
+   * @returns {Boolean} True if the component must be validated, false if not.
+   */
+  function mustBeValidated(component) {
+    return (
+      component &&
+      component.isReactComponent &&
+      component.usedPropTypes &&
+      !component.ignorePropsValidation
+    );
+  }
+
   /**
    * Checks if the prop is declared
    * @param {String} name Name of the prop to check.
@@ -145,9 +159,6 @@ module.exports = function(context) {
    * @param {Object} component The component to process
    */
   function reportUndeclaredPropTypes(component) {
-    if (!component || !component.usedPropTypes || component.ignorePropsValidation === true) {
-      return;
-    }
     var name;
     for (var i = 0, j = component.usedPropTypes.length; i < j; i++) {
       name = component.usedPropTypes[i].name;
@@ -208,7 +219,7 @@ module.exports = function(context) {
       var list = componentList.getList();
       // Report undeclared proptypes for all classes
       for (var component in list) {
-        if (!list.hasOwnProperty(component)) {
+        if (!list.hasOwnProperty(component) || !mustBeValidated(list[component])) {
           continue;
         }
         reportUndeclaredPropTypes(list[component]);
@@ -219,7 +230,9 @@ module.exports = function(context) {
       if (!componentUtil.isReactComponent(context, node)) {
         return;
       }
-      componentList.set(context, node);
+      componentList.set(context, node, {
+        isReactComponent: true
+      });
     }
   };
 

tests/lib/rules/display-name.js

@@ -43,6 +43,18 @@ eslintTester.addRuleTest('lib/rules/display-name', {
       classes: true,
       jsx: true
     }
+  }, {
+    code: [
+      'class Hello {',
+      '  render() {',
+      '    return \'Hello World\';',
+      '  }',
+      '}'
+    ].join('\n'),
+    ecmaFeatures: {
+      classes: true,
+      jsx: true
+    }
   }],
 
   invalid: [{

tests/lib/rules/prop-types.js

@@ -153,6 +153,18 @@ eslintTester.addRuleTest('lib/rules/prop-types', {
       ecmaFeatures: {
         jsx: true
       }
+    }, {
+      code: [
+        'class Hello {',
+        '  render() {',
+        '    return \'Hello\' + this.props.name;',
+        '  }',
+        '}'
+      ].join('\n'),
+      ecmaFeatures: {
+        classes: true,
+        jsx: true
+      }
     }
   ],