@babel/plugin-transform-literals

@babel/plugin-transform-literals is a Babel plugin that compiles ES2015 unicode string literals and number literals (binary and octal) to ES5-compatible format. It transforms ES2015 numeric literals with binary (0b) and octal (0o) prefixes and string literals containing unicode escape sequences by removing extra raw formatting information while preserving the actual parsed values.

Package Information

• Package Name: @babel/plugin-transform-literals
• Package Type: npm
• Language: TypeScript
• Installation: npm install --save-dev @babel/plugin-transform-literals or yarn add --dev @babel/plugin-transform-literals

Core Imports

// CommonJS
const transformLiteralsPlugin = require("@babel/plugin-transform-literals");

// ESM
import transformLiteralsPlugin from "@babel/plugin-transform-literals";

Basic Usage

With Babel Configuration

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

With Babel API

import { transform } from "@babel/core";
import transformLiteralsPlugin from "@babel/plugin-transform-literals";

const code = `
  const binary = 0b1010;
  const octal = 0o755;
  const unicode = "Hello \\u{1F4A9}";
`;

const result = transform(code, {
  plugins: [transformLiteralsPlugin]
});

console.log(result.code);
// Output has the extra.raw properties removed from literals

Configuration with @babel/preset-env

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: { ie: "11" } // Plugin included automatically for older targets
    }]
  ]
};

Capabilities

Plugin Export

The plugin exports a single default function created with Babel's declare helper that returns a plugin configuration object.

/**
 * Default export - Babel plugin function
 * Returns a plugin object with name and visitor when called by Babel
 */
export default function transformLiteralsPlugin(api: PluginAPI): PluginObject;

interface PluginObject {
  name: "transform-literals";
  visitor: {
    NumericLiteral(path: NodePath<NumericLiteral>): void;
    StringLiteral(path: NodePath<StringLiteral>): void;
  };
}

Numeric Literal Transformation

Handles binary (0b) and octal (0o) numeric literal transformations by removing the extra.raw property.

Input Code:

const binary = 0b1010;    // Binary literal: 10 in decimal
const octal = 0o755;      // Octal literal: 493 in decimal

Transformation Result: The actual numeric values (10 and 493) are preserved in the AST, but the extra.raw property containing the original 0b1010 and 0o755 syntax is removed from the AST nodes, making them compatible with ES5 environments.

String Literal Transformation

Handles string literals containing unicode escape sequences by removing the extra.raw property.

Input Code:

const unicode = "Hello \\u{1F4A9}";  // Unicode escape sequence
const simple = "Hello \\u0041";      // Traditional unicode escape

Transformation Result: The actual string values are preserved in the AST, but the extra.raw property containing unicode escape sequences is removed from the AST nodes when they contain \\u patterns.

Transformation Details

The plugin uses Babel's visitor pattern to traverse the AST and transform specific node types:

1. Binary Literals: Numbers prefixed with 0b or 0B (e.g., 0b1010)
2. Octal Literals: Numbers prefixed with 0o or 0O (e.g., 0o755)
3. Unicode String Literals: Strings containing \\u escape sequences

The plugin removes the extra.raw property from these literal nodes, which contains the original source formatting. This makes the literals compatible with ES5 environments that don't support the newer syntax, while preserving the actual parsed values.

Dependencies

Peer Dependencies

{
  "@babel/core": "^7.0.0-0"
}

Dependencies

{
  "@babel/helper-plugin-utils": "^7.0.0"
}

Types

// Key Babel types used by this plugin
interface PluginAPI {
  assertVersion(version: number): void;
  // Other Babel API methods...
}

interface NodePath<T> {
  node: T;
  // Babel path manipulation methods...
}

// Babel AST node types that this plugin transforms
interface NumericLiteral {
  type: "NumericLiteral";
  value: number;
  extra?: {
    raw?: string;  // Contains original syntax like "0b1010" or "0o755"
  };
}

interface StringLiteral {
  type: "StringLiteral";
  value: string;
  extra?: {
    raw?: string;  // Contains original syntax with unicode escapes
  };
}