Align leading comment of union type elements (#18833)

.yarn/plugins/plugin-prepare.cjs

@@ -29,7 +29,9 @@ module.exports = {
     hooks: {
       async afterAllInstalled() {
         setupVscode();
+        try {
           await buildBabelCodeFrameForTest();
+        } catch {}
       },
     },
   }),

changelog_unreleased/typescript/18833.md

@@ -0,0 +1,42 @@
+#### Align JSDoc before union type elements (#18833 by @fisker)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+type A =
+  |
+  /**
+   * Comment
+   */
+  a
+  | (b | c);
+type A2 =
+  |
+  // comment
+  a
+  | (b | c);
+
+// Prettier stable
+type A =
+  | /**
+   * Comment
+   */
+  a
+  | (b | c);
+type A2 =
+  | // comment
+  a
+  | (b | c);
+
+// Prettier main
+type A =
+  | /**
+     * Comment
+     */
+    a
+  | (b | c);
+type A2 =
+  | // comment
+    a
+  | (b | c);
+```

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

@@ -9,6 +9,7 @@ import {
 } from "../../document/index.js";
 import { printComments } from "../../main/comments/print.js";
 import needsParentheses from "../parentheses/needs-parentheses.js";
+import { CommentCheckFlags, hasComment } from "../utilities/comments.js";
 import { isFlowObjectTypePropertyAFunction } from "../utilities/is-flow-object-type-property-a-function.js";
 import {
   isConditionalType,
@@ -48,12 +49,18 @@ function printUnionType(path, options, print, args) {
   // | child1
   // // comment
   // | child2
-  let printed = path.map(
-    () => printComments(path, align(2, print()), options),
-    "types",
-  );
+  /** @type {Doc} */
+  let printed = group(
+    path.map(({ isFirst }) => {
+      const bar = isFirst ? ifBreak("| ") : [line, "| "];
+      const typeDoc = print();
+      if (hasComment(path.node, CommentCheckFlags.Leading)) {
+        return [bar, align(2, printComments(path, typeDoc, options))];
+      }
 
-  printed = group([ifBreak("| "), join([line, "| "], printed)]);
+      return [bar, printComments(path, align(2, typeDoc), options)];
+    }, "types"),
+  );
 
   if (shouldUnionTypePrintOwnComments(path)) {
     printed = printComments(path, printed, options);

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

@@ -0,0 +1,28 @@
+// TODO[@fisker]: comments not attached correctly after first element
+type A1 =
+  | /**
+   * 11
+   */
+  a
+  | b
+
+type A2 =
+  | /**
+   * 21
+   */ a
+  | b
+
+type A3 =
+  | // 31
+  a
+  |
+  b;
+
+type A4 =
+  |
+// 41
+/**
+   * 42
+   */
+  a
+  | b

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

@@ -218,6 +218,71 @@ type A4 =
 ================================================================================
 `;
 
+exports[`18787.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+// TODO[@fisker]: comments not attached correctly after first element
+type A1 =
+  | /**
+   * 11
+   */
+  a
+  | b
+
+type A2 =
+  | /**
+   * 21
+   */ a
+  | b
+
+type A3 =
+  | // 31
+  a
+  |
+  b;
+
+type A4 =
+  |
+// 41
+/**
+   * 42
+   */
+  a
+  | b
+
+=====================================output=====================================
+// TODO[@fisker]: comments not attached correctly after first element
+type A1 =
+  | /**
+     * 11
+     */
+    a
+  | b;
+
+type A2 =
+  | /**
+     * 21
+     */ a
+  | b;
+
+type A3 =
+  | // 31
+    a
+  | b;
+
+type A4 =
+  | // 41
+    /**
+     * 42
+     */
+    a
+  | b;
+
+================================================================================
+`;
+
 exports[`mutiple.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript", "flow"]