Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support destructuring private proposal #12276

Merged
merged 4 commits into from Feb 14, 2022
Merged

Support destructuring private proposal #12276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cde0dae
Enable `destructuringPrivate` plugiin
sosukesuzuki Feb 12, 2022
5926801
Add tests
sosukesuzuki Feb 12, 2022
a41b681
Add changelog
sosukesuzuki Feb 12, 2022
b7aaa06
Add more tests
sosukesuzuki Feb 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
15 changes: 15 additions & 0 deletions changelog_unreleased/javascript/12276.md
View file
Open in desktop
@@ -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
}
}
```
1 change: 1 addition & 0 deletions src/language-js/parse/babel.js
View file
Open in desktop
Expand Up @@ -38,6 +38,7 @@ const parseOptions = {
"moduleBlocks",
"asyncDoExpressions",
"regexpUnicodeSets",
"destructuringPrivate",
],
tokens: true,
ranges: true,
Expand Down
69 changes: 69 additions & 0 deletions tests/format/js/babel-plugins/__snapshots__/jsfmt.spec.js.snap
View file
Open in desktop
Expand Up @@ -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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is assign allowed in this syntax?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. This example is copied from the example of https://github.com/tc39/proposal-destructuring-private.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

({ #x: variable.or.property.to.assign } = this);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah sorry I misunderstood. Destructuring private in assign expression is maybe invalid. No, I don't know. I'll look into it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fisker Maybe this is valid. So what should we do for it?

Copy link
Member

@fisker fisker Feb 13, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems working fine,

Prettier pr-12276
Playground link

--parser babel

Input:

class A {
  
  method() {
    ({ #x: variable.or.property.to.assign } = this);
    }
}

Output:

class A {
  method() {
    ({ #x: variable.or.property.to.assign } = this);
  }
}

Add a test for it, and check if we need adjust the printer.

This syntax is a good one, I was waiting for it for quite a while, I may actual use it.

Copy link
Member

@fisker fisker Feb 13, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, valid. tc39/proposal-destructuring-private#3 (comment)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't forget add some tests for destructuring with default value.

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
Expand Down
12 changes: 12 additions & 0 deletions tests/format/js/babel-plugins/destructuring-private.js
View file
Open in desktop
@@ -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;
}
}
3 changes: 3 additions & 0 deletions tests/format/js/babel-plugins/jsfmt.spec.js
View file
Open in desktop
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down