feat(rome_js_parser): EcmaScript @decorators #4252 (#4392)

feat(rome_js_parser): EcmaScript @decorators #4252

CHANGELOG.md

@@ -59,7 +59,7 @@ the code action is not formatted.
 - import "module" assert {}
 + import "module" with {}
 ```
-
+- Allow decorators before `export` and `export default`. [#4252](https://github.com/rome/tools/issues/4252)
 
 ### VSCode
 ### JavaScript APIs

crates/rome_js_formatter/src/comments.rs

@@ -9,6 +9,7 @@ use rome_formatter::{
     write,
 };
 use rome_js_syntax::suppression::parse_suppression_comment;
+use rome_js_syntax::JsSyntaxKind::JS_EXPORT;
 use rome_js_syntax::{
     AnyJsClass, AnyJsName, AnyJsRoot, AnyJsStatement, JsArrayHole, JsArrowFunctionExpression,
     JsBlockStatement, JsCallArguments, JsCatchClause, JsEmptyStatement, JsFinallyClause,
@@ -369,6 +370,29 @@ fn handle_class_comment(comment: DecoratedComment<JsLanguage>) -> CommentPlaceme
         return CommentPlacement::Default(comment);
     }
 
+    // ```javascript
+    // @decorator
+    // // comment
+    // class Foo {}
+    // ```
+    if (AnyJsClass::can_cast(comment.enclosing_node().kind())
+        && comment
+            .following_token()
+            .map_or(false, |token| token.kind() == JsSyntaxKind::CLASS_KW))
+        // ```javascript
+        // @decorator
+        // // comment
+        // export class Foo {}
+        // ```
+        || comment.enclosing_node().kind() == JS_EXPORT
+    {
+        if let Some(preceding) = comment.preceding_node() {
+            if preceding.kind() == JsSyntaxKind::JS_DECORATOR {
+                return CommentPlacement::trailing(preceding.clone(), comment);
+            }
+        }
+    }
+
     let first_member = if let Some(class) = AnyJsClass::cast_ref(comment.enclosing_node()) {
         class.members().first().map(AstNode::into_syntax)
     } else if let Some(interface) = TsInterfaceDeclaration::cast_ref(comment.enclosing_node()) {

crates/rome_js_formatter/src/js/auxiliary/decorator.rs

@@ -1,10 +1,16 @@
 use crate::prelude::*;
-use rome_js_syntax::JsDecorator;
-use rome_rowan::AstNode;
+use rome_formatter::write;
+use rome_js_syntax::{JsDecorator, JsDecoratorFields};
+
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatJsDecorator;
 impl FormatNodeRule<JsDecorator> for FormatJsDecorator {
     fn fmt_fields(&self, node: &JsDecorator, f: &mut JsFormatter) -> FormatResult<()> {
-        format_verbatim_node(node.syntax()).fmt(f)
+        let JsDecoratorFields {
+            at_token,
+            expression,
+        } = node.as_fields();
+
+        write![f, [at_token.format(), expression.format()]]
     }
 }

crates/rome_js_formatter/src/js/module/export.rs

@@ -10,10 +10,19 @@ pub(crate) struct FormatJsExport;
 impl FormatNodeRule<JsExport> for FormatJsExport {
     fn fmt_fields(&self, node: &JsExport, f: &mut JsFormatter) -> FormatResult<()> {
         let JsExportFields {
+            decorators,
             export_token,
             export_clause,
         } = node.as_fields();
 
-        write![f, [export_token.format(), space(), export_clause.format()]]
+        write![
+            f,
+            [
+                decorators.format(),
+                export_token.format(),
+                space(),
+                export_clause.format()
+            ]
+        ]
     }
 }

crates/rome_js_formatter/src/syntax_rewriter.rs

@@ -143,6 +143,8 @@ impl JsFormatSyntaxRewriter {
 
                 // Keep parentheses around unknown expressions. Rome can't know the precedence.
                 if inner.kind().is_bogus()
+                    // Don't remove parentheses if the expression is a decorator
+                    || inner.grand_parent().map_or(false, |node| node.kind() == JsSyntaxKind::JS_DECORATOR)
                     // Don't remove parentheses if they have skipped trivia. We don't know for certain what the intended syntax is.
                     // Nor if there's a leading type cast comment
                     || has_type_cast_comment_or_skipped(&l_paren.leading_trivia())

crates/rome_js_formatter/tests/quick_test.rs

@@ -13,7 +13,14 @@ mod language {
 // use this test check if your snippet prints as you wish, without using a snapshot
 fn quick_test() {
     let src = r#"
-const foo = @deco class {}
+const bar =
+  (
+    @deco
+    class {
+      //
+    }
+  );
+
 "#;
     let syntax = SourceType::tsx();
     let tree = parse(src, syntax);
@@ -31,11 +38,14 @@ const foo = @deco class {}
 
     assert_eq!(
         result.as_code(),
-        r#"[
-	5,
-	7234932436,
-    // comment 3
-];
+        r#"
+        // A
+@Foo()
+// B
+@Bar()
+// C
+export class Bar{}
+
 "#
     );
 }

crates/rome_js_formatter/tests/specs/prettier/js/decorators-export/after_export.js.snap

@@ -26,9 +26,8 @@ export default @decorator class {}
 
 -export default
 -@decorator
--class {}
-+export default (@decorator
-+class {});
++export default @decorator
+ class {}
 ```
 
 # Output
@@ -37,8 +36,8 @@ export default @decorator class {}
 export @decorator
 class Foo {}
 
-export default (@decorator
-class {});
+export default @decorator
+class {}
 ```
 
 

crates/rome_js_formatter/tests/specs/prettier/js/decorators/classes.js.snap

@@ -82,31 +82,4 @@ class {
 };
 ```
 
-# Errors
-```
-classes.js:3:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Decorators are not valid here.
-  
-    1 │ @deco class Foo {}
-    2 │ 
-  > 3 │ @deco export class Bar {}
-      │ ^^^^^
-    4 │ 
-    5 │ @deco export default class Baz {}
-  
-classes.js:5:1 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-  × Decorators are not valid here.
-  
-    3 │ @deco export class Bar {}
-    4 │ 
-  > 5 │ @deco export default class Baz {}
-      │ ^^^^^
-    6 │ 
-    7 │ const foo = @deco class {
-  
-
-```
-
 

crates/rome_js_formatter/tests/specs/prettier/js/decorators/multiple.js.snap

@@ -115,6 +115,8 @@ multiple.js:7:3 parse ━━━━━━━━━━━━━━━━━━━
     10 │   eyes: 2
     11 │ };
   
+  i Decorators are only valid on class declarations, class expressions, and class methods.
+  
 multiple.js:10:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
   × Expected a semicolon or an implicit semicolon after a statement, but found none