babel-plugin-transform-es2015-spread

A Babel plugin that transforms ES2015 (ES6) spread syntax into ES5-compatible code. It handles three main transformation scenarios: array expressions with spread elements, function calls with spread arguments, and constructor calls with spread arguments.

Package Information

• Package Name: babel-plugin-transform-es2015-spread
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev babel-plugin-transform-es2015-spread

Core Imports

The plugin is used as a Babel plugin configuration rather than being imported directly:

// Via .babelrc configuration
{
  "plugins": ["transform-es2015-spread"]
}

// Via .babelrc with options
{
  "plugins": [
    ["transform-es2015-spread", {
      "loose": true
    }]
  ]
}

// Via Node API
require("babel-core").transform("code", {
  plugins: ["transform-es2015-spread"]
});

Basic Usage

This plugin automatically transforms spread syntax during Babel compilation:

// Input ES2015 code with spread syntax
const arr1 = [1, 2, 3];
const arr2 = [0, ...arr1, 4]; // Array spread

function fn(a, b, c) {
  return a + b + c;
}
fn(...arr1); // Function call spread

class MyClass {
  constructor(a, b, c) {
    this.values = [a, b, c];
  }
}
new MyClass(...arr1); // Constructor spread

// Output ES5 compatible code (generated by plugin)
var arr1 = [1, 2, 3];
var arr2 = [0].concat(babelHelpers.toConsumableArray(arr1), [4]);

function fn(a, b, c) {
  return a + b + c;
}
fn.apply(undefined, babelHelpers.toConsumableArray(arr1));

var MyClass = function MyClass(a, b, c) {
  this.values = [a, b, c];
};
new (Function.prototype.bind.apply(MyClass, [null].concat(babelHelpers.toConsumableArray(arr1))))();

Plugin Factory Function

function pluginFactory({ types: t });

The main export is a plugin factory function that accepts Babel's types object and returns a plugin configuration.

Parameters:

• { types: t } - Babel types utility object for AST manipulation

Returns: Plugin configuration object with visitor methods

Plugin Configuration Options

loose

interface PluginOptions {
  loose?: boolean;
}

• Type: boolean
• Default: false
• Description: When true, assumes all iterables are arrays for more efficient transformations. In loose mode, the plugin generates direct array access instead of using the toConsumableArray helper, resulting in smaller and faster code but breaking ES6 semantics for non-array iterables.

Usage:

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

Loose Mode Output Comparison:

// Input
[...items]

// Strict mode (default)
[].concat(babelHelpers.toConsumableArray(items))

// Loose mode  
[].concat(items)

Babel Helpers

This plugin uses Babel's helper system to generate robust spread transformations. The key helper used is toConsumableArray:

// The toConsumableArray helper provides proper ES6 spread semantics
function toConsumableArray(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
      arr2[i] = arr[i];
    }
    return arr2;
  } else {
    return Array.from(arr);
  }
}

Helper Output Modes:

• With babel-plugin-external-helpers: Uses babelHelpers.toConsumableArray()
• Without external helpers: Inlines the helper function as _toConsumableArray

The helper ensures:

• Array.isArray() check for arrays vs iterables
• Proper copying of array elements to avoid mutations
• Array.from() fallback for non-array iterables (Sets, Maps, etc.)
• Full ES6 spread operator semantics

Transformation Capabilities

Array Expression Transformation

Transforms array expressions containing spread elements into ES5 concat operations with helper functions:

// Input
[a, ...b, c]

// Output  
[a].concat(babelHelpers.toConsumableArray(b), [c])

Function Call Transformation

Transforms function calls with spread arguments into ES5 apply calls with helper functions:

// Input
fn(...args)

// Output
fn.apply(undefined, babelHelpers.toConsumableArray(args))

// Input (method call)
obj.method(...args)  

// Output (preserves this context)
obj.method.apply(obj, babelHelpers.toConsumableArray(args))

Constructor Call Transformation

Transforms constructor calls with spread arguments using Function.prototype.bind.apply with helper functions:

// Input
new Constructor(...args)

// Output  
new (Function.prototype.bind.apply(Constructor, [null].concat(babelHelpers.toConsumableArray(args))))()

Plugin Visitor Methods

The plugin returns a Babel plugin configuration with the following visitor methods:

// Plugin returns an object with visitor methods
{
  visitor: {
    ArrayExpression(path, state) { /* transforms array expressions */ },
    CallExpression(path, state) { /* transforms function calls */ },
    NewExpression(path, state) { /* transforms constructor calls */ }
  }
}

// Plugin state object structure
{
  opts: {
    loose?: boolean
  }
}

ArrayExpression

Handles transformation of array expressions containing spread elements.

CallExpression

Handles transformation of function calls containing spread arguments. Skips super() calls which require special handling.

NewExpression

Handles transformation of constructor calls containing spread arguments.

Error Handling

The plugin safely handles edge cases:

• Skips transformation when no spread elements are present
• Handles super() calls appropriately by skipping them
• Manages method calls by preserving the correct this context
• Handles the special case of spreading the arguments object efficiently (uses direct arguments instead of toConsumableArray(arguments))
• Safely manages temporary variables to avoid context loss in complex expressions

Compatibility

This plugin is part of Babel 6.x and transforms ES2015 spread syntax to work in ES5 environments. It's designed for maximum compatibility when transpiling modern JavaScript to run in older environments that don't support native spread syntax.