Support destructuring private proposal (prettier#12276)

* Enable `destructuringPrivate` plugiin * Add tests * Add changelog * Add more tests
nevilm-lt · Apr 22, 2022 · 93df59c · 93df59c
1 parent f6dd3b5
commit 93df59c
Show file tree

Hide file tree

Showing 14 changed files with 538 additions and 0 deletions.
diff --git a/changelog_unreleased/javascript/12276.md b/changelog_unreleased/javascript/12276.md
@@ -0,0 +1,15 @@
+#### Support destructuring private proposal (#12276 by @sosukesuzuki)
+
+Support [Stage 2 TC39 proposal destructuring private fields](https://github.com/tc39/proposal-destructuring-private) via [Babel 7.17](https://babeljs.io/blog/2022/02/02/7.17.0).
+
+<!-- prettier-ignore -->
+```jsx
+// Example
+class Foo {
+  constructor() {
+    console.log(this.#x); // => 1
+    const { #x: x } = this;
+    console.log(x); // => 1
+  }
+}
+```
diff --git a/src/language-js/parse/babel.js b/src/language-js/parse/babel.js
@@ -38,6 +38,7 @@ const parseOptions = {
     "moduleBlocks",
     "asyncDoExpressions",
     "regexpUnicodeSets",
+    "destructuringPrivate",
   ],
   tokens: true,
   ranges: true,

diff --git a/tests/format/js/babel-plugins/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/babel-plugins/__snapshots__/jsfmt.spec.js.snap
@@ -626,6 +626,75 @@ function enumerable(value) {
 ================================================================================
 `;
 
+exports[`destructuring-private.js [acorn] format 1`] = `
+"Unexpected token (5:13)
+  3 |   constructor() {
+  4 |     console.log(this.#x); // => 1
+> 5 |     const { #x: x } = this;
+    |             ^
+  6 |     console.log(x); // => 1
+  7 |   }
+  8 |   equals({ #x: otherX }) {"
+`;
+
+exports[`destructuring-private.js [espree] format 1`] = `
+"Unexpected token #x (5:13)
+  3 |   constructor() {
+  4 |     console.log(this.#x); // => 1
+> 5 |     const { #x: x } = this;
+    |             ^
+  6 |     console.log(x); // => 1
+  7 |   }
+  8 |   equals({ #x: otherX }) {"
+`;
+
+exports[`destructuring-private.js [meriyah] format 1`] = `
+"[5:13]: Unexpected token: 'PrivateField' (5:13)
+  3 |   constructor() {
+  4 |     console.log(this.#x); // => 1
+> 5 |     const { #x: x } = this;
+    |             ^
+  6 |     console.log(x); // => 1
+  7 |   }
+  8 |   equals({ #x: otherX }) {"
+`;
+
+exports[`destructuring-private.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "babel-ts", "babel-flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+class Foo {
+  #x = 1;
+  constructor() {
+    console.log(this.#x); // => 1
+    const { #x: x } = this;
+    console.log(x); // => 1
+  }
+  equals({ #x: otherX }) {
+    const { #x: currentX } = this;
+    return currentX === otherX;
+  }
+}
+
+=====================================output=====================================
+class Foo {
+  #x = 1;
+  constructor() {
+    console.log(this.#x); // => 1
+    const { #x: x } = this;
+    console.log(x); // => 1
+  }
+  equals({ #x: otherX }) {
+    const { #x: currentX } = this;
+    return currentX === otherX;
+  }
+}
+
+================================================================================
+`;
+
 exports[`do-expressions.js [acorn] format 1`] = `
 "Unexpected token (3:9)
   1 | // https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

diff --git a/tests/format/js/babel-plugins/destructuring-private.js b/tests/format/js/babel-plugins/destructuring-private.js
@@ -0,0 +1,12 @@
+class Foo {
+  #x = 1;
+  constructor() {
+    console.log(this.#x); // => 1
+    const { #x: x } = this;
+    console.log(x); // => 1
+  }
+  equals({ #x: otherX }) {
+    const { #x: currentX } = this;
+    return currentX === otherX;
+  }
+}
diff --git a/tests/format/js/babel-plugins/jsfmt.spec.js b/tests/format/js/babel-plugins/jsfmt.spec.js
@@ -6,6 +6,7 @@ run_spec(__dirname, ["babel", "babel-ts", "babel-flow"], {
     acorn: [
       "decimal.js",
       "decorators.js",
+      "destructuring-private.js",
       "do-expressions.js",
       "export-default-from.js",
       "flow.js",
@@ -29,6 +30,7 @@ run_spec(__dirname, ["babel", "babel-ts", "babel-flow"], {
     espree: [
       "decimal.js",
       "decorators.js",
+      "destructuring-private.js",
       "do-expressions.js",
       "export-default-from.js",
       "flow.js",
@@ -52,6 +54,7 @@ run_spec(__dirname, ["babel", "babel-ts", "babel-flow"], {
     meriyah: [
       "decimal.js",
       "do-expressions.js",
+      "destructuring-private.js",
       "export-default-from.js",
       "flow.js",
       "function-bind.js",