babel-plugin-transform-private

Babel Private Field Plugin

This is a plugin provide private fields in ES6+ class. It's not like ECMAScript Private Fields proposal but automatically transform any field which starts with '_' into a private field.

Usage

npm i babel-plugin-transform-private --save-dev

Config .babelrc or package.json

{
  "plugins": [
    ["transform-private", {
      "pattern": "^_"
    }],
  ]
}

Compile results:

Simple class

input:

export default class Point2D{
  constructor(x, y){
    this._x = x;
    this._y = y;
  }
  get XY(){
    return [this._x, this._y];
  }
  get length(){
    return Math.sqrt(this._x * this._x + this._y * this._y);
  }
}

output:

const Point2D = function () {
  const [$_x$, $_y$] = [Symbol("$_x$"), Symbol("$_y$")];
  class Point2D {
    constructor(x, y) {
      this[$_x$] = x;
      this[$_y$] = y;
    }
    get XY() {
      return [this[$_x$], this[$_y$]];
    }
    get length() {
      return Math.sqrt(this[$_x$] * this[$_x$] + this[$_y$] * this[$_y$]);
    }
  }
  return Point2D;
}();
 
export default Point2D;

Nested class

input:

export default class Outer {
  constructor(){
    this._inner = class Inner{
      constructor(x){
        this._x = x;
      }
      get X(){
        return this._x;
      }
    }
  }
  get innerCls(){
    return this._inner;
  }
}

output:

const Outer = function () {
  const [$_inner$] = [Symbol("$_inner$")];
  class Outer {
    constructor() {
      this[$_inner$] = function () {
        const [$_x$] = [Symbol("$_x$")];
        return class Inner {
          constructor(x) {
            this[$_x$] = x;
          }
          get X() {
            return this[$_x$];
          }
        };
      }();
    }
    get innerCls() {
      return this[$_inner$];
    }
  }
  return Outer;
}();
 
export default Outer;

Protected fields & super

A method or a getter starts with '_' will be transforme to protected field. That means it can be accessed using super keyword.

input:

export const Foo = class {
  constructor(x, y){
    this._x = x;
    this._y = y;
    this._zz = x + y;  
  }
  //protected filed
  get _z(){
    return this._zz;
  }
}
 
export const Bar = class extends Foo{
  constructor(x, y){
    super(x * 2, y * 3);
  }
  get z(){
    return super._z; //get x*2+y*3
  }
  get z2(){
    return super._zz; //undefined
  }
}

output:

export const Foo = function () {
  const [$_x$, $_y$, $_zz$, $_z$] = [Symbol("$_x$"), Symbol("$_y$"), Symbol("$_zz$"), Symbol("$_z$")];
  return class {
    constructor(x, y) {
      this[$_x$] = x;
      this[$_y$] = y;
      this[$_zz$] = x + y;
    }
    get [$_z$]() {
      return this[$_zz$];
    }
  };
}();
 
export const Bar = class extends Foo {
  constructor(x, y) {
    super(x * 2, y * 3);
  }
  get z() {
    return super[Object.getOwnPropertySymbols(this.__proto__.__proto__).filter(s => String(s) === "Symbol($_z$)")[0]];
  }
  get z2() {
    return super[Object.getOwnPropertySymbols(this.__proto__.__proto__).filter(s => String(s) === "Symbol($_zz$)")[0]];
  }
};