or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-babel-plugin-transform-es2015-template-literals

Babel plugin that compiles ES2015 template literals to ES5-compatible string concatenation

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/babel-plugin-transform-es2015-template-literals@6.22.x

To install, run

npx @tessl/cli install tessl/npm-babel-plugin-transform-es2015-template-literals@6.22.0

index.mddocs/

Babel Plugin Transform ES2015 Template Literals

A Babel plugin that compiles ES2015 template literals to ES5-compatible string concatenation. The plugin transforms both tagged and untagged template literals, handling embedded expressions and providing configurable options for different compilation modes.

Package Information

  • Package Name: babel-plugin-transform-es2015-template-literals
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev babel-plugin-transform-es2015-template-literals

Core Imports

// Default CommonJS import (plugin exports default function)
const plugin = require("babel-plugin-transform-es2015-template-literals");

ES6 import:

import plugin from "babel-plugin-transform-es2015-template-literals";

Basic Usage

Via .babelrc (Recommended)

{
  "plugins": ["transform-es2015-template-literals"]
}

With options:

{
  "plugins": [
    ["transform-es2015-template-literals", {
      "loose": true,
      "spec": true
    }]
  ]
}

Via Babel API

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

Via CLI

babel --plugins transform-es2015-template-literals script.js

Basic Example

Input:

const message = `Hello ${name}!`;
const count = `You have ${items.length} items`;
const multiline = `Line 1
Line 2 with ${value}`;
const escaped = `Use \`backticks\` in "${context}"`;

Output:

const message = "Hello " + name + "!";
const count = "You have " + items.length + " items";
const multiline = "Line 1\nLine 2 with " + value;
const escaped = "Use `backticks` in \"" + context + "\"";

Capabilities

Plugin Factory Function

The main export is a function that creates a Babel plugin instance.

/**
 * Creates a Babel plugin for transforming ES2015 template literals
 * @param {Object} api - Babel API object containing types utility
 * @param {Object} api.types - Babel types utility for AST manipulation
 * @returns {Object} Babel plugin object with visitor methods
 */
function pluginFactory({ types: t }) {
  return {
    visitor: {
      TaggedTemplateExpression: Function,
      TemplateLiteral: Function
    }
  };
}

Template Literal Transformation

Transforms untagged template literals into string concatenation expressions.

/**
 * Visitor method for transforming untagged template literals
 * @param {Object} path - Babel AST path object
 * @param {Object} state - Plugin state object containing options
 * @param {Object} state.opts - Plugin configuration options
 * @param {boolean} state.opts.spec - Whether to wrap expressions with String()
 */
TemplateLiteral(path, state) {
  // Converts `foo${bar}` to "foo" + bar (or "foo" + String(bar) with spec option)
}

Examples:

Basic transformation:

// Input: `Hello ${name}`
// Output: "Hello " + name

With spec option:

// Input: `Hello ${name}`  
// Output: "Hello " + String(name)

Empty expressions filtered:

// Input: `${greeting}${name}`
// Output: greeting + name

Complex expressions:

// Input: `Result: ${calculateValue()} (${status})`
// Output: "Result: " + calculateValue() + " (" + status + ")"

Edge case handling:

// Input: `${a}${b}${c}` (no static strings)
// Output: "" + a + b + c  // Empty string prepended for proper coercion

Tagged Template Literal Transformation

Transforms tagged template literals into function calls with template object arrays.

/**
 * Visitor method for transforming tagged template literals
 * @param {Object} path - Babel AST path object  
 * @param {Object} state - Plugin state object containing options
 * @param {Object} state.opts - Plugin configuration options
 * @param {boolean} state.opts.loose - Whether to use loose mode for template objects
 */
TaggedTemplateExpression(path, state) {
  // Converts tag`foo${bar}` to tag(templateObject, bar)
}

Examples:

Basic tagged template:

// Input: styled`color: ${color}`
// Output: styled(_templateObject(), color)

With loose option:

// Uses taggedTemplateLiteralLoose helper instead of taggedTemplateLiteral
// Template objects are not frozen in loose mode

Template Object Caching: The plugin automatically caches template objects to avoid recreating identical template literal metadata. Each unique template literal gets a generated template object (e.g., _templateObject, _templateObject2) that contains both the processed and raw string arrays.

Configuration Options

loose

/**
 * Loose mode configuration option
 * @type {boolean}
 * @default false
 * @description In loose mode, tagged template literal objects aren't frozen
 */
loose: boolean

Effect: Uses taggedTemplateLiteralLoose helper instead of taggedTemplateLiteral, which doesn't freeze template objects for better performance.

spec

/**
 * Spec compliance configuration option  
 * @type {boolean}
 * @default false
 * @description Wraps template literal expressions with String() (except strings and numbers)
 */
spec: boolean

Effect: Ensures all expressions are converted to strings by wrapping them with String(), except for string and number literals which are already primitive strings/numbers.

Examples:

// Without spec: `foo${bar}` → "foo" + bar
// With spec: `foo${bar}` → "foo" + String(bar)

// Numbers and strings are not wrapped:
// `count: ${42}` → "count: " + 42
// `name: ${"John"}` → "name: " + "John"

// Objects/functions are wrapped:
// `user: ${user}` → "user: " + String(user)

Types

Plugin Configuration Object

interface PluginObject {
  visitor: {
    TaggedTemplateExpression(path: Path, state: State): void;
    TemplateLiteral(path: Path, state: State): void;
  }
}

interface State {
  opts: {
    loose?: boolean;
    spec?: boolean;
  };
  file: {
    addTemplateObject(templateName: string, strings: any, raw: any): any;
  };
}

interface Path {
  node: Node;
  get(key: string): Path;
  replaceWith(node: Node): void;
}

Dependencies

  • babel-runtime: ^6.22.0 (Required for template object helpers)

Error Handling

The plugin operates on AST nodes and relies on Babel's error handling. Invalid template literal syntax will be caught by Babel's parser before reaching this plugin.

Performance Notes

  • Use loose: true for better performance when template object freezing is not required
  • The plugin filters out empty string literals to optimize generated code
  • Binary expressions are built left-to-right for proper associativity