Add no-deprecated-methods rule to prevents usage of deprecated component lifecycle methods

README.md

@@ -103,6 +103,7 @@ Enable the rules that you would like to use.
 * [react/no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties
 * [react/no-danger-with-children](docs/rules/no-danger-with-children.md): Prevent problem with children and props.dangerouslySetInnerHTML
 * [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods
+* [react/no-deprecated-methods](docs/rules/no-deprecated-methods.md): Prevents usage of deprecated component lifecycle methods
 * [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of `setState` in `componentDidMount`
 * [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of `setState` in `componentDidUpdate`
 * [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md): Prevent direct mutation of `this.state`

docs/rules/no-deprecated-methods.md

@@ -0,0 +1,53 @@
+# Prevents usage of deprecated component lifecycle methods (react/no-deprecated-methods)
+
+Warns if you have deprecated methods defined when defining a component that extends `React.Component`, `React.PureComponent` or uses ES5 syntax with `createReactClass`. See [React 16.3 details](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path).
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+class Foo extends React.Component {
+  componentWillReceiveProps() { }
+  // ...
+}
+
+class Foo extends React.PureComponent {
+  componentWillReceiveProps() { }
+  // ...
+}
+
+var Foo = createReactClass({
+  componentWillReceiveProps: function() {},
+})
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+class Foo {
+    componentWillReceiveProps() {}
+}
+
+var Foo = createReactClassNonReact({
+    componentWillReceiveProps: function() {}
+});
+```
+
+## Rule Options
+
+This rule can take options to ignore some deprecated methods.
+
+```js
+...
+"react/no-deprecated-methods": [<enabled>, {
+  "componentWillMount": <boolean>,
+  "componentWillReceiveProps": <boolean>,
+  "componentWillUpdate": <boolean>,
+}]
+...
+```
+
+* `componentWillMount`: `true` by default.
+* `componentWillReceiveProps`: `true` by default.
+* `componentWillUpdate`: `true` by default.

index.js

@@ -49,6 +49,7 @@ const allRules = {
   'no-danger': require('./lib/rules/no-danger'),
   'no-danger-with-children': require('./lib/rules/no-danger-with-children'),
   'no-deprecated': require('./lib/rules/no-deprecated'),
+  'no-deprecated-methods': require('./lib/rules/no-deprecated-methods'),
   'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
   'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
   'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),

lib/rules/no-deprecated-methods.js

@@ -0,0 +1,104 @@
+/**
+ * @fileoverview Prevents usage of deprecated component lifecycle methods
+ */
+'use strict';
+
+const Components = require('../util/Components');
+const astUtil = require('../util/ast');
+const docsUrl = require('../util/docsUrl');
+
+function errorMessage(node, method) {
+  return `${node} should not use ${method}.`;
+}
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevents usage of deprecated component lifecycle methods',
+      category: 'Possible Errors',
+      recommended: false,
+      url: docsUrl('no-deprecated-methods')
+    },
+    schema: [{
+      type: 'object',
+      properties: {
+        componentWillMount: {
+          type: 'boolean'
+        },
+        componentWillReceiveProps: {
+          type: 'boolean'
+        },
+        componentWillUpdate: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
+    }]
+  },
+
+  create: Components.detect((context, components, utils) => {
+    const defaults = {
+      componentWillMount: true,
+      componentWillReceiveProps: true,
+      componentWillUpdate: true
+    };
+    const configuration = Object.assign({}, defaults, context.options[0] || {});
+    const methods = Object.keys(configuration).filter(key => configuration[key]);
+    /**
+     * Returns deprecated methods if available
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {Array} The array of deprecated methods.
+     */
+    function getDeprecatedMethods(node) {
+      const properties = astUtil.getComponentProperties(node);
+      return properties
+        .map(property => astUtil.getPropertyName(property))
+        .filter(name => methods.indexOf(name) !== -1);
+    }
+
+    /**
+     * Gets name of node if available
+     * @param {ASTNode} node The AST node being checked.
+     * @return {String} The name of the node
+     */
+    function getNodeName(node) {
+      if (node.id) {
+        return node.id.name;
+      } else if (node.parent && node.parent.id) {
+        return node.parent.id.name;
+      } else if (node.parent && node.parent.parent && node.parent.parent.id) {
+        return node.parent.parent.id.name;
+      }
+      return '';
+    }
+
+    /**
+     * Checks for violation of rule
+     * @param {ASTNode} node The AST node being checked.
+     */
+    function checkForViolation(node) {
+      if (utils.isES5Component(node) || utils.isES6Component(node)) {
+        const deprecatedMethods = getDeprecatedMethods(node);
+        if (deprecatedMethods && deprecatedMethods.length) {
+          const className = getNodeName(node);
+          deprecatedMethods.forEach(method => {
+            context.report({
+              node: node,
+              message: errorMessage(className, method)
+            });
+          });
+        }
+      }
+    }
+
+    return {
+      ClassDeclaration: checkForViolation,
+      ClassExpression: checkForViolation,
+      ObjectExpression: checkForViolation
+    };
+  })
+};

tests/lib/rules/no-deprecated-methods.js

@@ -0,0 +1,222 @@
+/**
+ * @fileoverview Tests for no-deprecated-methods
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-deprecated-methods');
+const RuleTester = require('eslint').RuleTester;
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    experimentalObjectRestSpread: true,
+    jsx: true
+  }
+};
+
+function errorMessage(node, method) {
+  return `${node} should not use ${method}.`;
+}
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+ruleTester.run('no-deprecated-methods', rule, {
+  valid: [
+    {
+      code: `
+        var Foo = createReactClass({
+          render: function() {}
+        })
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        var Foo = createReactClassNonReact({
+          componentWillMount: function() {},
+          componentWillReceiveProps: function() {},
+          componentWillUpdate: function() {}
+        });
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        var Foo = {
+          componentWillMount: function() {},
+          componentWillReceiveProps: function() {},
+          componentWillUpdate: function() {}
+        };
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+        }
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+        }
+      `,
+      parser: 'babel-eslint',
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.PureComponent {
+        }
+      `,
+      parser: 'babel-eslint',
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        function Foo() {
+          return class Bar extends React.Component {
+          };
+        }
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        function Foo() {
+          return <div>test</div>
+        }
+      `,
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      options: [{
+        componentWillMount: false,
+        componentWillReceiveProps: false,
+        componentWillUpdate: false
+      }],
+      parserOptions: parserOptions
+    }
+  ],
+
+  invalid: [
+    {
+      code: `
+        function Foo() {
+          return class Bar extends React.PureComponent {
+            componentWillMount() {}
+            componentWillReceiveProps() {}
+            componentWillUpdate() {}
+          };
+        }
+      `,
+      errors: [
+        {message: errorMessage('Bar', 'componentWillMount')},
+        {message: errorMessage('Bar', 'componentWillReceiveProps')},
+        {message: errorMessage('Bar', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        var Foo = createReactClass({
+           componentWillMount: function() {},
+           componentWillReceiveProps: function() {},
+           componentWillUpdate: function() {}
+        })
+      `,
+      errors: [
+        {message: errorMessage('Foo', 'componentWillMount')},
+        {message: errorMessage('Foo', 'componentWillReceiveProps')},
+        {message: errorMessage('Foo', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.PureComponent {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      errors: [
+        {message: errorMessage('Foo', 'componentWillMount')},
+        {message: errorMessage('Foo', 'componentWillReceiveProps')},
+        {message: errorMessage('Foo', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends PureComponent {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      errors: [
+        {message: errorMessage('Foo', 'componentWillMount')},
+        {message: errorMessage('Foo', 'componentWillReceiveProps')},
+        {message: errorMessage('Foo', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends React.Component {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      errors: [
+        {message: errorMessage('Foo', 'componentWillMount')},
+        {message: errorMessage('Foo', 'componentWillReceiveProps')},
+        {message: errorMessage('Foo', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    },
+    {
+      code: `
+        class Foo extends Component {
+          componentWillMount() {}
+          componentWillReceiveProps() {}
+          componentWillUpdate() {}
+        }
+      `,
+      errors: [
+        {message: errorMessage('Foo', 'componentWillMount')},
+        {message: errorMessage('Foo', 'componentWillReceiveProps')},
+        {message: errorMessage('Foo', 'componentWillUpdate')}
+      ],
+      parserOptions: parserOptions
+    }
+  ]
+});