W3cubDocs

/Babel 7

@babel/plugin-transform-computed-properties

NOTE: This plugin is included in @babel/preset-env

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
  • Yarn
  • pnpm
npm install --save-dev @babel/plugin-transform-computed-properties

Usage​

Without options:

{
  "plugins": ["@babel/plugin-transform-computed-properties"]
}

With options:

{
  "plugins": [
    [
      "@babel/plugin-transform-computed-properties",
      {
        "loose": true
      }
    ]
  ]
}

Via CLI​ 

babel --plugins @babel/plugin-transform-computed-properties script.js

Via Node API​ 

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-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.

⚠️ Consider migrating to the top level setComputedProperties assumption.

{
  "assumptions": {
    "setComputedProperties": true
  }
}

Example​

In

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

Out

When setComputedProperties is true.

var _obj;

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

When setComputedProperties is false.

import _defineProperty from "@babel/runtime/helpers/defineProperty";

var _obj;

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

You can read more about configuring plugin options here

© 2014-present Sebastian McKenzie
Licensed under the MIT License.
https://babeljs.io/docs/babel-plugin-transform-computed-properties/