From 5a1618a1b8258f5d27f27aa3d03f2ea21163595c Mon Sep 17 00:00:00 2001
From: Denis Bezrukov <6227442+denbezrukov@users.noreply.github.com>
Date: Thu, 10 Nov 2022 11:34:42 +0200
Subject: [PATCH] fix(rome_js_formatter): Single-line comment below a JSX prop
 triggers different formatting #3598

---
 .../src/jsx/tag/closing_element.rs            |  1 -
 .../src/jsx/tag/opening_element.rs            |  5 --
 crates/rome_js_formatter/src/lib.rs           |  9 ++--
 .../tests/specs/jsx/element.jsx               | 23 +++++++++
 .../tests/specs/jsx/element.jsx.snap          | 50 +++++++++++++++++++
 5 files changed, 76 insertions(+), 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
index 47c00e0d1f56..d35f568ed7f5 100644
--- 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
index 5a26ddda13be..384c580b7aed 100644
--- 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
index 135fd8dfaedf..b13799bd5f0d 100644
--- 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
index 67406ac84d0f..f6dd44ffb384 100644
--- 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
index 97688255b4fb..6ea61ce0f35d 100644
--- 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