Add no-find-dom-node rule (fixes #678)

Author: yannickcr

README.md

@@ -87,6 +87,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [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`
+* [react/no-find-dom-node](docs/rules/no-find-dom-node.md): Prevent usage of `findDOMNode`
 * [react/no-is-mounted](docs/rules/no-is-mounted.md): Prevent usage of `isMounted`
 * [react/no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
 * [react/no-render-return-value](docs/rules/no-render-return-value.md): Prevent usage of the return value of `React.render`
@@ -162,6 +163,7 @@ The rules enabled in this configuration are:
 * [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) with `allow-in-func` option
 * [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md) with `allow-in-func` option
 * [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md)
+* [react/no-find-dom-node](docs/rules/no-find-dom-node.md)
 * [react/no-is-mounted](docs/rules/no-is-mounted.md)
 * [react/no-unknown-property](docs/rules/no-unknown-property.md)
 * [react/prop-types](docs/rules/prop-types.md)

docs/rules/no-find-dom-node.md

@@ -0,0 +1,33 @@
+# Prevent usage of findDOMNode (no-find-dom-node)
+
+Facebook will eventually deprecate `findDOMNode` as it blocks certain improvements in React in the future.
+
+It is recommended to use callback refs instead. See [Dan Abramov comments and examples](https://github.com/yannickcr/eslint-plugin-react/issues/678#issue-165177220).
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+class MyComponent extends Component {
+  componentDidMount() {
+    findDOMNode(this).scrollIntoView();
+  }
+  render() {
+    return <div />
+  }
+}
+```
+
+The following patterns are not considered warnings:
+
+```js
+class MyComponent extends Component {
+  componentDidMount() {
+    this.node.scrollIntoView();
+  }
+  render() {
+    return <div ref={node => this.node = node} />
+  }
+}
+```

index.js

@@ -47,7 +47,8 @@ module.exports = {
     'jsx-first-prop-new-line': require('./lib/rules/jsx-first-prop-new-line'),
     'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
     'jsx-filename-extension': require('./lib/rules/jsx-filename-extension'),
-    'require-optimization': require('./lib/rules/require-optimization')
+    'require-optimization': require('./lib/rules/require-optimization'),
+    'no-find-dom-node': require('./lib/rules/no-find-dom-node')
   },
   configs: {
     recommended: {
@@ -67,6 +68,7 @@ module.exports = {
         'react/no-did-mount-set-state': [2, 'allow-in-func'],
         'react/no-did-update-set-state': [2, 'allow-in-func'],
         'react/no-direct-mutation-state': 2,
+        'react/no-find-dom-node': 2,
         'react/no-is-mounted': 2,
         'react/no-unknown-property': 2,
         'react/no-render-return-value': 2,

lib/rules/no-find-dom-node.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Prevent usage of findDOMNode
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    CallExpression: function(node) {
+      var callee = node.callee;
+      if (
+        callee.type !== 'MemberExpression' || (
+          callee.object.callee && callee.object.callee.name !== 'findDOMNode' &&
+          callee.property.name !== 'findDOMNode'
+        )
+      ) {
+        return;
+      }
+      var ancestors = context.getAncestors(callee);
+      for (var i = 0, j = ancestors.length; i < j; i++) {
+        if (ancestors[i].type === 'Property' || ancestors[i].type === 'MethodDefinition') {
+          context.report({
+            node: callee,
+            message: 'Do not use findDOMNode'
+          });
+          break;
+        }
+      }
+    }
+  };
+
+};
+
+module.exports.schema = [];

tests/lib/rules/no-find-dom-node.js

@@ -0,0 +1,103 @@
+/**
+ * @fileoverview Prevent usage of findDOMNode
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-find-dom-node');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('no-find-dom-node', rule, {
+
+  valid: [{
+    code: [
+      'var Hello = function() {};'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  componentDidMount: function() {',
+      '    someNonMemberFunction(arg);',
+      '    this.someFunc = React.findDOMNode;',
+      '  },',
+      '  render: function() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }],
+
+  invalid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  componentDidMount: function() {',
+      '    React.findDOMNode(this).scrollIntoView();',
+      '  },',
+      '  render: function() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Do not use findDOMNode'
+    }]
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  componentDidMount: function() {',
+      '    ReactDOM.findDOMNode(this).scrollIntoView();',
+      '  },',
+      '  render: function() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Do not use findDOMNode'
+    }]
+  }, {
+    code: [
+      'class Hello extends Component {',
+      '  componentDidMount() {',
+      '    findDOMNode(this).scrollIntoView();',
+      '  }',
+      '  render() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Do not use findDOMNode'
+    }]
+  }]
+});