Fix Union type print (#18186)

src/language-js/print/assignment.js

@@ -9,7 +9,6 @@ import { canBreak, cleanDoc, willBreak } from "../../document/utils.js";
 import getStringWidth from "../../utils/get-string-width.js";
 import isNonEmptyArray from "../../utils/is-non-empty-array.js";
 import {
-  createTypeCheckFunction,
   getCallArguments,
   hasLeadingOwnLineComment,
   isBinaryish,
@@ -21,6 +20,7 @@ import {
   isNumericLiteral,
   isObjectProperty,
   isStringLiteral,
+  isTypeAlias,
   isUnionType,
 } from "../utils/index.js";
 import { shouldInlineLogicalExpression } from "./binaryish.js";
@@ -142,7 +142,6 @@ function chooseLayout(path, options, print, leftDoc, rightPropertyName) {
     node.type === "ImportAttribute" ||
     (rightNode.type === "CallExpression" &&
       rightNode.callee.name === "require") ||
-    isUnionType(rightNode) ||
     // do not put values on a separate line from the key in json
     options.parser === "json5" ||
     options.parser === "jsonc" ||
@@ -302,10 +301,6 @@ function isComplexTypeAliasParams(node) {
   return false;
 }
 
-const isTypeAlias = createTypeCheckFunction([
-  "TSTypeAliasDeclaration",
-  "TypeAlias",
-]);
 function getTypeParametersFromTypeAlias(node) {
   if (isTypeAlias(node)) {
     return node.typeParameters?.params;

src/language-js/print/type-annotation.js

@@ -22,6 +22,7 @@ import {
   isFlowObjectTypePropertyAFunction,
   isObjectType,
   isSimpleType,
+  isTypeAlias,
   isUnionType,
 } from "../utils/index.js";
 import { printAssignment } from "./assignment.js";
@@ -212,10 +213,12 @@ function printUnionType(path, options, print) {
       path.grandparent.this !== parent
     ) &&
     !(
-      (parent.type === "TypeAlias" ||
-        parent.type === "VariableDeclarator" ||
-        parent.type === "TSTypeAliasDeclaration") &&
+      (isTypeAlias(parent) || parent.type === "VariableDeclarator") &&
       hasLeadingOwnLineComment(options.originalText, node)
+    ) &&
+    !(
+      isTypeAlias(parent) &&
+      hasComment(parent.id, CommentCheckFlags.Trailing | CommentCheckFlags.Line)
     );
 
   // {

src/language-js/utils/index.js

@@ -1085,6 +1085,11 @@ const isTsAsConstExpression = (node) =>
   node.typeAnnotation.typeName.type === "Identifier" &&
   node.typeAnnotation.typeName.name === "const";
 
+const isTypeAlias = createTypeCheckFunction([
+  "TSTypeAliasDeclaration",
+  "TypeAlias",
+]);
+
 export {
   CommentCheckFlags,
   createTypeCheckFunction,
@@ -1137,6 +1142,7 @@ export {
   isTemplateOnItsOwnLine,
   isTestCall,
   isTsAsConstExpression,
+  isTypeAlias,
   isTypeAnnotationAFunction,
   isUnionType,
   iterateCallArgumentsPath,

tests/format/typescript/union/comments/18106.ts

@@ -1,4 +1,4 @@
-export interface DirectiveArgumentNode extends ArrayExpression {
+export interface DirectiveArgumentNode1 extends ArrayExpression {
   elements: // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -6,7 +6,7 @@ export interface DirectiveArgumentNode extends ArrayExpression {
     | [string, ExpressionNode, ExpressionNode, ObjectExpression]
 }
 
-export class DirectiveArgumentNode2 extends ArrayExpression {
+export class DirectiveArgumentNode12 extends ArrayExpression {
   elements: // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -27,3 +27,16 @@ const elements: // dir, exp, arg, modifiers
   | [string, ExpressionNode, ExpressionNode]
   | [string, ExpressionNode, ExpressionNode, ObjectExpression]
   = 1
+
+type A2 = /* block comment */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression]
+
+type A3 = /* block comment
+ */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression]

tests/format/typescript/union/comments/__snapshots__/format.test.js.snap

@@ -6,7 +6,7 @@ parsers: ["typescript", "flow"]
 printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
-export interface DirectiveArgumentNode extends ArrayExpression {
+export interface DirectiveArgumentNode1 extends ArrayExpression {
   elements: // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -14,7 +14,7 @@ export interface DirectiveArgumentNode extends ArrayExpression {
     | [string, ExpressionNode, ExpressionNode, ObjectExpression]
 }
 
-export class DirectiveArgumentNode2 extends ArrayExpression {
+export class DirectiveArgumentNode12 extends ArrayExpression {
   elements: // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -36,8 +36,21 @@ const elements: // dir, exp, arg, modifiers
   | [string, ExpressionNode, ExpressionNode, ObjectExpression]
   = 1
 
+type A2 = /* block comment */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression]
+
+type A3 = /* block comment
+ */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression]
+
 =====================================output=====================================
-export interface DirectiveArgumentNode extends ArrayExpression {
+export interface DirectiveArgumentNode1 extends ArrayExpression {
   elements:  // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -45,7 +58,7 @@ export interface DirectiveArgumentNode extends ArrayExpression {
     | [string, ExpressionNode, ExpressionNode, ObjectExpression];
 }
 
-export class DirectiveArgumentNode2 extends ArrayExpression {
+export class DirectiveArgumentNode12 extends ArrayExpression {
   elements: // dir, exp, arg, modifiers
     | [string]
     | [string, ExpressionNode]
@@ -53,7 +66,7 @@ export class DirectiveArgumentNode2 extends ArrayExpression {
     | [string, ExpressionNode, ExpressionNode, ObjectExpression] = 1;
 }
 
-type A =  // dir, exp, arg, modifiers
+type A = // dir, exp, arg, modifiers
   | [string]
   | [string, ExpressionNode]
   | [string, ExpressionNode, ExpressionNode]
@@ -65,5 +78,20 @@ const elements: // dir, exp, arg, modifiers
   | [string, ExpressionNode, ExpressionNode]
   | [string, ExpressionNode, ExpressionNode, ObjectExpression] = 1;
 
+type A2 =
+  /* block comment */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression];
+
+type A3 =
+  /* block comment
+   */
+  | [string]
+  | [string, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode]
+  | [string, ExpressionNode, ExpressionNode, ObjectExpression];
+
 ================================================================================
 `;

tests/format/typescript/union/consistent-with-flow/__snapshots__/format.test.js.snap

@@ -129,7 +129,7 @@ type SuperLongTypeNameLoremIpsumLoremIpsumBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBl2 =
 =====================================output=====================================
 type A1 = /* 4 */ (A | B)[];
 
-type A2 =  // dir, exp, arg, modifiers
+type A2 = // dir, exp, arg, modifiers
   | [string]
   | [string, ExpressionNode]
   | [string, ExpressionNode, ExpressionNode]
@@ -142,9 +142,10 @@ type A3 = // dir, exp, arg, modifiers
     [string, ExpressionNode, ExpressionNode, ObjectExpression];
 
 type SuperLongTypeNameLoremIpsumLoremIpsumBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla =
-  | Fooo1000
-  | Baz2000
-  | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+
+    | Fooo1000
+    | Baz2000
+    | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
 
 type SuperLongTypeNameLoremIpsumLoremIpsumBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBl2 =
   Fooo1000 &