or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Babel Plugin Transform ES2015 Arrow Functions

A Babel plugin that transforms ES2015 (ES6) arrow functions into ES5-compatible function expressions, enabling modern arrow function syntax to work in legacy environments while preserving semantic behavior including lexical this binding and non-constructible nature.

Package Information

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

Core Imports

// Import the plugin factory (default export)
const arrowFunctionsPlugin = require("babel-plugin-transform-es2015-arrow-functions");

For ES modules:

import arrowFunctionsPlugin from "babel-plugin-transform-es2015-arrow-functions";

Basic Usage

Via Babel Configuration (.babelrc)

{
  "plugins": ["transform-es2015-arrow-functions"]
}

With Options

{
  "plugins": [
    ["transform-es2015-arrow-functions", { "spec": true }]
  ]
}

Via Babel API

const babel = require("babel-core");

const result = babel.transform("const fn = () => {};", {
  plugins: ["transform-es2015-arrow-functions"]
});

Transformation Examples

Standard Mode (Default)

Input:

const greet = (name) => `Hello ${name}!`;
const numbers = [1,2,3].map(n => n * 2);

const obj = {
  name: "Bob",
  greet() {
    this.friends.forEach(friend => 
      console.log(`${this.name} greets ${friend}`)
    );
  }
};

Output:

const greet = function(name) {
  return `Hello ${name}!`;
};
const numbers = [1,2,3].map(function(n) {
  return n * 2;
});

const obj = {
  name: "Bob",
  greet: function greet() {
    var _this = this;
    this.friends.forEach(function(friend) {
      return console.log(`${_this.name} greets ${friend}`);
    });
  }
};

Spec Mode

Input:

const fn = () => this.value;

Output:

const fn = function() {
  babelHelpers.newArrowCheck(this, _this);
  return this.value;
}.bind(this);

Capabilities

Plugin Factory Function

The main export that creates a Babel plugin instance.

/**
 * Creates a Babel plugin for transforming arrow functions
 * @param {Object} api - Babel API object containing types and helpers
 * @param {Object} api.types - Babel types (t) for AST manipulation
 * @returns {Object} Babel plugin configuration with visitor pattern
 */
function arrowFunctionsPlugin({ types: t }): BabelPlugin;

Plugin Configuration Options

Controls how arrow functions are transformed.

interface PluginOptions {
  /**
   * Enable spec-compliant mode using .bind(this) instead of variable shadowing
   * @default false
   */
  spec?: boolean;
}

Babel Plugin Object

The returned plugin configuration object.

interface BabelPlugin {
  visitor: {
    /**
     * Visitor method that transforms arrow function expressions
     * @param path - Babel AST path object for the arrow function
     * @param state - Plugin state containing options and helpers
     */
    ArrowFunctionExpression(path: BabelPath, state: BabelState): void;
  };
}

Plugin Behavior Modes

Standard Mode (spec: false)

Method: Uses variable shadowing for this context
Performance: More efficient, simpler transformation
Output: Creates shadowed variables like var _this = this
Use Case: General purpose arrow function transformation

Spec Mode (spec: true)

Method: Uses .bind(this) calls for this binding
Compliance: More spec-compliant with ES6 arrow function behavior
Features:
- Prevents instantiation with new operator
- Adds runtime checks via babelHelpers.newArrowCheck
- Preserves exact this binding semantics
Use Case: When strict ES6 compliance is required

Types

interface BabelPath {
  /** The AST node being visited */
  node: ArrowFunctionExpression;
  /** Replaces the current node with a new node */
  replaceWith(node: any): void;
  /** Ensures the arrow function has a block statement body */
  ensureBlock(): void;
  /** Gets a child path by property name */
  get(property: string): BabelPath;
  /** Transforms arrow function using built-in shadowing method */
  arrowFunctionToShadowed(): void;
}

interface BabelState {
  /** Plugin configuration options */
  opts: PluginOptions;
  /** Adds a helper function and returns its identifier */
  addHelper(name: string): any;
}

interface ArrowFunctionExpression {
  /** AST node type */
  type: "ArrowFunctionExpression" | "FunctionExpression";
  /** Shadow information for this binding */
  shadow?: { this: boolean };
}