babel-plugin-transform-object-spread-inline

Transpiles object spread to fast inline code.

Installation:

npm install --save-dev babel-plugin-transform-object-spread-inline

Usage (via .babelrc)

{
    "plugins": [
        "transform-object-spread-inline"
    ]
}

What does it do?

Converts this kind of code:

a = { b, c, ...d, e, f: 42 };

To this:

"use strict";
var _keys,
    _l,
    _i,
    _source,
    _key,
    _result = {};
 
_result.b = b
_result.c = c
 
for (_source = d, _keys = Object.keys(_source), _l = _keys.length, _i = 0; _i < _l; _i++) {
  _key = _keys[_i];
  _result[_key] = _source[_key];
}
 
_result.e = e
_result.f = 42
a = _result;

Instead of:

"use strict";
 
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
a = _extends({ b: b, c: c }, d, { e: e, f: 42 });

(generated by babel-plugin-transform-object-rest-spread)

The first runs only one fast (because of Object.keys) loop with N iterations + inline assignments, the second runs the function which contains a loop (3 iterations), which runs another loop (2 + N + 2 iterations) which is slow because of for..in and hasOwnProperty.

The idea is very simple: every spread operator is converted to one for loop, and property listing is converted to simple assignments. When you have X spread operators per object, you get X loops, but usially only one spread operator is used in real world. Be careful and don't use too many spreads (otherwise don't use this plugin).

Warning: This plugin doesn't transpile object rest syntax.