Edit

@babel/plugin-proposal-decorators

Example

(examples are from proposal)

Simple class decorator

@annotation
class MyClass {}

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

Class decorator

@isTestable(true)
class MyClass {}

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

Class function decorator

class C {
  @enumerable(false)
  method() {}
}

function enumerable(value) {
  return function(target, key, descriptor) {
    descriptor.enumerable = value;
    return descriptor;
  };
}

Installation

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

Usage

With a configuration file (Recommended)

{
  "plugins": ["@babel/plugin-proposal-decorators"]
}

Via CLI

babel --plugins @babel/plugin-proposal-decorators script.js

Via Node API

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

Options

History

Version	Changes
v7.19.0	Added support for version: "2022-03"
v7.17.0	Added the version option with support for "2021-12", "2018-09" and "legacy"

version

"2022-03", "2021-12", "2018-09" or "legacy". Defaults to "2018-09".

Selects the decorators proposal to use:

• "2022-03" is the proposal version that reached consensus for Stage 3 in the March 2022 TC39 meeting. You can read more about it at tc39/proposal-decorators@8ca65c046d.
• "2021-12" is the proposal version as it was presented to TC39 in Dec 2021. You can read more about it at tc39/proposal-decorators@d6c056fa06.
• "2018-09" is the proposal version that was initially promoted to Stage 2 presented to TC39 in Sept 2018. You can read more about it at tc39/proposal-decorators@7fa580b40f.
• legacy is the original Stage 1 proposal, defined at wycats/javascript-decorators@e1bf8d41bf.

⚠️ If you specify the decoratorsBeforeExport option, version defaults to "2018-09".

decoratorsBeforeExport

This option:

• is disallowed when using version: "legacy" or version: "2021-12";
• is required when using version: "2018-09";
• is optional and defaults to false when using version: "2021-12".

boolean

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

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

This option was added to help tc39 collect feedback from the community by allowing experimentation with both possible syntaxes. The proposal now settled on having decorators 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-proposal-class-properties

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

Wrong:

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }]
  ]
}

Right:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    "@babel/plugin-proposal-class-properties"
  ]
}

You can read more about configuring plugin options here

References

• Proposal: JavaScript Decorators