Ignore functions with the this keyword during component detection

Author: yannickcr

lib/util/Components.js

@@ -21,16 +21,22 @@ function Components() {
  * Add a node to the components list, or update it if it's already in the list
  *
  * @param {ASTNode} node The AST node being added.
- * @param {Object} props Additional properties to add to the component.
+ * @param {Number} confidence Confidence in the component detection (0=banned, 1=maybe, 2=yes)
  */
-Components.prototype.add = function(node, props) {
+Components.prototype.add = function(node, confidence) {
   var id = this._getId(node);
   if (this._list[id]) {
-    this._list[id] = util._extend(this._list[id], props);
+    if (confidence === 0 || this._list[id].confidence === 0) {
+      this._list[id].confidence = 0;
+    } else {
+      this._list[id].confidence = Math.max(this._list[id].confidence, confidence);
+    }
     return;
   }
-  props.node = node;
-  this._list[id] = props;
+  this._list[id] = {
+    node: node,
+    confidence: confidence
+  };
 };
 
 /**
@@ -70,7 +76,7 @@ Components.prototype.set = function(node, props) {
 Components.prototype.list = function() {
   var list = {};
   for (var i in this._list) {
-    if (!this._list.hasOwnProperty(i) || !this._list[i].confident) {
+    if (!this._list.hasOwnProperty(i) || this._list[i].confidence < 2) {
       continue;
     }
     list[i] = this._list[i];
@@ -87,7 +93,7 @@ Components.prototype.list = function() {
 Components.prototype.length = function() {
   var length = 0;
   for (var i in this._list) {
-    if (!this._list.hasOwnProperty(i) || !this._list[i].confident) {
+    if (!this._list.hasOwnProperty(i) || this._list[i].confidence < 2) {
       continue;
     }
     length++;
@@ -309,40 +315,38 @@ function componentRule(rule, context) {
       if (!context.react.isES6Component(node)) {
         return;
       }
-      components.add(node, {confident: true});
+      components.add(node, 2);
     },
 
     ClassProperty: function(node) {
       node = context.react.getParentComponent();
       if (!node) {
         return;
       }
-      components.add(node, {confident: true});
+      components.add(node, 2);
     },
 
     ObjectExpression: function(node) {
       if (!context.react.isES5Component(node)) {
         return;
       }
-      components.add(node, {confident: true});
+      components.add(node, 2);
     },
 
     FunctionExpression: function(node) {
       node = context.react.getParentComponent();
       if (!node) {
         return;
       }
-      var component = components.get(node);
-      components.add(node, {confident: component && component.confident || false});
+      components.add(node, 1);
     },
 
     FunctionDeclaration: function(node) {
       node = context.react.getParentComponent();
       if (!node) {
         return;
       }
-      var component = components.get(node);
-      components.add(node, {confident: component && component.confident || false});
+      components.add(node, 1);
     },
 
     ArrowFunctionExpression: function(node) {
@@ -351,11 +355,19 @@ function componentRule(rule, context) {
         return;
       }
       if (node.expression && context.react.isReturningJSX(node)) {
-        components.add(node, {confident: true});
+        components.add(node, 2);
       } else {
-        var component = components.get(node);
-        components.add(node, {confident: component && component.confident || false});
+        components.add(node, 1);
+      }
+    },
+
+    ThisExpression: function(node) {
+      node = context.react.getParentComponent();
+      if (!node || !/Function/.test(node.type)) {
+        return;
       }
+      // Ban functions with a ThisExpression
+      components.add(node, 0);
     },
 
     ReturnStatement: function(node) {
@@ -366,7 +378,7 @@ function componentRule(rule, context) {
       if (!node) {
         return;
       }
-      components.add(node, {confident: true});
+      components.add(node, 2);
     }
   };
 

tests/lib/rules/display-name.js

@@ -308,6 +308,16 @@ ruleTester.run('display-name', rule, {
     options: [{
       acceptTranspilerName: true
     }]
+  }, {
+    code: [
+      'export default {',
+      '  renderHello() {',
+      '    let {name} = this.props;',
+      '    return <div>{name}</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint'
   }
 ],
 
@@ -378,7 +388,7 @@ ruleTester.run('display-name', rule, {
   }, {
     code: [
       'module.exports = () => {',
-      '  return <div>Hello {this.props.name}</div>;',
+      '  return <div>Hello {props.name}</div>;',
       '}'
     ].join('\n'),
     parser: 'babel-eslint',
@@ -391,7 +401,7 @@ ruleTester.run('display-name', rule, {
   }, {
     code: [
       'module.exports = function() {',
-      '  return <div>Hello {this.props.name}</div>;',
+      '  return <div>Hello {props.name}</div>;',
       '}'
     ].join('\n'),
     parser: 'babel-eslint',

tests/lib/rules/no-multi-comp.js

@@ -62,6 +62,20 @@ ruleTester.run('no-multi-comp', rule, {
       classes: true,
       jsx: true
     }
+  }, {
+    code: [
+      'export default {',
+      '  renderHello() {',
+      '    let {name} = this.props;',
+      '    return <div>{name}</div>;',
+      '  },',
+      '  renderHello2() {',
+      '    let {name2} = this.props;',
+      '    return <div>{name2}</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint'
   }],
 
   invalid: [{

tests/lib/rules/prop-types.js

@@ -883,6 +883,16 @@ ruleTester.run('prop-types', rule, {
         '};'
       ].join('\n'),
       parser: 'babel-eslint'
+    }, {
+      code: [
+        'export default {',
+        '  renderHello() {',
+        '    let {name} = this.props;',
+        '    return <div>{name}</div>;',
+        '  }',
+        '};'
+      ].join('\n'),
+      parser: 'babel-eslint'
     }
   ],