@babel/template

What is @babel/template?

The @babel/template package is a part of the Babel toolchain that allows developers to create AST (Abstract Syntax Tree) nodes with placeholders programmatically. This is useful for code generation, transformation, and manipulation tasks where you want to produce syntactically correct code snippets based on a template with variable parts.

What are @babel/template's main functionalities?

Building AST Nodes

This feature allows you to build AST nodes using template literals with placeholders. The placeholders are then replaced with actual values to create a syntactically correct code snippet.

const template = require('@babel/template').default;
const buildRequire = template(`
  const %%importName%% = require(%%source%%);
`);
const ast = buildRequire({
  importName: template.identifier('myModule'),
  source: template.stringLiteral('my-module')
});

Using Placeholders

This feature demonstrates how to use placeholders for different parts of the code, such as function names, parameters, and bodies. The placeholders are replaced with AST nodes representing identifiers, arrays of identifiers, and block statements, respectively.

const template = require('@babel/template').default;
const buildFunction = template(`
  function %%funcName%%(%%params%%) {
    return %%body%%;
  }
`);
const ast = buildFunction({
  funcName: template.identifier('myFunction'),
  params: [template.identifier('a'), template.identifier('b')],
  body: template.blockStatement([])
});

Customizing Placeholder Patterns

This feature shows how to customize the placeholder pattern used in the template. This is useful when you want to define a specific pattern for your placeholders to avoid conflicts with other parts of the code.

const template = require('@babel/template').default;
const buildAssertion = template(`
  assert(%%test%%, '%%errorMessage%%');
`, {
  placeholderPattern: /^%%[a-zA-Z0-9_]+%%$/
});
const ast = buildAssertion({
  test: template.binaryExpression('===', template.identifier('a'), template.numericLiteral(3)),
  errorMessage: template.stringLiteral('a is not 3')
});

Other packages similar to @babel/template

recast

Recast is a JavaScript AST manipulation library that allows you to parse, transform, and print code. It provides a different API than @babel/template but serves a similar purpose in terms of manipulating AST nodes. Recast preserves the original formatting of the code, which is a feature that distinguishes it from @babel/template.

escodegen

Escodegen is a code generator for ECMAScript. It takes an AST and turns it into code. While it doesn't provide templating functionality like @babel/template, it is often used in conjunction with AST manipulation libraries to generate code after transformations have been applied.

jscodeshift

Jscodeshift is a toolkit for running codemods over multiple JavaScript or TypeScript files. It uses recast under the hood for parsing and printing, while providing a higher-level API for transforming code. It's more focused on large-scale codebase refactors compared to the more granular transformations that @babel/template is typically used for.

README

@babel/template

Generate an AST from a string template.

See our website @babel/template for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/template

or using yarn:

yarn add @babel/template --dev

Changelog

v7.25.7 (2024-10-02)

:bug: Bug Fix

• babel-helper-validator-identifier
  • #16825 fix: update identifier to unicode 16 (@JLHwung)
• babel-traverse
  • #16814 fix: issue with node path keys updated on unrelated paths (@DylanPiercey)
• babel-plugin-transform-classes
  • #16797 Use an inclusion rather than exclusion list for super() check (@nicolo-ribaudo)
• babel-generator
  • #16788 Fix printing of TS infer in compact mode (@nicolo-ribaudo)
  • #16785 Print TS type annotations for destructuring in assignment pattern (@nicolo-ribaudo)
  • #16778 Respect [no LineTerminator here] after nodes (@nicolo-ribaudo)

:nail_care: Polish

• babel-types
  • #16852 Add deprecated JSDOC for fields (@liuxingbaoyu)

:house: Internal

• babel-core
  • #16820 Allow sync loading of ESM when --experimental-require-module (@nicolo-ribaudo)
• babel-helper-compilation-targets, babel-helper-plugin-utils, babel-preset-env
  • #16858 Add browserslist config to external dependency (@JLHwung)
• babel-plugin-proposal-destructuring-private, babel-plugin-syntax-decimal, babel-plugin-syntax-import-reflection, babel-standalone
  • #16809 Archive syntax-import-reflection and syntax-decimal (@nicolo-ribaudo)
• babel-generator
  • #16779 Simplify logic for [no LineTerminator here] before nodes (@nicolo-ribaudo)

:running_woman: Performance

• babel-plugin-transform-typescript
  • #16875 perf: Avoid extra cloning of namespaces (@liuxingbaoyu)
• babel-types
  • #16842 perf: Improve @babel/types builders (@liuxingbaoyu)
  • #16828 Only access BABEL_TYPES_8_BREAKING at startup (@nicolo-ribaudo)