feat(rome_js_formatter): TS Intersection & Union types rome#3162

crates/rome_js_formatter/src/lib.rs

@@ -750,9 +750,12 @@ function() {
     // use this test check if your snippet prints as you wish, without using a snapshot
     fn quick_test() {
         let src = r#"
-const obj1 = conditionIsTruthy
-           ? { some: "long", object: "with", lots: "of", stuff }
-           : shortThing;
+type Example = {
+  [A in B]: T;
+} & {
+  [A in B]: T;
+};
+
 "#;
         let syntax = SourceType::tsx();
         let tree = parse(src, 0, syntax);
@@ -770,7 +773,7 @@ const obj1 = conditionIsTruthy
         });
         assert_eq!(
             result.as_code(),
-            "type B8 = /*1*/ (C);\ntype B9 = (/*1*/ C);\ntype B10 = /*1*/ /*2*/ C;\n"
+            "type Example = {\n\t[A in B]: T;\n} & {\n\t[A in B]: T;\n};\n"
         );
     }
 

crates/rome_js_formatter/src/ts/lists/intersection_type_element_list.rs

@@ -1,6 +1,6 @@
 use crate::prelude::*;
-use crate::ts::lists::union_type_variant_list::FormatTypeVariant;
-use rome_js_syntax::TsIntersectionTypeElementList;
+use rome_formatter::{format_args, write};
+use rome_js_syntax::{TsIntersectionTypeElementList, TsType};
 use rome_rowan::AstSeparatedList;
 
 #[derive(Debug, Clone, Default)]
@@ -9,18 +9,61 @@ pub struct FormatTsIntersectionTypeElementList;
 impl FormatRule<TsIntersectionTypeElementList> for FormatTsIntersectionTypeElementList {
     type Context = JsFormatContext;
 
+    /// [Prettier applies]: https://github.com/prettier/prettier/blob/cd3e530c2e51fb8296c0fb7738a9afdd3a3a4410/src/language-js/print/type-annotation.js#L93-L120
     fn fmt(&self, node: &TsIntersectionTypeElementList, f: &mut JsFormatter) -> FormatResult<()> {
         let last_index = node.len().saturating_sub(1);
 
-        f.join()
-            .entries(
-                node.elements()
-                    .enumerate()
-                    .map(|(index, item)| FormatTypeVariant {
-                        last: index == last_index,
-                        element: item,
-                    }),
-            )
-            .finish()
+        let mut is_prev_object_type_like = false;
+        let mut is_chain_indented = false;
+
+        for (index, element) in node.elements().enumerate() {
+            let node = element.node()?;
+
+            let is_object_type_like =
+                matches!(node, TsType::TsMappedType(_) | TsType::TsObjectType(_));
+
+            // always inline first element
+            if index == 0 {
+                write!(f, [node.format()])?;
+            } else {
+                // If no object is involved, go to the next line if it breaks
+                if !is_prev_object_type_like && !is_object_type_like {
+                    write!(
+                        f,
+                        [indent(&format_args![
+                            soft_line_break_or_space(),
+                            node.format()
+                        ])]
+                    )?;
+                } else {
+                    write!(f, [space()])?;
+
+                    if !is_prev_object_type_like || !is_object_type_like {
+                        // indent if we move from object to non-object or vice versa, otherwise keep inline
+                        is_chain_indented = index > 1;
+                    }
+
+                    if is_chain_indented {
+                        write!(f, [indent(&node.format())])?;
+                    } else {
+                        write!(f, [node.format()])?;
+                    }
+                }
+            }
+
+            let trailing_separator = element.trailing_separator()?;
+
+            if let Some(token) = trailing_separator {
+                if index == last_index {
+                    write![f, [format_removed(token)]]?;
+                } else {
+                    write![f, [space(), token.format()]]?;
+                }
+            }
+
+            is_prev_object_type_like = is_object_type_like;
+        }
+
+        Ok(())
     }
 }

crates/rome_js_formatter/src/ts/types/intersection_type.rs

@@ -4,6 +4,7 @@ use crate::parentheses::{
     is_in_many_type_union_or_intersection_list, operator_type_or_higher_needs_parens,
     NeedsParentheses,
 };
+use crate::utils::FormatTypeMemberSeparator;
 use rome_formatter::{format_args, write};
 use rome_js_syntax::{
     JsSyntaxKind, JsSyntaxNode, TsIntersectionTypeElementList, TsIntersectionTypeFields,
@@ -20,17 +21,12 @@ impl FormatNodeRule<TsIntersectionType> for FormatTsIntersectionType {
             leading_separator_token,
             types,
         } = node.as_fields();
-
         write!(
             f,
-            [group(&indent(&format_args!(
-                soft_line_break(),
-                FormatTypeSetLeadingSeparator {
-                    separator: JsSyntaxKind::AMP,
-                    leading_separator: leading_separator_token.as_ref()
-                },
+            [group(&format_args!(
+                FormatTypeMemberSeparator::new(leading_separator_token.as_ref()),
                 types.format()
-            )))]
+            ))]
         )
     }
 

crates/rome_js_formatter/tests/specs/prettier/typescript/comments/issues.ts.snap

@@ -42,7 +42,7 @@ export type AsyncExecuteOptions = child_process$execFileOpts & {
 ```diff
 --- Prettier
 +++ Rome
-@@ -2,36 +2,38 @@
+@@ -2,32 +2,32 @@
  // squished in a single line afterward
  export type BuckWebSocketMessage =
    | {
@@ -93,18 +93,7 @@ export type AsyncExecuteOptions = child_process$execFileOpts & {
 +  };
 
  // Two extra levels of indentation because of the comment
--export type AsyncExecuteOptions = child_process$execFileOpts & {
--  // The contents to write to stdin.
--  stdin?: string;
--  dontLogInNuclide?: boolean;
--};
-+export type AsyncExecuteOptions =
-+  & child_process$execFileOpts
-+  & {
-+    // The contents to write to stdin.
-+    stdin?: string;
-+    dontLogInNuclide?: boolean;
-+  };
+ export type AsyncExecuteOptions = child_process$execFileOpts & {
 ```
 
 # Output
@@ -142,13 +131,11 @@ export type BuckWebSocketMessage =
   };
 
 // Two extra levels of indentation because of the comment
-export type AsyncExecuteOptions =
-  & child_process$execFileOpts
-  & {
-    // The contents to write to stdin.
-    stdin?: string;
-    dontLogInNuclide?: boolean;
-  };
+export type AsyncExecuteOptions = child_process$execFileOpts & {
+  // The contents to write to stdin.
+  stdin?: string;
+  dontLogInNuclide?: boolean;
+};
 ```
 
 

crates/rome_js_formatter/tests/specs/prettier/typescript/union/inlining.ts.snap

@@ -91,21 +91,6 @@ type T8 = number | (((((arg: any) => void))));
    | A
    // The upload timed out
    | B
-@@ -27,9 +34,11 @@
-   // Uploading to aws3 and CreatePostMutation succeeded
-   | D;
-
--type window = Window & {
--  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
--};
-+type window =
-+  & Window
-+  & {
-+    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
-+  };
-
- type T1 = (number | string)["toString"];
- type T2 = (number | string)["toString"];
 ```
 
 # Output
@@ -147,11 +132,9 @@ type UploadState2<E, EM, D>
   // Uploading to aws3 and CreatePostMutation succeeded
   | D;
 
-type window =
-  & Window
-  & {
-    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
-  };
+type window = Window & {
+  __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: Function;
+};
 
 type T1 = (number | string)["toString"];
 type T2 = (number | string)["toString"];