05b22d2597
This commit introduces 4 changes:
1) Function declarations are wrapped using function declarations.
This has two advantages:
- We can rely on native hoisting, instead of using _blockHoist
- The function isn't wrapped until it is called. This avoids
problems where `regeneratorRuntime.wrap` was called before
that `babel-polyfill` was imported.
Example:
function fn() {}
// becomes
function fn() { return _fn.apply(this, arguments); }
function _fn() {
_fn = _wrapper(/* Original function ... */);
return _fn.apply(this, arguments);
}
2) Use a single template for both named and anonymous function
expressions. They already had the same behavior, but the one
used for named functions was a bit longer.
3) Use normal functions instead of arrow functions to wrap
function expressions.
4) Generate a name based on the original one for wrapped
functions (e.g. `foo` becomes `_foo` instead of `_ref`).
@babel/plugin-proposal-class-properties
This plugin transforms class properties
Example
Below is a class with four class properties which will be transformed.
class Bork {
//Property initializer syntax
instanceProperty = "bork";
boundFunction = () => {
return this.instanceProperty;
};
//Static class properties
static staticProperty = "babelIsCool";
static staticFunction = function() {
return Bork.staticProperty;
};
}
let myBork = new Bork;
//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined
//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"
//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"
Installation
npm install --save-dev @babel/plugin-proposal-class-properties
Usage
Via .babelrc (Recommended)
.babelrc
Without options:
{
"plugins": ["@babel/plugin-proposal-class-properties"]
}
With options:
{
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
Via CLI
babel --plugins @babel/plugin-proposal-class-properties script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-class-properties"]
});
Options
loose
boolean, defaults to false.
When true, class properties are compiled to use an assignment expression instead of Object.defineProperty.
Example
class Bork {
static a = 'foo';
static b;
x = 'bar';
y;
}
Without { "loose": true }, the above code will compile to the following, using Object.defineProperty:
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork);
Object.defineProperty(this, "x", {
configurable: true,
enumerable: true,
writable: true,
value: 'bar'
});
Object.defineProperty(this, "y", {
configurable: true,
enumerable: true,
writable: true,
value: void 0
});
};
Object.defineProperty(Bork, "a", {
configurable: true,
enumerable: true,
writable: true,
value: 'foo'
});
Object.defineProperty(Bork, "b", {
configurable: true,
enumerable: true,
writable: true,
value: void 0
});
However, with { "loose": true }, it will compile using assignment expressions:
var Bork = function Bork() {
babelHelpers.classCallCheck(this, Bork);
this.x = 'bar';
this.y = void 0;
};
Bork.a = 'foo';
Bork.b = void 0;