fix(rome_js_formatter): Single-line comment below a JSX prop triggers…

… different formatting #3598
rome · Nov 10, 2022 · 5a1618a · 5a1618a
1 parent 3b88794
commit 5a1618a
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 12 deletions.
diff --git a/crates/rome_js_formatter/src/jsx/tag/closing_element.rs b/crates/rome_js_formatter/src/jsx/tag/closing_element.rs
@@ -25,7 +25,6 @@ impl FormatNodeRule<JsxClosingElement> for FormatJsxClosingElement {
                 l_angle_token.format(),
                 slash_token.format(),
                 name.format(),
-                line_suffix_boundary(),
                 r_angle_token.format(),
             ]
         ]

diff --git a/crates/rome_js_formatter/src/jsx/tag/opening_element.rs b/crates/rome_js_formatter/src/jsx/tag/opening_element.rs
@@ -45,7 +45,6 @@ impl Format<JsFormatContext> for JsxAnyOpeningElement {
                         l_angle_token.format(),
                         name.format(),
                         type_arguments.format(),
-                        line_suffix_boundary(),
                         space(),
                         format_close
                     ]
@@ -63,10 +62,8 @@ impl Format<JsFormatContext> for JsxAnyOpeningElement {
                         l_angle_token.format(),
                         name.format(),
                         type_arguments.format(),
-                        line_suffix_boundary(),
                         space(),
                         attributes.format(),
-                        (!attributes.is_empty()).then_some(line_suffix_boundary()),
                         attribute_spacing,
                         format_close
                     ]
@@ -80,9 +77,7 @@ impl Format<JsFormatContext> for JsxAnyOpeningElement {
                             l_angle_token.format(),
                             name.format(),
                             type_arguments.format(),
-                            line_suffix_boundary(),
                             soft_line_indent_or_space(&attributes.format()),
-                            (!attributes.is_empty()).then_some(line_suffix_boundary()),
                         ]
                     )?;
 

diff --git a/crates/rome_js_formatter/src/lib.rs b/crates/rome_js_formatter/src/lib.rs
@@ -787,12 +787,9 @@ function() {
     // use this test check if your snippet prints as you wish, without using a snapshot
     fn quick_test() {
         let src = r#"
-const a = [
-	longlonglonglongItem1longlonglonglongItem1,
-	longlonglonglongItem1longlonglonglongItem2,
-	longlonglonglongItem1longlonglonglongItem3,
-];
-
+    <Test
+      // comment
+    />
 "#;
         let syntax = SourceType::tsx();
         let tree = parse(src, FileId::zero(), syntax);

diff --git a/crates/rome_js_formatter/tests/specs/jsx/element.jsx b/crates/rome_js_formatter/tests/specs/jsx/element.jsx
@@ -266,3 +266,26 @@ const breadcrumbItems = [
 		</Breadcrumb.Item>
 	),
 ].concat(extraBreadcrumbItems);
+
+function Component() {
+	return (
+		<Test
+			prop={value}
+			// comment
+		/>
+	);
+}
+
+let a = (
+	</*comment3*/Test
+		// comment before attribute
+		/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
+		// comment after attribute
+	>
+		<Test
+			// comment before attribute
+			/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
+			// comment after attribute
+		/>
+	</Test>
+);
diff --git a/crates/rome_js_formatter/tests/specs/jsx/element.jsx.snap b/crates/rome_js_formatter/tests/specs/jsx/element.jsx.snap
@@ -275,6 +275,29 @@ const breadcrumbItems = [
 	),
 ].concat(extraBreadcrumbItems);
 
+function Component() {
+	return (
+		<Test
+			prop={value}
+			// comment
+		/>
+	);
+}
+
+let a = (
+	</*comment3*/Test
+		// comment before attribute
+		/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
+		// comment after attribute
+	>
+		<Test
+			// comment before attribute
+			/*comment1*/prop/*comment2*/=/*comment3*/{/*comment4*/value /*comment5*/}/*comment6*/
+			// comment after attribute
+		/>
+	</Test>
+);
+
 ```
 
 
@@ -626,6 +649,33 @@ const breadcrumbItems = [
 	</Breadcrumb.Item>,
 ].concat(extraBreadcrumbItems);
 
+function Component() {
+	return (
+		<Test
+			prop={value}
+			// comment
+		/>
+	);
+}
+
+let a = (
+	</*comment3*/ Test
+		// comment before attribute
+		/*comment1*/ prop /*comment2*/=/*comment3*/ {
+			/*comment4*/ value /*comment5*/
+		} /*comment6*/
+		// comment after attribute
+	>
+		<Test
+			// comment before attribute
+			/*comment1*/ prop /*comment2*/=/*comment3*/ {
+				/*comment4*/ value /*comment5*/
+			} /*comment6*/
+			// comment after attribute
+		/>
+	</Test>
+);
+
 
 ## Lines exceeding width of 80 characters