Add no-direct-mutation-state rule (fixes #133, #201)

Author: petersendidit

index.js

@@ -27,7 +27,8 @@ module.exports = {
     'jsx-max-props-per-line': require('./lib/rules/jsx-max-props-per-line'),
     'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
     'jsx-indent-props': require('./lib/rules/jsx-indent-props'),
-    'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location')
+    'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
+    'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -55,6 +56,7 @@ module.exports = {
     'jsx-max-props-per-line': 0,
     'jsx-no-literals': 0,
     'jsx-indent-props': 0,
-    'jsx-closing-bracket-location': 0
+    'jsx-closing-bracket-location': 0,
+    'no-direct-mutation-state': 0
   }
 };

lib/rules/no-direct-mutation-state.js

@@ -0,0 +1,33 @@
+/**
+ * @fileoverview Prevent usage of setState in componentDidMount
+ * @author David Petersen
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    AssignmentExpression: function(node) {
+      var item = node.left.object;
+      while (item.object.property) {
+        item = item.object;
+      }
+      if (
+        item.object.type === 'ThisExpression' &&
+        item.property.name === 'state'
+      ) {
+        context.report(node.left.object, 'Do not mutate state directly. Use setState().');
+      }
+    }
+  };
+
+};

tests/lib/rules/no-direct-mutation-state.js

@@ -0,0 +1,115 @@
+/**
+ * @fileoverview Prevent direct mutation of this.state
+ * @author David Petersen
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/no-direct-mutation-state');
+var RuleTester = require('eslint').RuleTester;
+
+require('babel-eslint');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('no-direct-mutation-state', rule, {
+
+  valid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    return <div>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    }
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    var obj = {state: {}};',
+      '    obj.state.name = "foo";',
+      '    return <div>Hello {obj.state.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    }
+  }],
+
+  invalid: [{
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    this.state.foo = "bar"',
+      '    return <div>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    },
+    errors: [{
+      message: 'Do not mutate state directly. Use setState().'
+    }]
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    this.state.person.name= "bar"',
+      '    return <div>Hello {this.props.name}</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    },
+    errors: [{
+      message: 'Do not mutate state directly. Use setState().'
+    }]
+  }, {
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    this.state.person.name.first = "bar"',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    },
+    errors: [{
+      message: 'Do not mutate state directly. Use setState().'
+    }]
+  }
+  /**
+   * Would be nice to prevent this too
+  , {
+    code: [
+      'var Hello = React.createClass({',
+      '  render: function() {',
+      '    var that = this;',
+      '    that.state.person.name.first = "bar"',
+      '    return <div>Hello</div>;',
+      '  }',
+      '});'
+    ].join('\n'),
+    ecmaFeatures: {
+      jsx: true
+    },
+    errors: [{
+      message: 'Do not mutate state directly. Use setState().'
+    }]
+  }*/
+  ]
+});