or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel--plugin-transform-member-expression-literals

Babel plugin that transforms member expressions to ensure compatibility with ES3 environments by converting property access with reserved words from dot notation to bracket notation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@babel/plugin-transform-member-expression-literals@7.27.x

To install, run

npx @tessl/cli install tessl/npm-babel--plugin-transform-member-expression-literals@7.27.0

index.mddocs/

@babel/plugin-transform-member-expression-literals

@babel/plugin-transform-member-expression-literals is a Babel transformation plugin that ensures compatibility with ES3 environments by converting JavaScript member expressions using reserved words from dot notation to bracket notation with string literals.

Package Information

  • Package Name: @babel/plugin-transform-member-expression-literals
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @babel/plugin-transform-member-expression-literals

Core Imports

import memberExpressionLiteralsPlugin from "@babel/plugin-transform-member-expression-literals";

For CommonJS:

const memberExpressionLiteralsPlugin = require("@babel/plugin-transform-member-expression-literals");

Dependencies

The plugin requires:

  • @babel/core (peer dependency)
  • @babel/helper-plugin-utils (helper for plugin creation)
  • Uses @babel/helper-validator-identifier internally via Babel types

Basic Usage

import { transform } from "@babel/core";
import memberExpressionLiteralsPlugin from "@babel/plugin-transform-member-expression-literals";

// Transform code with the plugin
const result = transform(`
  const obj = {};
  obj.catch = "value";      // ES3 reserved word -> transformed
  obj.package = "pkg";      // ES3 reserved word -> transformed  
  obj.private = true;       // ES3 reserved word -> transformed
  obj.public = false;       // ES3 reserved word -> transformed
  obj.static = "method";    // ES3 reserved word -> transformed
  obj.interface = "ITest";  // ES3 reserved word -> transformed
  obj.validName = "ok";     // Valid identifier -> unchanged
`, {
  plugins: [memberExpressionLiteralsPlugin]
});

console.log(result.code);
// Output:
// const obj = {};
// obj["catch"] = "value";
// obj["package"] = "pkg";
// obj["private"] = true;
// obj["public"] = false;
// obj["static"] = "method";
// obj["interface"] = "ITest";
// obj.validName = "ok";

Capabilities

Plugin Export

The default export is a Babel plugin created using the declare helper from @babel/helper-plugin-utils.

/**
 * Default export: Babel plugin for transforming member expression literals
 * Created using declare() helper which handles plugin API version validation
 */
const plugin: BabelPlugin;
export default plugin;

/**
 * Plugin structure returned by declare() helper
 */
interface BabelPlugin {
  name: "transform-member-expression-literals";
  visitor: {
    MemberExpression: {
      exit(path: NodePath<MemberExpression>): void;
    };
  };
}

/**
 * Babel node path type used in visitor
 */
interface NodePath<T> {
  node: T;
}

Usage Examples:

// In Babel configuration (.babelrc.json)
{
  "plugins": ["@babel/plugin-transform-member-expression-literals"]
}

// Programmatically with Babel
import { transform } from "@babel/core";
import plugin from "@babel/plugin-transform-member-expression-literals";

const code = "obj.package = 'value';";
const result = transform(code, {
  plugins: [plugin]
});
// Result: obj["package"] = 'value';

Transformation Behavior

ES3 Reserved Words and Invalid Identifiers

The plugin transforms member expressions where the property name fails the isValidES3Identifier check. This includes:

  1. Regular JavaScript keywords and reserved words (handled by isValidIdentifier)
  2. ES3-specific reserved words (additional words reserved in ES3 environments)

ES3-Only Reserved Words (transformed by this plugin):

obj.abstract     // ES3 reserved -> obj["abstract"]
obj.boolean      // ES3 reserved -> obj["boolean"]
obj.byte         // ES3 reserved -> obj["byte"]
obj.char         // ES3 reserved -> obj["char"]
obj.double       // ES3 reserved -> obj["double"]
obj.enum         // ES3 reserved -> obj["enum"]
obj.final        // ES3 reserved -> obj["final"]
obj.float        // ES3 reserved -> obj["float"]
obj.goto         // ES3 reserved -> obj["goto"]
obj.implements   // ES3 reserved -> obj["implements"]
obj.int          // ES3 reserved -> obj["int"]
obj.interface    // ES3 reserved -> obj["interface"]
obj.long         // ES3 reserved -> obj["long"]
obj.native       // ES3 reserved -> obj["native"]
obj.package      // ES3 reserved -> obj["package"]
obj.private      // ES3 reserved -> obj["private"]
obj.protected    // ES3 reserved -> obj["protected"]
obj.public       // ES3 reserved -> obj["public"]
obj.short        // ES3 reserved -> obj["short"]
obj.static       // ES3 reserved -> obj["static"]
obj.synchronized // ES3 reserved -> obj["synchronized"]
obj.throws       // ES3 reserved -> obj["throws"]
obj.transient    // ES3 reserved -> obj["transient"]
obj.volatile     // ES3 reserved -> obj["volatile"]

Common JavaScript Keywords (also transformed):

obj.catch        // Keyword -> obj["catch"]
obj.class        // Keyword -> obj["class"]
obj.const        // Keyword -> obj["const"]
obj.default      // Keyword -> obj["default"]
obj.delete       // Keyword -> obj["delete"]
obj.export       // Keyword -> obj["export"]
obj.import       // Keyword -> obj["import"]

Preservation of Valid Expressions

The plugin leaves already valid expressions unchanged:

Unchanged Examples:

obj.validName      // Valid identifier - unchanged
obj["alreadyQuoted"] // Already computed - unchanged
obj[variable]      // Dynamic property - unchanged
obj.normalProp     // Valid ES3 identifier - unchanged

Types

/**
 * Core AST node types used by the plugin
 */
interface MemberExpression {
  type: "MemberExpression";
  object: Expression;
  property: Expression;
  computed: boolean;
}

interface Identifier {
  type: "Identifier";
  name: string;
}

interface StringLiteral {
  type: "StringLiteral";
  value: string;
}

type Expression = MemberExpression | Identifier | StringLiteral | any;

/**
 * Babel types utilities (from @babel/core)
 */
interface BabelTypes {
  isIdentifier(node: any): node is Identifier;
  isValidES3Identifier(name: string): boolean;
  stringLiteral(value: string): StringLiteral;
}

/**
 * Plugin helper functions
 */
declare const REQUIRED_VERSION: (version: number) => number | string;

Error Handling

The plugin operates during Babel's transformation phase and relies on Babel's error handling mechanisms. It does not throw custom errors but may fail if:

  • The provided code contains syntax errors
  • Babel version is incompatible (requires Babel 7+)
  • Plugin dependencies (@babel/helper-plugin-utils, @babel/core) are missing

Common issues and solutions:

  • Missing dependencies: Ensure @babel/core is installed as a peer dependency
  • Version mismatch: Plugin requires Babel 7.0.0 or higher
  • Invalid AST: Plugin expects valid JavaScript/TypeScript AST nodes