fix(rome_js_formatter): jsx whitespace is meaningful jsx text
fix
MODIFY
crates/rome_js_formatter/src/jsx/lists/child_list.rs
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,12 +340,14 @@ impl FormatJsxChildList {
match child {
JsxElement(_) | JsxFragment(_) | JsxSelfClosingElement(_) => meta.any_tag = true,
- JsxExpressionChild(expression)
- if !is_whitespace_jsx_expression(&expression, comments) =>
- {
+ 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
|| 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>>,
}

MODIFY
crates/rome_js_formatter/src/lib.rs
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();

MODIFY
crates/rome_js_formatter/tests/specs/jsx/element.jsx
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>
+ );
+}

MODIFY
crates/rome_js_formatter/tests/specs/jsx/element.jsx.snap
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

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

fix https://github.com/rome/tools/issues/3531