Babel should transform class private properties mixed with logical assignment operators

Bug Report

This is a good first issue for first-time Babel contributors.

Current behavior A clear and concise description of the behavior.

• Codesandbox

throws

unknown: Property operator expected value to be one of ["+","-","/","%","*","**","&","|",">>",">>>","<<","^","==","===","!=","!==","in","instanceof",">","<",">=","<="] but got "??"

Input Code

class C {
  #x;
  m() { this.#x ??= 42 }
};

Expected behavior It should be transpiled successfully

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "Edge 16",
      "shippedProposals": true
    }]
  ],
  "plugins": ["@babel/plugin-proposal-logical-assignment-operators"]
}

Environment CodeSandbox

Possible Solution

When transforming private class properties, babel will call packages/babel-helper-member-expression-to-functions/src/index.js which transforms private property usage to helper calls. For example,

this.#x += 42

is approximately transformed to

_privateSet(this, x, _privateGet(this, x) + 42)

As you can see _privateGet(this, x) + 42 is a binary expression. But ?? is not a valid binary expression, so the error is thrown. To fix it, we should construct logical expression for logical assignment operators, namely ??=, ||= and &&=.

If you don’t know how to clone Babel, follow these steps: (you need to have make and yarn available on your machine).

1. Write a comment there to let other possible contributors know that you are working on this bug.
2. Fork the repo
3. Run git clone https://github.com/<YOUR_USERNAME>/babel.git && cd babel
4. Run yarn && make bootstrap
5. Wait ⏳
6. Run make watch (or make build whenever you change a file)
7. Add a test (only input.js; output.js will be automatically generated) to packages/babel-plugin-proposal-class-properties/test/fixtures/private/logical-assignment (tip: you can copy from contents of fixtures/private/assignment)
8. Update the code!
9. yarn jest class-properties to run the tests
   • If some test outputs don’t match but the new results are correct, you can delete the bad output.js files and run the tests again
10. If it is working, run make test to run all the tests
11. Run git push and open a PR!

[jridgewell]

Specifically, this needs to be handled in https://github.com/babel/babel/blob/5b24d798758a9ad1f5aa383d1e83869ae7964ab1/packages/babel-helper-member-expression-to-functions/src/index.js#L287-L313

[sag1v]

@sag1v yep, check out the linked PR for the full conversation and current status. I’m planning to make the final requested changes this week 🤞

Thank you 💚