Improve long mapped type to across multiple line in Flow (#18779)

Co-authored-by: fisker Cheung <lionkay@gmail.com>

changelog_unreleased/flow/18779.md

@@ -0,0 +1,25 @@
+#### Improve long mapped type to across multiple line (#18779 by @kovsu)
+
+<!-- prettier-ignore -->
+```flow
+// Input
+type MappedType = {
+  [KeyType in ValueType extends string ? VeryLongStringTypeNameHere : VeryLongNumberTypeNameHere]: KeyType
+}
+
+// Prettier stable
+type MappedType = {
+  [KeyType in ValueType extends string
+      ? VeryLongStringTypeNameHere
+      : VeryLongNumberTypeNameHere]: KeyType,
+};
+
+// Prettier main
+type MappedType = {
+  [
+    KeyType in ValueType extends string
+      ? VeryLongStringTypeNameHere
+      : VeryLongNumberTypeNameHere
+  ]: KeyType,
+};
+```

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

@@ -41,9 +41,12 @@ function printFlowMappedTypeProperty(path, options, print) {
   return [
     group([
       node.variance ? print("variance") : "",
-      "[",
-      indent([print("keyTparam"), " in ", print("sourceType")]),
-      "]",
+      group([
+        "[",
+        indent([softline, print("keyTparam"), " in ", print("sourceType")]),
+        softline,
+        "]",
+      ]),
       printFlowMappedTypeOptionalModifier(node.optional),
       ": ",
       print("propType"),

tests/format/flow/mapped-types/__snapshots__/format.test.js.snap

@@ -153,30 +153,44 @@ type MappedWithComments = {/*comment about variance */+[key /* comment about key
 
 type Mapped = { [key in keyof O]: O[key] };
 type MappedLong = {
-  [key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]: number,
+  [
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]: number,
 };
 type MappedWithVariance = { +[key in keyof O]: number };
 type MappedWithVarianceLong = {
-  -[key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]: number,
+  -[
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]: number,
 };
 type MappedWithPlusOptional = { [key in keyof O]+?: number };
 type MappedWithMinusOptional = { [key in keyof O]-?: number };
 type MappedWithOptional = { [key in keyof O]?: number };
 type MappedWithPlusOptionalLong = {
-  [key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]+?: number,
+  [
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]+?: number,
 };
 type MappedWithMinusOptionalLong = {
-  [key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]-?: number,
+  [
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]-?: number,
 };
 type MappedWithOptionalLong = {
-  [key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]?: number,
+  [
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]?: number,
 };
 type MappedWithOptionalAndVariance = { +[key in keyof O]+?: number };
 type MappedWithOptionalAndVarianceLong = {
-  +[key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap]+?: number,
+  +[
+    key in keyof AReallyLongNameThatShouldReallyMostDefinitelyCauseALineWrap
+  ]+?: number,
 };
 type MappedWithComments = {
-  /*comment about variance */ +[key /* comment about key name */ in /* comment before source type */ keyof O /* comment after source type */ /* comment about optionality */ /*comment before colon */]?: number /*comment about the prop type */,
+  /*comment about variance */ +[
+    key /* comment about key name */ in /* comment before source type */ keyof O /* comment after source type */ /* comment about optionality */ /*comment before colon */
+  ]?: number /*comment about the prop type */,
 };
 
 ================================================================================

tests/format/flow/type-parameters/flow-only/__snapshots__/format.test.js.snap

@@ -26,9 +26,11 @@ const isNodeOrTokenOfTypeWithConditions = <
 >() => true;
 
 type A = {
-  [NodeOrTokenType in NodeOrToken extends TSESTree.Node
+  [
+    NodeOrTokenType in NodeOrToken extends TSESTree.Node
       ? AST_NODE_TYPES
-      : AST_TOKEN_TYPES]: NodeOrTokenType,
+      : AST_TOKEN_TYPES
+  ]: NodeOrTokenType,
 };
 
 ================================================================================