Add no-context rule (fixes #455)

Author: zachguo

README.md

@@ -81,6 +81,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 
 * [react/display-name](docs/rules/display-name.md): Prevent missing `displayName` in a React component definition
 * [react/forbid-prop-types](docs/rules/forbid-prop-types.md): Forbid certain propTypes
+* [react/no-context](docs/rules/no-context.md): Prevent usage of `context`
 * [react/no-danger](docs/rules/no-danger.md): Prevent usage of dangerous JSX properties
 * [react/no-deprecated](docs/rules/no-deprecated.md): Prevent usage of deprecated methods
 * [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of `setState` in `componentDidMount`

docs/rules/no-context.md

@@ -0,0 +1,51 @@
+# Prevent usage of context (no-context)
+
+[Context](https://facebook.github.io/react/docs/context.html) is an advanced and experimental feature. The API is likely to change in future releases. Most applications will never need to use context. Especially if you are just getting started with React, you likely do not want to use context. Using context will make your code harder to understand because it makes the data flow less clear. It is similar to using global variables to pass state through your application.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+class Button extends React.Component {
+  render() {
+    return (
+      <button style={{background: this.context.color}}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+Button.contextTypes = {
+  color: React.PropTypes.string
+};
+
+const Button = ({children}, context) =>
+  <button style={{background: context.color}}>
+    {children}
+  </button>;
+Button.contextTypes = {color: React.PropTypes.string};
+```
+
+The following patterns are not considered warnings:
+
+```js
+class Button extends React.Component {
+  render() {
+    return (
+      <button style={{background: this.props.color}}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+Button.propTypes = {
+  color: React.PropTypes.string
+};
+
+const Button = ({children, color}, context) =>
+  <button style={{background: color}}>
+    {children}
+  </button>;
+Button.propTypes = {color: React.PropTypes.string};
+```

index.js

@@ -14,6 +14,7 @@ var rules = {
   'jsx-wrap-multilines': require('./lib/rules/jsx-wrap-multilines'),
   'self-closing-comp': require('./lib/rules/self-closing-comp'),
   'jsx-no-comment-textnodes': require('./lib/rules/jsx-no-comment-textnodes'),
+  'no-context': require('./lib/rules/no-context'),
   'no-danger': require('./lib/rules/no-danger'),
   'no-set-state': require('./lib/rules/no-set-state'),
   'no-is-mounted': require('./lib/rules/no-is-mounted'),

lib/rules/no-context.js

@@ -0,0 +1,121 @@
+/**
+ * @fileoverview Prevent usage of context
+ * @author Zach Guo
+ */
+'use strict';
+
+var Components = require('../util/Components');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent usage of context',
+      category: 'Best Practices',
+      recommended: true
+    },
+    schema: []
+  },
+
+  create: Components.detect(function(context) {
+
+    /**
+     * Checks if we are using context
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {Boolean} True if we are using context, false if not.
+     */
+    function isContextUsage(node) {
+      return Boolean(
+        node.object.type === 'ThisExpression' &&
+        node.property.name === 'context'
+      );
+    }
+
+    /**
+   * Checks if we are declaring a context
+   * @param {ASTNode} node The AST node being checked.
+   * @returns {Boolean} True if we are declaring a context, false if not.
+   */
+    function isContextTypesDeclaration(node) {
+      // Special case for class properties
+      // (babel-eslint does not expose property name so we have to rely on tokens)
+      if (node && node.type === 'ClassProperty') {
+        var tokens = context.getFirstTokens(node, 2);
+        if (
+          tokens[0].value === 'contextTypes' ||
+          (tokens[1] && tokens[1].value === 'contextTypes')
+        ) {
+          return true;
+        }
+        return false;
+      }
+      return Boolean(
+        node &&
+        node.name === 'contextTypes'
+      );
+    }
+
+    /**
+     * @param {ASTNode} node We expect either an ArrowFunctionExpression,
+     *   FunctionDeclaration, or FunctionExpression
+     * @returns {Boolean} True if we are using context, false if not.
+     */
+    function isContextUsageInStatelessComponent(node) {
+      return Boolean(
+        node &&
+        node.params &&
+        node.params[1] &&
+        node.params[1].name === 'context'
+      );
+    }
+
+    /**
+     * @param {ASTNode} node We expect either an ArrowFunctionExpression,
+     *   FunctionDeclaration, or FunctionExpression
+     */
+    function handleStatelessComponent(node) {
+      if (isContextUsageInStatelessComponent(node)) {
+        context.report({
+          node: node,
+          message: 'Using context is not allowed.'
+        });
+      }
+    }
+
+    return {
+
+      ClassProperty: function(node) {
+        if (isContextTypesDeclaration(node)) {
+          context.report({
+            node: node,
+            message: 'Using context is not allowed.'
+          });
+        }
+      },
+
+      MemberExpression: function(node) {
+        if (
+          isContextUsage(node) ||
+          isContextTypesDeclaration(node) ||
+          isContextTypesDeclaration(node.property)
+        ) {
+          context.report({
+            node: node,
+            message: 'Using context is not allowed.'
+          });
+        }
+      },
+
+      FunctionDeclaration: handleStatelessComponent,
+
+      ArrowFunctionExpression: handleStatelessComponent,
+
+      FunctionExpression: handleStatelessComponent
+
+    };
+
+  })
+};

tests/lib/rules/no-context.js

@@ -0,0 +1,125 @@
+/**
+ * @fileoverview Prevent usage of context
+ * @author Zach Guo
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-context');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('no-context', rule, {
+
+  valid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }, {
+    code: [
+      'var Hello = function() {',
+      '  var context;',
+      '  return context;',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions
+  }],
+
+  invalid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div>Hello {this.context.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  render() {',
+      '    return <div>Hello {this.context.name}</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  render() {',
+      '    return <div>Hello</div>;',
+      '  }',
+      '};',
+      'Hello.contextTypes = {',
+      '  name: React.PropTypes.string',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  render() {',
+      '    const {name} = this.context;',
+      '    return <div>Hello {name}</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }]
+  }, {
+    code: [
+      'const Hello = (props, context) => {',
+      '  return <div>Hello {context.name}</div>;',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }]
+  }, {
+    code: [
+      'const Hello = (props, context) => {',
+      '  return <div>Hello {context.name}</div>;',
+      '};',
+      'Hello.contextTypes = {',
+      '  name: React.PropTypes.string',
+      '};'
+    ].join('\n'),
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Using context is not allowed.'
+    }, {
+      message: 'Using context is not allowed.'
+    }]
+  }]
+});