Skip to content

Commit

Permalink
[Fix] jsx-no-leaked-render: preserve RHS parens for multiline jsx e…
Browse files Browse the repository at this point in the history
…lements while fixing
  • Loading branch information
akulsr0 authored and ljharb committed Aug 25, 2023
1 parent dd6e05c commit 422ff33
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 1 deletion.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
### Added
* [`sort-prop-types`]: give errors on TS types ([#3615][] @akulsr0)

### Fixed
* [`jsx-no-leaked-render`]: preserve RHS parens for multiline jsx elements while fixing ([#3623][] @akulsr0)

[#3623]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3623
[#3615]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3615

## [7.33.2] - 2023.08.15
Expand Down
9 changes: 9 additions & 0 deletions lib/rules/jsx-no-leaked-render.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,15 @@ function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNod
if (rightNode.type === 'ConditionalExpression') {
return fixer.replaceText(reportedNode, `${newText} && (${rightSideText})`);
}
if (rightNode.type === 'JSXElement') {
const rightSideTextLines = rightSideText.split('\n');
if (rightSideTextLines.length > 1) {
const rightSideTextLastLine = rightSideTextLines[rightSideTextLines.length - 1];
const indentSpacesStart = ' '.repeat(rightSideTextLastLine.search(/\S/));
const indentSpacesClose = ' '.repeat(rightSideTextLastLine.search(/\S/) - 2);
return fixer.replaceText(reportedNode, `${newText} && (\n${indentSpacesStart}${rightSideText}\n${indentSpacesClose})`);
}
}
if (rightNode.type === 'Literal') {
return null;
}
Expand Down
72 changes: 71 additions & 1 deletion tests/lib/rules/jsx-no-leaked-render.js
Original file line number Diff line number Diff line change
Expand Up @@ -884,6 +884,76 @@ ruleTester.run('jsx-no-leaked-render', rule, {
line: 3,
column: 38,
}],
}
},
semver.satisfies(eslintPkg.version, '> 4') ? {
code: `
const MyComponent = () => {
return (
<>
{someCondition && (
<div>
<p>hello</p>
</div>
)}
</>
)
}
`,
output: `
const MyComponent = () => {
return (
<>
{!!someCondition && (
<div>
<p>hello</p>
</div>
)}
</>
)
}
`,
options: [{ validStrategies: ['coerce', 'ternary'] }],
errors: [{
message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
line: 5,
column: 16,
}],
} : [],
semver.satisfies(eslintPkg.version, '> 4') ? {
code: `
const MyComponent = () => {
return (
<>
{someCondition && (
<SomeComponent
prop1={val1}
prop2={val2}
/>
)}
</>
)
}
`,
output: `
const MyComponent = () => {
return (
<>
{!!someCondition && (
<SomeComponent
prop1={val1}
prop2={val2}
/>
)}
</>
)
}
`,
options: [{ validStrategies: ['coerce', 'ternary'] }],
errors: [{
message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
line: 5,
column: 16,
}],
} : []
)),
});

0 comments on commit 422ff33

Please sign in to comment.