[Fix] jsx-no-leaked-render: autofix nested "&&" logical expressions

Author: hduprat

lib/rules/jsx-no-leaked-render.js

@@ -40,19 +40,27 @@ function getIsCoerceValidNestedLogicalExpression(node) {
   return COERCE_VALID_LEFT_SIDE_EXPRESSIONS.some((validExpression) => validExpression === node.type);
 }
 
+function extractExpressionBetweenLogicalAnds(node) {
+  if (node.type !== 'LogicalExpression') return [node];
+  if (node.operator !== '&&') return [node];
+  return [].concat(extractExpressionBetweenLogicalAnds(node.left), extractExpressionBetweenLogicalAnds(node.right));
+}
+
 function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNode) {
   const sourceCode = context.getSourceCode();
   const rightSideText = sourceCode.getText(rightNode);
 
   if (fixStrategy === COERCE_STRATEGY) {
-    let leftSideText = sourceCode.getText(leftNode);
-    if (isParenthesized(context, leftNode)) {
-      leftSideText = `(${leftSideText})`;
-    }
-
-    const shouldPrefixDoubleNegation = leftNode.type !== 'UnaryExpression';
-
-    return fixer.replaceText(reportedNode, `${shouldPrefixDoubleNegation ? '!!' : ''}${leftSideText} && ${rightSideText}`);
+    const expressions = extractExpressionBetweenLogicalAnds(leftNode);
+    const newText = expressions.map((node) => {
+      let nodeText = sourceCode.getText(node);
+      if (isParenthesized(context, node)) {
+        nodeText = `(${nodeText})`;
+      }
+      return `${getIsCoerceValidNestedLogicalExpression(node) ? '' : '!!'}${nodeText}`;
+    }).join(' && ');
+
+    return fixer.replaceText(reportedNode, `${newText} && ${rightSideText}`);
   }
 
   if (fixStrategy === TERNARY_STRATEGY) {

tests/lib/rules/jsx-no-leaked-render.js

@@ -725,9 +725,51 @@ ruleTester.run('jsx-no-leaked-render', rule, {
       }],
       output: `
         const Component = ({ count, somethingElse, title }) => {
-          return <div>{!!count && somethingElse && title}</div>
+          return <div>{!!count && !!somethingElse && title}</div>
         }
       `,
     },
+    {
+      code: `
+        const Component = ({ items, somethingElse, title }) => {
+          return <div>{items.length > 0 && somethingElse && title}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce'] }],
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 3,
+        column: 24,
+      }],
+      output: `
+        const Component = ({ items, somethingElse, title }) => {
+          return <div>{items.length > 0 && !!somethingElse && title}</div>
+        }
+      `,
+    },
+    {
+      code: `
+        const MyComponent = () => {
+          const items = []
+          const breakpoint = { phones: true }
+        
+          return <div>{items.length > 0 && breakpoint.phones && <span />}</div>
+        }
+      `,
+      options: [{ validStrategies: ['coerce', 'ternary'] }],
+      output: `
+        const MyComponent = () => {
+          const items = []
+          const breakpoint = { phones: true }
+        
+          return <div>{items.length > 0 && !!breakpoint.phones && <span />}</div>
+        }
+      `,
+      errors: [{
+        message: 'Potential leaked value that might cause unintentionally rendered values or rendering crashes',
+        line: 6,
+        column: 24,
+      }],
+    },
   ]),
 });