babel-plugin-es5-proxy

Babel plugin to use ES6 Proxy in ES5. Inspired by the work of https://github.com/krzkaczor/babel-plugin-proxy, fixed for babel7 (and a lot more).

Installation

npm install --save-dev git+https://github.com/cognibox/babel-plugin-es5-proxy.git

Usage

plugins: ['babel-plugin-es5-proxy'],

Options

plugins: [['babel-plugin-es5-proxy', { useBuiltIns: '...', modules: false, targets: { ... } }]],

modules

Type: boolean Values: "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false Default: false

targets

Type: object Default: { ie: 9, uglify: true }

useBuiltIns

Type: string Values: "usage" | "entry" | false Default: false

The plugin has 100% behaviour coverage.

How it works

Everytime a property is accessed or set on an object, it is replaced by a function call to respectively globalGetter or globalSetter which either accesses or set the original property or calls the getter or setter in the Proxy.

Example

The following code

let obj = {};
obj.foo = 5;
obj.foo;

becomes

let obj = {};
globalSetter(obj, 'foo', 5);
globalGetter(obj, 'foo');

The plugin supports any expression in the getter and the setter,

let obj = {};
let bar = 'fo';
obj[bar + 'o'] = 5;
obj.foo;

becomes

let obj = {};
let bar = 'fo';
globalSetter(obj, bar + 'o', 5);
globalGetter(obj, 'foo');

When a proxy with a getter is defined, the call goes through the getter

let obj = new Proxy({}, { get(property) { return 4 } })
obj.foo // 4

The interface is identical to es6 Proxies.