Babel Plugin Transform ES5 Property Mutators

This Babel plugin transforms ES5 object initializer property mutators (getter and setter shorthand syntax) into explicit Object.defineProperties calls. It enables compatibility with environments that don't support ES5 property mutator syntax by converting getter/setter shorthand to property descriptors.

Package Information

• Package Name: babel-plugin-transform-es5-property-mutators
• Package Type: npm
• Language: JavaScript
• Installation: npm install --save-dev babel-plugin-transform-es5-property-mutators

Core Imports

// Direct plugin import (for programmatic usage)
const transformES5PropertyMutators = require("babel-plugin-transform-es5-property-mutators");

For typical Babel configuration, the plugin is referenced by name string in configuration files.

Basic Usage

Via .babelrc (Recommended)

{
  "plugins": ["transform-es5-property-mutators"]
}

Via CLI

babel --plugins transform-es5-property-mutators script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es5-property-mutators"]
});

Architecture

This plugin uses Babel's visitor pattern to transform AST nodes:

• Visitor Pattern: The plugin defines a visitor object with methods for specific AST node types
• ObjectExpression Transformation: Only ObjectExpression nodes containing getter/setter properties are processed
• Helper Dependency: Uses babel-helper-define-map for creating property descriptor mappings
• AST Replacement: Original object expressions are replaced with Object.defineProperties calls

The transformation pipeline:

1. Detection: Scan ObjectExpression nodes for getter/setter properties (kind === "get" or kind === "set")
2. Filtering: Process only non-computed property names (literal identifiers)
3. Mapping: Use babel-helper-define-map.push() to collect property descriptors
4. Generation: Use babel-helper-define-map.toDefineObject() to create property descriptor object
5. Replacement: Replace original node with Object.defineProperties(target, descriptors) call

Transformation Behavior

Input (ES5 property mutator syntax):

var obj = {
  get foo() {
    return "bar";
  },
  set foo(value) {
    this._foo = value;
  }
};

Output (Object.defineProperties):

var obj = Object.defineProperties({}, {
  foo: {
    get: function () {
      return "bar";
    },
    set: function (value) {
      this._foo = value;
    },
    configurable: true,
    enumerable: true
  }
});

Capabilities

Plugin Factory Function

The main export is a factory function that creates a Babel plugin when given the Babel API.

/**
 * Creates a Babel plugin for transforming ES5 property mutators
 * @param {Object} babel - Babel API object with destructured types
 * @param {BabelTypes} babel.types - Babel types utilities (destructured as 't')
 * @returns {BabelPlugin} Plugin configuration object with visitor pattern
 */
export default function ({ types: t }) {
  return {
    visitor: {
      ObjectExpression(path, file) {
        // Implementation processes getter/setter properties
        // and replaces with Object.defineProperties calls
      }
    }
  };
}

Plugin Configuration Object

The plugin returns a standard Babel plugin configuration object.

interface BabelPlugin {
  /** AST visitor methods for transformation */
  visitor: BabelVisitor;
}

interface BabelVisitor {
  /** 
   * Visitor method for ObjectExpression AST nodes
   * Transforms objects containing getter/setter properties to Object.defineProperties calls
   * @param {Object} path - Babel AST path object for ObjectExpression node  
   * @param {Object} file - Babel file object for error reporting and context
   */
  ObjectExpression(path: BabelPath, file: BabelFile): void;
}

Transformation Logic

The plugin processes ObjectExpression nodes and:

1. Detection: Scans object properties for getter/setter definitions (kind === "get" or kind === "set")
2. Filtering: Separates mutator properties from regular properties (only non-computed properties are transformed)
3. Mapping: Uses babel-helper-define-map to create property descriptor mappings
4. Replacement: Replaces the original object expression with Object.defineProperties(target, descriptors)

Property Descriptor Behavior

All transformed properties receive these descriptors:

• configurable: true - Property can be deleted or modified
• enumerable: true - Property appears in object enumeration
• get: function() { ... } - Getter function (when present)
• set: function(value) { ... } - Setter function (when present)

Limitations

• Computed Properties: Does NOT transform computed property names (e.g., [expr]: value) - only literal identifiers are processed
• Object Expressions Only: Only processes object literal expressions, not class methods or other property definitions
• ES5 Environments: Target output requires ES5 Object.defineProperties support
• Non-computed Only: Properties with computed: true are explicitly filtered out and not transformed

Dependencies

The plugin relies on:

• babel-helper-define-map@^6.24.1 - Core dependency providing:
  • push(mutatorMap, prop, null, file) - Collects property descriptors
  • toDefineObject(mutatorMap) - Converts collected descriptors to Object.defineProperties format
• babel-runtime@^6.22.0 - Runtime helpers for transpiled code

babel-helper-define-map Usage

The plugin uses specific functions from babel-helper-define-map:

// From babel-helper-define-map
function push(mutatorMap: Object, node: Object, kind: string, file: Object): Object;
function toDefineObject(mutatorMap: Object): Object;

The toDefineObject function automatically adds these property descriptors:

• configurable: true - Property can be deleted or reconfigured
• enumerable: true - Property appears in enumeration
• writable: true - Added for value properties (not getters/setters)

Types

// Babel API interfaces used by the plugin
interface BabelAPI {
  types: BabelTypes;
}

interface BabelPath {
  node: ObjectExpression;
  replaceWith(newNode: CallExpression): void;
}

interface BabelFile {
  buildCodeFrameError(node: ASTNode, message: string): Error;
}

interface ObjectExpression {
  properties: Property[];
}

interface Property {
  kind: "get" | "set" | "init" | "method";
  computed: boolean;
  key: Identifier | Literal;
  value?: Expression;
}