Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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]];
  }
};

About

A plugin provide private fields in ES6+ class

Resources

Releases

No releases published

Packages

No packages published