Support decorator auto accessors syntax (#12299)

* Handle `ClassAccessorProperty`

* Disable file

* Add `babel-plugins` tests

* Add more tests

* Fix tests

* Fix typo

* Add changelog

* Fix printing for no-semi

* Update statement.js

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

changelog_unreleased/javascript/12299.md

@@ -0,0 +1,12 @@
+#### Support decorator auto accessors syntax (#12299 by @sosukesuzuki)
+
+Support auto accessors syntax that is introduced in [new decorators proposal](https://github.com/tc39/proposal-decorators).
+
+<!-- prettier-ignore -->
+```jsx
+// Example
+@defineElement("my-class")
+class C extends HTMLElement {
+  @reactive accessor clicked = false;
+}
+```

src/language-js/parse/babel.js

@@ -39,6 +39,7 @@ const parseOptions = {
     "asyncDoExpressions",
     "regexpUnicodeSets",
     "destructuringPrivate",
+    "decoratorAutoAccessors",
   ],
   tokens: true,
   ranges: true,

src/language-js/print/class.js

@@ -217,6 +217,9 @@ function printClassProperty(path, options, print) {
   if (node.variance) {
     parts.push(print("variance"));
   }
+  if (node.type === "ClassAccessorProperty") {
+    parts.push("accessor ");
+  }
   parts.push(
     printPropertyKey(path, options, print),
     printOptionalToken(path),

src/language-js/print/statement.js

@@ -167,7 +167,8 @@ function printSwitchCaseConsequent(path, options, print) {
 const isClassProperty = ({ type }) =>
   type === "ClassProperty" ||
   type === "PropertyDefinition" ||
-  type === "ClassPrivateProperty";
+  type === "ClassPrivateProperty" ||
+  type === "ClassAccessorProperty";
 /**
  * @returns {boolean}
  */

src/language-js/printer-estree.js

@@ -96,6 +96,7 @@ function genericPrint(path, options, print, args) {
     type === "ClassMethod" ||
     type === "ClassPrivateMethod" ||
     type === "ClassProperty" ||
+    type === "ClassAccessorProperty" ||
     type === "PropertyDefinition" ||
     type === "TSAbstractPropertyDefinition" ||
     type === "ClassPrivateProperty" ||
@@ -759,6 +760,7 @@ function printPathNoParens(path, options, print, args) {
     case "ClassProperty":
     case "PropertyDefinition":
     case "ClassPrivateProperty":
+    case "ClassAccessorProperty":
       return printClassProperty(path, options, print);
     case "TemplateElement":
       return replaceTextEndOfLine(node.value.raw);

tests/config/format-test.js

@@ -57,7 +57,28 @@ const espreeDisabledTests = new Set(
   ].map((directory) => path.join(__dirname, "../format/js", directory))
 );
 const acornDisabledTests = espreeDisabledTests;
-const meriyahDisabledTests = espreeDisabledTests;
+const meriyahDisabledTests = new Set([
+  ...espreeDisabledTests,
+  // Meriyah does not support decorator auto accessors syntax.
+  // But meriyah can parse it as an ordinary class property.
+  // So meriyah does not throw parsing error for it.
+  ...[
+    "basic.js",
+    "computed.js",
+    "private.js",
+    "static-computed.js",
+    "static-private.js",
+    "static.js",
+    "with-semicolon-1.js",
+    "with-semicolon-2.js",
+  ].map((filename) =>
+    path.join(__dirname, "../format/js/decorator-auto-accessors", filename)
+  ),
+  path.join(
+    __dirname,
+    "../format/js/babel-plugins/decorator-auto-accessors.js"
+  ),
+]);
 
 const isUnstable = (filename, options) => {
   const testFunction = unstableTests.get(filename);
@@ -216,6 +237,13 @@ function runSpec(fixtures, parsers, options) {
         : format(code, formatOptions);
 
       for (const currentParser of allParsers) {
+        if (
+          (currentParser === "espree" && espreeDisabledTests.has(filename)) ||
+          (currentParser === "meriyah" && meriyahDisabledTests.has(filename)) ||
+          (currentParser === "acorn" && acornDisabledTests.has(filename))
+        ) {
+          continue;
+        }
         runTest({
           parsers,
           name,

tests/format/js/babel-plugins/__snapshots__/jsfmt.spec.js.snap

@@ -534,6 +534,42 @@ typeof 1m === "decimal128";
 ================================================================================
 `;
 
+exports[`decorator-auto-accessors.js [acorn] format 1`] = `
+"Unexpected token (2:12)
+  1 | class C extends HTMLElement {
+> 2 |   accessor clicked = false;
+    |            ^
+  3 | }
+  4 |"
+`;
+
+exports[`decorator-auto-accessors.js [espree] format 1`] = `
+"Unexpected token clicked (2:12)
+  1 | class C extends HTMLElement {
+> 2 |   accessor clicked = false;
+    |            ^
+  3 | }
+  4 |"
+`;
+
+exports[`decorator-auto-accessors.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "babel-ts", "babel-flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class C extends HTMLElement {
+  accessor clicked = false;
+}
+
+=====================================output=====================================
+class C extends HTMLElement {
+  accessor clicked = false;
+}
+
+================================================================================
+`;
+
 exports[`decorators.js [acorn] format 1`] = `
 "Unexpected character '@' (3:1)
   1 | // https://babeljs.io/docs/en/babel-plugin-proposal-decorators

tests/format/js/babel-plugins/decorator-auto-accessors.js

@@ -0,0 +1,3 @@
+class C extends HTMLElement {
+  accessor clicked = false;
+}

tests/format/js/babel-plugins/jsfmt.spec.js

@@ -26,6 +26,7 @@ run_spec(__dirname, ["babel", "babel-ts", "babel-flow"], {
       "module-blocks.js",
       "async-do-expressions.js",
       "regex-v-flag.js",
+      "decorator-auto-accessors.js",
     ],
     espree: [
       "decimal.js",
@@ -50,6 +51,7 @@ run_spec(__dirname, ["babel", "babel-ts", "babel-flow"], {
       "module-blocks.js",
       "async-do-expressions.js",
       "regex-v-flag.js",
+      "decorator-auto-accessors.js",
     ],
     meriyah: [
       "decimal.js",