@babel/plugin-proposal-decorators
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").transformSync("code", { plugins: ["@babel/plugin-proposal-decorators"], });
Options
decoratorsBeforeExport
boolean
History
Version | Changes |
---|---|
v7.2.0 |
decoratorsBeforeExport must be specified. Before that it defaults to false |
// 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, the setPublicClassFields
assumption must be enabled 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" ] }
{ "assumptions": { "setPublicClassFields": true }, "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties"] ] }
You can read more about configuring plugin options here