Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
babel-plugin-transform-class-properties
Advanced tools
This plugin transforms static class properties as well as properties declared with the property initializer syntax
The babel-plugin-transform-class-properties package is a Babel plugin that allows you to use class properties in your JavaScript code. This plugin transforms class properties to be compatible with older JavaScript environments that do not support this feature natively.
Public Class Fields
This feature allows you to define public class fields directly within the class body. The plugin transforms this syntax to be compatible with older JavaScript environments.
class MyClass {
myField = 'Hello, world!';
}
Static Class Fields
This feature allows you to define static class fields directly within the class body. Static fields are shared among all instances of the class. The plugin ensures this syntax works in environments that do not support it natively.
class MyClass {
static myStaticField = 'Hello, static world!';
}
Instance Property Initialization
This feature allows you to initialize instance properties directly within the class body, making the code more concise and readable. The plugin transforms this syntax to be compatible with older JavaScript environments.
class MyClass {
myField = 'Hello, world!';
constructor() {
console.log(this.myField);
}
}
The babel-plugin-transform-es2015-classes package transforms ES2015 class syntax to ES5. While it does not specifically focus on class properties, it is often used in conjunction with other plugins to achieve similar functionality.
This plugin transforms class properties
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"
npm install --save-dev babel-plugin-transform-class-properties
.babelrc
(Recommended).babelrc
Without options:
{
"plugins": ["transform-class-properties"]
}
With options:
{
"plugins": [
["transform-class-properties", { "loose": true }]
]
}
babel --plugins transform-class-properties script.js
require("babel-core").transform("code", {
plugins: ["transform-class-properties"]
});
loose
boolean
, defaults to false
.
When true
, class properties are compiled to use an assignment expression instead of Object.defineProperty
.
class Bork {
static a = 'foo';
static b;
x = 'bar';
y;
}
Without { "loose": true }
, the above code will compile to the following, using Object.definePropery
:
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;
FAQs
This plugin transforms static class properties as well as properties declared with the property initializer syntax
We found that babel-plugin-transform-class-properties demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.