Babel Plugin Transform ES2015 Shorthand Properties

A Babel plugin that transforms ES2015 shorthand property syntax into ES5-compatible verbose property syntax. This plugin handles two main transformations: converting shorthand object properties and transforming method shorthand syntax to ensure backward compatibility with ES5 environments.

Package Information

• Package Name: babel-plugin-transform-es2015-shorthand-properties
• Package Type: npm (Babel plugin)
• Language: JavaScript
• Installation: npm install --save-dev babel-plugin-transform-es2015-shorthand-properties

Core Imports

// For direct plugin usage
const plugin = require("babel-plugin-transform-es2015-shorthand-properties");

// Typically used via Babel configuration rather than direct imports

Basic Usage

Via .babelrc (Recommended)

{
  "plugins": ["transform-es2015-shorthand-properties"]
}

Via CLI

babel --plugins transform-es2015-shorthand-properties script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-es2015-shorthand-properties"]
});

Transformations

Shorthand Properties

Input:

var o = { a, b, c };

Output:

var o = { a: a, b: b, c: c };

Method Shorthand

Input:

var cat = {
  getName() {
    return name;
  }
};

Output:

var cat = {
  getName: function () {
    return name;
  }
};

Capabilities

Plugin Factory Function

The main export is a function that returns a Babel plugin configuration object.

/**
 * Main plugin factory function that returns Babel plugin configuration
 * @returns {BabelPlugin} Babel plugin configuration object with visitor pattern
 */
function(): BabelPlugin;

interface BabelPlugin {
  visitor: {
    ObjectMethod: (path: NodePath) => void;
    ObjectProperty: (pathObject: { node: Node }) => void;
  };
}

ObjectMethod Visitor

Transforms ES2015 method shorthand syntax to ES5 function expressions.

/**
 * Transforms method shorthand syntax to function expression properties
 * @param {NodePath} path - Babel NodePath object containing the ObjectMethod node
 * @description Converts method() {} to method: function() {}
 */
ObjectMethod(path: NodePath): void;

The visitor specifically handles nodes where node.kind === "method" and:

• Creates a function expression from the method parameters, body, generator, and async flags using babel-types.functionExpression()
• Preserves return type annotations from the original method
• Replaces the method with an object property containing the function expression using babel-types.objectProperty()
• Maintains computed property syntax if present

ObjectProperty Visitor

Transforms ES2015 property shorthand syntax to ES5 verbose syntax.

/**
 * Transforms property shorthand syntax to verbose property syntax
 * @param {Object} pathObject - Object containing the node property
 * @param {Node} pathObject.node - Babel Node object for ObjectProperty
 * @description Converts {x} to {x: x}
 */
ObjectProperty({ node }: { node: Node }): void;

The visitor:

• Checks if the property uses shorthand syntax (node.shorthand === true)
• Sets node.shorthand = false to convert to verbose syntax
• The transformation automatically expands {a} to {a: a}

Types

interface NodePath {
  node: Node;
  replaceWith(replacement: Node): void;
}

interface Node {
  kind?: string;
  key: Node;
  params: Node[];
  body: Node;
  generator: boolean;
  async: boolean;
  returnType?: Node;
  computed: boolean;
  shorthand?: boolean;
}

Dependencies

• babel-types: ^6.24.1 - Used for AST node creation and manipulation
• babel-runtime: ^6.22.0 - Babel runtime helpers

Plugin Usage Context

This plugin is typically used:

• As part of Babel's ES2015 preset
• In build pipelines targeting ES5 environments
• For backward compatibility with older JavaScript engines
• In combination with other ES2015 transformation plugins

All transformations maintain original code semantics while ensuring ES5 compatibility.