babel-plugin-transform-es2015-computed-properties

What is babel-plugin-transform-es2015-computed-properties?

The babel-plugin-transform-es2015-computed-properties npm package is a plugin for Babel that allows the transformation of computed property names in objects from ES2015/ES6 syntax to a compatible ES5 format. This is particularly useful for developers targeting environments that do not fully support ES2015 syntax, ensuring that codebases using computed properties remain compatible and functional.

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

Transformation of computed properties

This feature allows the transformation of ES2015 computed property names into a format that can be understood by older JavaScript engines. It converts object literals with computed properties using square bracket notation into a series of statements that define each property explicitly.

{
  const property = 'foo';
  const obj = {
    [property]: 'bar'
  };
  // Transforms to:
  // var obj = {};
  // obj[property] = 'bar';
}

Other packages similar to babel-plugin-transform-es2015-computed-properties

@babel/plugin-transform-computed-properties

This package is a part of the Babel ecosystem and serves a similar purpose as babel-plugin-transform-es2015-computed-properties, transforming computed property names in objects. It is more up-to-date and maintained as part of the broader Babel 7 release, making it a more suitable choice for projects that are using the latest versions of Babel.

babel-plugin-transform-es3-member-expression-literals

While not identical in functionality, this plugin transforms member expressions to be compatible with ES3, similar to how babel-plugin-transform-es2015-computed-properties makes computed properties compatible with ES5. It focuses on ensuring that property names that are reserved words in ES3 are quoted, which is somewhat analogous to handling computed properties.

README

babel-plugin-transform-es2015-computed-properties

Compile ES2015 computed properties to ES5

Example

In

var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar"
};

Out

var _obj;

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var obj = (
  _obj = {},
  _defineProperty(_obj, "x" + foo, "heh"),
  _defineProperty(_obj, "y" + bar, "noo"),
  _defineProperty(_obj, "foo", "foo"),
  _defineProperty(_obj, "bar", "bar"),
  _obj
);

Installation

npm install --save-dev babel-plugin-transform-es2015-computed-properties

Usage

Via .babelrc (Recommended)

.babelrc

Without options:

{
  "plugins": ["transform-es2015-computed-properties"]
}

With options:

{
  "plugins": [
    ["transform-es2015-computed-properties", {
      "loose": true
    }]
  ]
}

Via CLI

babel --plugins transform-es2015-computed-properties script.js

Via Node API

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

Options

loose

boolean, defaults to false

Just like method assignment in classes, in loose mode, computed property names use simple assignments instead of being defined. This is unlikely to be an issue in production code.

Example

In

var obj = {
  ["x" + foo]: "heh",
  ["y" + bar]: "noo",
  foo: "foo",
  bar: "bar"
};

Out

var _obj;

var obj = (
  _obj = {},
  _obj["x" + foo] = "heh",
  _obj["y" + bar] = "noo",
  _obj.foo = "foo",
  _obj.bar = "bar",
  _obj
);