Fix leading comments in mapped types with readonly (Cherry-pick pre…

…ttier#13427) (prettier#14310)
medikoo · Jan 4, 2024 · cf005ae · cf005ae
1 parent c81ec23
commit cf005ae
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 7 deletions.
diff --git a/changelog_unreleased/typescript/13427.md b/changelog_unreleased/typescript/13427.md
@@ -0,0 +1,22 @@
+#### Fix leading comments in mapped types with `readonly` (#13427 by @thorn0, @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```tsx
+// Input
+type Type = {
+  // comment
+  readonly [key in Foo];
+};
+
+// Prettier stable
+type Type = {
+  readonly // comment
+  [key in Foo];
+};
+
+// Prettier main
+type Type = {
+  // comment
+  readonly [key in Foo];
+};
+```
diff --git a/src/language-js/print/type-parameters.js b/src/language-js/print/type-parameters.js
@@ -12,6 +12,7 @@ const {
   shouldPrintComma,
   getFunctionParameters,
   isObjectType,
+  getTypeScriptMappedTypeModifier,
 } = require("../utils/index.js");
 const { createGroupIdMapper } = require("../../common/util.js");
 const { shouldHugType } = require("./type-annotation.js");
@@ -109,6 +110,12 @@ function printTypeParameter(path, options, print) {
   const parts = [];
   const parent = path.getParentNode();
   if (parent.type === "TSMappedType") {
+    if (parent.readonly) {
+      parts.push(
+        getTypeScriptMappedTypeModifier(parent.readonly, "readonly"),
+        " "
+      );
+    }
     parts.push("[", print("name"));
     if (node.constraint) {
       parts.push(" in ", print("constraint"));

diff --git a/src/language-js/print/typescript.js b/src/language-js/print/typescript.js
@@ -307,13 +307,6 @@ function printTypescript(path, options, print) {
           "{",
           indent([
             options.bracketSpacing ? line : softline,
-            node.readonly
-              ? [
-                  getTypeScriptMappedTypeModifier(node.readonly, "readonly"),
-                  " ",
-                ]
-              : "",
-            printTypeScriptModifiers(path, options, print),
             print("typeParameter"),
             node.optional
               ? getTypeScriptMappedTypeModifier(node.optional, "?")

diff --git a/tests/format/typescript/mapped-type/__snapshots__/jsfmt.spec.js.snap b/tests/format/typescript/mapped-type/__snapshots__/jsfmt.spec.js.snap
@@ -22,6 +22,119 @@ type Example = {
 ================================================================================
 `;
 
+exports[`issue-11098.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+type Type = {
+  // comment
+  readonly [T in number];
+};
+
+type Type = {
+  // comment1
+  // comment2
+  readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly [T in number];
+};
+
+type Type = {
+  // comment
+  -readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +    readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly     [T in number];
+};
+
+type Type = {
+  // comment
+  readonly       [T in number];
+};
+
+type Type = {
+  // comment
+  [T in number];
+};
+
+type Type = {
+  readonly
+  // comment
+  [T in number];
+};
+
+type Type = {
+  readonly // foo
+  /* bar */ [T in number];
+};
+
+=====================================output=====================================
+type Type = {
+  // comment
+  readonly [T in number];
+};
+
+type Type = {
+  // comment1
+  // comment2
+  readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly [T in number];
+};
+
+type Type = {
+  // comment
+  -readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly [T in number];
+};
+
+type Type = {
+  // comment
+  readonly [T in number];
+};
+
+type Type = {
+  // comment
+  [T in number];
+};
+
+type Type = {
+  // comment
+  readonly [T in number];
+};
+
+type Type = {
+  // foo
+  /* bar */ readonly [T in number];
+};
+
+================================================================================
+`;
+
 exports[`mapped-type.ts format 1`] = `
 ====================================options=====================================
 parsers: ["typescript"]

diff --git a/tests/format/typescript/mapped-type/issue-11098.ts b/tests/format/typescript/mapped-type/issue-11098.ts
@@ -0,0 +1,51 @@
+type Type = {
+  // comment
+  readonly [T in number];
+};
+
+type Type = {
+  // comment1
+  // comment2
+  readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly [T in number];
+};
+
+type Type = {
+  // comment
+  -readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +    readonly [T in number];
+};
+
+type Type = {
+  // comment
+  +readonly     [T in number];
+};
+
+type Type = {
+  // comment
+  readonly       [T in number];
+};
+
+type Type = {
+  // comment
+  [T in number];
+};
+
+type Type = {
+  readonly
+  // comment
+  [T in number];
+};
+
+type Type = {
+  readonly // foo
+  /* bar */ [T in number];
+};