@babel/plugin-proposal-private-methods

Example

  1. class Counter extends HTMLElement {
  2.   #xValue = 0;
  4.   get #x() { return this.#xValue; }
  5.   set #x(value) {
  6.     this.#xValue = value;
  7.     window.requestAnimationFrame(
  8.       this.#render.bind(this));
  9.   }
  11.   #clicked() {
  12.     this.#x++;
  13.   }
  14. }

Installation

  1. $ npm install @babel/plugin-proposal-private-methods

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

  1. {
  2.   "plugins": ["@babel/plugin-proposal-private-methods"]
  3. }

With options:

  1. {
  2.   "plugins": [["@babel/plugin-proposal-private-methods", { "loose": true }]]
  3. }

Via CLI

  1. $ babel --plugins @babel/plugin-proposal-private-methods script.js

Via Node API

  1. require("@babel/core").transform("code", {
  2.   plugins: ["@babel/plugin-proposal-private-methods"],
  3. });

Options

loose

boolean, defaults to false.

Note: The loose mode configuration setting must be the same as @babel/proposal-class-properties.

When true, private methods will be assigned directly on its parentvia Object.defineProperty rather than a WeakSet. This results in improvedperformance and debugging (normal property access vs .get()) at the expenseof potentially leaking "privates" via things like Object.getOwnPropertyNames.

Let's use the following as an example:

  1. class Foo {
  2.   constructor() {
  3.     this.publicField = this.#privateMethod();
  4.   }
  6.   #privateMethod() {
  7.     return 42;
  8.   }
  9. }

By default, this becomes:

  1. var Foo = function Foo() {
  2.   "use strict";
  4.   babelHelpers.classCallCheck(this, Foo);
  6.   _privateMethod.add(this);
  8.   this.publicField = babelHelpers
  9.     .classPrivateMethodGet(this, _privateMethod, _privateMethod2)
  10.     .call(this);
  11. };
  13. var _privateMethod = new WeakSet();
  15. var _privateMethod2 = function _privateMethod2() {
  16.   return 42;
  17. };

With { loose: true }, it becomes:

  1. var Foo = function Foo() {
  2.   "use strict";
  4.   babelHelpers.classCallCheck(this, Foo);
  5.   Object.defineProperty(this, _privateMethod, {
  6.     value: _privateMethod2,
  7.   });
  8.   this.publicField = babelHelpers
  9.     .classPrivateFieldLooseBase(this, _privateMethod)
  10.     [_privateMethod]();
  11. };
  13. var _privateMethod = babelHelpers.classPrivateFieldLooseKey("privateMethod");
  15. var _privateMethod2 = function _privateMethod2() {
  16.   return 42;
  17. };

You can read more about configuring plugin options here

References