typescript-eslint · omril1 · May 4, 2024 · Oct 12, 2024 · Oct 12, 2024 · Oct 12, 2024
diff --git a/packages/eslint-plugin/docs/rules/prefer-optional-chain.mdx b/packages/eslint-plugin/docs/rules/prefer-optional-chain.mdx
@@ -265,6 +265,32 @@ thing?.toString();
 </TabItem>
 </Tabs>
 
+### `ignoreIfStatements`
+
+{/* insert option description */}
+
+Examples of code for this rule with `{ ignoreIfStatements: false }`:
+
+<Tabs>
+
+<TabItem value="❌ Incorrect">
+
+```ts option='{ "ignoreIfStatements": false }'
+if (foo) {
+  foo.bar();
+}
+```
+
+</TabItem>
+<TabItem value="✅ Correct">
+
+```ts option='{ "ignoreIfStatements": true }'
+foo?.bar();
+```
+
+</TabItem>
+</Tabs>
+
 ### `requireNullish`
 
 {/* insert option description */}

diff --git a/packages/eslint-plugin/src/rules/prefer-optional-chain-utils/PreferOptionalChainOptions.ts b/packages/eslint-plugin/src/rules/prefer-optional-chain-utils/PreferOptionalChainOptions.ts
@@ -3,6 +3,7 @@ export type PreferOptionalChainMessageIds =
   | 'preferOptionalChain';
 
 export interface PreferOptionalChainOptions {
+  ignoreIfStatements?: boolean;
   allowPotentiallyUnsafeFixesThatModifyTheReturnTypeIKnowWhatImDoing?: boolean;
   checkAny?: boolean;
   checkBigInt?: boolean;

diff --git a/packages/eslint-plugin/src/rules/prefer-optional-chain-utils/analyzeChain.ts b/packages/eslint-plugin/src/rules/prefer-optional-chain-utils/analyzeChain.ts
@@ -9,7 +9,7 @@ import type {
   SourceCode,
 } from '@typescript-eslint/utils/ts-eslint';
 
-import { AST_NODE_TYPES } from '@typescript-eslint/utils';
+import { AST_NODE_TYPES, AST_TOKEN_TYPES } from '@typescript-eslint/utils';
 import { unionTypeParts } from 'ts-api-utils';
 import * as ts from 'typescript';
 
@@ -208,9 +208,13 @@ const analyzeOrChainOperand: OperandAnalyzer = (
  */
 function getReportRange(
   chain: ValidOperand[],
-  boundary: TSESTree.Range,
+  node: TSESTree.Node,
   sourceCode: SourceCode,
 ): TSESTree.Range {
+  if (node.type === AST_NODE_TYPES.IfStatement) {
+    return node.range;
+  }
+  const boundary = node.range;
   const leftNode = chain[0].node;
   const rightNode = chain[chain.length - 1].node;
   let leftMost = nullThrows(
@@ -324,7 +328,7 @@ function getReportDescriptor(
   // 6) diff(`foo.bar.baz?.bam`, `foo.bar.baz.bam()`) = `()`
   // 7) result = `foo?.bar?.baz?.bam?.()`
 
-  const parts = [];
+  const parts: FlattenedChain[] = [];
   for (const current of chain) {
     const nextOperand = flattenChainExpression(
       sourceCode,
@@ -401,7 +405,85 @@ function getReportDescriptor(
     newCode = `!${newCode}`;
   }
 
-  const reportRange = getReportRange(chain, node.range, sourceCode);
+  const reportRange = getReportRange(chain, node, sourceCode);
+
+  if (node.type === AST_NODE_TYPES.IfStatement) {
+    const chainEndedWithSemicolon =
+      sourceCode.getTokenAfter(lastOperand.node)?.value === ';';
+    if (chainEndedWithSemicolon) {
+      newCode += ';';
+    }
+
+    const nodeBeforeTheComment = chainEndedWithSemicolon
+      ? lastOperand.node.parent
+      : lastOperand.node;
+
+    const commentsBefore = sourceCode.getCommentsBefore(chain[1].node);
+    const commentsAfter = sourceCode.getCommentsAfter(nodeBeforeTheComment);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tokenAfterNodeTest = sourceCode.getTokenAfter(node.test)!; // if (foo) /* this */, there is always a token here
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tokenBeforeNodeTest = sourceCode.getTokenBefore(node.test)!; // if /* this */ (foo), there is always a token here
+    const tokenAfterAfterNodeTest =
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      sourceCode.getTokenAfter(tokenAfterNodeTest)!; // if (foo) /* this */, there is always a token here
+    const commentsBeforeNodeTest =
+      sourceCode.getCommentsBefore(tokenBeforeNodeTest); // if /* this */ (foo)
+    const beforeNodeTestComments = sourceCode.getCommentsBefore(node.test); // if (/* this */ foo)
+    const afterNodeTestComments1 = sourceCode.getCommentsAfter(node.test); // if (foo /* this */)
+    const afterNodeTestComments2 =
+      tokenAfterAfterNodeTest.type === AST_TOKEN_TYPES.Punctuator
+        ? sourceCode.getCommentsBefore(tokenAfterAfterNodeTest)
+        : []; // if (foo) /* this */
+
+    const commentsToReloacte = [
-    const commentsToReloacte = [
+    const commentsToRelocate = [
-    const commentsToReloacte = [
+    const commentsToRelocate = [
+      ...commentsBeforeNodeTest,
+      ...beforeNodeTestComments,
+      ...afterNodeTestComments1,
+      ...afterNodeTestComments2,
+    ];
+
+    if (commentsToReloacte.length) {
+      commentsBefore.unshift(...commentsToReloacte);
+      useSuggestionFixer = true;
+      const indentationCount = node.loc.start.column;
+      const indentation = ' '.repeat(indentationCount);
+      const newLineIndentation = `\n${indentation}`;
+      function getTextFromCommentsArray(comments: TSESTree.Comment[]): string {
+        return comments
+          .map(({ type, value }) =>
+            type === AST_TOKEN_TYPES.Line ? `//${value}` : `/*${value}*/`,
+          )
+          .join(newLineIndentation);
+      }
+      if (commentsBefore.length > 0) {
+        const commentsText = getTextFromCommentsArray(commentsBefore);
+        newCode = `${commentsText}\n${indentation}${newCode}`;
+      }
+      if (commentsAfter.length > 0) {
+        const commentsText = getTextFromCommentsArray(commentsAfter);
+        newCode = `${newCode}\n${indentation}${commentsText}`;
+      }
+    } else if (commentsBefore.length || commentsAfter.length) {
+      const indentationCount = node.loc.start.column;
+      const indentation = ' '.repeat(indentationCount);
+      function getTextFromCommentsArray(comments: TSESTree.Comment[]): string {
+        return sourceCode
+          .getText()
+          .slice(comments[0].range[0], comments[comments.length - 1].range[1]);
+      }
+      if (commentsBefore.length > 0) {
+        const commentsTextBeforeWithoutIndent =
+          getTextFromCommentsArray(commentsBefore);
+        newCode = `${commentsTextBeforeWithoutIndent}\n${indentation}${newCode}`;
+      }
+      if (commentsAfter.length > 0) {
+        const commentsTextAfterWithoutIndent =
+          getTextFromCommentsArray(commentsAfter);
+        newCode = `${newCode}\n${indentation}${commentsTextAfterWithoutIndent}`;
+      }
+    }
+  }
 
   const fix: ReportFixFunction = fixer =>
     fixer.replaceTextRange(reportRange, newCode);

diff --git a/packages/eslint-plugin/src/rules/prefer-optional-chain.ts b/packages/eslint-plugin/src/rules/prefer-optional-chain.ts
@@ -19,6 +19,7 @@ import { analyzeChain } from './prefer-optional-chain-utils/analyzeChain';
 import { checkNullishAndReport } from './prefer-optional-chain-utils/checkNullishAndReport';
 import {
   gatherLogicalOperands,
+  NullishComparisonType,
   OperandValidity,
 } from './prefer-optional-chain-utils/gatherLogicalOperands';
 
@@ -82,6 +83,11 @@ export default createRule<
             description:
               'Check operands that are typed as `unknown` when inspecting "loose boolean" operands.',
           },
+          ignoreIfStatements: {
+            type: 'boolean',
+            description:
+              'Whether to ignore `if` statements with a single expression in the consequent.',
+          },
           requireNullish: {
             type: 'boolean',
             description:
@@ -100,6 +106,7 @@ export default createRule<
       checkNumber: true,
       checkString: true,
       checkUnknown: true,
+      ignoreIfStatements: false,
       requireNullish: false,
     },
   ],
@@ -109,7 +116,84 @@ export default createRule<
     const seenLogicals = new Set<TSESTree.LogicalExpression>();
 
     return {
-      // specific handling for `(foo ?? {}).bar` / `(foo || {}).bar`
+      // specific handling for `if (foo) { foo.bar }` / `if (foo) foo.bar`
+      'IfStatement[consequent.type=BlockStatement][consequent.body.length=1], IfStatement[consequent.type=ExpressionStatement]'(
+        node: TSESTree.IfStatement,
+      ): void {
+        if (options.ignoreIfStatements || node.alternate) {
+          return;
+        }
+        const ifBodyStatement =
+          node.consequent.type === AST_NODE_TYPES.BlockStatement
+            ? node.consequent.body[0]
+            : node.consequent;
+
+        if (ifBodyStatement.type !== AST_NODE_TYPES.ExpressionStatement) {
+          return;
+        }
+
+        const ifBodyExpression = ifBodyStatement.expression;
+        const currentChain: ValidOperand[] = [
+          {
+            node: node.test,
+            type: OperandValidity.Valid,
+            comparedName: node.test,
+            comparisonType: NullishComparisonType.Boolean,
+            isYoda: false,
+          },
+        ];
+        if (node.test.type === AST_NODE_TYPES.LogicalExpression) {
+          const { newlySeenLogicals, operands } = gatherLogicalOperands(
+            node.test,
+            parserServices,
+            context.sourceCode,
+            options,
+          );
+          for (const logical of newlySeenLogicals) {
+            seenLogicals.add(logical);
+          }
+          for (const operand of operands) {
+            if (operand.type === OperandValidity.Invalid) {
+              return;
+            }
+            currentChain.push(operand);
+          }
+        }
+        if (ifBodyExpression.type === AST_NODE_TYPES.LogicalExpression) {
+          const { newlySeenLogicals, operands } = gatherLogicalOperands(
+            ifBodyExpression,
+            parserServices,
+            context.sourceCode,
+            options,
+          );
+          for (const logical of newlySeenLogicals) {
+            seenLogicals.add(logical);
+          }
+          for (const operand of operands) {
+            if (operand.type === OperandValidity.Invalid) {
+              return;
+            }
+            currentChain.push(operand);
+          }
+        } else {
+          currentChain.push({
+            node: ifBodyExpression,
+            type: OperandValidity.Valid,
+            comparedName: ifBodyExpression,
+            comparisonType: NullishComparisonType.Boolean,
+            isYoda: false,
+          });
+        }
+        analyzeChain(
+          context,
+          parserServices,
+          options,
+          node,
+          '&&',
+          currentChain,
+        );
+      },
+
       'LogicalExpression[operator!="??"]'(
         node: TSESTree.LogicalExpression,
       ): void {
@@ -157,6 +241,7 @@ export default createRule<
         }
       },
 
+      // specific handling for `(foo ?? {}).bar` / `(foo || {}).bar`
       'LogicalExpression[operator="||"], LogicalExpression[operator="??"]'(
         node: TSESTree.LogicalExpression,
       ): void {

diff --git a/packages/eslint-plugin/tests/docs-eslint-output-snapshots/prefer-optional-chain.shot b/packages/eslint-plugin/tests/docs-eslint-output-snapshots/prefer-optional-chain.shot