Allow decorators to be used with declare on class fields (#19492)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/typescript/19492.md

@@ -0,0 +1,23 @@
+#### Allow decorators to be used with declare on class fields (#19492 by @evoactivity)
+
+Extensively used within the Ember ecosystem, decorators with `declare` on class fields will ignore the babel parser error and allow Prettier to format the code without breaking it.
+
+<!-- prettier-ignore -->
+```ts
+// Input
+export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+  @service declare server: ServerService;
+}
+
+// Prettier stable
+// SyntaxError: Decorators can't be used with a declare field. (2:3)
+//  1 | export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+//> 2 |   @service declare server: ServerService;
+//    |   ^
+//  3 | }
+
+// Prettier main
+export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+  @service declare server: ServerService;
+}
+```

src/language-js/parse/babel.js

@@ -222,6 +222,13 @@ const allowedReasonCodesArray = [
   ```
   */
   "DeclarationMissingInitializer",
+
+  /*
+  Allow decorators to be used with declare fields
+  https://github.com/prettier/prettier/issues/19491
+  https://github.com/babel/babel/pull/17949
+  */
+  "DecoratorAbstractMethod",
 ];
 const allowedReasonCodes = new Set(allowedReasonCodesArray);
 

tests/format/typescript/comments/16065-2.ts

@@ -3,6 +3,14 @@ class Foo {
   @decorator
   readonly /* comment */ propertyDefinition;
 
+  // TSAbstractPropertyDefinition
+  @decorator
+  abstract /* comment */ abstractPropertyDefinition;
+
+  // TSAbstractMethodDefinition
+  @decorator
+  abstract /* comment */ abstractMethodDefinition;
+
   // MethodDefinition
   @decorator
   private /* comment */ methodDefinition() {}

tests/format/typescript/comments/__snapshots__/format.test.js.snap

@@ -260,6 +260,14 @@ class Foo {
   @decorator
   readonly /* comment */ propertyDefinition;
 
+  // TSAbstractPropertyDefinition
+  @decorator
+  abstract /* comment */ abstractPropertyDefinition;
+
+  // TSAbstractMethodDefinition
+  @decorator
+  abstract /* comment */ abstractMethodDefinition;
+
   // MethodDefinition
   @decorator
   private /* comment */ methodDefinition() {}
@@ -281,6 +289,14 @@ class Foo {
   @decorator
   readonly /* comment */ propertyDefinition;
 
+  // TSAbstractPropertyDefinition
+  @decorator
+  abstract /* comment */ abstractPropertyDefinition;
+
+  // TSAbstractMethodDefinition
+  @decorator
+  abstract /* comment */ abstractMethodDefinition;
+
   // MethodDefinition
   @decorator
   private /* comment */ methodDefinition() {}

tests/format/typescript/decorators/__snapshots__/format.test.js.snap

@@ -292,6 +292,12 @@ class Something {
     readonly property: Array<string>
 }
 
+class Something2 {
+    @foo()
+    // comment
+    abstract property: Array<string>
+}
+
 =====================================output=====================================
 class Foo1 {
   @foo
@@ -323,6 +329,43 @@ class Something {
   readonly property: Array<string>;
 }
 
+class Something2 {
+  @foo()
+  // comment
+  abstract property: Array<string>;
+}
+
+================================================================================
+`;
+
+exports[`ember.ts format 1`] = `
+====================================options=====================================
+parsers: ["typescript"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+/*
+https://github.com/prettier/prettier/issues/19491
+
+decorators with declare is used extensively in Ember ecosystem,
+and we want to make sure that Prettier doesn't break them.
+*/
+
+export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+  @service declare server: ServerService;
+}
+
+=====================================output=====================================
+/*
+https://github.com/prettier/prettier/issues/19491
+
+decorators with declare is used extensively in Ember ecosystem,
+and we want to make sure that Prettier doesn't break them.
+*/
+
+export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+  @service declare server: ServerService;
+}
+
 ================================================================================
 `;
 

tests/format/typescript/decorators/decorators-comments.ts

@@ -28,3 +28,9 @@ class Something {
     // comment
     readonly property: Array<string>
 }
+
+class Something2 {
+    @foo()
+    // comment
+    abstract property: Array<string>
+}

tests/format/typescript/decorators/ember.ts

@@ -0,0 +1,10 @@
+/*
+https://github.com/prettier/prettier/issues/19491
+
+decorators with declare is used extensively in Ember ecosystem,
+and we want to make sure that Prettier doesn't break them.
+*/
+
+export default class ProjectStatusComponent extends Component<ProjectStatusSig> {
+  @service declare server: ServerService;
+}