babel-plugin-transform-es2015-function-name

A Babel plugin that applies ES2015 function.name semantics to all functions. This plugin transforms anonymous function expressions and object methods to ensure they receive proper name properties as specified by the ES2015 standard.

Package Information

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

Core Imports

This plugin is imported and used by Babel internally. Users configure it through Babel's plugin system:

// Plugin is loaded by Babel - no user imports required
// Configured via .babelrc, CLI, or Node API as shown below

Basic Usage

Via .babelrc (Recommended)

{
  "plugins": ["transform-es2015-function-name"]
}

Via CLI

babel --plugins transform-es2015-function-name script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es2015-function-name"]
});

Architecture

This plugin uses Babel's visitor pattern to traverse the Abstract Syntax Tree (AST) and apply function name transformations. It consists of:

• Plugin Factory Function: Main export that returns a Babel plugin configuration
• Visitor Object: Defines AST node handlers for FunctionExpression and ObjectProperty
• Function Name Helper: Uses babel-helper-function-name for actual name application

Capabilities

Plugin Factory Function

Creates and returns a Babel plugin configuration object that implements the ES2015 function.name semantics.

import nameFunction from "babel-helper-function-name";

/**
 * Main plugin factory function (default export)
 * @returns {Object} Babel plugin configuration object with visitor methods
 */
export default function () {
  return {
    visitor: {
      FunctionExpression: {
        exit(path) {
          if (path.key !== "value" && !path.parentPath.isObjectProperty()) {
            const replacement = nameFunction(path);
            if (replacement) path.replaceWith(replacement);
          }
        }
      },
      ObjectProperty(path) {
        const value = path.get("value");
        if (value.isFunction()) {
          const newNode = nameFunction(value);
          if (newNode) value.replaceWith(newNode);
        }
      }
    }
  };
}

The plugin transforms code by:

1. Function Expression Naming: The FunctionExpression.exit visitor applies names to anonymous function expressions based on their assignment context. It excludes function expressions that are object property values (handled separately) or already have appropriate context.

2. Object Method Naming: The ObjectProperty visitor handles object property functions, checking if the property value is a function and applying appropriate naming using the babel-helper-function-name utility.

Both visitor methods use the nameFunction helper from babel-helper-function-name to perform the actual AST transformations.

Visitor Methods

FunctionExpression Exit Handler

/**
 * Handles function expression nodes when exiting during AST traversal
 * Applies function naming only to appropriate contexts (not object property values)
 */
FunctionExpression: {
  exit(path) {
    // Skips if function is an object property value or has inappropriate context
    if (path.key !== "value" && !path.parentPath.isObjectProperty()) {
      const replacement = nameFunction(path);
      if (replacement) path.replaceWith(replacement);
    }
  }
}

ObjectProperty Handler

/**
 * Handles object property nodes to apply naming to method functions
 * Checks if property value is a function and applies naming transformation
 */
ObjectProperty(path) {
  const value = path.get("value");
  if (value.isFunction()) {
    const newNode = nameFunction(value);
    if (newNode) value.replaceWith(newNode);
  }
}

Transformation Examples

Function Expression Assignment:

Input:

var myFunc = function () {
  return 'hello';
};

Output:

var _myFunc = function myFunc() {
  return 'hello';
};

Object Property Function:

Input:

var obj = {
  method: function () {
    return 'method';
  }
};

Output:

var obj = {
  method: function method() {
    return 'method';
  }
};

Complex Assignment Scenarios:

Input:

var i = function () {
  i = 5;
};

var j = function () {
  ({ j } = 5);
  ({ y: j } = 5);
};

Output:

var _i = function i() {
  _i = 5;
};

var _j = function j() {
  ({ j: _j } = 5);
  ({ y: _j } = 5);
};

Export Function Naming with Conflicts:

Input:

export function foo(bar) {

}

var bar = {
  foo: function () {
    foo;
  }
};

Output:

export { _foo as foo };
function _foo(bar) {}

var bar = {
  foo: function foo() {
    _foo;
  }
};

Helper Functions

The plugin utilizes the nameFunction helper from babel-helper-function-name to perform the actual function naming transformations.

/**
 * Applies function naming based on context (imported from babel-helper-function-name)
 * @param {NodePath} path - Babel AST node path containing function to be named
 * @returns {Node|null} - New AST node with applied function name, or null if no change needed
 */
function nameFunction(path: NodePath): Node | null;

Types

/**
 * Babel AST node path interface (from babel-types)
 */
interface NodePath {
  key: string;
  node: Node;
  parentPath: NodePath;
  get(key: string): NodePath;
  isFunction(): boolean;
  replaceWith(node: Node): void;
  isObjectProperty(): boolean;
}

/**
 * Babel AST node interface (from babel-types)
 */
interface Node {
  type: string;
}

Dependencies

The plugin requires the following dependencies:

• babel-helper-function-name: ^6.24.1 - Provides the core function naming functionality
• babel-types: ^6.24.1 - Babel's AST node type definitions
• babel-runtime: ^6.22.0 - Babel runtime helpers for compiled output

Configuration

This plugin accepts no configuration options. It automatically applies ES2015 function.name semantics to all eligible functions in the codebase.

Compatibility

• Babel Version: 6.x
• Node.js: Compatible with Node.js versions that support Babel 6.x
• ES2015 Compliance: Implements the ES2015 specification for function.name property
• Integration: Works with all standard Babel presets and other plugins

Use Cases

This plugin is essential for:

• ES2015 Compliance: Ensuring your transpiled code follows ES2015 function.name semantics
• Debugging: Named functions provide better stack traces and debugging experience
• Framework Compatibility: Some frameworks and libraries rely on proper function naming
• Legacy Code: Updating older codebases to modern ES2015 standards