First commit to master

Author: BE-Webdesign

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,47 @@
+# eslint-plugin-react-functional-set-state
+
+Lint Rule for React to use functional setState and prevent the use of accessing
+this.state and this.props inside of setState calls.
+
+## Installation
+
+You'll first need to install [ESLint](http://eslint.org):
+
+```
+$ npm i eslint --save-dev
+```
+
+Next, install `eslint-plugin-react-functional-set-state`:
+
+```
+$ npm install eslint-plugin-react-functional-set-state --save-dev
+```
+
+**Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-react-functional-set-state` globally.
+
+## Usage
+
+Add `react-functional-set-state` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:
+
+```json
+{
+    "plugins": [
+        "react-functional-set-state"
+    ]
+}
+```
+
+
+Then configure the rules you want to use under the rules section.
+
+```json
+{
+    "rules": {
+        "react-functional-set-state/no-this-state-props": 2
+    }
+}
+```
+
+## Supported Rules
+
+* no-this-state-props

lib/index.js

@@ -0,0 +1,21 @@
+/**
+ * @fileoverview Lint Rule for React to use functional setState
+ * @author Edwin Cromley
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var requireIndex = require("requireindex");
+
+//------------------------------------------------------------------------------
+// Plugin Definition
+//------------------------------------------------------------------------------
+
+
+// import all rules in lib/rules
+module.exports.rules = {
+  "no-this-state-props": require('./rules/no-this-state-props')
+}

lib/rules/no-this-state-props.js

@@ -0,0 +1,94 @@
+/**
+ * @fileoverview Lint Rule for React to use functional setState
+ * @author Edwin Cromley
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Prevent usage of this.state and this.props in setState',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    schema: []
+  },
+
+  create: function(context) {
+    var setStateUsages = [];
+
+    function isThisSetState (node) {
+      if ( node.type === 'CallExpression' ) {
+        var callee = node.callee;
+        var isMatching = (
+          callee.type === 'MemberExpression' &&
+          callee.object.type === 'ThisExpression' &&
+          callee.property.name === 'setState'
+        )
+        return isMatching
+      }
+    }
+
+    function isThisState(node) {
+      var isMatching = (
+        node.type === 'MemberExpression' &&
+        node.object.type === 'ThisExpression' &&
+        node.property.name === 'state'
+      )
+      return isMatching
+    }
+
+    function isThisProps(node) {
+      var isMatching = (
+        node.type === 'MemberExpression' &&
+        node.object.type === 'ThisExpression' &&
+        node.property.name === 'props'
+      )
+      return isMatching
+    }
+
+    /**
+     * Reports usages of setState where this.props or this.state are used.
+     * @param {Object} setStateUsages Usages of set state.
+     */
+    function reportSetStateUsages(setStateUsages) {
+      var setStateUsage;
+      for (var i = 0, j = setStateUsages.length; i < j; i++) {
+        setStateUsage = setStateUsages[i];
+        if ( isThisSetState(setStateUsage) ) {
+          context.report({
+            node: setStateUsage,
+            message: 'Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props.'
+          });
+        }
+      }
+    }
+
+    return {
+      CallExpression: function(node) {
+        var callee = node.callee;
+        if ( ! isThisSetState(node) ) {
+          setStateUsages.push(callee);
+        }
+      },
+
+      MemberExpression: function(node) {
+        if ( isThisProps(node) || isThisState(node) ) {
+          var ancestors = context.getAncestors()
+          if ( ancestors.some(isThisSetState) ) {
+            var setStateUsage = ancestors.find(isThisSetState)
+            setStateUsages.push(setStateUsage);
+          }
+        }
+      },
+
+      'Program:exit': function() {
+        reportSetStateUsages(setStateUsages);
+      }
+    }
+  }
+};

package.json

@@ -2,6 +2,10 @@
   "name": "eslint-plugin-react-functional-set-state",
   "version": "1.0.0",
   "description": "Lint rule for React, should use functional setState",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/npm/npm.git"
+  },
   "keywords": [
     "eslint",
     "eslintplugin",

tests/lib/rules/index.js

@@ -0,0 +1,66 @@
+/**
+ * @fileoverview Tests for no-with rule.
+ * @author Nicholas C. Zakas
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var rule = require("../../../lib/rules/no-this-state-props");
+var RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run("no-this-state-props", rule, {
+    valid: [
+        {
+            code: "this.setState( { opened: yolo } )",
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( ( state ) => ( { opened: ! state.open } ) )",
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( ( state, props ) => ( { opened: ! props.open } ) )",
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "var yolo = this.state.yolo; this.setState( ( state, props ) => ( { opened: ! props.open } ) )",
+            parserOptions: { ecmaVersion: 6 }
+        },
+    ],
+    invalid: [
+        {
+            code: "this.setState( { opened: this.state.opened } )",
+            errors: [{ message: "Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props."}],
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( { opened: this.props.opened } )",
+            errors: [{ message: "Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props."}],
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( ( state ) => ( { opened: this.state.opened } ) )",
+            errors: [{ message: "Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props."}],
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( ( state ) => ( { opened: { inside: this.props.opened } } ) )",
+            errors: [{ message: "Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props."}],
+            parserOptions: { ecmaVersion: 6 }
+        },
+        {
+            code: "this.setState( ( state ) => { var taco = this.state.taco; return { opened: taco }; } )",
+            errors: [{ message: "Do not access this.state or this.props in setState(), instead apply a function with signature ( state, [props] ) to setState and access state and props."}],
+            parserOptions: { ecmaVersion: 6 }
+        }
+    ]
+});