Compilation Pipeline

This is the classic compiler pipeline shown by the UI panels.

1) Source Code → Tokens (tokeniser)

  • The tokeniser scans the input text left-to-right.
  • It produces token objects like NUMBER, KEYWORD, IDENTIFIER, STRING, OPERATOR and PUNCTUATION.
  • Tokens include source location (line/column) for better error messages and UI display.

2) Tokens → AST (parser)

  • The parser consumes the token array and builds an Abstract Syntax Tree.
  • Each AST node has a `type` (e.g. Program, VariableDeclaration, BinaryExpression).
  • Your UI renders the AST as an expandable tree.

3) AST → JavaScript (code generation)

  • The generator walks the AST and emits JavaScript code.
  • The “Generated JavaScript” panel shows the final transpiled output.
  • Use Copy to move the output into a JS runtime if you want to execute it.

Example: observe the steps

Compile this example and compare how the same program appears in Tokens, AST and Generated JavaScript.

let x = 10
let y = 20
let sum = x + y
print sum