feat(eslint-plugin): [prefer-optional-chain] support logical with empty object

packages/eslint-plugin/docs/rules/prefer-optional-chain.md

@@ -20,6 +20,10 @@ function myFunc(foo: T | null) {
 function myFunc(foo: T | null) {
   return foo && foo.a && foo.a.b && foo.a.b.c;
 }
+// or
+function myFunc(foo: T | null) {
+  return (((foo || {}).a || {}).b || {}).c;
+}
 
 function myFunc(foo: T | null) {
   return foo?.['a']?.b?.c;
@@ -55,6 +59,9 @@ foo && foo.a && foo.a.b && foo.a.b.c;
 foo && foo['a'] && foo['a'].b && foo['a'].b.c;
 foo && foo.a && foo.a.b && foo.a.b.method && foo.a.b.method();
 
+(((foo || {}).a || {}).b {}).c;
+(((foo || {})['a'] || {}).b {}).c;
+
 // this rule also supports converting chained strict nullish checks:
 foo &&
   foo.a != null &&

packages/eslint-plugin/src/rules/prefer-optional-chain.ts

@@ -48,6 +48,48 @@ export default util.createRule({
   create(context) {
     const sourceCode = context.getSourceCode();
     return {
+      'LogicalExpression[operator=||]'(node: TSESTree.LogicalExpression): void {
+        const leftNode = node.left;
+        const rightNode = node.right;
+        const parentNode = node.parent;
+        const isRightNodeAnEmptyObjectLiteral =
+          rightNode.type === AST_NODE_TYPES.ObjectExpression &&
+          rightNode.properties.length === 0;
+        if (
+          !isRightNodeAnEmptyObjectLiteral ||
+          !parentNode ||
+          parentNode.type !== AST_NODE_TYPES.MemberExpression ||
+          parentNode.optional
+        ) {
+          return;
+        }
+        context.report({
+          node: parentNode,
+          messageId: 'optionalChainSuggest',
+          suggest: [
+            {
+              messageId: 'optionalChainSuggest',
+              fix: (fixer): TSESLint.RuleFix => {
+                const leftNodeText = context.getSourceCode().getText(leftNode);
+                const maybeWrappedLeftNode =
+                  leftNode.type === AST_NODE_TYPES.LogicalExpression
+                    ? `(${leftNodeText})`
+                    : leftNodeText;
+                const propertyToBeOptionalText = context
+                  .getSourceCode()
+                  .getText(parentNode.property);
+                const maybeWrappedProperty = parentNode.computed
+                  ? `[${propertyToBeOptionalText}]`
+                  : propertyToBeOptionalText;
+                return fixer.replaceTextRange(
+                  parentNode.range,
+                  `${maybeWrappedLeftNode}?.${maybeWrappedProperty}`,
+                );
+              },
+            },
+          ],
+        });
+      },
       [[
         'LogicalExpression[operator="&&"] > Identifier',
         'LogicalExpression[operator="&&"] > MemberExpression',

packages/eslint-plugin/tests/rules/prefer-optional-chain.test.ts

@@ -146,6 +146,11 @@ const baseCases = [
 
 ruleTester.run('prefer-optional-chain', rule, {
   valid: [
+    'foo || {};',
+    'foo || ({} as any);',
+    '(foo || {})?.bar;', // This might seem stupid, but I'm not sure if we want to show suggestion for it
+    '(foo || { bar: 1 }).bar;',
+    '(undefined && (foo || {})).bar;',
     'foo && bar;',
     'foo && foo;',
     'foo || bar;',
@@ -501,5 +506,94 @@ foo?.bar(/* comment */a,
         },
       },
     },
+    {
+      code: 'const foo = (bar || {}).baz;',
+      errors: [
+        {
+          messageId: 'optionalChainSuggest',
+          column: 13,
+          endColumn: 28,
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: 'const foo = bar?.baz;',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: '(foo.bar || {})[baz];',
+      errors: [
+        {
+          messageId: 'optionalChainSuggest',
+          column: 1,
+          endColumn: 21,
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: 'foo.bar?.[baz];',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      // Currently it does not suggest a fix for nested optional with empty object
+      // It shows 2 suggestions, one for the outer object and one for the inner object
+      code: '((foo1 || {}).foo2 || {}).foo3;',
+      errors: [
+        {
+          messageId: 'optionalChainSuggest',
+          column: 1,
+          endColumn: 31,
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: '(foo1 || {}).foo2?.foo3;',
+            },
+          ],
+        },
+        {
+          messageId: 'optionalChainSuggest',
+          column: 2,
+          endColumn: 19,
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: '(foo1?.foo2 || {}).foo3;',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: '(foo || undefined || {}).bar;',
+      errors: [
+        {
+          messageId: 'optionalChainSuggest',
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: '(foo || undefined)?.bar;',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: noFormat`(undefined && foo || {}).bar;`,
+      errors: [
+        {
+          messageId: 'optionalChainSuggest',
+          suggestions: [
+            {
+              messageId: 'optionalChainSuggest',
+              output: '(undefined && foo)?.bar;',
+            },
+          ],
+        },
+      ],
+    },
   ],
 });