or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel--plugin-transform-shorthand-properties

Babel plugin that compiles ES2015 shorthand properties and object methods to ES5

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

To install, run

npx @tessl/cli install tessl/npm-babel--plugin-transform-shorthand-properties@7.27.0

index.mddocs/

@babel/plugin-transform-shorthand-properties

@babel/plugin-transform-shorthand-properties is a Babel transformation plugin that compiles ES2015+ shorthand properties and object method syntax into ES5-compatible longform properties and function expressions. This plugin is essential for enabling modern JavaScript object syntax in environments that don't support ES2015+ features.

Package Information

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

Core Imports

This plugin is not imported directly in application code. Instead, it's configured as part of a Babel transformation pipeline:

Babel Configuration (.babelrc):

{
  "plugins": ["@babel/plugin-transform-shorthand-properties"]
}

Babel Configuration (babel.config.js):

module.exports = {
  plugins: ["@babel/plugin-transform-shorthand-properties"]
};

Programmatic Usage:

import babel from "@babel/core";

const result = babel.transformSync(code, {
  plugins: ["@babel/plugin-transform-shorthand-properties"]
});

Basic Usage

This plugin automatically transforms shorthand property syntax and object method syntax during the Babel compilation process. No direct API calls are required - transformations happen automatically when the plugin is enabled.

Input (ES2015+ syntax):

// Shorthand properties
const x = 1, y = 2;
const coords = { x, y };

// Object methods  
const obj = {
  method() {
    return "hello";
  },
  async asyncMethod() {
    return "async hello";
  },
  *generatorMethod() {
    yield "generator hello";
  }
};

Output (ES5 compatible):

// Shorthand properties transformed
const x = 1, y = 2;
const coords = { x: x, y: y };

// Object methods transformed
const obj = {
  method: function () {
    return "hello";
  },
  asyncMethod: async function () {
    return "async hello";
  },
  generatorMethod: function* () {
    yield "generator hello";
  }
};

Capabilities

Plugin Function

The main plugin export that provides the Babel transformation functionality.

/**
 * Babel plugin function that transforms shorthand properties and object methods
 * Created via @babel/helper-plugin-utils declare() function
 * @param api - Babel plugin API providing version assertion and AST utilities
 * @returns Babel plugin object with visitor methods
 */
declare function plugin(api: PluginAPI): PluginObject;

interface PluginObject {
  name: "transform-shorthand-properties";
  visitor: {
    ObjectMethod(path: NodePath<ObjectMethod>): void;
    ObjectProperty(path: NodePath<ObjectProperty>): void;
  };
}

Shorthand Property Transformation

Transforms ES2015+ shorthand property syntax to ES5 longhand properties.

Transformation Rules:

  • {x} → {x: x} (standard shorthand properties)
  • {__proto__} → {["__proto__"]: __proto__} (special proto handling with computed key)

Code Example:

// Input
const name = "Alice";
const age = 30;
const user = { name, age };

// Output  
const name = "Alice";
const age = 30;
const user = { name: name, age: age };

Object Method Transformation

Transforms ES2015+ object method syntax to ES5 function expression properties.

Transformation Rules:

  • {method() {}} → {method: function() {}} (regular methods)
  • {async method() {}} → {method: async function() {}} (async methods)
  • {*method() {}} → {method: function*() {}} (generator methods)
  • {__proto__() {}} → {["__proto__"]: function() {}} (special proto handling)

Code Example:

// Input
const calculator = {
  add(a, b) {
    return a + b;
  },
  async fetchData() {
    return await fetch("/data");
  },
  *sequence() {
    yield 1;
    yield 2;
  }
};

// Output
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  fetchData: async function() {
    return await fetch("/data");
  },
  sequence: function*() {
    yield 1;
    yield 2;
  }
};

Special proto Handling

The plugin provides special handling for __proto__ properties to ensure correct behavior in all JavaScript environments.

Transformation Rules:

  • {__proto__} → {["__proto__"]: __proto__} (uses computed key syntax)
  • {__proto__() {}} → {["__proto__"]: function() {}} (uses computed key syntax)

Code Example:

// Input
const proto = { x: 1 };
const obj1 = { __proto__ };
const obj2 = { __proto__() {} };

// Output
const proto = { x: 1 };
const obj1 = { ["__proto__"]: __proto__ };
const obj2 = { ["__proto__"]: function() {} };

TypeScript Support

The plugin preserves TypeScript type annotations when transforming object methods.

Code Example:

// Input
const service = {
  process(data: string): number {
    return data.length;
  }
};

// Output
const service = {
  process: function(data: string): number {
    return data.length;
  }
};

Types

interface PluginAPI {
  version: string;
  assertVersion(range: number | string): void;
  types: typeof import("@babel/types");
}

interface PluginObject<State = object> {
  name: string;
  visitor: Visitor<State>;
}

interface NodePath<T = Node> {
  node: T;
  replaceWith(replacement: Node): void;
}

interface ObjectMethod {
  kind: "method" | "get" | "set";
  key: Expression;
  params: Pattern[];
  body: BlockStatement;
  computed: boolean;
  async: boolean;
  generator: boolean;
  returnType?: TypeAnnotation;
}

interface ObjectProperty {
  key: Expression;
  value: Expression;
  computed: boolean;
  shorthand: boolean;
}

Configuration

Babel Version Requirements

  • Babel Core: ^7.0.0-0 (peer dependency)
  • Node.js: >= 6.9.0 (>= 20.19.0 || >= 22.12.0 for Babel 8)

Plugin Dependencies

  • @babel/helper-plugin-utils: Provides the declare function for plugin creation
  • @babel/core: Provides AST types and transformation utilities

Module System

  • Type: ESM module (type: "module" in package.json)
  • Main Entry: ./lib/index.js (compiled from src/index.ts)
  • TypeScript: ./lib/index.d.ts (generated type definitions)

Usage in Babel Presets

This plugin is commonly included in Babel presets like @babel/preset-env:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["ie 11"]
      }
    }]
  ]
}

The preset will automatically include this plugin when targeting environments that don't support shorthand properties.