feature(formatter): JSX Spread Attribute

crates/rome_js_formatter/src/jsx/attribute/spread_attribute.rs

@@ -1,10 +1,21 @@
-use crate::{FormatElement, FormatNode, Formatter};
-use rome_formatter::FormatResult;
-use rome_js_syntax::JsxSpreadAttribute;
-use rome_rowan::AstNode;
+use crate::{Format, FormatElement, FormatNode, Formatter};
+use rome_formatter::{format_elements, FormatResult};
+use rome_js_syntax::{JsxSpreadAttribute, JsxSpreadAttributeFields};
 
 impl FormatNode for JsxSpreadAttribute {
     fn format_fields(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxSpreadAttributeFields {
+            l_curly_token,
+            dotdotdot_token,
+            argument,
+            r_curly_token,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            l_curly_token.format(formatter)?,
+            dotdotdot_token.format(formatter)?,
+            argument.format(formatter)?,
+            r_curly_token.format(formatter)?,
+        ])
     }
 }

crates/rome_js_formatter/tests/specs/jsx/attributes.jsx

@@ -41,3 +41,5 @@
 
 					let a = <test aVeryLongAttributeName={"WithAVeryLongValuethat exceeds the line width, what happens with ithis"} />;
 
+					let a = <test {...WithAVeryLongFunctionthat_exceeds_the_line_width_what_happens_with_ithis()} />;
+					<div {...["Chungking Express", "Fallen Angels", "In the Mood for Love", "Days of Living Wild", "Happy Together"]}/>

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

@@ -1,6 +1,8 @@
 ---
 source: crates/rome_js_formatter/tests/spec_test.rs
+assertion_line: 242
 expression: attributes.jsx
+
 ---
 # Input
 
@@ -46,6 +48,8 @@ expression: attributes.jsx
 
 					let a = <test aVeryLongAttributeName={"WithAVeryLongValuethat exceeds the line width, what happens with ithis"} />;
 
+					let a = <test {...WithAVeryLongFunctionthat_exceeds_the_line_width_what_happens_with_ithis()} />;
+					<div {...["Chungking Express", "Fallen Angels", "In the Mood for Love", "Days of Living Wild", "Happy Together"]}/>
 
 =============================
 # Outputs
@@ -95,6 +99,19 @@ let a = <test
 	}
 />;
 
+let a = <test
+	{...WithAVeryLongFunctionthat_exceeds_the_line_width_what_happens_with_ithis()}
+/>;
+<div
+	{...[
+		"Chungking Express",
+		"Fallen Angels",
+		"In the Mood for Love",
+		"Days of Living Wild",
+		"Happy Together",
+	]}
+/>;
+
 
 ## Lines exceeding width of 80 characters
 

crates/rome_js_formatter/tests/specs/prettier/js/ignore/ignore-2.js.snap

@@ -1,6 +1,6 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
-assertion_line: 153
+assertion_line: 175
 expression: ignore-2.js
 
 ---
@@ -44,11 +44,11 @@ function HelloWorld() {
   );
 }
 
-a = <div {.../* prettier-ignore */b} />;
-a = <div {...b/* prettier-ignore */} />;
-a = <div {.../* prettier-ignore */{}} />;
-a = <div {...{/* prettier-ignore */}} />;
-a = <div {...{}/* prettier-ignore */} />;
+a = <div {... /* prettier-ignore */ b} />;
+a = <div {...b /* prettier-ignore */ } />;
+a = <div {... /* prettier-ignore */ {}} />;
+a = <div {...{ /* prettier-ignore */ }} />;
+a = <div {...{} /* prettier-ignore */ } />;
 
 ```