Skip to main content

@babel/plugin-proposal-decorators

Example

Simple class decorator

JavaScript
@annotation
class MyClass {}

function annotation(target) {
target.annotated = true;
}

Class decorator

JavaScript
@isTestable(true)
class MyClass {}

function isTestable(value) {
return function decorator(target) {
target.isTestable = value;
};
}

Class method decorator

JavaScript
class C {
message = "hello!";

@bound
m() {
console.log(this.message);
}
}

function bound(value, { name, addInitializer }) {
addInitializer(function () {
this[name] = this[name].bind(this);
});
}

Installation

npm install --save-dev @babel/plugin-proposal-decorators

Usage

babel.config.json
{
"plugins": [
["@babel/plugin-proposal-decorators", { "version": "2023-05" }]
]
}

Via Node API

JavaScript
require("@babel/core").transformSync("code", {
plugins: [
["@babel/plugin-proposal-decorators", { version: "2023-05" }],
]
});

Options

History
VersionChanges
v7.22.0Added support for version: "2023-05"
v7.21.0Added support for version: "2023-01"
v7.19.0Added support for version: "2022-03"
v7.17.0Added the version option with support for "2021-12", "2018-09" and "legacy"

version

"2023-05", "2023-01", "2022-03", "2021-12", "2018-09" or "legacy".

Selects the decorators proposal to use:

caution

Babel 8 will only support "2023-05" and "legacy". If you are using a different decorators version, it's recommended to migrate to "2023-05".

The spec repo provides a brief summary of the differences between these versions.

If you specify the decoratorsBeforeExport option, version defaults to "2018-09", otherwise it is a required option.

decoratorsBeforeExport

This option:

  • is disallowed when using version: "legacy", version: "2022-03", version: "2023-01", or version: "2023-05";
  • is required when using version: "2018-09";
  • is optional and defaults to false when using version: "2021-12".

boolean

JavaScript
// decoratorsBeforeExport: false
export @decorator class Bar {}

// decoratorsBeforeExport: true
@decorator
export class Foo {}

This option was originally added to help tc39 collect feedback from the community by allowing experimentation with the proposed syntaxes. The proposal has now settled on allowing decorators either before or after export.

legacy

Deprecated

Use version: "legacy" instead. This option is a legacy alias.

boolean, defaults to false.

Use the legacy (stage 1) decorators syntax and behavior.

NOTE: Compatibility with @babel/plugin-transform-class-properties

If you are including your plugins manually and using @babel/plugin-transform-class-properties or @babel/plugin-private-methods and legacy decorators, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-transform-class-properties.

babel.config.json
{
"plugins": [
- "@babel/plugin-transform-class-properties",
["@babel/plugin-proposal-decorators", { "version": "legacy" }]
+ "@babel/plugin-transform-class-properties"
]
}

If you are already using @babel/preset-env, you can safely remove @babel/plugin-transform-class-properties and @babel/plugin-private-methods:

babel.config.json
{
"presets": ["@babel/preset-env"],
"plugins": [
- "@babel/plugin-transform-class-properties",
["@babel/plugin-proposal-decorators", { "version": "legacy" }]
]
}
tip

You can read more about configuring plugin options here

References