@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.22.0 (2023-05-26)

:rocket: New Feature

• babel-parser, babel-plugin-transform-typescript
  • #15497 [ts] Support import ... = and export = in scripts (@nicolo-ribaudo)
• babel-compat-data, babel-core, babel-plugin-proposal-unicode-sets-regex, babel-plugin-transform-unicode-sets-regex, babel-preset-env, babel-standalone
  • #15636 Add unicode-sets-regex transform to preset-env (@JLHwung)
• babel-helpers, babel-plugin-proposal-explicit-resource-management, babel-plugin-transform-runtime, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime, babel-standalone
  • #15633 Implement transform support for using declarations (@nicolo-ribaudo)
• babel-plugin-proposal-import-attributes-to-assertions
  • #15620 Create @babel/plugin-proposal-import-attributes-to-assertions (@nicolo-ribaudo)
• babel-core, babel-generator, babel-parser, babel-plugin-syntax-import-attributes, babel-preset-env, babel-standalone, babel-types
  • #15536 Add support for the updated import attributes proposal (@nicolo-ribaudo)
• babel-generator, babel-parser, babel-traverse, babel-types
  • #15520 Parse await using declarations (@JLHwung)
• babel-core, babel-helper-create-regexp-features-plugin, babel-parser
  • #15638 Enable regexp unicode sets parsing by default (@JLHwung)
• babel-helpers, babel-plugin-proposal-decorators, babel-plugin-syntax-decorators, babel-runtime-corejs2, babel-runtime-corejs3, babel-runtime
  • #15570 Add decorators version 2023-05 (@nicolo-ribaudo)

:nail_care: Polish

• babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-jsx, babel-traverse, babel-types
  • #15549 Improve type definitions for validators (@liuxingbaoyu)

:house: Internal

• babel-parser
  • #15630 Unify parsing of import/export modifiers (type/typeof/module) (@nicolo-ribaudo)
• babel-compat-data, babel-helper-transform-fixture-test-runner, babel-node, babel-plugin-proposal-decorators, babel-plugin-proposal-duplicate-named-capturing-groups-regex, babel-plugin-transform-async-generator-functions, babel-plugin-transform-named-capturing-groups-regex, babel-plugin-transform-runtime, babel-preset-env, babel-runtime-corejs3
  • #15531 Allow polyfill providers to specify custom @babel/runtime pkg (@nicolo-ribaudo)
• babel-core, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-properties, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-dynamic-import, babel-plugin-proposal-export-namespace-from, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-logical-assignment-operators, babel-plugin-proposal-nullish-coalescing-operator, babel-plugin-proposal-numeric-separator, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-catch-binding, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-methods, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-unicode-property-regex, babel-preset-env, babel-standalone
  • #15614 Rename -proposal-s that became standard to -transform- (@nicolo-ribaudo)