or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Babel Plugin Transform For-Of

@babel/plugin-transform-for-of is a Babel plugin that compiles ES2015 for...of statements into ES5-compatible code. It provides optimized transformations with various options for different scenarios, from simple array iteration to complex iterator protocol handling.

Package Information

Package Name: @babel/plugin-transform-for-of
Package Type: npm (Babel Plugin)
Language: TypeScript
Installation: npm install --save-dev @babel/plugin-transform-for-of

Core Imports

The plugin is primarily used through Babel configuration:

{
  "plugins": ["@babel/plugin-transform-for-of"]
}

For programmatic usage with Babel:

import * as babel from "@babel/core";
import forOfPlugin from "@babel/plugin-transform-for-of";

const result = babel.transformSync(code, {
  plugins: [forOfPlugin]
});

CommonJS usage:

const babel = require("@babel/core");
const forOfPlugin = require("@babel/plugin-transform-for-of").default;

const result = babel.transformSync(code, {
  plugins: [forOfPlugin]
});

Basic Usage

Babel Configuration

{
  "plugins": [
    ["@babel/plugin-transform-for-of", {
      "loose": false,
      "assumeArray": false,
      "allowArrayLike": false
    }]
  ]
}

Code Transformation Example

Input ES2015 code:

for (const item of items) {
  console.log(item);
}

Output ES5 code (default mode):

var _iterator = createForOfIteratorHelper(items);
try {
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
    var item = _step.value;
    console.log(item);
  }
} catch (err) {
  _iterator.e(err);
} finally {
  _iterator.f();
}

Architecture

The plugin implements different transformation strategies based on configuration and Babel assumptions:

Iterator Protocol Mode (default): Full ES2015 compliance with proper error handling and iterator closing
Array Optimization Mode: When arrays are assumed, generates simple for-loops for better performance
Loose Mode: Simplified transformations without complete error handling for smaller output
Array-like Support: Extends iteration support to objects with length property (like NodeList)
Assumption Integration: Leverages Babel's assumption system for fine-grained optimization control

Capabilities

Plugin Factory Function

The main plugin export that creates a Babel plugin instance.

/**
 * Main plugin export - Babel plugin that transforms for-of statements
 * @param options - Plugin configuration options
 * @returns Babel plugin instance
 */
function transformForOfPlugin(options?: Options): BabelPlugin;

export default transformForOfPlugin;

/**
 * Babel plugin interface
 */
interface BabelPlugin {
  name: "transform-for-of";
  visitor: {
    ForOfStatement(path: any): void;
  };
}

Plugin Options

Configuration interface for customizing plugin behavior.

/**
 * Configuration options for the for-of transform plugin
 */
interface Options {
  /** Allow array-like objects to be iterated with optimized code */
  allowArrayLike?: boolean;
  /** Assume the iterable is always an array for maximum optimization */
  assumeArray?: boolean;
  /** Use loose mode transformation (less spec-compliant but simpler output) */
  loose?: boolean;
}

export { Options };

Transformation Modes

Standard Mode (Default)

Full ES2015 spec compliance with iterator protocol and proper error handling:

// Input
for (const item of items) {
  console.log(item);
}

// Output
var _iterator = createForOfIteratorHelper(items);
try {
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
    var item = _step.value;
    console.log(item);
  }
} catch (err) {
  _iterator.e(err);
} finally {
  _iterator.f();
}

Array Assumption Mode

When assumeArray: true, generates optimized array loops:

// Input
for (const item of items) {
  console.log(item);
}

// Output
for (var _i = 0, _items = items; _i < _items.length; _i++) {
  var item = _items[_i];
  console.log(item);
}

Loose Mode

When loose: true, generates simplified code without full error handling:

// Input  
for (const item of items) {
  console.log(item);
}

// Output
for (var _iterator = createForOfIteratorHelperLoose(items), _step; 
     !(_step = _iterator()).done;) {
  var item = _step.value;
  console.log(item);
}

Array-Like Mode

When allowArrayLike: true, supports array-like objects with iterator helpers:

// Handles objects like NodeList, arguments, etc.
// Uses createForOfIteratorHelper with array-like support

Babel Assumptions Integration

The plugin integrates with Babel's assumption system:

/**
 * Babel assumptions that affect plugin behavior
 */
interface BabelAssumptions {
  /** Equivalent to assumeArray option */
  iterableIsArray?: boolean;
  /** Equivalent to allowArrayLike option */
  arrayLikeIsIterable?: boolean;
  /** Equivalent to loose option */
  skipForOfIteratorClosing?: boolean;
}

Configuration with assumptions:

{
  "assumptions": {
    "iterableIsArray": true,
    "skipForOfIteratorClosing": false
  },
  "plugins": ["@babel/plugin-transform-for-of"]
}

Error Handling

The plugin validates option combinations and throws errors for invalid configurations:

/**
 * Plugin validation errors for invalid option combinations
 */
type PluginError = 
  | "The loose and assumeArray options cannot be used together"
  | "The assumeArray and allowArrayLike options cannot be used together"
  | "The iterableIsArray and arrayLikeIsIterable assumptions are not compatible"
  | "The allowArrayLike is only supported when using @babel/core@^7.10.0";

Invalid Combinations:

loose: true with assumeArray: true
assumeArray: true with allowArrayLike: true
iterableIsArray assumption with arrayLikeIsIterable assumption

Dependencies

Runtime Dependencies

/**
 * Required dependencies for the plugin
 */
interface RuntimeDependencies {
  "@babel/helper-plugin-utils": "workspace:^";
  "@babel/helper-skip-transparent-expression-wrappers": "workspace:^";
}

/**
 * Peer dependencies required for plugin operation
 */
interface PeerDependencies {
  "@babel/core": "^7.0.0-0";
}

Advanced Configuration Examples

Production Optimization

{
  "plugins": [
    ["@babel/plugin-transform-for-of", {
      "assumeArray": true
    }]
  ]
}

Legacy Environment Support

{
  "plugins": [
    ["@babel/plugin-transform-for-of", {
      "loose": true
    }]
  ]
}

Dom Collection Support

{
  "plugins": [
    ["@babel/plugin-transform-for-of", {
      "allowArrayLike": true
    }]
  ]
}

Combined with Babel Assumptions

{
  "assumptions": {
    "iterableIsArray": false,
    "arrayLikeIsIterable": true,
    "skipForOfIteratorClosing": false
  },
  "plugins": ["@babel/plugin-transform-for-of"]
}