babel-plugin-transform-decorators

babel-plugin-transform-decorators

Compile class and object decorators to ES5

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-transform-decorators

Usage

Add the following line to your .babelrc file:

{
  "plugins": ["transform-decorators"]
}

NOTE: Order of Plugins Matters!

If you are including your plugins manually and using transform-class-properties, make sure that transform-decorators comes before transform-class-properties.

Wrong:

{
  "plugins": [
    "transform-class-properties",
    "transform-decorators"
  ]
}

Right:

{
  "plugins": [
    "transform-decorators",
    "transform-class-properties"
  ]
}

Via CLI

babel --plugins transform-decorators script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-decorators"]
});

References

• Proposal: Javascript Decorators