Add parens for nullish coalescing in tenary (#16391)

* add parens for nullish coalescing

fix #4873

* add function

* Update tests/format/js/nullish-coalescing/nullish_coalesing_operator.js

Co-authored-by: fisker Cheung <lionkay@gmail.com>

* update snapshot

* add changelog entry

* fix typo

---------

Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/javascript/16391.md

@@ -0,0 +1,21 @@
+#### Add parentheses for nullish coalescing in ternary (#16391 by @cdignam-segment)
+
+This change adds clarity to operator precedence.
+
+<!-- prettier-ignore -->
+```js
+// Input
+foo ? bar ?? foo : baz;
+foo ?? bar ? a : b;
+a ? b : foo ?? bar;
+
+// Prettier stable
+foo ? bar ?? foo : baz;
+foo ?? bar ? a : b;
+a ? b : foo ?? bar;
+
+// Prettier main
+foo ? (bar ?? foo) : baz;
+(foo ?? bar) ? a : b;
+a ? b : (foo ?? bar);
+```

src/language-js/needs-parens.js

@@ -11,6 +11,7 @@ import {
   isBitwiseOperator,
   isCallExpression,
   isMemberExpression,
+  isNullishCoalescing,
   isObjectOrRecordExpression,
   isObjectProperty,
   shouldFlatten,
@@ -374,7 +375,7 @@ function needsParens(path, options) {
           return !isBinaryCastExpression(node);
 
         case "ConditionalExpression":
-          return isBinaryCastExpression(node);
+          return isBinaryCastExpression(node) || isNullishCoalescing(node);
 
         case "CallExpression":
         case "NewExpression":

src/language-js/utils/index.js

@@ -140,6 +140,14 @@ const isObjectOrRecordExpression = createTypeCheckFunction([
   "RecordExpression",
 ]);
 
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isNullishCoalescing(node) {
+  return node.type === "LogicalExpression" && node.operator === "??";
+}
+
 /**
  * @param {Node} node
  * @returns {boolean}
@@ -1143,6 +1151,7 @@ export {
   isMemberish,
   isMethod,
   isNextLineEmpty,
+  isNullishCoalescing,
   isNumericLiteral,
   isObjectOrRecordExpression,
   isObjectProperty,

tests/format/js/nullish-coalescing/__snapshots__/format.test.js.snap

@@ -29,12 +29,16 @@ foo || (baz ?? baz);
 (foo && baz) ?? baz;
 foo && (baz ?? baz);
 
+foo ?? bar ? a : b;
+a ? foo ?? bar : b;
+a ? b : foo ?? bar;
+
 =====================================output=====================================
 obj.foo ?? "default";
 
 const x = (foo, bar = foo ?? bar) => {};
 
-foo ? bar ?? foo : baz;
+foo ? (bar ?? foo) : baz;
 
 foo ?? bar ?? baz;
 foo ?? bar ?? baz;
@@ -53,5 +57,9 @@ foo || (baz ?? baz);
 (foo && baz) ?? baz;
 foo && (baz ?? baz);
 
+(foo ?? bar) ? a : b;
+a ? (foo ?? bar) : b;
+a ? b : (foo ?? bar);
+
 ================================================================================
 `;

tests/format/js/nullish-coalescing/nullish_coalesing_operator.js

@@ -20,3 +20,7 @@ foo || (baz ?? baz);
 
 (foo && baz) ?? baz;
 foo && (baz ?? baz);
+
+foo ?? bar ? a : b;
+a ? foo ?? bar : b;
+a ? b : foo ?? bar;