Fix inconsistent comment in property signature (#18110)

changelog_unreleased/typescript/18109.md

@@ -30,3 +30,5 @@ type A =  // comment
   | Baz2000
   | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
 ```
+
+_This change applies to Flow syntax too_

changelog_unreleased/typescript/18110.md

@@ -0,0 +1,57 @@
+#### Fix inconsistent comment printing between `typescript` and `flow` parser (#18110 by @fisker)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+interface A {
+  a: // Comment
+    B;
+  b: // Comment
+  	| Fooo1000
+    | Baz2000
+    | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+  c: // Comment
+  	& Fooo1000
+    & Baz2000
+    & BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+}
+
+// Prettier stable (--parser=typescript)
+interface A {
+  a: // Comment
+  B;
+  b: // Comment
+  | Fooo1000
+    | Baz2000
+    | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+  c: // Comment
+  Fooo1000 &
+    Baz2000 &
+    BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+}
+
+// Prettier stable (--parser=flow)
+interface A {
+  a: B; // Comment
+  b:  // Comment
+    | Fooo1000
+    | Baz2000
+    | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+  c: Fooo1000 & // Comment
+    Baz2000 &
+    BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+}
+
+// Prettier main (Same output for `--parser=typescript` and `--parser=flow`)
+interface A {
+  a: B; // Comment
+  b:  // Comment
+    | Fooo1000
+    | Baz2000
+    | BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+  c: // Comment
+  Fooo1000 &
+    Baz2000 &
+    BarLoooooooooooooooooooooooooooooooooooooooooooooooooLong;
+}
+```

src/language-js/comments/handle-comments.js

@@ -98,6 +98,7 @@ function handleEndOfLineComment(context) {
     handleLastUnionElementInExpression,
     handleLastBinaryOperatorOperand,
     handleTSMappedTypeComments,
+    handlePropertySignatureComments,
   ].some((fn) => fn(context));
 }
 
@@ -1102,6 +1103,22 @@ function handleLastBinaryOperatorOperand({
   return false;
 }
 
+function handlePropertySignatureComments({
+  enclosingNode,
+  followingNode,
+  comment,
+}) {
+  if (
+    enclosingNode &&
+    (enclosingNode.type === "TSPropertySignature" ||
+      enclosingNode.type === "ObjectTypeProperty") &&
+    isIntersectionType(followingNode)
+  ) {
+    addLeadingComment(followingNode, comment);
+    return true;
+  }
+}
+
 /**
  * @param {Node} node
  * @returns {boolean}

src/language-js/comments/printer-methods.js

@@ -97,6 +97,24 @@ function canAttachComment(node, ancestors) {
     return isMeaningfulEmptyStatement({ node, parent: ancestors[0] });
   }
 
+  /*
+  For this code
+  `interface A {property: B}`
+                          ^ `ObjectTypeProperty.value` (Flow)
+  `interface A {property: B}`
+                        ^^^ `TSPropertySignature.typeAnnotation` (TypeScript)
+                          ^ `TSPropertySignature.typeAnnotation.typeAnnotation` (TypeScript)
+  ```
+
+  To avoid inconsistent, let's attach to the Identifier instead.
+  */
+  if (
+    node.type === "TSTypeAnnotation" &&
+    ancestors[0].type === "TSPropertySignature"
+  ) {
+    return false;
+  }
+
   return true;
 }
 

tests/config/run-format-test.js

@@ -49,6 +49,7 @@ const unstableTests = new Map(
     ["js/ignore/semi/asi.js", (options) => options.semi === false],
     "typescript/union/consistent-with-flow/single-type.ts",
     "js/if/non-block.js",
+    "typescript/import-type/long-module-name/long-module-name4.ts",
   ].map((fixture) => {
     const [file, isUnstable = () => true] = Array.isArray(fixture)
       ? fixture

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`comments.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+interface A {
+  property: // Comment
+    B
+}
+
+interface A {
+  property: /* Comment */ B
+}
+
+=====================================output=====================================
+interface A {
+  property: B; // Comment
+}
+
+interface A {
+  property: /* Comment */ B;
+}
+
+================================================================================
+`;
+
+exports[`intersection.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements: // dir, exp, arg, modifiers
+    & [string]
+    & [string, ExpressionNode]
+    & [string, ExpressionNode, ExpressionNode]
+    & [string, ExpressionNode, ExpressionNode, ObjectExpression]
+}
+
+=====================================output=====================================
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements: // dir, exp, arg, modifiers
+  [string] &
+    [string, ExpressionNode] &
+    [string, ExpressionNode, ExpressionNode] &
+    [string, ExpressionNode, ExpressionNode, ObjectExpression];
+}
+
+================================================================================
+`;
+
+exports[`union.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements: // dir, exp, arg, modifiers
+    | [string]
+    | [string, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode, ObjectExpression]
+}
+
+=====================================output=====================================
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements:  // dir, exp, arg, modifiers
+    | [string]
+    | [string, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode, ObjectExpression];
+}
+
+================================================================================
+`;

tests/format/typescript/property-signature/consistent-with-flow/comments.ts

@@ -0,0 +1,8 @@
+interface A {
+  property: // Comment
+    B
+}
+
+interface A {
+  property: /* Comment */ B
+}

tests/format/typescript/property-signature/consistent-with-flow/format.test.js

@@ -0,0 +1 @@
+runFormatTest(import.meta, ["typescript", "flow"]);

tests/format/typescript/property-signature/consistent-with-flow/intersection.ts

@@ -0,0 +1,7 @@
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements: // dir, exp, arg, modifiers
+    & [string]
+    & [string, ExpressionNode]
+    & [string, ExpressionNode, ExpressionNode]
+    & [string, ExpressionNode, ExpressionNode, ObjectExpression]
+}

tests/format/typescript/property-signature/consistent-with-flow/union.ts

@@ -0,0 +1,7 @@
+export interface DirectiveArgumentNode extends ArrayExpression {
+  elements: // dir, exp, arg, modifiers
+    | [string]
+    | [string, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode]
+    | [string, ExpressionNode, ExpressionNode, ObjectExpression]
+}