[New] jsx-wrap-multilines: add never option to prohibit wrapping …

…parens on multiline JSX
ljharb · Dec 15, 2023 · b4b7497 · b4b7497
1 parent 37d8bbe
commit b4b7497
Show file tree

Hide file tree

Showing 4 changed files with 469 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add `displaystyle` on `<math>` ([#3652][] @lounsbrough)
 * [`prefer-read-only-props`], [`prop-types`], component detection: allow components to be async functions ([#3654][] @pnodet)
 * [`no-unknown-property`]: support `onResize` on audio/video tags ([#3662][] @caesar1030)
+* [`jsx-wrap-multilines`]: add `never` option to prohibit wrapping parens on multiline JSX ([#3668][] @reedws)
 
 ### Fixed
 * [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)
@@ -26,6 +27,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-props-no-multi-spaces`]: extract type parameters to var ([#3634][] @HenryBrown0)
 * [Docs] [`jsx-key`]: fix correct example ([#3656][] @developer-bandi)
 
+[#3668]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3668
 [#3666]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3666
 [#3662]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3662
 [#3656]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3656

diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md
@@ -50,7 +50,7 @@ var Hello = createReactClass({
 });
 ```
 
-Examples of **correct** code for this rule:
+Examples of **correct** code for this rule, when configured with either `parens` or `parens-new-line`:
 
 ```jsx
 var singleLineJSX = <p>Hello</p>
@@ -66,6 +66,36 @@ var Hello = createReactClass({
 });
 ```
 
+Examples of **incorrect** code for this rule, when configured with `never`:
+
+```jsx
+var singleLineJSX = <p>Hello</p>
+
+var Hello = createReactClass({
+  render: function() {
+    return (
+      <div>
+        <p>Hello {this.props.name}</p>
+      </div>
+    );
+  }
+});
+```
+
+Examples of **correct** code for this rule, when configured with `never`:
+
+```jsx
+var singleLineJSX = <p>Hello</p>
+
+var Hello = createReactClass({
+  render: function() {
+    return <div>
+      <p>Hello {this.props.name}</p>
+    </div>;
+  }
+});
+```
+
 ### `declaration`
 
 Examples of **incorrect** code for this rule, when configured with `{ declaration: "parens" }`:
@@ -116,6 +146,30 @@ var hello = (
 );
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ declaration: "never" }`:
+
+```jsx
+var hello = (<div>
+  <p>Hello</p>
+</div>);
+```
+
+```jsx
+var hello = (
+  <div>
+    <p>Hello</p>
+  </div>
+);
+```
+
+Examples of **correct** code for this rule, when configured with `{ declaration: "never" }`.
+
+```jsx
+var hello = <div>
+  <p>Hello</p>
+</div>;
+```
+
 ### `assignment`
 
 Examples of **incorrect** code for this rule, when configured with `{ assignment: "parens" }`.
@@ -172,6 +226,33 @@ hello = (
 );
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ assignment: "never" }`.
+
+```jsx
+var hello;
+hello = (<div>
+  <p>Hello</p>
+</div>);
+```
+
+```jsx
+var hello;
+hello = (
+  <div>
+    <p>Hello</p>
+  </div>
+);
+```
+
+Examples of **correct** code for this rule, when configured with `{ assignment: "never" }`.
+
+```jsx
+var hello;
+hello = <div>
+  <p>Hello</p>
+</div>;
+```
+
 ### `return`
 
 Examples of **incorrect** code for this rule, when configured with `{ return: "parens" }`.
@@ -234,6 +315,36 @@ function hello() {
 }
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ return: "never" }`.
+
+```jsx
+function hello() {
+  return (<div>
+    <p>Hello</p>
+  </div>);
+}
+```
+
+```jsx
+function hello() {
+  return (
+    <div>
+      <p>Hello</p>
+    </div>
+  );
+}
+```
+
+Examples of **correct** code for this rule, when configured with `{ return: "never" }`.
+
+```jsx
+function hello() {
+  return <div>
+    <p>Hello</p>
+  </div>;
+}
+```
+
 ### `arrow`
 
 Examples of **incorrect** code for this rule, when configured with `{ arrow: "parens" }`.
@@ -284,6 +395,30 @@ var hello = () => (
 );
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ arrow: "never" }`.
+
+```jsx
+var hello = () => (<div>
+  <p>World</p>
+</div>);
+```
+
+```jsx
+var hello = () => (
+  <div>
+    <p>World</p>
+  </div>
+);
+```
+
+Examples of **correct** code for this rule, when configured with `{ arrow: "never" }`.
+
+```jsx
+var hello = () => <div>
+  <p>World</p>
+</div>;
+```
+
 ### `condition`
 
 Examples of **incorrect** code for this rule, when configured with `{ condition: "parens" }`.
@@ -346,6 +481,36 @@ Examples of **correct** code for this rule, when configured with `{ condition: "
 </div>
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ condition: "never" }`.
+
+```jsx
+<div>
+  {foo ? (<div>
+      <p>Hello</p>
+  </div>) : null}
+</div>
+```
+
+```jsx
+<div>
+  {foo ? (
+    <div>
+      <p>Hello</p>
+    </div>
+  ): null}
+</div>
+```
+
+Examples of **correct** code for this rule, when configured with `{ condition: "never" }`.
+
+```jsx
+<div>
+  {foo ? <div>
+      <p>Hello</p>
+    </div> : null}
+</div>
+```
+
 ### `logical`
 
 Examples of **incorrect** code for this rule, when configured with `{ logical: "parens" }`.
@@ -416,6 +581,40 @@ Examples of **correct** code for this rule, when configured with `{ logical: "pa
 </div>
 ```
 
+Examples of **incorrect** code for this rule, when configured with `{ logical: "never" }`.
+
+```jsx
+<div>
+  {foo &&
+    (<div>
+      <p>Hello World</p>
+    </div>)
+  }
+</div>
+```
+
+```jsx
+<div>
+  {foo && (
+    <div>
+      <p>Hello World</p>
+    </div>
+  )}
+</div>
+```
+
+Examples of **correct** code for this rule, when configured with `{ logical: "never" }`.
+
+```jsx
+<div>
+  {foo &&
+    <div>
+      <p>Hello World</p>
+    </div>
+  }
+</div>
+```
+
 ### `prop`
 
 Examples of **incorrect** code for this rule, when configured with `{ prop: "parens" }`.
@@ -477,3 +676,33 @@ Examples of **correct** code for this rule, when configured with `{ prop: "paren
   <p>Hello</p>
 </div>;
 ```
+
+Examples of **incorrect** code for this rule, when configured with `{ prop: "never" }`.
+
+```jsx
+<div foo={(<div>
+    <p>Hello</p>
+  </div>)}>
+  <p>Hello</p>
+</div>;
+```
+
+```jsx
+<div foo={(
+  <div>
+    <p>Hello</p>
+  </div>
+)}>
+  <p>Hello</p>
+</div>;
+```
+
+Examples of **correct** code for this rule, when configured with `{ prop: "never" }`.
+
+```jsx
+<div foo={<div>
+    <p>Hello</p>
+  </div>}>
+  <p>Hello</p>
+</div>;
+```
diff --git a/lib/rules/jsx-wrap-multilines.js b/lib/rules/jsx-wrap-multilines.js
@@ -31,6 +31,7 @@ const DEFAULTS = {
 
 const messages = {
   missingParens: 'Missing parentheses around multilines JSX',
+  extraParens: 'Expected no parentheses around multilines JSX',
   parensOnNewLines: 'Parentheses around JSX should be on separate lines',
 };
 
@@ -51,25 +52,25 @@ module.exports = {
       // true/false are for backwards compatibility
       properties: {
         declaration: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         assignment: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         return: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         arrow: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         condition: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         logical: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
         prop: {
-          enum: [true, false, 'ignore', 'parens', 'parens-new-line'],
+          enum: [true, false, 'ignore', 'parens', 'parens-new-line', 'never'],
         },
       },
       additionalProperties: false,
@@ -184,6 +185,15 @@ module.exports = {
           }
         }
       }
+
+      if (option === 'never' && isParenthesized(context, node)) {
+        const tokenBefore = sourceCode.getTokenBefore(node);
+        const tokenAfter = sourceCode.getTokenAfter(node);
+        report(node, 'extraParens', (fixer) => fixer.replaceTextRange(
+          [tokenBefore.range[0], tokenAfter.range[1]],
+          sourceCode.getText(node)
+        ));
+      }
     }
 
     // --------------------------------------------------------------------------