@babel/plugin-proposal-decorators · Babel (original) (raw)

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
• Yarn
• pnpm
• Bun

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

Usage​

With a configuration file (Recommended)​

babel.config.json

{

  "plugins": [

    ["@babel/plugin-proposal-decorators", { "version": "2023-11" }]

  ]

}

Via Node API​

JavaScript

require("@babel/core").transformSync("code", {

  plugins: [

    ["@babel/plugin-proposal-decorators", { version: "2023-11" }],

  ]

});

Options​

History

version​

"2023-11" or "legacy".

Selects the decorators proposal to use:

• "2023-11" is the proposal version after the updates that reached consensus in the November 2023 TC39 meeting. This version will be enabled by default if it ends up being the final one. It allows decorators either before or after export.
• legacy is the legacy Stage 1 proposal, defined at wycats/javascript-decorators@e1bf8d41bf. The legacy mode will not have feature updates, and there are known discrepancies between Babel and TypeScript. It is recommended to migrate to the "2023-11" proposal version.

When using decorators which either access or modify the metadata in the decorator context, you need to use Symbol.metadata. When Symbol.metadata is not available, Babel defaults to Symbol.for("Symbol.metadata"): this may be incompatible with other packages that use a different fallback.

To ensure that Symbol.metadata is available globally and matches the symbol used by the Babel decorators plugin during transpilation, you will need to either include a polyfill that defines it, or define it yourself:

symbol-metadata-polyfill.js

Symbol.metadata = Symbol.for("Symbol.metadata");

You can also use a third-party polyfill, such as core-js/proposals/decorator-metadata-v2.js. Make sure that the polyfill is executed before any code that uses decorators or accesses Symbol.metadata.

References​

• Proposal: JavaScript Decorators