Make prefer-stateless-function PureComponent aware

docs/rules/prefer-stateless-function.md

@@ -16,7 +16,7 @@ If none of these elements are found, the rule will warn you to write this compon
 
 The following pattern is considered a warning:
 
-```js
+```jsx
 var Hello = React.createClass({
   render: function() {
     return <div>Hello {this.props.name}</div>;
@@ -26,15 +26,15 @@ var Hello = React.createClass({
 
 The following pattern is not considered a warning:
 
-```js
+```jsx
 const Foo = function(props) {
   return <div>{props.foo}</div>;
 };
 ```
 
 The following pattern is not considered a warning in React <15.0.0:
 
-```js
+```jsx
 class Foo extends React.Component {
   render() {
     if (!this.props.foo) {
@@ -45,13 +45,38 @@ class Foo extends React.Component {
 }
 ```
 
-The following pattern is not considered a warning:
+
+## Rule Options
 
 ```js
+...
+"prefer-stateless-function": [<enabled>, { "ignorePureComponent": <ignorePureComponent> }]
+...
+```
+
+* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
+* `ignorePureComponent`: optional boolean set to `true` to ignore components extending from `React.PureComponent` (default to `false`).
+
+### `ignorePureComponent`
+
+When `true` the rule will ignore Components extending from `React.PureComponent` that use `this.props` or `this.context`.
+
+The following patterns is considered okay and does not cause warnings:
+
+```jsx
 class Foo extends React.PureComponent {
   render() {
     return <div>{this.props.foo}</div>;
   }
 }
 ```
 
+The following pattern is considered a warning because it's not using props or context:
+
+```jsx
+class Foo extends React.PureComponent {
+  render() {
+    return <div>Bar</div>;
+  }
+}
+```

lib/rules/no-multi-comp.js

@@ -43,7 +43,7 @@ module.exports = {
      * @returns {Boolean} True if the component is ignored, false if not.
      */
     function isIgnored(component) {
-      return ignoreStateless === true && /Function/.test(component.node.type);
+      return ignoreStateless && /Function/.test(component.node.type);
     }
 
     // --------------------------------------------------------------------------

lib/rules/prefer-stateless-function.js

@@ -7,7 +7,6 @@
 'use strict';
 
 var Components = require('../util/Components');
-var pragmaUtil = require('../util/pragma');
 var versionUtil = require('../util/version');
 
 // ------------------------------------------------------------------------------
@@ -21,13 +20,22 @@ module.exports = {
       category: 'Stylistic Issues',
       recommended: false
     },
-    schema: []
+    schema: [{
+      type: 'object',
+      properties: {
+        ignorePureComponents: {
+          default: false,
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
   },
 
   create: Components.detect(function(context, components, utils) {
 
-    var pragma = pragmaUtil.getFromContext(context);
-    var pureComponentRegExp = new RegExp('^(' + pragma + '\\.)?PureComponent$');
+    var configuration = context.options[0] || {};
+    var ignorePureComponents = configuration.ignorePureComponents || false;
 
     var sourceCode = context.getSourceCode();
 
@@ -68,19 +76,6 @@ module.exports = {
       }
     }
 
-    /**
-     * Checks to see if our component extends React.PureComponent
-     * @param {ASTNode} node The AST node being checked.
-     * @returns {Boolean} True if node extends React.PureComponent, false if not.
-     */
-    var isPureComponent = function (node) {
-      if (node.superClass) {
-        return pureComponentRegExp.test(sourceCode.getText(node.superClass));
-      }
-
-      return false;
-    };
-
     /**
      * Checks whether a given array of statements is a single call of `super`.
      * @see ESLint no-useless-constructor rule
@@ -282,10 +277,9 @@ module.exports = {
 
     return {
       ClassDeclaration: function (node) {
-        if (!isPureComponent(node)) {
-          return;
+        if (ignorePureComponents && utils.isPureComponent(node)) {
+          markSCUAsDeclared(node);
         }
-        markSCUAsDeclared(node);
       },
 
       // Mark `this` destructuring as a usage of `this`

lib/rules/require-optimization.js

@@ -5,7 +5,6 @@
 'use strict';
 
 var Components = require('../util/Components');
-var pragmaUtil = require('../util/pragma');
 
 module.exports = {
   meta: {
@@ -29,15 +28,11 @@ module.exports = {
     }]
   },
 
-  create: Components.detect(function (context, components) {
+  create: Components.detect(function (context, components, utils) {
     var MISSING_MESSAGE = 'Component is not optimized. Please add a shouldComponentUpdate method.';
     var configuration = context.options[0] || {};
     var allowDecorators = configuration.allowDecorators || [];
 
-    var pragma = pragmaUtil.getFromContext(context);
-    var pureComponentRegExp = new RegExp('^(' + pragma + '\\.)?PureComponent$');
-    var sourceCode = context.getSourceCode();
-
     /**
      * Checks to see if our component is decorated by PureRenderMixin via reactMixin
      * @param {ASTNode} node The AST node being checked.
@@ -89,19 +84,6 @@ module.exports = {
       return false;
     };
 
-    /**
-     * Checks to see if our component extends React.PureComponent
-     * @param {ASTNode} node The AST node being checked.
-     * @returns {Boolean} True if node extends React.PureComponent, false if not.
-     */
-    var isPureComponent = function (node) {
-      if (node.superClass) {
-        return pureComponentRegExp.test(sourceCode.getText(node.superClass));
-      }
-
-      return false;
-    };
-
     /**
      * Checks if we are declaring a shouldComponentUpdate method
      * @param {ASTNode} node The AST node being checked.
@@ -186,7 +168,7 @@ module.exports = {
       },
 
       ClassDeclaration: function (node) {
-        if (!(hasPureRenderDecorator(node) || hasCustomDecorator(node) || isPureComponent(node))) {
+        if (!(hasPureRenderDecorator(node) || hasCustomDecorator(node) || utils.isPureComponent(node))) {
           return;
         }
         markSCUAsDeclared(node);

lib/util/Components.js

@@ -199,6 +199,19 @@ function componentRule(rule, context) {
       return relevantTags.length > 0;
     },
 
+    /**
+     * Checks to see if our component extends React.PureComponent
+     *
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {Boolean} True if node extends React.PureComponent, false if not
+     */
+    isPureComponent: function (node) {
+      if (node.superClass) {
+        return new RegExp('^(' + pragma + '\\.)?PureComponent$').test(sourceCode.getText(node.superClass));
+      }
+      return false;
+    },
+
     /**
      * Check if the node is returning JSX
      *

tests/lib/rules/prefer-stateless-function.js

@@ -47,7 +47,10 @@ ruleTester.run('prefer-stateless-function', rule, {
         '  }',
         '}'
       ].join('\n'),
-      parserOptions: parserOptions
+      parserOptions: parserOptions,
+      options: [{
+        ignorePureComponents: true
+      }]
     }, {
       // Extends from PureComponent and uses context
       code: [
@@ -57,7 +60,10 @@ ruleTester.run('prefer-stateless-function', rule, {
         '  }',
         '}'
       ].join('\n'),
-      parserOptions: parserOptions
+      parserOptions: parserOptions,
+      options: [{
+        ignorePureComponents: true
+      }]
     }, {
       // Has a lifecyle method
       code: [
@@ -289,6 +295,22 @@ ruleTester.run('prefer-stateless-function', rule, {
         '}'
       ].join('\n'),
       parserOptions: parserOptions,
+      options: [{
+        ignorePureComponents: true
+      }],
+      errors: [{
+        message: 'Component should be written as a pure function'
+      }]
+    }, {
+      // Extends from PureComponent but no ignorePureComponents option
+      code: [
+        'class Foo extends React.PureComponent {',
+        '  render() {',
+        '    return <div>{this.props.foo}</div>;',
+        '  }',
+        '}'
+      ].join('\n'),
+      parserOptions: parserOptions,
       errors: [{
         message: 'Component should be written as a pure function'
       }]