babel-plugin-transform-es3-member-expression-literals

A Babel plugin that transforms JavaScript member expressions to ensure ES3 compatibility by converting dot notation property accesses that use reserved words or invalid identifiers into bracket notation with string literals.

Package Information

• Package Name: babel-plugin-transform-es3-member-expression-literals
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev babel-plugin-transform-es3-member-expression-literals

Core Imports

The plugin is imported as a default export:

import babelPluginTransformEs3MemberExpressionLiterals from "babel-plugin-transform-es3-member-expression-literals";

For CommonJS:

const babelPluginTransformEs3MemberExpressionLiterals = require("babel-plugin-transform-es3-member-expression-literals");

Basic Usage

The plugin is typically used through Babel configuration rather than direct import:

Via .babelrc (Recommended):

{
  "plugins": ["transform-es3-member-expression-literals"]
}

Via Babel CLI:

babel --plugins transform-es3-member-expression-literals script.js

Via Node API:

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

const result = babel.transform(code, {
  plugins: ["transform-es3-member-expression-literals"]
});

Transformation Example:

// Input
foo.catch;
foo.default;
obj.class;

// Output
foo["catch"];
foo["default"];
obj["class"];

Architecture

The plugin implements the standard Babel plugin architecture:

• Plugin Factory Function: Returns a Babel plugin configuration object
• Visitor Pattern: Uses AST visitor to traverse and transform member expressions
• AST Transformation: Modifies the Abstract Syntax Tree to change property access patterns
• ES3 Compatibility: Specifically targets reserved words and invalid identifiers in ES3

Capabilities

Plugin Factory Function

The main export is a Babel plugin factory function that creates the plugin configuration.

/**
 * Babel plugin factory function that creates ES3 member expression transformation plugin
 * @param {Object} context - Babel plugin context
 * @param {Object} context.types - Babel types utility (aliased as 't')
 * @returns {BabelPlugin} Plugin configuration object with visitor pattern
 */
export default function ({ types: t }) { ... }

interface BabelPlugin {
  visitor: {
    MemberExpression: {
      exit: Function;
    };
  };
}

Member Expression Visitor

The plugin implements a visitor for MemberExpression AST nodes that transforms dot notation to bracket notation when necessary.

/**
 * AST visitor exit handler for MemberExpression nodes
 * Transforms dot notation member expressions using invalid ES3 identifiers
 * @param {Object} context - Visitor context
 * @param {MemberExpression} context.node - The member expression AST node
 */
visitor: {
  MemberExpression: {
    exit({ node }) {
      // Implementation transforms dot notation to bracket notation
      // for invalid ES3 identifiers
    }
  }
}

Transformation Logic

The plugin performs the following transformation logic:

1. Dot Notation Check: Only processes non-computed member expressions (!node.computed)
2. Identifier Validation: Checks if the property is an identifier (t.isIdentifier(prop))
3. ES3 Validation: Verifies if the identifier is invalid in ES3 (!t.isValidIdentifier(prop.name))
4. AST Modification: Converts to bracket notation by:
   • Setting node.property = t.stringLiteral(prop.name)
   • Setting node.computed = true

Examples of transformed identifiers:

• ES3 reserved words that cause syntax errors: catch, class, default, enum, export, import, super
• ES5/ES6 reserved words that are invalid identifiers in ES3: let, const, static
• Future reserved words in strict mode: implements, interface, package, private, protected, public

Types

interface MemberExpression {
  /** The object being accessed (e.g., 'foo' in 'foo.bar') */
  object: Expression;
  /** The property being accessed (e.g., 'bar' in 'foo.bar') */
  property: Identifier | Expression;
  /** Whether the property access uses bracket notation */
  computed: boolean;
}

interface Identifier {
  /** The identifier name */
  name: string;
}

interface StringLiteral {
  /** The string value */
  value: string;
}

Dependencies

Runtime Dependencies

• babel-runtime (^6.22.0): Babel runtime helpers for the transformed code

Plugin Dependencies (Provided by Babel)

• babel-types: Provides isValidIdentifier() function that uses esutils to determine if an identifier is valid in ES3

Development Dependencies

• babel-helper-plugin-test-runner (^6.22.0): Testing utilities for Babel plugins

Error Handling

The plugin operates during the Babel compilation phase and will fail compilation if:

• The AST structure is malformed
• Babel types utilities are not available
• There are conflicts with other plugins modifying the same AST nodes

No runtime errors are thrown by the transformed code itself, as the transformation only changes syntax while preserving semantics.