Merge branch 'master' into allow-wrapped-pure-components

jsx-eslint · Apr 18, 2017 · a2b61ed · a2b61ed
2 parents 4e8e86a + fd90dae
commit a2b61ed
Show file tree

Hide file tree

Showing 37 changed files with 538 additions and 152 deletions.
diff --git a/README.md b/README.md
@@ -102,6 +102,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md): Prevent invalid characters from appearing in markup
 * [react/no-unknown-property](docs/rules/no-unknown-property.md): Prevent usage of unknown DOM property (fixable)
 * [react/no-unused-prop-types](docs/rules/no-unused-prop-types.md): Prevent definitions of unused prop types
+* [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md): Prevent usage of `setState` in `componentWillUpdate`
 * [react/prefer-es6-class](docs/rules/prefer-es6-class.md): Enforce ES5 or ES6 class for React Components
 * [react/prefer-stateless-function](docs/rules/prefer-stateless-function.md): Enforce stateless React Components to be written as a pure function
 * [react/prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition

diff --git a/docs/rules/display-name.md b/docs/rules/display-name.md
@@ -29,7 +29,7 @@ var Hello = React.createClass({
 
 ```js
 ...
-"display-name": [<enabled>, { "ignoreTranspilerName": <boolean> }]
+"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean> }]
 ...
 ```
 

diff --git a/docs/rules/forbid-component-props.md b/docs/rules/forbid-component-props.md
@@ -35,7 +35,7 @@ The following patterns are not considered warnings:
 
 ```js
 ...
-"forbid-component-props": [<enabled>, { "forbid": [<string>] }]
+"react/forbid-component-props": [<enabled>, { "forbid": [<string>] }]
 ...
 ```
 

diff --git a/docs/rules/forbid-elements.md b/docs/rules/forbid-elements.md
@@ -10,7 +10,7 @@ This rule checks all JSX elements and `React.createElement` calls and verifies t
 
 ```js
 ...
-"forbid-elements": [<enabled>, { "forbid": [<string|object>] }]
+"react/forbid-elements": [<enabled>, { "forbid": [<string|object>] }]
 ...
 ```
 

diff --git a/docs/rules/jsx-closing-bracket-location.md b/docs/rules/jsx-closing-bracket-location.md
@@ -39,14 +39,14 @@ There are two ways to configure this rule.
 The first form is a string shortcut corresponding to the `location` values specified below. If omitted, it defaults to `"tag-aligned"`.
 
 ```js
-"jsx-closing-bracket-location": <enabled> // -> [<enabled>, "tag-aligned"]
-"jsx-closing-bracket-location": [<enabled>, "<location>"]
+"react/jsx-closing-bracket-location": <enabled> // -> [<enabled>, "tag-aligned"]
+"react/jsx-closing-bracket-location": [<enabled>, "<location>"]
 ```
 
 The second form allows you to distinguish between non-empty and self-closing tags. Both properties are optional, and both default to `"tag-aligned"`. You can also disable the rule for one particular type of tag by setting the value to `false`.
 
 ```js
-"jsx-closing-bracket-location": [<enabled>, {
+"react/jsx-closing-bracket-location": [<enabled>, {
   "nonEmpty": "<location>" || false,
   "selfClosing": "<location>" || false
 }]

diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md
@@ -20,7 +20,7 @@ There are two main options for the rule:
 Depending on your coding conventions, you can choose either option by specifying it in your configuration:
 
 ```json
-"jsx-curly-spacing": [2, "always"]
+"react/jsx-curly-spacing": [2, "always"]
 ```
 
 #### never
@@ -68,7 +68,7 @@ The following patterns are not warnings:
 By default, braces spanning multiple lines are allowed with either setting. If you want to disallow them you can specify an additional `allowMultiline` property with the value `false`:
 
 ```json
-"jsx-curly-spacing": [2, "never", {"allowMultiline": false}]
+"react/jsx-curly-spacing": [2, "never", {"allowMultiline": false}]
 ```
 
 When `"never"` is used and `allowMultiline` is `false`, the following patterns are considered warnings:
@@ -112,7 +112,7 @@ The following patterns are not warnings:
 You can specify an additional `spacing` property that is an object with the following possible values:
 
 ```json
-"jsx-curly-spacing": [2, "always", {"spacing": {
+"react/jsx-curly-spacing": [2, "always", {"spacing": {
   "objectLiterals": "never"
 }}]
 ```

diff --git a/docs/rules/jsx-equals-spacing.md b/docs/rules/jsx-equals-spacing.md
@@ -18,7 +18,7 @@ There are two options for the rule:
 Depending on your coding conventions, you can choose either option by specifying it in your configuration:
 
 ```json
-"jsx-equals-spacing": [2, "always"]
+"react/jsx-equals-spacing": [2, "always"]
 ```
 
 #### never

diff --git a/docs/rules/jsx-handler-names.md b/docs/rules/jsx-handler-names.md
@@ -28,7 +28,7 @@ The following patterns are not considered warnings:
 
 ```js
 ...
-"jsx-handler-names": [<enabled>, {
+"react/jsx-handler-names": [<enabled>, {
   "eventHandlerPrefix": <eventHandlerPrefix>,
   "eventHandlerPropPrefix": <eventHandlerPropPrefix>
 }]

diff --git a/docs/rules/jsx-indent-props.md b/docs/rules/jsx-indent-props.md
@@ -33,7 +33,7 @@ It takes an option as the second parameter which can be `"tab"` for tab-based in
 
 ```js
 ...
-"jsx-indent-props": [<enabled>, 'tab'|<number>]
+"react/jsx-indent-props": [<enabled>, 'tab'|<number>]
 ...
 ```
 

diff --git a/docs/rules/jsx-max-props-per-line.md b/docs/rules/jsx-max-props-per-line.md
@@ -35,7 +35,7 @@ The following patterns are not considered warnings:
 
 ```js
 ...
-"jsx-max-props-per-line": [<enabled>, { "maximum": <number>, "when": <string> }]
+"react/jsx-max-props-per-line": [<enabled>, { "maximum": <number>, "when": <string> }]
 ...
 ```
 

diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md
@@ -21,7 +21,7 @@ The following patterns are not considered warnings:
 ## Rule Options
 
 ```js
-"jsx-no-bind": [<enabled>, {
+"react/jsx-no-bind": [<enabled>, {
   "ignoreRefs": <boolean> || false,
   "allowArrowFunctions": <boolean> || false,
   "allowBind": <boolean> || false

diff --git a/docs/rules/jsx-no-duplicate-props.md b/docs/rules/jsx-no-duplicate-props.md
@@ -20,7 +20,7 @@ The following patterns are not considered warnings:
 
 ```js
 ...
-"jsx-no-duplicate-props": [<enabled>, { "ignoreCase": <boolean> }]
+"react/jsx-no-duplicate-props": [<enabled>, { "ignoreCase": <boolean> }]
 ...
 ```
 

diff --git a/docs/rules/jsx-pascal-case.md b/docs/rules/jsx-pascal-case.md
@@ -40,7 +40,7 @@ The following patterns are not considered warnings:
 
 ```js
 ...
-"jsx-pascal-case": [<enabled>, { allowAllCaps: <allowAllCaps>, ignore: <ignore> }]
+"react/jsx-pascal-case": [<enabled>, { allowAllCaps: <allowAllCaps>, ignore: <ignore> }]
 ...
 ```
 

diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
@@ -23,7 +23,7 @@ The following patterns are considered okay and do not cause warnings:
 
 ```js
 ...
-"jsx-sort-props": [<enabled>, {
+"react/jsx-sort-props": [<enabled>, {
   "callbacksLast": <boolean>,
   "shorthandFirst": <boolean>,
   "shorthandLast": <boolean>,

diff --git a/docs/rules/no-did-mount-set-state.md b/docs/rules/no-did-mount-set-state.md
@@ -53,7 +53,7 @@ var Hello = React.createClass({
 
 ```js
 ...
-"no-did-mount-set-state": [<enabled>, <mode>]
+"react/no-did-mount-set-state": [<enabled>, <mode>]
 ...
 ```
 

diff --git a/docs/rules/no-did-update-set-state.md b/docs/rules/no-did-update-set-state.md
@@ -51,7 +51,7 @@ var Hello = React.createClass({
 
 ```js
 ...
-"no-did-update-set-state": [<enabled>, <mode>]
+"react/no-did-update-set-state": [<enabled>, <mode>]
 ...
 ```
 

diff --git a/docs/rules/no-multi-comp.md b/docs/rules/no-multi-comp.md
@@ -36,7 +36,7 @@ var HelloJohn = React.createClass({
 
 ```js
 ...
-"no-multi-comp": [<enabled>, { "ignoreStateless": <boolean> }]
+"react/no-multi-comp": [<enabled>, { "ignoreStateless": <boolean> }]
 ...
 ```
 

diff --git a/docs/rules/no-render-return-value.md b/docs/rules/no-render-return-value.md
@@ -2,7 +2,7 @@
 
 > `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a [callback ref](http://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) to the root element.
 
-Source: [React Top-Level API documentation](http://facebook.github.io/react/docs/top-level-api.html#reactdom.render)
+Source: [ReactDOM documentation](https://facebook.github.io/react/docs/react-dom.html#render)
 
 ## Rule Details
 

diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md
@@ -1,6 +1,6 @@
 # Prevent using string references (no-string-refs)
 
-Currently, two ways are supported by React to refer to components. The first one, providing a string identifier is considered legacy in the official documentation. Referring to components by setting a property on the `this` object in the reference callback is preferred.
+Currently, two ways are supported by React to refer to components. The first way, providing a string identifier, is now considered legacy in the official documentation. The documentation now prefers a second method -- referring to components by setting a property on the `this` object in the reference callback.
 
 ## Rule Details
 

diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md
@@ -26,7 +26,7 @@ var Hello = <div className="hello">Hello World</div>;
 
 ```js
 ...
-"no-unknown-property": [<enabled>, { ignore: <ignore> }]
+"react/no-unknown-property": [<enabled>, { ignore: <ignore> }]
 ...
 ```
 

diff --git a/docs/rules/no-unused-prop-types.md b/docs/rules/no-unused-prop-types.md
@@ -20,7 +20,7 @@ var Hello = React.createClass({
   propTypes: {
     firstname: React.PropTypes.string.isRequired,
     middlename: React.PropTypes.string.isRequired, // middlename is never used below
-	lastname: React.PropTypes.string.isRequired
+    lastname: React.PropTypes.string.isRequired
   },
   render: function() {
     return <div>Hello {this.props.firstname} {this.props.lastname}</div>;

diff --git a/docs/rules/no-will-update-set-state.md b/docs/rules/no-will-update-set-state.md
@@ -0,0 +1,90 @@
+# Prevent usage of setState in componentWillUpdate (no-will-update-set-state)
+
+Updating the state during the componentWillUpdate step can lead to indeterminate component state and is not allowed.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+var Hello = React.createClass({
+  componentWillUpdate: function() {
+     this.setState({
+        name: this.props.name.toUpperCase()
+      });
+    },
+  render: function() {
+    return <div>Hello {this.state.name}</div>;
+  }
+});
+```
+
+The following patterns are not considered warnings:
+
+```jsx
+var Hello = React.createClass({
+  componentWillUpdate: function() {
+    this.props.prepareHandler();
+  },
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```
+
+```jsx
+var Hello = React.createClass({
+  componentWillUpdate: function() {
+    this.prepareHandler(function callback(newName) {
+      this.setState({
+        name: newName
+      });
+    });
+  },
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```
+
+## Rule Options
+
+```js
+...
+"react/no-will-update-set-state": [<enabled>, <mode>]
+...
+```
+
+### `disallow-in-func` mode
+
+By default this rule forbids any call to `this.setState` in `componentWillUpdate` outside of functions. The `disallow-in-func` mode makes this rule more strict by disallowing calls to `this.setState` even within functions.
+
+The following patterns are considered warnings:
+
+```jsx
+var Hello = React.createClass({
+  componentDidUpdate: function() {
+     this.setState({
+        name: this.props.name.toUpperCase()
+      });
+    },
+  render: function() {
+    return <div>Hello {this.state.name}</div>;
+  }
+});
+```
+
+```jsx
+var Hello = React.createClass({
+  componentDidUpdate: function() {
+    this.prepareHandler(function callback(newName) {
+      this.setState({
+        name: newName
+      });
+    });
+  },
+  render: function() {
+    return <div>Hello {this.state.name}</div>;
+  }
+});
+```
diff --git a/docs/rules/prefer-es6-class.md b/docs/rules/prefer-es6-class.md
@@ -6,7 +6,7 @@ React offers you two way to create traditional components: using the ES5 `React.
 
 ```js
 ...
-"prefer-es6-class": [<enabled>, <mode>]
+"react/prefer-es6-class": [<enabled>, <mode>]
 ...
 ```
 

diff --git a/docs/rules/prefer-stateless-function.md b/docs/rules/prefer-stateless-function.md
@@ -10,6 +10,7 @@ This rule will check your class based React components for
 * instance property other than `this.props` and `this.context`
 * extension of `React.PureComponent` (if the `ignorePureComponents` flag is true)
 * presence of `ref` attribute in JSX
+* the use of decorators
 * `render` method that return anything but JSX: `undefined`, `null`, etc. (only in React <15.0.0, see [shared settings](https://github.com/yannickcr/eslint-plugin-react/blob/master/README.md#configuration) for React version configuration)
 
 If none of these elements are found, the rule will warn you to write this component as a pure function.
@@ -54,7 +55,7 @@ class Foo extends React.Component {
 
 ```js
 ...
-"prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents> }]
+"react/prefer-stateless-function": [<enabled>, { "ignorePureComponents": <ignorePureComponents> }]
 ...
 ```
 

diff --git a/docs/rules/require-optimization.md b/docs/rules/require-optimization.md
@@ -52,7 +52,7 @@ React.createClass({
 
 ```js
 ...
-"require-optimization": [<enabled>, { allowDecorators: [<allowDecorator>] }]
+"react/require-optimization": [<enabled>, { allowDecorators: [<allowDecorator>] }]
 ...
 ```
 
@@ -76,6 +76,6 @@ class Hello extends React.Component {}
 
 ```js
 ...
-"require-optimization": [2, {allowDecorators: ['customDecorators']}]
+"react/require-optimization": [2, {allowDecorators: ['customDecorators']}]
 ...
 ```
diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md
@@ -32,7 +32,7 @@ The rule can take one argument to select types of tags, which should be self-clo
 
 ```js
 ...
-"self-closing-comp": ["error", {
+"react/self-closing-comp": ["error", {
   "component": true,
   "html": true
 }]

diff --git a/docs/rules/sort-prop-types.md b/docs/rules/sort-prop-types.md
@@ -76,7 +76,7 @@ class Component extends React.Component {
 
 ```js
 ...
-"sort-prop-types": [<enabled>, {
+"react/sort-prop-types": [<enabled>, {
   "callbacksLast": <boolean>,
   "ignoreCase": <boolean>,
   "requiredFirst": <boolean>,

diff --git a/index.js b/index.js
@@ -20,6 +20,7 @@ var allRules = {
   'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
   'no-render-return-value': require('./lib/rules/no-render-return-value'),
   'no-unescaped-entities': require('./lib/rules/no-unescaped-entities'),
+  'no-will-update-set-state': require('./lib/rules/no-will-update-set-state'),
   'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
   'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
   'jsx-handler-names': require('./lib/rules/jsx-handler-names'),