Fix formatting error on optional call expression and member chain (#15920)

sosukesuzuki · web-flow · commit cb8004f3f114 · 2024-01-14T11:50:28.000+09:00
diff --git a/changelog_unreleased/javascript/15920.md b/changelog_unreleased/javascript/15920.md
@@ -0,0 +1,13 @@
+#### Fix formatting error on optional call expression and member chain (#15920 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```jsx
+// Input
+a(() => {}, c?.d());
+
+// Prettier stable
+TypeError: Cannot read properties of undefined (reading 'type')
+
+// Prettier main
+a(() => {}, c?.d());
+```
diff --git a/src/language-js/utils/index.js b/src/language-js/utils/index.js
@@ -405,16 +405,6 @@ function isTestCall(node, parent) {
 /** @return {(node: Node) => boolean} */
 const skipChainExpression = (fn) => (node) => {
   if (node?.type === "ChainExpression") {
-    // @ts-expect-error
-    if (!node.object) {
-      // @ts-expect-error
-      node.object = node.expression.object;
-    }
-    // @ts-expect-error
-    if (!node.property) {
-      // @ts-expect-error
-      node.property = node.expression.property;
-    }
     node = node.expression;
   }
 
@@ -429,6 +419,22 @@ const isMemberExpression = skipChainExpression(
   createTypeCheckFunction(["MemberExpression", "OptionalMemberExpression"]),
 );
 
+/**
+ * Retrieves a property from a node, considering any ChainExpression.
+ * If the node is a ChainExpression, the property is obtained from its expression.
+ * Otherwise, the property is obtained directly from the node.
+ *
+ * @param {Node} node - The AST node to be processed.
+ * @param {string} property - The property name to retrieve.
+ * @returns The property value from the node or its expression.
+ */
+function getChainProp(node, property) {
+  if (node.type === "ChainExpression") {
+    return node.expression[property];
+  }
+  return node[property];
+}
+
 /**
  *
  * @param {any} node
@@ -769,7 +775,7 @@ function isSimpleCallArgument(node, depth = 2) {
   if (isCallLikeExpression(node)) {
     if (
       node.type === "ImportExpression" ||
-      isSimpleCallArgument(node.callee, depth)
+      isSimpleCallArgument(getChainProp(node, "callee"), depth)
     ) {
       const args = getCallArguments(node);
       return args.length <= depth && args.every(isChildSimple);
@@ -779,8 +785,8 @@ function isSimpleCallArgument(node, depth = 2) {
 
   if (isMemberExpression(node)) {
     return (
-      isSimpleCallArgument(node.object, depth) &&
-      isSimpleCallArgument(node.property, depth)
+      isSimpleCallArgument(getChainProp(node, "object"), depth) &&
+      isSimpleCallArgument(getChainProp(node, "property"), depth)
     );
   }
 
@@ -1232,6 +1238,7 @@ export {
   createTypeCheckFunction,
   getCallArguments,
   getCallArgumentSelector,
+  getChainProp,
   getComments,
   getFunctionParameters,
   getLeftSide,
diff --git a/tests/format/js/chain-expression/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/chain-expression/__snapshots__/jsfmt.spec.js.snap
@@ -97,6 +97,35 @@ test().test2().test2(thing?.something);
 ================================================================================
 `;
 
+exports[`issue-15916.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const randomFuncion = (value) => {
+    if (value.a) {
+        funcA(
+            "",
+            funcB(
+                dayjs(value.a?.toString())
+                      .add(1, "day")
+                      .toISOString()
+            )
+        );
+    }
+};
+
+=====================================output=====================================
+const randomFuncion = (value) => {
+  if (value.a) {
+    funcA("", funcB(dayjs(value.a?.toString()).add(1, "day").toISOString()));
+  }
+};
+
+================================================================================
+`;
+
 exports[`test.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]
diff --git a/tests/format/js/chain-expression/issue-15916.js b/tests/format/js/chain-expression/issue-15916.js
@@ -0,0 +1,12 @@
+const randomFuncion = (value) => {
+    if (value.a) {
+        funcA(
+            "",
+            funcB(
+                dayjs(value.a?.toString())
+                      .add(1, "day")
+                      .toISOString()
+            )
+        );
+    }
+};
