@babel/plugin-transform-proto-to-assign

A Babel plugin that transforms JavaScript code using the __proto__ property into compatible property assignment operations using helper functions. This plugin addresses browser compatibility issues by converting __proto__ usage into calls to helper functions that provide equivalent functionality across different JavaScript engines.

Package Information

• Package Name: @babel/plugin-transform-proto-to-assign
• Package Type: npm (babel-plugin)
• Language: TypeScript
• Installation: npm install --save-dev @babel/plugin-transform-proto-to-assign

Core Imports

This is a Babel plugin, so it's used in Babel configuration rather than direct imports:

Babel Config (babel.config.js):

module.exports = {
  plugins: ["@babel/plugin-transform-proto-to-assign"]
};

Babel Config (.babelrc.json):

{
  "plugins": ["@babel/plugin-transform-proto-to-assign"]
}

Direct Babel API usage:

import babel from "@babel/core";
import protoToAssignPlugin from "@babel/plugin-transform-proto-to-assign";

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

Basic Usage

The plugin automatically transforms __proto__ usage during the Babel compilation process. No runtime API calls are needed.

Input (before transformation):

// Object literal with __proto__
var obj = {
  __proto__: parentObj,
  prop: "value"
};

// Assignment expression using __proto__
obj.__proto__ = parentObj;

// __proto__ assignment in expression
console.log(target.__proto__ = source);

Output (after transformation):

// Transformed to extends helper
var obj = babelHelpers.extends({}, parentObj, {
  prop: "value"
});

// Transformed to defaults helper
babelHelpers.defaults(obj, parentObj);

// Transformed with temporary variable
var _target;
console.log((_target = target, babelHelpers.defaults(_target, source), _target));

Capabilities

Plugin Function

The main and only public API of this package - a Babel plugin function.

import { declare } from "@babel/helper-plugin-utils";
import { types as t, type File } from "@babel/core";

/**
 * Main Babel plugin function that transforms __proto__ usage
 * @param api - Babel plugin API object with assertVersion method  
 * @returns Babel plugin configuration object with visitor methods
 */
export default declare(api => {
  api.assertVersion("^7.0.0-0");
  return {
    name: "transform-proto-to-assign",
    visitor: {
      AssignmentExpression(path: NodePath<t.AssignmentExpression>, state: PluginState): void;
      ExpressionStatement(path: NodePath<t.ExpressionStatement>, state: PluginState): void;
      ObjectExpression(path: NodePath<t.ObjectExpression>, state: PluginState): void;
    }
  };
});

interface BabelPluginApi {
  assertVersion(required: string): void;
}

interface BabelPlugin {
  name: string;
  visitor: {
    [nodeType: string]: (path: NodePath<any>, state: PluginState) => void;
  };
}

interface PluginState {
  file: File;
}

interface NodePath<T = t.Node> {
  node: T;
  scope: Scope;
  replaceWith(node: t.Node): void;
  replaceWithMultiple(nodes: t.Node[]): void;
}

interface Scope {
  maybeGenerateMemoised(node: t.Node): t.Identifier | null;
}

Transformation Patterns

Object Expression Transformation

Transforms object literals containing __proto__ properties.

Pattern: { __proto__: value, ...properties } Transforms to: babelHelpers.extends({}, value, { ...properties })

This transformation:

• Removes the __proto__ property from the object literal
• Calls the extends helper with an empty object, the proto value, and remaining properties
• Maintains the same prototype chain behavior

Assignment Expression Transformation

Transforms __proto__ assignments within expressions.

Pattern: object.__proto__ = value (within expressions) Transforms to: (temp = object, babelHelpers.defaults(temp, value), temp)

This transformation:

• Creates a temporary variable to store the object reference
• Calls the defaults helper to perform the prototype assignment
• Returns the temporary variable to maintain expression semantics

Expression Statement Transformation

Transforms standalone __proto__ assignment statements.

Pattern: object.__proto__ = value; (as statement)
Transforms to: babelHelpers.defaults(object, value);

This transformation:

• Directly calls the defaults helper function
• Simpler than assignment expressions since no return value is needed

Helper Functions

The plugin generates calls to two Babel runtime helpers:

extends Helper

Used for object literal __proto__ transformations. Equivalent to Object.assign({}, proto, ...sources).

defaults Helper

Used for __proto__ assignment transformations. Copies properties from source to target object, similar to Object.setPrototypeOf functionality but using property assignment.

Configuration

This plugin accepts no configuration options. It operates with default behavior on all __proto__ usage patterns.

Browser Compatibility

This plugin enables __proto__ usage in environments that don't support it natively, including:

• Older JavaScript engines
• Environments where __proto__ is disabled
• Strict mode contexts where __proto__ behavior differs

The transformed code uses standard property assignment operations that work in all JavaScript environments.