90a174e7c4
Fixes gh-8041 <!-- Before making a PR please make sure to read our contributing guidelines https://github.com/babel/babel/blob/master/CONTRIBUTING.md For issue references: Add a comma-separated list of a [closing word](https://help.github.com/articles/closing-issues-via-commit-messages/) followed by the ticket number fixed by the PR. It should be underlined in the preview if done correctly. --> | Q | A <!--(Can use an emoji 👍) --> | ------------------------ | --- | Fixed Issues? | #8041 | Patch: Bug Fix? |👍 | Major: Breaking Change? | | Minor: New Feature? | | Tests Added + Pass? | Yes | Documentation PR | <!-- If so, add `[skip ci]` to your commit message to skip CI --> | Any Dependency Changes? | | License | MIT <!-- Describe your changes below in as much detail as possible -->
@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"]
}
Via CLI
babel --plugins @babel/plugin-proposal-decorators script.js
Via Node API
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-proposal-decorators"]
});
Options
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 }]
]
}