@babel/plugin-transform-class-properties

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

The @babel/plugin-transform-class-properties npm package allows developers to use the class properties syntax in JavaScript. It transforms static and instance properties so that they can be used in environments that do not support this feature natively.

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

Static Class Properties

This feature allows you to define static properties on a class, which are properties that belong to the class itself rather than to instances of the class.

class MyClass { static myStaticProp = 42; }

Instance Class Properties

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

class MyClass { myInstanceProp = 'default value'; }

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

@babel/plugin-proposal-class-properties

This package is a successor to @babel/plugin-transform-class-properties and includes the proposal for class properties as it moves through the TC39 process. It offers similar functionality but aligns with the latest proposal spec.

@babel/plugin-proposal-private-methods

While not identical, this package provides functionality for handling private methods and accessors in classes, which is related to the class fields feature that @babel/plugin-transform-class-properties handles.

@babel/preset-env

This package includes @babel/plugin-transform-class-properties as one of the plugins it might use to transform code. It provides a broader range of transformations based on the target environment's ECMAScript feature support.

README

@babel/plugin-transform-class-properties

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

See our website @babel/plugin-transform-class-properties for more information.

Install

Using npm:

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

or using yarn:

yarn add @babel/plugin-transform-class-properties --dev

Changelog

v7.25.4 (2024-08-22)

:bug: Bug Fix

• babel-traverse
  • #16756 fix: Skip computed key when renaming (@liuxingbaoyu)
• babel-helper-create-class-features-plugin, babel-plugin-proposal-decorators
  • #16755 fix: Decorator 2018-09 may throw an exception (@liuxingbaoyu)
• babel-types
  • #16710 Visit AST fields nodes according to their syntactical order (@nicolo-ribaudo)
• babel-generator
  • #16709 Print semicolon after TS export namespace as A (@nicolo-ribaudo)

:nail_care: Polish

• babel-generator, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-pipeline-operator, babel-plugin-transform-class-properties, babel-plugin-transform-destructuring, babel-plugin-transform-optional-chaining, babel-plugin-transform-private-methods, babel-plugin-transform-private-property-in-object, babel-plugin-transform-typescript, babel-runtime-corejs2, babel-runtime, babel-traverse
  • #16722 Avoid unnecessary parens around sequence expressions (@nicolo-ribaudo)
• babel-generator, babel-plugin-transform-class-properties
  • #16714 Avoid unnecessary parens around exported arrow functions (@nicolo-ribaudo)
• babel-generator, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-transform-object-rest-spread
  • #16712 Avoid printing unnecessary parens around object destructuring (@nicolo-ribaudo)

:microscope: Output optimization

• babel-generator
  • #16740 Avoid extra spaces between comments/regexps in compact mode (@nicolo-ribaudo)