feat(rome_formatter): tag_expression (rome#2262)

the simplest tag_expression (that is not self closing) to format is the smallest possible tree that
needs no formatting. for example `<a></a>`.

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

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

crates/rome_formatter/src/jsx/auxiliary/text.rs

@@ -1,4 +1,4 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
+use crate::{FormatElement, FormatResult, Formatter, ToFormatElement, token};
 use rome_js_syntax::{AstNode, JsxText};
 impl ToFormatElement for JsxText {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {

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

@@ -1,7 +1,8 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::{AstNode, JsxTagExpression};
+use crate::{format_elements, token, FormatElement, FormatResult, Formatter, ToFormatElement};
+use rome_js_syntax::{AstNode, JsxTagExpression, JsxTagExpressionFields};
 impl ToFormatElement for JsxTagExpression {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxTagExpressionFields { tag } = self.as_fields();
+        Ok(tag?.to_format_element(formatter)?)
     }
 }

crates/rome_formatter/src/jsx/tag/closing_element.rs

@@ -1,7 +1,22 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::{AstNode, JsxClosingElement};
+use crate::{
+    format_elements, formatter_traits::FormatTokenAndNode, FormatElement, FormatResult, Formatter,
+    ToFormatElement,
+};
+use rome_js_syntax::{AstNode, JsxClosingElement, JsxClosingElementFields};
 impl ToFormatElement for JsxClosingElement {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxClosingElementFields {
+            l_angle_token,
+            slash_token,
+            name,
+            r_angle_token,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            l_angle_token.format(formatter)?,
+            slash_token.format(formatter)?,
+            name?.to_format_element(formatter)?,
+            r_angle_token.format(formatter)?
+        ])
     }
 }

crates/rome_formatter/src/jsx/tag/element.rs

@@ -1,7 +1,17 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::{AstNode, JsxElement};
+use crate::{format_elements, token, FormatElement, FormatResult, Formatter, ToFormatElement};
+use rome_js_syntax::{AstNode, JsxElement, JsxElementFields};
 impl ToFormatElement for JsxElement {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxElementFields {
+            opening_element,
+            children,
+            closing_element,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            opening_element?.to_format_element(formatter)?,
+            formatter.format_list(children),
+            closing_element?.to_format_element(formatter)?
+        ])
     }
 }

crates/rome_formatter/src/jsx/tag/opening_element.rs

@@ -1,7 +1,22 @@
-use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
-use rome_js_syntax::{AstNode, JsxOpeningElement};
+use crate::{
+    format_elements, formatter_traits::FormatTokenAndNode, FormatElement, FormatResult, Formatter,
+    ToFormatElement,
+};
+use rome_js_syntax::{AstNode, JsxOpeningElement, JsxOpeningElementFields};
 impl ToFormatElement for JsxOpeningElement {
     fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
-        Ok(formatter.format_verbatim(self.syntax()))
+        let JsxOpeningElementFields {
+            l_angle_token,
+            name,
+            attributes,
+            r_angle_token,
+        } = self.as_fields();
+
+        Ok(format_elements![
+            l_angle_token.format(formatter)?,
+            name?.to_format_element(formatter)?,
+            formatter.format_list(attributes),
+            r_angle_token.format(formatter)?
+        ])
     }
 }

crates/rome_formatter/src/lib.rs

@@ -596,9 +596,11 @@ mod test {
     // use this test check if your snippet prints as you wish, without using a snapshot
     fn quick_test() {
         let src = r#"
-3 + 3 === 7
+<Foo>
+    {abc}
+    </Foo>
 "#;
-        let syntax = SourceType::ts();
+        let syntax = SourceType::jsx();
         let tree = parse(src, 0, syntax.clone());
         let result = format(FormatOptions::default(), &tree.syntax()).unwrap();
         check_reformat(CheckReformatParams {

crates/rome_formatter/tests/specs/jsx/expressions/tag_expression.jsx

@@ -0,0 +1 @@
+<a></a>

crates/rome_formatter/tests/specs/jsx/expressions/tag_expression.jsx.snap.new

@@ -0,0 +1,17 @@
+---
+source: crates/rome_formatter/tests/spec_test.rs
+assertion_line: 197
+expression: tag_expression.jsx
+
+---
+# Input
+<a></a>
+=============================
+# Outputs
+## Output 1
+-----
+Indent style: Tab
+Line width: 80
+-----
+<a></a>;
+