fix(12077) line breaking with unary operators in conditional

changelog_unreleased/javascript/12087.md

@@ -0,0 +1,52 @@
+#### Constant line breaks for Conditional operators (#12087 by @islandryu)
+
+```js
+//--print-width=25
+// Input
+const a = foo == null ? bar : baz;
+
+const b = !fooooooooo ? bar : baz;
+
+const x = {
+  prop1: foo == null ? bar : baz,
+  prop1: !fooooooooo ? bar : baz,
+};
+
+// Prettier stable
+const a =
+  foo == null
+    ? bar
+    : baz;
+const b = !fooooooooo
+  ? bar
+  : baz;
+const x = {
+  prop1:
+    foo == null
+      ? bar
+      : baz,
+  prop1: !fooooooooo
+    ? bar
+    : baz,
+};
+
+// Prettier main
+const a =
+  foo == null
+    ? bar
+    : baz;
+const b =
+  !fooooooooo
+    ? bar
+    : baz;
+const x = {
+  prop1:
+    foo == null
+      ? bar
+      : baz,
+  prop1:
+    !fooooooooo
+      ? bar
+      : baz,
+};
+```

src/language-js/print/assignment.js

@@ -184,8 +184,7 @@ function shouldBreakAfterOperator(path, options, print, hasShortKey) {
     case "SequenceExpression":
       return true;
     case "ConditionalExpression": {
-      const { test } = rightNode;
-      return isBinaryish(test) && !shouldInlineLogicalExpression(test);
+      return false;
     }
     case "ClassExpression":
       return isNonEmptyArray(rightNode.decorators);

src/language-js/print/binaryish.js

@@ -24,8 +24,8 @@ const {
   CommentCheckFlags,
   isCallExpression,
   isMemberExpression,
-  isObjectProperty,
   isEnabledHackPipeline,
+  isAssignmentLike,
 } = require("../utils/index.js");
 
 /** @typedef {import("../../document").Doc} Doc */
@@ -86,6 +86,14 @@ function printBinaryishExpression(path, options, print) {
     return group([indent([softline, ...parts]), softline]);
   }
 
+  if (
+    parent.type === "ConditionalExpression" &&
+    parent.test === node &&
+    isAssignmentLike(parentParent)
+  ) {
+    return indent([softline, parts]);
+  }
+
   // Avoid indenting sub-expressions in some cases where the first sub-expression is already
   // indented accordingly. We should indent sub-expressions where the first case isn't indented.
   const shouldNotIndent =
@@ -107,14 +115,7 @@ function printBinaryishExpression(path, options, print) {
       !isCallExpression(parentParent)) ||
     parent.type === "TemplateLiteral";
 
-  const shouldIndentIfInlining =
-    parent.type === "AssignmentExpression" ||
-    parent.type === "VariableDeclarator" ||
-    parent.type === "ClassProperty" ||
-    parent.type === "PropertyDefinition" ||
-    parent.type === "TSAbstractPropertyDefinition" ||
-    parent.type === "ClassPrivateProperty" ||
-    isObjectProperty(parent);
+  const shouldIndentIfInlining = isAssignmentLike(parent);
 
   const samePrecedenceSubExpression =
     isBinaryish(node.left) && shouldFlatten(node.operator, node.left.operator);
@@ -297,6 +298,7 @@ function printBinaryishExpressions(
     lineBeforeOperator ? "" : " ",
     shouldGroup ? group(right, { shouldBreak }) : right
   );
+  // const isParentTernary = node.parent?.type === "ConditionalExpression"
 
   // The root comments are already printed, but we need to manually print
   // the other ones since we don't call the normal print on BinaryExpression,
@@ -307,7 +309,6 @@ function printBinaryishExpressions(
     if (isConcat(printed) || printed.type === "fill") {
       return getDocParts(printed);
     }
-
     return [printed];
   }
 

src/language-js/print/ternary.js

@@ -6,6 +6,8 @@ const {
   getComments,
   isCallExpression,
   isMemberExpression,
+  isBinaryish,
+  isAssignmentLike,
 } = require("../utils/index.js");
 const { locStart, locEnd } = require("../loc.js");
 const isBlockComment = require("../utils/is-block-comment.js");
@@ -19,6 +21,7 @@ const {
     ifBreak,
     dedent,
     breakParent,
+    indentIfBreak,
   },
 } = require("../../document/index.js");
 
@@ -236,6 +239,9 @@ function printTernary(path, options, print) {
   const firstNonConditionalParent = currentParent || parent;
   const lastConditionalParent = previousParent;
 
+  const shouldIndentIfBreak =
+    node.test && isBinaryish(node.test) && isAssignmentLike(parent);
+
   if (
     isConditionalExpression &&
     (isJsxNode(node[testNodePropertyNames[0]]) ||
@@ -339,9 +345,15 @@ function printTernary(path, options, print) {
 
   const shouldExtraIndent = shouldExtraIndentForConditionalExpression(path);
 
+  const groupId = Symbol("binary");
+
   const result = maybeGroup([
-    printTernaryTest(path, options, print),
-    forceNoIndent ? parts : indent(parts),
+    group(printTernaryTest(path, options, print), { id: groupId }),
+    shouldIndentIfBreak
+      ? indentIfBreak(forceNoIndent ? parts : indent(parts), { groupId })
+      : forceNoIndent
+      ? parts
+      : indent(parts),
     isConditionalExpression && breakClosingParen && !shouldExtraIndent
       ? softline
       : "",

src/language-js/utils/index.js

@@ -1311,6 +1311,22 @@ const markerForIfWithoutBlockAndSameLineComment = Symbol(
   "ifWithoutBlockAndSameLineComment"
 );
 
+function isTsKeywordType({ type }) {
+  return type.startsWith("TS") && type.endsWith("Keyword");
+}
+
+function isAssignmentLike(node) {
+  return (
+    node.type === "AssignmentExpression" ||
+    node.type === "VariableDeclarator" ||
+    node.type === "ClassProperty" ||
+    node.type === "PropertyDefinition" ||
+    node.type === "TSAbstractPropertyDefinition" ||
+    node.type === "ClassPrivateProperty" ||
+    isObjectProperty(node)
+  );
+}
+
 module.exports = {
   getFunctionParameters,
   iterateFunctionParametersPath,
@@ -1375,4 +1391,6 @@ module.exports = {
   getComments,
   CommentCheckFlags,
   markerForIfWithoutBlockAndSameLineComment,
+  isTsKeywordType,
+  isAssignmentLike,
 };

tests/format/js/assignment/__snapshots__/jsfmt.spec.js.snap

@@ -401,10 +401,9 @@ class foo {
 =====================================output=====================================
 class foo {
   bar() {
-    const median =
-      dates.length % 2
-        ? dates[half].getTime()
-        : (dates[half - 1].getTime() + dates[half].getTime()) / 2.0;
+    const median = dates.length % 2
+      ? dates[half].getTime()
+      : (dates[half - 1].getTime() + dates[half].getTime()) / 2.0;
   }
 }