babel-plugin-transform-es2015-computed-properties

Compile ES2015 computed properties to ES5

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-transform-es2015-computed-properties
6.24.16 years ago8 years agoMinified + gzip package size for babel-plugin-transform-es2015-computed-properties in KB

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
);