@babel/plugin-proposal-class-properties

What is @babel/plugin-proposal-class-properties?

The @babel/plugin-proposal-class-properties package is a Babel plugin that allows you to use the class properties syntax in JavaScript. This syntax is part of a proposal for ECMAScript and has not been finalized yet, but this plugin lets you use it with Babel to compile your code to a version of JavaScript that is compatible with current environments. It supports both static and instance properties, as well as public and private fields.

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

Static Class Properties

Allows you to define static properties on a class, which are properties that are accessed on the class itself, not on instances of the class.

class MyClass {\n  static myStaticProp = 42;\n}

Instance Class Properties

Enables you to define properties directly on class instances, with an initial value, without needing to set them inside the class constructor.

class MyClass {\n  myInstanceProp = 'default value';\n}

Public Class Fields

Supports the declaration of public fields in a class, which are accessible from outside of the class.

class MyClass {\n  publicField = 'some value';\n}

Private Class Fields

Allows the definition of private fields in a class, which are only accessible within the class itself using the '#' syntax.

class MyClass {\n  #privateField = 'hidden value';\n}

Other packages similar to @babel/plugin-proposal-class-properties

@babel/plugin-proposal-private-methods

This package is similar to @babel/plugin-proposal-class-properties but focuses on adding support for private methods and accessors in classes. It allows you to define methods that can only be called from within the class itself.

@babel/plugin-proposal-decorators

This package provides functionality for decorators, which are a stage 2 proposal for JavaScript. Decorators are a way to modify classes or properties at design time. While not directly related to class properties, decorators often work in conjunction with them to add annotations or modify class behavior.

@babel/plugin-transform-classes

This package transforms ES2015 classes to ES5, which is a broader transformation that includes but is not limited to class properties. It's more comprehensive in terms of class-related transformations but does not specifically target the class properties proposal.

README

@babel/plugin-proposal-class-properties

This plugin transforms class properties

Example

Below is a class with four class properties which will be transformed.

  class Bork {
    //Property initializer syntax
    instanceProperty = "bork";
    boundFunction = () => {
      return this.instanceProperty;
    };

    //Static class properties
    static staticProperty = "babelIsCool";
    static staticFunction = function() {
      return Bork.staticProperty;
    };
  }

  let myBork = new Bork;

  //Property initializers are not on the prototype.
  console.log(myBork.__proto__.boundFunction); // > undefined

  //Bound functions are bound to the class instance.
  console.log(myBork.boundFunction.call(undefined)); // > "bork"

  //Static function exists on the class.
  console.log(Bork.staticFunction()); // > "babelIsCool"

Installation

npm install --save-dev @babel/plugin-proposal-class-properties

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

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

With options:

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

Via CLI

babel --plugins @babel/plugin-proposal-class-properties script.js

Via Node API

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

Options

loose

boolean, defaults to false.

When true, class properties are compiled to use an assignment expression instead of Object.defineProperty.

Example

  class Bork {
    static a = 'foo';
    static b;

    x = 'bar';
    y;
  }

Without { "loose": true }, the above code will compile to the following, using Object.defineProperty:

var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  Object.defineProperty(this, "x", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: 'bar'
  });
  Object.defineProperty(this, "y", {
    configurable: true,
    enumerable: true,
    writable: true,
    value: void 0
  });
};

Object.defineProperty(Bork, "a", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: 'foo'
});
Object.defineProperty(Bork, "b", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: void 0
});

However, with { "loose": true }, it will compile using assignment expressions:

var Bork = function Bork() {
  babelHelpers.classCallCheck(this, Bork);
  this.x = 'bar';
  this.y = void 0;
};

Bork.a = 'foo';
Bork.b = void 0;

References

• Proposal: ES Class Fields & Static Properties