Feature/jsx children (rome#2229)

* elements as children * expressions as children
F3n67u · Mar 18, 2022 · 79efcca · 79efcca
1 parent 0c58031
commit 79efcca
Show file tree

Hide file tree

Showing 63 changed files with 4,442 additions and 856 deletions.
diff --git a/crates/rome_formatter/src/jsx/any/child.rs b/crates/rome_formatter/src/jsx/any/child.rs
@@ -0,0 +1,14 @@
+//! Generated file, do not edit by hand, see `xtask/codegen`
+
+use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
+use rome_js_syntax::JsxAnyChild;
+impl ToFormatElement for JsxAnyChild {
+    fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
+        match self {
+            Self::JsxElement(node) => node.to_format_element(formatter),
+            Self::JsxSelfClosingElement(node) => node.to_format_element(formatter),
+            Self::JsxText(node) => node.to_format_element(formatter),
+            Self::JsxExpressionChild(node) => node.to_format_element(formatter),
+        }
+    }
+}
diff --git a/crates/rome_formatter/src/jsx/any/mod.rs b/crates/rome_formatter/src/jsx/any/mod.rs
@@ -3,6 +3,7 @@
 mod attribute;
 mod attribute_name;
 mod attribute_value;
+mod child;
 mod element_name;
 mod name;
 mod object_name;

diff --git a/crates/rome_formatter/src/jsx/auxiliary/expression_child.rs b/crates/rome_formatter/src/jsx/auxiliary/expression_child.rs
@@ -0,0 +1,7 @@
+use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
+use rome_js_syntax::{AstNode, JsxExpressionChild};
+impl ToFormatElement for JsxExpressionChild {
+    fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
+        Ok(formatter.format_verbatim(self.syntax()))
+    }
+}
diff --git a/crates/rome_formatter/src/jsx/auxiliary/mod.rs b/crates/rome_formatter/src/jsx/auxiliary/mod.rs
@@ -1,5 +1,6 @@
 //! Generated file, do not edit by hand, see `xtask/codegen`
 
+mod expression_child;
 mod name;
 mod namespace_name;
 mod reference_identifier;

diff --git a/crates/rome_formatter/src/jsx/lists/child_list.rs b/crates/rome_formatter/src/jsx/lists/child_list.rs
@@ -0,0 +1,7 @@
+use crate::{FormatElement, FormatResult, Formatter, ToFormatElement};
+use rome_js_syntax::JsxChildList;
+impl ToFormatElement for JsxChildList {
+    fn to_format_element(&self, formatter: &Formatter) -> FormatResult<FormatElement> {
+        Ok(formatter.format_list(self.clone()))
+    }
+}
diff --git a/crates/rome_formatter/src/jsx/lists/mod.rs b/crates/rome_formatter/src/jsx/lists/mod.rs
@@ -1,3 +1,4 @@
 //! Generated file, do not edit by hand, see `xtask/codegen`
 
 mod attribute_list;
+mod child_list;
diff --git a/crates/rome_formatter/tests/specs/prettier/js/comments/issue-3532.js.snap b/crates/rome_formatter/tests/specs/prettier/js/comments/issue-3532.js.snap
@@ -68,109 +68,43 @@ const AspectRatioBox = styled.div`
   }
 
   &::after {
-    /* To clear float *//*
+    /* To clear float */ /*
     content: '';
     display: table;
     clear: both;
   }
 `;
 */
 
-const AspectRatioBox = ({
-  aspectRatio,
-  children,
-  ...props
-}) => (
+const AspectRatioBox = ({ aspectRatio, children, ...props }) => (
   <div
     className={`height: 0;
-overflow: hidden;
-padding - top;
-: $
-{
-  (props) => 100 / props.aspectRatio;
-}
-%
-background: white;
-position: relative;
-`}
+  overflow: hidden;
+  padding-top: ${props => 100 / props.aspectRatio}%;
+  background: white;
+  position: relative;`}
   >
     <div>{children}</div>
   </div>
 );
 
 export default AspectRatioBox;
-;
 
 ```
 
 # Errors
 ```
-error[SyntaxError]: Invalid assignment to `<div
-    className`
+error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ issue-3532.js:30:3
    │  
 30 │ ┌   <div
 31 │ │     className={`height: 0;
-   │ └─────────────^ This expression cannot be assigned to
-
-error[SyntaxError]: expected a property, a shorthand property, a getter, a setter, or a method but instead found '`height'
-   ┌─ issue-3532.js:31:16
-   │
-31 │     className={`height: 0;
-   │                ^^^^^^^ Expected a property, a shorthand property, a getter, a setter, or a method here
-
-error[SyntaxError]: expected `,` but instead found `:`
-   ┌─ issue-3532.js:31:23
-   │
-31 │     className={`height: 0;
-   │                       ^ unexpected
-
-error[SyntaxError]: expected `,` but instead found `;`
-   ┌─ issue-3532.js:31:26
-   │
-31 │     className={`height: 0;
-   │                          ^ unexpected
-
-error[SyntaxError]: Expected a semicolon or an implicit semicolon after a statement, but found none
-   ┌─ issue-3532.js:33:14
-   │
-33 │   padding-top: ${props => 100 / props.aspectRatio}%;
-   │   -----------^
-   │   │          │
-   │   │          An explicit or implicit semicolon is expected here...
-   │   ...Which is required to end this statement
-
-error[SyntaxError]: expected a statement but instead found '%'
-   ┌─ issue-3532.js:33:51
-   │
-33 │   padding-top: ${props => 100 / props.aspectRatio}%;
-   │                                                   ^ Expected a statement here
-
-error: unterminated template literal
-   ┌─ issue-3532.js:35:23
-   │  
-35 │     position: relative;`}
-   │ ┌───────────────────────^
-36 │ │   >
-37 │ │     <div>{children}</div>
-38 │ │   </div>
+32 │ │   overflow: hidden;
+33 │ │   padding-top: ${props => 100 / props.aspectRatio}%;
    · │
-41 │ │ export default AspectRatioBox;
-42 │ │ 
-   │ └^
-
-error[SyntaxError]: Invalid template literal
-   ┌─ issue-3532.js:35:23
-   │  
-35 │     position: relative;`}
-   │ ┌───────────────────────^
-36 │ │   >
 37 │ │     <div>{children}</div>
 38 │ │   </div>
-   · │
-41 │ │ export default AspectRatioBox;
-42 │ │ 
-   │ └^
+   │ └────────^ JSX only syntax
 
 
 ```

diff --git a/crates/rome_formatter/tests/specs/prettier/js/comments/issues.js.snap b/crates/rome_formatter/tests/specs/prettier/js/comments/issues.js.snap
@@ -128,7 +128,8 @@ Observable
 
 // Comments disappear inside of JSX
 <div>
-  {/* Some comment */} < /div>;
+  {/* Some comment */}
+</div>;
 
 // Comments in JSX tag are placed in a non optimal way
 <div
@@ -160,20 +161,13 @@ foo(
 
 # Errors
 ```
-error[SyntaxError]: type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
+error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ issues.js:43:1
    │  
 43 │ ┌ <div>
 44 │ │   {/* Some comment */}
-   │ └──────────────────────^ TypeScript only syntax
-
-error: unterminated regex literal
-   ┌─ issues.js:45:8
-   │
-45 │ </div>;
-   │  -     ^ ...but the line ends here
-   │  │     
-   │  a regex literal starts there...
+45 │ │ </div>;
+   │ └──────^ JSX only syntax
 
 error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ issues.js:48:1

diff --git a/crates/rome_formatter/tests/specs/prettier/js/comments/jsdoc.js.snap b/crates/rome_formatter/tests/specs/prettier/js/comments/jsdoc.js.snap
@@ -38,7 +38,7 @@ function HelloWorld() {
 ```js
 /** @type {any} */
 const x = (
-    <div>
+  <div>
         <div />
     </div>
 );
@@ -57,36 +57,23 @@ const x = (
  */
 function HelloWorld() {
   return (
-        <div>
+    <div>
            <span>Test</span>
         </div>
-    );
+  );
 }
 
 ```
 
 # Errors
 ```
-error[SyntaxError]: type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
+error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
   ┌─ jsdoc.js:3:5
   │  
 3 │ ┌     <div>
 4 │ │         <div />
-  │ └───────────────^ TypeScript only syntax
-
-error: unterminated regex literal
-  ┌─ jsdoc.js:5:11
-  │
-5 │     </div>
-  │      -    ^ ...but the line ends here
-  │      │    
-  │      a regex literal starts there...
-
-error[SyntaxError]: expected an expression but instead found ')'
-  ┌─ jsdoc.js:6:1
-  │
-6 │ );
-  │ ^ Expected an expression here
+5 │ │     </div>
+  │ └──────────^ JSX only syntax
 
 error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ jsdoc.js:12:5
@@ -96,26 +83,13 @@ error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a
 14 │ │     </div>
    │ └──────────^ JSX only syntax
 
-error[SyntaxError]: type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
+error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ jsdoc.js:22:9
    │  
 22 │ ┌         <div>
 23 │ │            <span>Test</span>
-   │ └────────────────────────────^ TypeScript only syntax
-
-error: unterminated regex literal
-   ┌─ jsdoc.js:24:15
-   │
-24 │         </div>
-   │          -    ^ ...but the line ends here
-   │          │    
-   │          a regex literal starts there...
-
-error[SyntaxError]: expected an expression but instead found ')'
-   ┌─ jsdoc.js:25:5
-   │
-25 │     );
-   │     ^ Expected an expression here
+24 │ │         </div>
+   │ └──────────────^ JSX only syntax
 
 
 ```

diff --git a/crates/rome_formatter/tests/specs/prettier/js/do/do.js.snap b/crates/rome_formatter/tests/specs/prettier/js/do/do.js.snap
@@ -93,17 +93,17 @@ function foo() {
   return (
     <nav>
       <Home />
-  {
-    do {
+      {
+        do {
           if (loggedIn) {
             <LogoutButton />
           } else {
             <LoginButton />
           }
         }
-  }
-  </nav>
-  )
+      }
+    </nav>
+  );
 }
 
 (
@@ -203,48 +203,17 @@ error[SyntaxError]: expected `while` but instead found `;`
 18 │ };
    │  ^ unexpected
 
-error[SyntaxError]: type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
+error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
    ┌─ do.js:22:5
    │  
 22 │ ┌     <nav>
 23 │ │       <Home />
-   │ └──────────────^ TypeScript only syntax
-
-error[SyntaxError]: expected `')'` but instead found `{`
-   ┌─ do.js:24:7
-   │
-24 │       {
-   │       ^ unexpected
-
-error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
-   ┌─ do.js:27:13
-   │
-27 │             <LogoutButton />
-   │             ^^^^^^^^^^^^^^^^ JSX only syntax
-
-error[SyntaxError]: JSX elements are a JSX only feature. Convert your file to a JSX file or remove the syntax.
-   ┌─ do.js:29:13
-   │
-29 │             <LoginButton />
-   │             ^^^^^^^^^^^^^^^ JSX only syntax
-
-error[SyntaxError]: expected `while` but instead found `}`
-   ┌─ do.js:32:7
-   │
-32 │       }
-   │       ^ unexpected
-
-error[SyntaxError]: type assertion are a TypeScript only feature. Convert your file to a TypeScript file or remove the syntax.
-   ┌─ do.js:33:5
-   │
-33 │     </nav>
-   │     ^^^^^ TypeScript only syntax
-
-error[SyntaxError]: expected an expression but instead found ')'
-   ┌─ do.js:34:3
-   │
-34 │   );
-   │   ^ Expected an expression here
+24 │ │       {
+25 │ │         do {
+   · │
+32 │ │       }
+33 │ │     </nav>
+   │ └──────────^ JSX only syntax
 
 error[SyntaxError]: expected `')'` but instead found `do`
    ┌─ do.js:37:2