node package manager

babel-plugin-transform-class-properties

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

Unleash awesomeness

Private packages, team management tools, and powerful integrations. Get started with npm Orgs

how? learn more

Collaborators list

Stats

Try it out

Keywords

babel-plugin

Dependencies (4)

babel-helper-function-name, babel-plugin-syntax-class-properties, babel-runtime, babel-template

Dependents (1247)

eu-cookie-consent-script, react-guru, testcafe, musefind-babel-preset-react-app, pragmatist, webappatron, babel-preset-react-app-rollup, babel-preset-es-uxtemple-modern, babel-preset-waat, babel-preset-stage0-node4, babel-preset-darylthayil, react-sapling, babel-preset-fbjs, @andyhite/babel-preset-react-app, react-shower, babel-preset-modern-browsers-stage-1, @niftyco/babel-node, babel-preset-meepshop, babel-preset-labs42, smarthouse-frontend, ch-scripts, goomap, react-scripts-fork, hmr-scss-react-scripts, feeble-scripts, react-scripts-flipjs, babel-preset-febone, gluten, Create-React-App-SCSS-HMR, dc-react-scripts, babel-preset-opencollective-webpack, hogan-cache, babel-preset-cs-common, react-zoomify, skypager-scripts, uba-scripts, @elastic/babel-preset-kibana, react-redux-scripts, babel-plugin-ng-annotate-2, preact-scripts, babel-preset-mahalo, babel-preset-eversports, snorkel-scripts, babel-preset-benzinga-webpack, react-material-ui-multiselect, gourmet-babel-processor, babel-preset-atomtech, stack-es2015-modules, create-redux-app, christophior-react-scripts, and more