babel-plugin-transform-object-spread-inline v0.0.3
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.