plugin-proposal-private-methods.md

Error in user YAML: (<unknown>): found character that cannot start any token while scanning for the next token at line 2 column 8

---
id: babel-plugin-proposal-private-methods
title: @babel/plugin-proposal-private-methods
sidebar_label: private-methods
---

NOTE: This plugin is included in @babel/preset-env

History

| Version | Changes | | --- | --- | | `v7.3.0` | Support private accessors (getters and setters) | | `v7.2.0` | Initial Release |

Example

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() {
    return this.#xValue;
  }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }
}

Installation

$ npm install @babel/plugin-proposal-private-methods --save-dev

Usage

With a configuration file (Recommended)

Without options:

{
  "plugins": ["@babel/plugin-proposal-private-methods"]
}

With options:

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

Via CLI

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

Via Node API

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

Options

loose

boolean, defaults to false.

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

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

Let's use the following as an example:

class Foo {
  constructor() {
    this.publicField = this.#privateMethod();
  }

  #privateMethod() {
    return 42;
  }
}

By default, this becomes:

var Foo = function Foo() {
  "use strict";

  babelHelpers.classCallCheck(this, Foo);

  _privateMethod.add(this);

  this.publicField = babelHelpers
    .classPrivateMethodGet(this, _privateMethod, _privateMethod2)
    .call(this);
};

var _privateMethod = new WeakSet();

var _privateMethod2 = function _privateMethod2() {
  return 42;
};

With { loose: true }, it becomes:

var Foo = function Foo() {
  "use strict";

  babelHelpers.classCallCheck(this, Foo);
  Object.defineProperty(this, _privateMethod, {
    value: _privateMethod2,
  });
  this.publicField = babelHelpers
    .classPrivateFieldLooseBase(this, _privateMethod)
    [_privateMethod]();
};

var _privateMethod = babelHelpers.classPrivateFieldLooseKey("privateMethod");

var _privateMethod2 = function _privateMethod2() {
  return 42;
};

You can read more about configuring plugin options here

References

• Proposal: Private methods and getter/setters for JavaScript classes