From 290c67bdc1d13b800a140e5063aa2711db039e05 Mon Sep 17 00:00:00 2001
From: Jon <jonegeland@gmail.com>
Date: Mon, 4 Dec 2023 02:19:22 -0800
Subject: [PATCH] fix(js_formatter): allow JSX expressions to nestle on arrow
 chains (#1033)

---
 .../expressions/arrow_function_expression.rs  |  21 +-
 crates/biome_js_formatter/tests/quick_test.rs |   5 +-
 .../tests/specs/jsx/arrow_function.jsx        |  11 ++
 .../tests/specs/jsx/arrow_function.jsx.snap   |  20 ++
 .../specs/prettier/jsx/jsx/arrow.js.snap      | 183 ------------------
 5 files changed, 51 insertions(+), 189 deletions(-)
 delete mode 100644 crates/biome_js_formatter/tests/specs/prettier/jsx/jsx/arrow.js.snap

diff --git a/crates/biome_js_formatter/src/js/expressions/arrow_function_expression.rs b/crates/biome_js_formatter/src/js/expressions/arrow_function_expression.rs
index 099cbe955838..29c00c3331eb 100644
--- a/crates/biome_js_formatter/src/js/expressions/arrow_function_expression.rs
+++ b/crates/biome_js_formatter/src/js/expressions/arrow_function_expression.rs
@@ -524,6 +524,7 @@ impl Format<JsFormatContext> for ArrowChain {
                     AnyJsExpression::JsObjectExpression(_)
                         | AnyJsExpression::JsArrayExpression(_)
                         | AnyJsExpression::JsSequenceExpression(_)
+                        | AnyJsExpression::JsxTagExpression(_)
                 )
         );
 
@@ -672,13 +673,25 @@ impl Format<JsFormatContext> for ArrowChain {
         });
 
         let format_tail_body = format_with(|f| {
+            // if it's inside a JSXExpression (e.g. an attribute) we should align the expression's closing } with the line with the opening {.
+            let should_add_soft_line = matches!(
+                head_parent.kind(),
+                Some(
+                    JsSyntaxKind::JSX_EXPRESSION_CHILD
+                        | JsSyntaxKind::JSX_EXPRESSION_ATTRIBUTE_VALUE
+                )
+            );
+
             if body_on_separate_line {
                 write!(
                     f,
-                    [indent(&format_args![
-                        soft_line_break_or_space(),
-                        format_tail_body_inner
-                    ])]
+                    [
+                        indent(&format_args![
+                            soft_line_break_or_space(),
+                            format_tail_body_inner
+                        ]),
+                        should_add_soft_line.then_some(soft_line_break())
+                    ]
                 )
             } else {
                 write!(f, [space(), format_tail_body_inner])
diff --git a/crates/biome_js_formatter/tests/quick_test.rs b/crates/biome_js_formatter/tests/quick_test.rs
index ea8f6983cd8a..d43e457cf6db 100644
--- a/crates/biome_js_formatter/tests/quick_test.rs
+++ b/crates/biome_js_formatter/tests/quick_test.rs
@@ -9,12 +9,13 @@ mod language {
     include!("language.rs");
 }
 
-#[ignore]
+// #[ignore]
 #[test]
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-  export default foo as bar;
+    ((C) => (props) => <C {...props} />);
+    (({C}) => (props) => <C {...props} />);
     "#;
     let source_type = JsFileSource::tsx();
     let tree = parse(
diff --git a/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx b/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx
index 190d8b5667bf..09de9595f229 100644
--- a/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx
+++ b/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx
@@ -27,3 +27,14 @@ function ArrowBodyIsJsxWithComment({ action }) {
 			<li/>
 		);
 }
+
+
+
+function ArrowCurryWithPlainParameters() {
+	return (C) => (props) => <C {...props} />;
+}
+
+function ArrowCurryWithDestructuringParameters() {
+	return ({ C }) =>
+  (props) => <C {...props} />;
+}
diff --git a/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx.snap b/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx.snap
index 5e858e14f1fa..5c097f27e1d2 100644
--- a/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx.snap
+++ b/crates/biome_js_formatter/tests/specs/jsx/arrow_function.jsx.snap
@@ -36,6 +36,17 @@ function ArrowBodyIsJsxWithComment({ action }) {
 		);
 }
 
+
+
+function ArrowCurryWithPlainParameters() {
+	return (C) => (props) => <C {...props} />;
+}
+
+function ArrowCurryWithDestructuringParameters() {
+	return ({ C }) =>
+  (props) => <C {...props} />;
+}
+
 ```
 
 
@@ -92,6 +103,15 @@ function ArrowBodyIsJsxWithComment({ action }) {
 		<li />
 	);
 }
+
+function ArrowCurryWithPlainParameters() {
+	return (C) => (props) => <C {...props} />;
+}
+
+function ArrowCurryWithDestructuringParameters() {
+	return ({ C }) =>
+		(props) => <C {...props} />;
+}
 ```
 
 
diff --git a/crates/biome_js_formatter/tests/specs/prettier/jsx/jsx/arrow.js.snap b/crates/biome_js_formatter/tests/specs/prettier/jsx/jsx/arrow.js.snap
deleted file mode 100644
index 33dea9d27d67..000000000000
--- a/crates/biome_js_formatter/tests/specs/prettier/jsx/jsx/arrow.js.snap
+++ /dev/null
@@ -1,183 +0,0 @@
----
-source: crates/biome_formatter_test/src/snapshot_builder.rs
-info: jsx/jsx/arrow.js
----
-
-# Input
-
-```js
-() => <Component><Children/></Component>;
-() => () => <Component><Children/></Component>;
-() => () => () => <Component><Children/></Component>;
-
-() => <div>Some text here</div>;
-() => () => <div>Some text here</div>;
-() => () => () => <div>Some text here</div>;
-
-() => <div>Long long long long long, very very long text. And more text. Another text.</div>;
-() => () => <div>Long long long long long, very very long text. And more text. Another text.</div>;
-() => () => () => <div>Long long long long long, very very long text. And more text. Another text.</div>;
-
-<Prettier>
-  {We => 'The purple monkey danced with a tambourine made of cheese.' + 'The robot chef cooked a cake that tasted like rainbows.' + 'The talking pineapple sang a lullaby to the sleepy giraffe.'}
-</Prettier>;
-<Prettier>
-  {We => love => 'The purple monkey danced with a tambourine made of cheese.' + 'The robot chef cooked a cake that tasted like rainbows.' + 'The talking pineapple sang a lullaby to the sleepy giraffe.'}
-</Prettier>;
-<Prettier>
-  {We => love => currying => 'The purple monkey danced with a tambourine made of cheese.' + 'The robot chef cooked a cake that tasted like rainbows.' + 'The talking pineapple sang a lullaby to the sleepy giraffe.'}
-</Prettier>;
-
-```
-
-
-# Prettier differences
-
-```diff
---- Prettier
-+++ Biome
-@@ -3,16 +3,18 @@
-     <Children />
-   </Component>
- );
--() => () => (
--  <Component>
--    <Children />
--  </Component>
--);
--() => () => () => (
--  <Component>
--    <Children />
--  </Component>
--);
-+() => () =>
-+  (
-+    <Component>
-+      <Children />
-+    </Component>
-+  );
-+() => () => () =>
-+  (
-+    <Component>
-+      <Children />
-+    </Component>
-+  );
- 
- () => <div>Some text here</div>;
- () => () => <div>Some text here</div>;
-@@ -23,16 +25,20 @@
-     Long long long long long, very very long text. And more text. Another text.
-   </div>
- );
--() => () => (
--  <div>
--    Long long long long long, very very long text. And more text. Another text.
--  </div>
--);
--() => () => () => (
--  <div>
--    Long long long long long, very very long text. And more text. Another text.
--  </div>
--);
-+() => () =>
-+  (
-+    <div>
-+      Long long long long long, very very long text. And more text. Another
-+      text.
-+    </div>
-+  );
-+() => () => () =>
-+  (
-+    <div>
-+      Long long long long long, very very long text. And more text. Another
-+      text.
-+    </div>
-+  );
- 
- <Prettier>
-   {(We) =>
-@@ -45,13 +51,11 @@
-   {(We) => (love) =>
-     "The purple monkey danced with a tambourine made of cheese." +
-     "The robot chef cooked a cake that tasted like rainbows." +
--    "The talking pineapple sang a lullaby to the sleepy giraffe."
--  }
-+    "The talking pineapple sang a lullaby to the sleepy giraffe."}
- </Prettier>;
- <Prettier>
-   {(We) => (love) => (currying) =>
-     "The purple monkey danced with a tambourine made of cheese." +
-     "The robot chef cooked a cake that tasted like rainbows." +
--    "The talking pineapple sang a lullaby to the sleepy giraffe."
--  }
-+    "The talking pineapple sang a lullaby to the sleepy giraffe."}
- </Prettier>;
-```
-
-# Output
-
-```js
-() => (
-  <Component>
-    <Children />
-  </Component>
-);
-() => () =>
-  (
-    <Component>
-      <Children />
-    </Component>
-  );
-() => () => () =>
-  (
-    <Component>
-      <Children />
-    </Component>
-  );
-
-() => <div>Some text here</div>;
-() => () => <div>Some text here</div>;
-() => () => () => <div>Some text here</div>;
-
-() => (
-  <div>
-    Long long long long long, very very long text. And more text. Another text.
-  </div>
-);
-() => () =>
-  (
-    <div>
-      Long long long long long, very very long text. And more text. Another
-      text.
-    </div>
-  );
-() => () => () =>
-  (
-    <div>
-      Long long long long long, very very long text. And more text. Another
-      text.
-    </div>
-  );
-
-<Prettier>
-  {(We) =>
-    "The purple monkey danced with a tambourine made of cheese." +
-    "The robot chef cooked a cake that tasted like rainbows." +
-    "The talking pineapple sang a lullaby to the sleepy giraffe."
-  }
-</Prettier>;
-<Prettier>
-  {(We) => (love) =>
-    "The purple monkey danced with a tambourine made of cheese." +
-    "The robot chef cooked a cake that tasted like rainbows." +
-    "The talking pineapple sang a lullaby to the sleepy giraffe."}
-</Prettier>;
-<Prettier>
-  {(We) => (love) => (currying) =>
-    "The purple monkey danced with a tambourine made of cheese." +
-    "The robot chef cooked a cake that tasted like rainbows." +
-    "The talking pineapple sang a lullaby to the sleepy giraffe."}
-</Prettier>;
-```
-
-