@babel/plugin-proposal-decorators

Example

(examples are from proposal)

Simple class decorator

  1. @annotation
  2. class MyClass { }
  4. function annotation(target) {
  5.    target.annotated = true;
  6. }

Class decorator

  1. @isTestable(true)
  2. class MyClass { }
  4. function isTestable(value) {
  5.    return function decorator(target) {
  6.       target.isTestable = value;
  7.    }
  8. }

Class function decorator

  1. class C {
  2.   @enumerable(false)
  3.   method() { }
  4. }
  6. function enumerable(value) {
  7.   return function (target, key, descriptor) {
  8.      descriptor.enumerable = value;
  9.      return descriptor;
  10.   }
  11. }

Installation

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

Usage

With a configuration file (Recommended)

  1. {
  2.   "plugins": ["@babel/plugin-proposal-decorators"]
  3. }

Via CLI

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

Via Node API

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

Options

decoratorsBeforeExport

boolean

  1. // decoratorsBeforeExport: false
  2. export @decorator class Bar {}
  4. // decoratorsBeforeExport: true
  5. @decorator
  6. 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:

  1. {
  2.   "plugins": [
  3.     "@babel/plugin-proposal-class-properties",
  4.     "@babel/plugin-proposal-decorators"
  5.   ]
  6. }

Right:

  1. {
  2.   "plugins": [
  3.     "@babel/plugin-proposal-decorators",
  4.     "@babel/plugin-proposal-class-properties"
  5.   ]
  6. }
  1. {
  2.   "plugins": [
  3.     ["@babel/plugin-proposal-decorators", { "legacy": true }],
  4.     ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  5.   ]
  6. }

You can read more about configuring plugin options here

References