fix(rome_js_formatter): jsx whitespace is meaningful jsx text (#3732)

fix #3531

crates/rome_js_formatter/src/jsx/lists/child_list.rs

@@ -43,6 +43,7 @@ impl FormatRule<JsxChildList> for FormatJsxChildList {
     }
 }
 
+#[derive(Debug)]
 pub(crate) enum FormatChildrenResult {
     ForceMultiline(FormatMultilineChildren),
     BestFitting {
@@ -339,11 +340,13 @@ impl FormatJsxChildList {
 
             match child {
                 JsxElement(_) | JsxFragment(_) | JsxSelfClosingElement(_) => meta.any_tag = true,
-                JsxExpressionChild(expression)
-                    if !is_whitespace_jsx_expression(&expression, comments) =>
-                {
-                    meta.multiple_expressions = has_expression;
-                    has_expression = true;
+                JsxExpressionChild(expression) => {
+                    if is_whitespace_jsx_expression(&expression, comments) {
+                        meta.meaningful_text = true;
+                    } else {
+                        meta.multiple_expressions = has_expression;
+                        has_expression = true;
+                    }
                 }
                 JsxText(text) => {
                     meta.meaningful_text = meta.meaningful_text
@@ -565,6 +568,7 @@ impl MultilineBuilder {
     }
 }
 
+#[derive(Debug)]
 pub(crate) struct FormatMultilineChildren {
     layout: MultilineLayout,
     elements: RefCell<Vec<FormatElement>>,
@@ -640,6 +644,7 @@ impl FlatBuilder {
     }
 }
 
+#[derive(Debug)]
 pub(crate) struct FormatFlatChildren {
     elements: RefCell<Vec<FormatElement>>,
 }

crates/rome_js_formatter/src/lib.rs

@@ -787,11 +787,16 @@ function() {
     // use this test check if your snippet prints as you wish, without using a snapshot
     fn quick_test() {
         let src = r#"
-describe.each`a    | b    | expected
-${11111111111} | ${a().b(x => x).c().d()} | ${2}
-${1} | ${2} | ${3}
-${2} | ${1} | ${3}`
-
+// different output than prettier
+function Component4() {
+
+  return (
+    <div>
+      {fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{' '}
+      <div/>
+    </div>
+  );
+}
 
 "#;
         let syntax = SourceType::tsx();

crates/rome_js_formatter/tests/specs/jsx/element.jsx

@@ -299,3 +299,32 @@ let a = (
 		/>
 	</Test>
 );
+
+function Component() {
+	return (
+		<div>
+			{fn(data)}{' '}
+			<Component />
+		</div>
+	);
+}
+
+// jsx whitespace {' '} adds meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{' '}
+			<Component />
+		</div>
+	);
+}
+
+// not jsx whitespace doesn't add meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{'  '}
+			<Component />
+		</div>
+	);
+}

crates/rome_js_formatter/tests/specs/jsx/element.jsx.snap

@@ -308,6 +308,35 @@ let a = (
 	</Test>
 );
 
+function Component() {
+	return (
+		<div>
+			{fn(data)}{' '}
+			<Component />
+		</div>
+	);
+}
+
+// jsx whitespace {' '} adds meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{' '}
+			<Component />
+		</div>
+	);
+}
+
+// not jsx whitespace doesn't add meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{'  '}
+			<Component />
+		</div>
+	);
+}
+
 ```
 
 
@@ -695,6 +724,35 @@ let a = (
 	</Test>
 );
 
+function Component() {
+	return (
+		<div>
+			{fn(data)} <Component />
+		</div>
+	);
+}
+
+// jsx whitespace {' '} adds meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}{" "}
+			<Component />
+		</div>
+	);
+}
+
+// not jsx whitespace doesn't add meaningful jsx text
+function Component() {
+	return (
+		<div>
+			{fn(datadatadatadatadatadatadatadatadatadatadatadatadatadatadatadata)}
+			{"  "}
+			<Component />
+		</div>
+	);
+}
+
 
 ## Lines exceeding width of 80 characters