feature(formatter): JSX Spread Attribute (#2454)

* feature: Starting spread attribute

* Added more tests, updated playground styles

* Forgot to update snapshot

* Reverted back playground styles

* fix: Removed parentheses test

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

website/playground/src/IndentStyleSelect.tsx

@@ -1,10 +1,10 @@
 import { IndentStyle } from "./types";
 
 interface Props {
-	setIndentStyle: (indentStyle: IndentStyle) => void,
-	indentStyle: IndentStyle,
-	indentWidth: number,
-	setIndentWidth: (indentWidth: number) => void,
+	setIndentStyle: (indentStyle: IndentStyle) => void;
+	indentStyle: IndentStyle;
+	indentWidth: number;
+	setIndentWidth: (indentWidth: number) => void;
 }
 
 export default function IndentStyleSelect(

website/playground/src/LineWidthInput.tsx

@@ -1,4 +1,4 @@
-interface Props { lineWidth: number, setLineWidth: (lineWidth: number) => void }
+interface Props { lineWidth: number; setLineWidth: (lineWidth: number) => void }
 
 export default function LineWidthInput({ lineWidth, setLineWidth }: Props) {
 	return (

website/playground/src/QuoteStyleSelect.tsx

@@ -1,8 +1,8 @@
 import { QuoteStyle } from "./types";
 
 interface Props {
-	setQuoteStyle: (v: QuoteStyle) => void,
-	quoteStyle: QuoteStyle,
+	setQuoteStyle: (v: QuoteStyle) => void;
+	quoteStyle: QuoteStyle;
 }
 
 export default function QuoteStyleSelect({ setQuoteStyle, quoteStyle }: Props) {

website/playground/src/SourceTypeSelect.tsx

@@ -1,12 +1,12 @@
 import { SourceType } from "./types";
 
 interface Props {
-	setIsTypeScript: (b: boolean) => void,
-	isTypeScript: boolean,
-	setIsJsx: (b: boolean) => void,
-	isJsx: boolean,
-	setSourceType: (v: SourceType) => void,
-	sourceType: SourceType,
+	setIsTypeScript: (b: boolean) => void;
+	isTypeScript: boolean;
+	setIsJsx: (b: boolean) => void;
+	isJsx: boolean;
+	setSourceType: (v: SourceType) => void;
+	sourceType: SourceType;
 }
 
 export default function SourceTypeSelect(

website/playground/src/types.ts

@@ -5,28 +5,28 @@ export enum SourceType { Module = "module", Script = "script" }
 export enum QuoteStyle { Double = "double", Single = "single" }
 
 export interface PlaygroundState {
-	code: string,
-	setCode: (code: string) => void,
-	lineWidth: number,
-	setLineWidth: (lineWidth: number) => void,
-	indentStyle: IndentStyle,
-	setIndentStyle: (indentStyle: IndentStyle) => void,
-	indentWidth: number,
-	setIndentWidth: (indentWidth: number) => void,
-	quoteStyle: QuoteStyle,
-	setQuoteStyle: (quoteStyle: QuoteStyle) => void,
-	sourceType: SourceType,
-	setSourceType: (sourceType: SourceType) => void,
-	isTypeScript: boolean,
-	setIsTypeScript: (isTypeScript: boolean) => void,
-	isJsx: boolean,
-	setIsJsx: (isJsx: boolean) => void,
+	code: string;
+	setCode: (code: string) => void;
+	lineWidth: number;
+	setLineWidth: (lineWidth: number) => void;
+	indentStyle: IndentStyle;
+	setIndentStyle: (indentStyle: IndentStyle) => void;
+	indentWidth: number;
+	setIndentWidth: (indentWidth: number) => void;
+	quoteStyle: QuoteStyle;
+	setQuoteStyle: (quoteStyle: QuoteStyle) => void;
+	sourceType: SourceType;
+	setSourceType: (sourceType: SourceType) => void;
+	isTypeScript: boolean;
+	setIsTypeScript: (isTypeScript: boolean) => void;
+	isJsx: boolean;
+	setIsJsx: (isJsx: boolean) => void;
 }
 
 export interface PlaygroundProps {
-	playgroundState: PlaygroundState,
-	prettierOutput: string,
-	romeOutput: RomeOutput,
+	playgroundState: PlaygroundState;
+	prettierOutput: string;
+	romeOutput: RomeOutput;
 }
 
 export type PlaygroundSettings = Pick<

website/playground/src/utils.ts

@@ -5,7 +5,7 @@ import prettier from "prettier";
 import parserBabel from "prettier/esm/parser-babel";
 import { IndentStyle, PlaygroundState, QuoteStyle, SourceType } from "./types";
 
-interface Size { width: number | undefined, height: number | undefined }
+interface Size { width: number | undefined; height: number | undefined }
 
 // Hook
 export function useWindowSize(): Size {
@@ -104,11 +104,11 @@ export function usePlaygroundState(): PlaygroundState {
 export function formatWithPrettier(
 	code: string,
 	options: {
-		lineWidth: number,
-		indentStyle: IndentStyle,
-		indentWidth: number,
-		language: "js" | "ts",
-		quoteStyle: QuoteStyle,
+		lineWidth: number;
+		indentStyle: IndentStyle;
+		indentWidth: number;
+		language: "js" | "ts";
+		quoteStyle: QuoteStyle;
 	},
 ) {
 	try {