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").transform("code", {
  plugins: ["@babel/plugin-proposal-decorators"]
});

Options

decoratorsBeforeExport

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.

For more information, check out: tc39/proposal-decorators#69.

legacy

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, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties.

When using the legacy: true mode, @babel/plugin-proposal-class-properties must be used in loose mode to support the @babel/plugin-proposal-decorators.

Wrong:

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

Right:

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

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

You can read more about configuring plugin options here

References

• Proposal: JavaScript Decorators