babel/packages/babel-plugin-proposal-decorators
Markus Török 6597a472b3 Add "use strict" directive (#7411)
* #7349
- Add "use strict" directive to transformed class bodies

* Update tests (#7349)

* Add test for program with use strict directive (#7349)

* Update tests (#7349)

* Update source mapping (#7349)

* Add test for parent blockStatement with use strict directive (#7349)

* Update tests (#7349)

* Update tests (#7349)

* Update tests (#7349)

* Add test for constructor-only class (#7349)

* Constructor only classes are strict, too

But constructor only that use non-simple parameters must use a strict function wrapper.

* Fix test

* Wrapper not needed if class is already strict

* Revert change to lerna.json
2018-04-10 17:33:38 -04:00
..
2018-04-10 17:33:38 -04:00
2018-04-02 18:19:30 -04:00

@babel/plugin-proposal-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-proposal-decorators

Usage

Add the following line to your .babelrc file:

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

NOTE: Order of Plugins Matters!

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.

Currently, @babel/plugin-proposal-class-properties must be used in loose mode to support the @babel/plugin-proposal-decorators. To use @babel/plugin-proposal-class-properties in spec mode with decorators, wait for the next major version of decorators (Stage 2).

Wrong:

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

Right:

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

Via CLI

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

Via Node API

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

References