Abstract Syntax Trees (AST)

From code to AST

Transpilers parse source code into an Abstract Syntax Tree — a structured representation where each code element is a node. The transpiler then transforms the tree and generates new code.

A simple transformation example

Arrow function () => x becomes a regular function. The AST node type changes, but the meaning is the same.

// Input (ES6)
const fn = () => 42;

// Output (ES5)
var fn = function() {
  return 42;
};
// The AST for `=>` was transformed to a function node

Plugins operate on the AST

Babel and SWC plugins don't rewrite text. They traverse and modify the AST tree, then regenerate code from the new tree. This is why plugins are powerful and precise.

AST shapes and visitor patterns

Babel plugins use visitor patterns: walk the AST, match node types, apply transformations. Understanding AST structure is key to writing custom Babel plugins.