CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-babel--plugin-transform-property-mutators

Babel plugin that transforms ES5 property mutator shorthand syntax to Object.defineProperty calls

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@babel/plugin-transform-property-mutators

A Babel plugin that transforms ES5 property mutator shorthand syntax (getter and setter methods defined with get/set keywords in object literals) into equivalent Object.defineProperty calls. This enables backward compatibility by converting modern JavaScript property accessor syntax into a form that can be understood by older JavaScript engines that don't support native property accessor syntax.

Package Information

  • Package Name: @babel/plugin-transform-property-mutators
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @babel/plugin-transform-property-mutators

Core Imports

// Use as a Babel plugin in configuration
import transformPropertyMutators from "@babel/plugin-transform-property-mutators";

// Or in babel.config.js
const transformPropertyMutators = require("@babel/plugin-transform-property-mutators");

// For direct plugin development (internal API)
import { declare } from "@babel/helper-plugin-utils";
import { types as t } from "@babel/core";

Basic Usage

Add the plugin to your Babel configuration:

// babel.config.js
module.exports = {
  plugins: ["@babel/plugin-transform-property-mutators"]
};

// Or .babelrc
{
  "plugins": ["@babel/plugin-transform-property-mutators"]
}

Input JavaScript (ES5 property mutator syntax):

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

Output JavaScript (Object.defineProperties):

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

Architecture

The plugin is built using Babel's plugin system with the following key components:

  • Plugin Factory: Uses @babel/helper-plugin-utils.declare() to create the plugin
  • AST Visitor: Traverses ObjectExpression nodes to find getter/setter methods
  • Mutator Map: Internal data structure (DefineMap) to organize accessors by property key
  • Code Generation: Transforms the AST to use Object.defineProperties() calls

Capabilities

Plugin Export

The main Babel plugin factory function that returns the plugin configuration.

/**
 * Babel plugin that transforms property mutator syntax
 * Created using @babel/helper-plugin-utils declare function
 */
const transformPropertyMutators = declare((api: BabelAPI) => BabelPlugin);

interface BabelPlugin {
  name: string;
  visitor: {
    ObjectExpression(path: NodePath<t.ObjectExpression>): void;
  };
}

interface BabelAPI {
  assertVersion(version: number): void;
}

AST Visitor Method

The ObjectExpression visitor that performs the actual transformation.

/**
 * Visits ObjectExpression nodes and transforms getter/setter methods
 * @param path - Babel AST path object for the ObjectExpression node
 * @description Identifies getter/setter methods in object literals and replaces the entire object with Object.defineProperties call
 */
ObjectExpression(path: NodePath<t.ObjectExpression>): void;

Internal Utility Functions

Support functions for managing mutator maps and code generation.

/**
 * Pushes accessor method into the mutator map, organizing by property key
 * @param mutatorMap - Map to store accessors organized by property key
 * @param node - ObjectMethod node representing getter or setter (non-computed)
 * @returns Updated DefineMap for the property
 */
function pushAccessor(
  mutatorMap: MutatorMap,
  node: t.ObjectMethod & { kind: "get" | "set"; computed: false }
): DefineMap;

/**
 * Converts mutator map to Object.defineProperties properties descriptor
 * @param mutatorMap - Map of property accessors organized by key
 * @returns ObjectExpression representing the properties descriptor object
 */
function toDefineObject(mutatorMap: MutatorMap): t.ObjectExpression;

Types

/**
 * Internal data structure for organizing accessor methods by property key
 */
type MutatorMap = Record<string, DefineMap>;

/**
 * Map entry containing accessor methods and metadata for a single property
 */
interface DefineMap {
  _inherits: t.Node[];
  _key: t.Expression;
  get?: t.Expression;
  set?: t.Expression;
  kind: "get" | "set";
}

Transformation Logic

The plugin works by:

  1. Detection: Visiting all ObjectExpression nodes in the AST
  2. Identification: Finding ObjectMethod nodes with kind of "get" or "set" and computed: false
  3. Extraction: Removing accessor methods from the object's properties array
  4. Conversion: Converting accessor methods to function expressions and organizing them by property key
  5. Replacement: Replacing the entire object with an Object.defineProperties() call
  6. Property Attributes: Setting configurable: true and enumerable: true on all transformed properties

Browser Compatibility

This transformation enables ES5 property mutator syntax to work in environments that don't natively support getter/setter syntax in object literals. The generated Object.defineProperties calls are supported in:

  • Internet Explorer 9+
  • All modern browsers
  • Node.js environments

Limitations

  • Only transforms non-computed property accessors (static property names)
  • Computed accessors like [key]: value are not transformed
  • Only works within object literal expressions, not class method definitions
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@babel/plugin-transform-property-mutators@7.27.x
Publish Source
CLI
Badge
tessl/npm-babel--plugin-transform-property-mutators badge