feature: Added formatting for self-closing JSX element

crates/rome_js_formatter/src/jsx/auxiliary/name.rs

@@ -1,9 +1,9 @@
+use crate::formatter_traits::FormatTokenAndNode;
 use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
 use rome_js_syntax::JsxName;
-use rome_rowan::AstNode;
 
 impl ToFormatElement for JsxName {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        self.value_token().format(formatter)
     }
 }

crates/rome_js_formatter/src/jsx/auxiliary/namespace_name.rs

@@ -1,9 +1,20 @@
+use crate::formatter_traits::FormatTokenAndNode;
 use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::JsxNamespaceName;
-use rome_rowan::AstNode;
+use rome_formatter::format_elements;
+use rome_js_syntax::{JsxNamespaceName, JsxNamespaceNameFields};
 
 impl ToFormatElement for JsxNamespaceName {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxNamespaceNameFields {
+            namespace,
+            colon_token,
+            name,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            namespace.format(formatter)?,
+            colon_token.format(formatter)?,
+            name.format(formatter)?
+        ])
     }
 }

crates/rome_js_formatter/src/jsx/auxiliary/reference_identifier.rs

@@ -1,9 +1,9 @@
+use crate::formatter_traits::FormatTokenAndNode;
 use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
 use rome_js_syntax::JsxReferenceIdentifier;
-use rome_rowan::AstNode;
 
 impl ToFormatElement for JsxReferenceIdentifier {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        self.value_token().format(formatter)
     }
 }

crates/rome_js_formatter/src/jsx/expressions/tag_expression.rs

@@ -1,9 +1,9 @@
+use crate::formatter_traits::FormatTokenAndNode;
 use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
 use rome_js_syntax::JsxTagExpression;
-use rome_rowan::AstNode;
 
 impl ToFormatElement for JsxTagExpression {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        self.tag().format(formatter)
     }
 }

crates/rome_js_formatter/src/jsx/objects/member_name.rs

@@ -1,9 +1,20 @@
+use crate::formatter_traits::FormatTokenAndNode;
 use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::JsxMemberName;
-use rome_rowan::AstNode;
+use rome_formatter::format_elements;
+use rome_js_syntax::{JsxMemberName, JsxMemberNameFields};
 
 impl ToFormatElement for JsxMemberName {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxMemberNameFields {
+            object,
+            dot_token,
+            member,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            object.format(formatter)?,
+            dot_token.format(formatter)?,
+            member.format(formatter)?,
+        ])
     }
 }

crates/rome_js_formatter/src/jsx/tag/self_closing_element.rs

@@ -1,9 +1,30 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
+use crate::formatter_traits::{FormatOptionalTokenAndNode, FormatTokenAndNode};
+use crate::group_elements;
+use crate::{
+    format_elements, soft_block_indent, soft_line_break_or_space, space_token, FormatElement,
+    FormatResult, Formatter, ToFormatElement,
+};
+use rome_formatter::join_elements;
 use rome_js_syntax::JsxSelfClosingElement;
-use rome_rowan::AstNode;
 
 impl ToFormatElement for JsxSelfClosingElement {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let attributes = join_elements(
+            soft_line_break_or_space(),
+            formatter.format_nodes(self.attributes())?,
+        );
+
+        let type_arguments = self.type_arguments().format_or_empty(formatter)?;
+
+        Ok(format_elements![
+            self.l_angle_token().format(formatter)?,
+            self.name().format(formatter)?,
+            type_arguments,
+            space_token(),
+            group_elements(soft_block_indent(attributes)),
+            space_token(),
+            self.slash_token().format(formatter)?,
+            self.r_angle_token().format(formatter)?
+        ])
     }
 }

crates/rome_js_formatter/tests/specs/jsx/self_closing.jsx

@@ -0,0 +1,15 @@
+<Foo />;
+
+<Foo           />;
+
+<LineWidthInput />;
+<IndentStyleSelect
+
+/>;
+<SourceTypeSelect
+
+/>;
+
+<CodeEditor
+
+/>

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

@@ -0,0 +1,41 @@
+---
+source: crates/rome_js_formatter/tests/spec_test.rs
+assertion_line: 223
+expression: self_closing.jsx
+
+---
+# Input
+<Foo />;
+
+<Foo           />;
+
+<LineWidthInput />;
+<IndentStyleSelect
+
+/>;
+<SourceTypeSelect
+
+/>;
+
+<CodeEditor
+
+/>
+
+=============================
+# Outputs
+## Output 1
+-----
+Indent style: Tab
+Line width: 80
+Quote style: Double Quotes
+-----
+<Foo />;
+
+<Foo />;
+
+<LineWidthInput />;
+<IndentStyleSelect />;
+<SourceTypeSelect />;
+
+<CodeEditor />;
+

crates/rome_js_formatter/tests/specs/prettier/js/big-int/literal.js.snap

@@ -1,6 +1,6 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
-assertion_line: 57
+assertion_line: 153
 expression: literal.js
 
 ---

crates/rome_js_formatter/tests/specs/prettier/js/binary-expressions/inline-jsx.js.snap

@@ -1,6 +1,6 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
-assertion_line: 151
+assertion_line: 153
 expression: inline-jsx.js
 
 ---
@@ -26,7 +26,10 @@ const user2 = renderedUser || (
 
 const avatar = hasAvatar && <Gravatar user={author} size={size} />;
 
-const avatar2 = (hasAvatar || showPlaceholder) && <Gravatar user={author} size={size} />;
+const avatar2 = (hasAvatar || showPlaceholder) && <Gravatar
+  user={author}
+  size={size}
+/>;
 
 ```
 

crates/rome_js_formatter/tests/specs/prettier/js/comments/issues.js.snap

@@ -1,6 +1,8 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+assertion_line: 153
 expression: issues.js
+
 ---
 # Input
 ```js
@@ -131,7 +133,7 @@ Observable
 
 // Comments in JSX tag are placed in a non optimal way
 <div
-  // comment
+// comment
 />;
 
 // Comments disappear in empty blocks

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: 151
+assertion_line: 153
 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 */} />;
 
 ```
 

crates/rome_js_formatter/tests/specs/prettier/js/last-argument-expansion/break-parent.js.snap

@@ -1,6 +1,6 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
-assertion_line: 149
+assertion_line: 153
 expression: break-parent.js
 
 ---
@@ -50,14 +50,14 @@ true
 });
 
 true ? test({ a: 1 }) : <div
-      a={123412342314}
-      b={123412341234}
-      c={123412341234}
-      d={123412341234}
-      e={123412341234}
-      f={123412341234}
-      g={123412341234}
-    />;
+  a={123412342314}
+  b={123412341234}
+  c={123412341234}
+  d={123412341234}
+  e={123412341234}
+  f={123412341234}
+  g={123412341234}
+/>;
 
 ```
 

crates/rome_js_formatter/tests/specs/prettier/js/strings/template-literals.js.snap

@@ -1,6 +1,6 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
-assertion_line: 149
+assertion_line: 153
 expression: template-literals.js
 
 ---
@@ -167,19 +167,19 @@ f(`${{ a: 4, b: 9 }}`);
 const makeBody = (store, assets, html) =>
   `<!doctype html>${ReactDOMServer.renderToStaticMarkup(
     <Html
-        headScripts={compact([ assets.javascript.head ])}
-        headStyles={compact([ assets.styles.body, assets.styles.head ])}
-        bodyScripts={compact([ assets.javascript.body ])}
-        bodyStyles={[]}
-        stringScripts={[
+      headScripts={compact([ assets.javascript.head ])}
+      headStyles={compact([ assets.styles.body, assets.styles.head ])}
+      bodyScripts={compact([ assets.javascript.body ])}
+      bodyStyles={[]}
+      stringScripts={[
           `window.__INITIAL_STATE__ = ${
             JSON.stringify(store.getState(), null, 2)
           };`,
         ]}
-        content={[
+      content={[
           { id: 'app-container', dangerouslySetInnerHTML: { __html: html } },
         ]}
-      />,
+    />,
   )}`;
 
 // https://github.com/prettier/prettier/issues/1626#issue-229655106