babel-plugin-transform-class-properties

What is babel-plugin-transform-class-properties?

The babel-plugin-transform-class-properties package is a Babel plugin that allows you to use class properties in your JavaScript code. This plugin transforms class properties to be compatible with older JavaScript environments that do not support this feature natively.

What are babel-plugin-transform-class-properties's main functionalities?

Public Class Fields

This feature allows you to define public class fields directly within the class body. The plugin transforms this syntax to be compatible with older JavaScript environments.

class MyClass {
  myField = 'Hello, world!';
}

Static Class Fields

This feature allows you to define static class fields directly within the class body. Static fields are shared among all instances of the class. The plugin ensures this syntax works in environments that do not support it natively.

class MyClass {
  static myStaticField = 'Hello, static world!';
}

Instance Property Initialization

This feature allows you to initialize instance properties directly within the class body, making the code more concise and readable. The plugin transforms this syntax to be compatible with older JavaScript environments.

class MyClass {
  myField = 'Hello, world!';
  constructor() {
    console.log(this.myField);
  }
}

Other packages similar to babel-plugin-transform-class-properties

babel-plugin-transform-es2015-classes

The babel-plugin-transform-es2015-classes package transforms ES2015 class syntax to ES5. While it does not specifically focus on class properties, it is often used in conjunction with other plugins to achieve similar functionality.

README

babel-plugin-transform-class-properties

This plugin transforms es2015 static class properties as well as properties declared with the es2016 property initializer syntax.

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.prototype.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-transform-class-properties

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["transform-class-properties"]
}

// with options
{
  "plugins": [
    ["transform-class-properties", { "spec": true }]
  ]
}

Via CLI

babel --plugins transform-class-properties script.js

Via Node API

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

Options

spec

boolean, defaults to false.

Class properties are compiled to use Object.defineProperty. Static fields are now defined even if they are not initialized.

References

• Proposal: ES Class Fields & Static Properties