diff --git a/changelog_unreleased/javascript/pr-7504.md b/changelog_unreleased/javascript/pr-7504.md new file mode 100644 index 000000000..8f3e45f3c --- /dev/null +++ b/changelog_unreleased/javascript/pr-7504.md @@ -0,0 +1,38 @@ +#### Don't add parens to `undefined` in `ConditionalExpression` with `jsx` ([#7504](https://github.com/prettier/prettier/pull/7504) by [@fisker](https://github.com/fisker)) + +Previously, we add parens to any value except `null` in `ConditionalExpression` with `jsx`, now `undefined` is excluded too. + + +```js +// Input +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +null + +// Prettier stable +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : ( + undefined +); +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : null; + +// Prettier master +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : undefined; +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : null; +``` diff --git a/src/language-js/printer-estree.js b/src/language-js/printer-estree.js index 4ff99219d..c0a27df76 100644 --- a/src/language-js/printer-estree.js +++ b/src/language-js/printer-estree.js @@ -334,18 +334,20 @@ function printTernaryOperator(path, options, print, operatorOptions) { // The only things we don't wrap are: // * Nested conditional expressions in alternates // * null - const isNull = node => + // * undefined + const isNil = node => node.type === "NullLiteral" || - (node.type === "Literal" && node.value === null); + (node.type === "Literal" && node.value === null) || + (node.type === "Identifier" && node.name === "undefined"); parts.push( " ? ", - isNull(consequentNode) + isNil(consequentNode) ? path.call(print, operatorOptions.consequentNodePropertyName) : wrap(path.call(print, operatorOptions.consequentNodePropertyName)), " : ", alternateNode.type === operatorOptions.conditionalNodeType || - isNull(alternateNode) + isNil(alternateNode) ? path.call(print, operatorOptions.alternateNodePropertyName) : wrap(path.call(print, operatorOptions.alternateNodePropertyName)) ); diff --git a/tests/jsx/__snapshots__/jsfmt.spec.js.snap b/tests/jsx/__snapshots__/jsfmt.spec.js.snap index e56b7818e..5455f1b8f 100644 --- a/tests/jsx/__snapshots__/jsfmt.spec.js.snap +++ b/tests/jsx/__snapshots__/jsfmt.spec.js.snap @@ -756,6 +756,10 @@ cable ? ( ) : null} ; +// #3552 +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined + =====================================output===================================== // There are two ways to print ConditionalExpressions: "normal mode" and // "JSX mode". This is normal mode (when breaking): @@ -901,6 +905,13 @@ cable ? ( ) : null} ; +// #3552 +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : undefined; + ================================================================================ `; @@ -1044,6 +1055,10 @@ cable ? ( ) : null} ; +// #3552 +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined + =====================================output===================================== // There are two ways to print ConditionalExpressions: "normal mode" and // "JSX mode". This is normal mode (when breaking): @@ -1189,6 +1204,13 @@ cable ? ( ) : null} ; +// #3552 +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : undefined; + ================================================================================ `; @@ -1332,6 +1354,10 @@ cable ? ( ) : null} ; +// #3552 +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined + =====================================output===================================== // There are two ways to print ConditionalExpressions: "normal mode" and // "JSX mode". This is normal mode (when breaking): @@ -1477,6 +1503,13 @@ cable ? ( ) : null} ; +// #3552 +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : undefined; + ================================================================================ `; @@ -1620,6 +1653,10 @@ cable ? ( ) : null} ; +// #3552 +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined + =====================================output===================================== // There are two ways to print ConditionalExpressions: "normal mode" and // "JSX mode". This is normal mode (when breaking): @@ -1765,6 +1802,13 @@ cable ? ( ) : null} ; +// #3552 +foo ? ( + + loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx + +) : undefined; + ================================================================================ `; diff --git a/tests/jsx/conditional-expression.js b/tests/jsx/conditional-expression.js index 5266662a9..59a5e5b71 100644 --- a/tests/jsx/conditional-expression.js +++ b/tests/jsx/conditional-expression.js @@ -129,3 +129,7 @@ cable ? ( ) ) : null} ; + +// #3552 +foo ? loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx : +undefined