Merge branch 'master' of https://github.com/yannickcr/eslint-plugin-r…

…eact into string-litral-fix

CHANGELOG.md

@@ -2497,3 +2497,4 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`jsx-props-no-multi-spaces`]: docs/rules/jsx-props-no-multi-spaces.md
 [`no-unsafe`]: docs/rules/no-unsafe.md
 [`jsx-fragments`]: docs/rules/jsx-fragments.md
+[`jsx-props-no-spreading`]: docs/rules/jsx-props-no-spreading.md

README.md

@@ -30,7 +30,7 @@ Use [our preset](#recommended) to get reasonable defaults:
   ]
 ```
 
-You should also specify settings that will be shared across all the plugin rules.
+You should also specify settings that will be shared across all the plugin rules. ([More about eslint shared settings](https://eslint.org/docs/user-guide/configuring#adding-shared-settings))
 
 ```json5
 {
@@ -41,6 +41,8 @@ You should also specify settings that will be shared across all the plugin rules
       "pragma": "React",  // Pragma to use, default to "React"
       "version": "detect", // React version. "detect" automatically picks the version you have installed.
                            // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+                           // default to latest and warns if missing
+                           // It will default to "detect" in the future
       "flowVersion": "0.53" // Flow version
     },
     "propWrapperFunctions": [
@@ -140,6 +142,7 @@ Enable the rules that you would like to use.
 * [react/sort-comp](docs/rules/sort-comp.md): Enforce component methods order (fixable)
 * [react/sort-prop-types](docs/rules/sort-prop-types.md): Enforce propTypes declarations alphabetical sorting
 * [react/state-in-constructor](docs/rules/state-in-constructor.md): Enforce the state initialization style to be either in a constructor or with a class property
+* [react/static-property-placement](docs/rules/static-property-placement.md): Defines where React component static properties should be positioned.
 * [react/style-prop-object](docs/rules/style-prop-object.md): Enforce style prop value being an object
 * [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md): Prevent void DOM elements (e.g. `<img />`, `<br />`) from receiving children
 
@@ -170,6 +173,7 @@ Enable the rules that you would like to use.
 * [react/jsx-fragments](docs/rules/jsx-fragments.md): Enforce shorthand or standard form for React fragments
 * [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components
 * [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md): Disallow multiple spaces between inline JSX props (fixable)
+* [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md): Disallow JSX props spreading
 * [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md): Enforce default props alphabetical sorting
 * [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting (fixable)
 * [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable)

docs/rules/boolean-prop-naming.md

@@ -30,7 +30,12 @@ var Hello = createReactClass({
 
 ```js
 ...
-"react/boolean-prop-naming": [<enabled>, { "propTypeNames": Array<string>, "rule": <string>, "message": <string> }]
+"react/boolean-prop-naming": [<enabled>, { 
+  "propTypeNames": Array<string>, 
+  "rule": <string>, 
+  "message": <string>, 
+  "validateNested": <boolean> 
+}]
 ...
 ```
 
@@ -86,3 +91,11 @@ And the failure would look like so:
 ```
 It is better if your prop (something) matches this pattern: (^is[A-Z]([A-Za-z0-9]?)+)
 ```
+
+### `validateNested`
+
+This value is boolean. It tells if nested props should be validated as well. By default this is set to false but you can change it to true, to validate deeper layers of object:
+
+```jsx
+"react/boolean-prop-naming": ["error", { "validateNested": true }]
+```

docs/rules/jsx-indent.md

@@ -31,11 +31,11 @@ The following patterns are considered warnings:
 ## Rule Options
 
 It takes an option as the second parameter which can be `"tab"` for tab-based indentation or a positive number for space indentations.
-To enable checking the indentation of attributes, use the third parameter to turn on the `checkAttributes` option (default is false).
+To enable checking the indentation of attributes or add indentation to logical expressions, use the third parameter to turn on the `checkAttributes` (default is false) and `indentLogicalExpressions` (default is false) respectively.
 
 ```js
 ...
-"react/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>}]
+"react/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>, indentLogicalExpressions: <boolean>}]
 ...
 ```
 
@@ -61,6 +61,13 @@ The following patterns are considered warnings:
 }
   />
 </App>
+
+// [2, 2, {indentLogicalExpressions: true}]
+<App>
+  {condition && (
+  <Hello />
+  )}
+</App>
 ```
 
 The following patterns are **not** warnings:
@@ -92,6 +99,13 @@ The following patterns are **not** warnings:
 }
   />
 </App>
+
+// [2, 2, {indentLogicalExpressions: true}]
+<App>
+  {condition && (
+    <Hello />
+  )}
+</App>
 ```
 
 ## When not to use

docs/rules/jsx-props-no-spreading.md

@@ -0,0 +1,109 @@
+# Disallow JSX props spreading (react/jsx-props-no-spreading)
+
+Enforces that there is no spreading for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding passing unintentional extra props and allowing react to emit warnings when invalid HTML props are passed to HTML elements.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+<App {...props} />
+<MyCustomComponent {...props} some_other_prop={some_other_prop} />
+<img {...props} />
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+const {src, alt} = props;
+const {one_prop, two_prop} = otherProps;
+<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
+<img src={src} alt={alt} />
+```
+
+
+## Rule Options
+
+```js
+...
+"react/jsx-props-no-spreading": [{
+    "html": "ignore" / "enforce",
+    "custom": "ignore" / "enforce",
+    "exceptions": [<string>]
+}]
+...
+```
+
+### html
+
+`html` set to `ignore` will ignore all html jsx tags like `div`, `img` etc. Default is set to `enforce`.
+
+The following patterns are **not** considered warnings when `html` is set to `ignore`:
+
+```jsx
+<img {...props} />
+```
+
+The following patterns are still considered warnings:
+
+```jsx
+<MyCustomComponent {...props} />
+```
+
+### custom
+
+`custom` set to `ignore` will ignore all custom jsx tags like `App`, `MyCustomComponent` etc. Default is set to `enforce`.
+
+The following patterns are **not** considered warnings when `custom` is set to `ignore`:
+
+```jsx
+<MyCustomComponent {...props} />
+```
+
+The following patterns are still considered warnings:
+```jsx
+<img {...props} />
+```
+
+### exceptions
+
+An "exception" will always flip the resulting html or custom setting for that component - ie, html set to `ignore`, with an exception of `div` will enforce on an `div`; custom set to `enforce` with an exception of `Foo` will ignore `Foo`.
+
+```js
+{ "exceptions": ["Image", "img"] }
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+const {src, alt} = props;
+<Image {...props} />
+<img {...props} />
+```
+
+The following patterns are considered warnings:
+```jsx
+<MyCustomComponent {...props} />
+```
+
+```js
+{ "html": "ignore", "exceptions": ["MyCustomComponent", "img"] }
+```
+
+The following patterns are **not** considered warnings:
+
+```jsx
+const {src, alt} = props;
+const {one_prop, two_prop} = otherProps;
+<img src={src} alt={alt} />
+<MyCustomComponent {...otherProps} />
+```
+
+The following patterns are considered warnings:
+```jsx
+<img {...props} />
+```
+
+## When Not To Use It
+
+If you are not using JSX or have lots of props to be passed or the props spreading is used inside HOC.

docs/rules/no-access-state-in-setstate.md

@@ -5,7 +5,7 @@ Such usage of `this.state` might result in errors when two state calls are
 called in batch and thus referencing old state and not the current
 state. An example can be an increment function:
 
-```
+```javascript
 function increment() {
   this.setState({value: this.state.value + 1});
 }
@@ -14,15 +14,15 @@ function increment() {
 If these two `setState` operations is grouped together in a batch it will
 look be something like the following, given that value is 1:
 
-```
+```javascript
 setState({value: 1 + 1})
 setState({value: 1 + 1})
 ```
 
 This can be avoided with using callbacks which takes the previous state
 as first argument:
 
-```
+```javascript
 function increment() {
   this.setState(prevState => ({value: prevState.value + 1}));
 }
@@ -33,7 +33,7 @@ even when things happen in batches. And the example above will be
 something like:
 
 
-```
+```javascript
 setState({value: 1 + 1})
 setState({value: 2 + 1})
 ```

docs/rules/no-string-refs.md

@@ -39,3 +39,29 @@ var Hello = createReactClass({
   }
 });
 ```
+
+## Rule Options
+
+```js
+"react/no-string-refs": [<enabled>, {"noTemplateLiterals": <boolean>}]
+```
+### `noTemplateLiterals`
+
+When set to `true`, it will give warning when using template literals for refs.
+The following patterns will be considered warnings:
+
+```jsx
+var Hello = createReactClass({
+ render: function() {
+  return <div ref={`hello`}>Hello, world.</div>;
+ }
+});
+```
+
+```jsx
+var Hello = createReactClass({
+ render: function() {
+  return <div ref={`hello${index}`}>Hello, world.</div>;
+ }
+});
+```

docs/rules/prefer-stateless-function.md

@@ -66,22 +66,18 @@ class Foo extends React.Component {
 
 When `true` the rule will ignore Components extending from `React.PureComponent` that use `this.props` or `this.context`.
 
-The following pattern is considered okay and does **not** cause warnings:
+The following patterns are considered okay and does **not** cause warnings:
 
 ```jsx
 class Foo extends React.PureComponent {
   render() {
     return <div>{this.props.foo}</div>;
   }
 }
-```
-
-The following pattern is considered a warning because it's not using props or context:
 
-```jsx
-class Foo extends React.PureComponent {
+class Bar extends React.PureComponent {
   render() {
-    return <div>Bar</div>;
+    return <div>Baz</div>;
   }
 }
 ```