@babel/plugin-proposal-decorators

What is @babel/plugin-proposal-decorators?

The @babel/plugin-proposal-decorators package is a Babel plugin that enables the use of decorators, which are a stage 2 proposal for JavaScript. Decorators provide a way to add annotations and a meta-programming syntax for class declarations and members. Decorators can be used to modify classes, properties, methods, and accessors.

What are @babel/plugin-proposal-decorators's main functionalities?

Class Decorators

Class decorators are applied to the class and can be used to observe, modify, or replace a class definition. They can be used for logging, auto-binding, injecting dependencies, etc.

@decorator
class MyClass {}

function decorator(Class) {
  // Modify or wrap the class
  return modifiedClass;
}

Method Decorators

Method decorators are applied to methods of a class and can be used to observe, modify, or replace method definitions. This can be useful for debouncing, throttling, memoization, etc.

class MyClass {
  @decorator
  myMethod() {}
}

function decorator(target, name, descriptor) {
  // Modify or wrap the method
  return modifiedDescriptor;
}

Property Decorators

Property decorators are applied to class properties and can be used to modify the behavior of a property, such as by adding getters and setters, or by initializing with a default value.

class MyClass {
  @decorator
  myProperty;
}

function decorator(target, name) {
  // Modify or define property behavior
}

Accessor Decorators

Accessor decorators are applied to getters and setters and can be used to observe, modify, or replace accessors. This can be useful for validation, logging, etc.

class MyClass {
  _myValue;

  @decorator
  get myValue() {
    return this._myValue;
  }

  set myValue(value) {
    this._myValue = value;
  }
}

function decorator(target, name, descriptor) {
  // Modify or wrap the accessor
  return modifiedDescriptor;
}

Other packages similar to @babel/plugin-proposal-decorators

core-decorators

core-decorators is a library of decorators inspired by languages that include them from the start. It offers decorators like @readonly, @debounce, and @autobind, among others. Unlike @babel/plugin-proposal-decorators, which is a Babel plugin to transpile decorator syntax, core-decorators provides ready-to-use decorators for existing JavaScript code.

typescript

TypeScript is a superset of JavaScript that adds static types and has built-in support for decorators. TypeScript decorators are similar in concept to those in @babel/plugin-proposal-decorators, but they are built into the language and can be used without a separate Babel plugin. TypeScript decorators can be used for class, method, property, and accessor decoration, similar to @babel/plugin-proposal-decorators.

mobx

mobx is a state management library that makes use of decorators for observable properties, computed values, and reactions. The decorators provided by mobx, such as @observable and @computed, are specific to the library's reactivity system and are used to enhance the reactive programming experience. While @babel/plugin-proposal-decorators enables the decorator syntax, mobx provides specific decorators for its own ecosystem.

README

@babel/plugin-proposal-decorators

Compile class and object decorators to ES5

See our website @babel/plugin-proposal-decorators for more information.

Install

Using npm:

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

or using yarn:

yarn add @babel/plugin-proposal-decorators --dev