fix(js_formatter): allow JSX expressions to nestle on arrow chains (#…

…1033)

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])

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(

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} />;
+}

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} />;
+}
 ```