@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.
npm install --save-dev @babel/plugin-transform-shorthand-propertiesThis 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"]
});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";
}
};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;
};
}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 };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;
}
};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() {} };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;
}
};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;
}declare function for plugin creation./lib/index.js (compiled from src/index.ts)./lib/index.d.ts (generated type definitions)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.