Pascal to JS compiler!

Language Design is matter!

“25 years ago, I was a Computer Science student, and my first love was Pascal. I spent countless hours coding in it, and now, I’ve stumbled upon some old projects that I thought were lost forever. But, as fate would have it, I need to dust them off and run them through my JS compiler! Stay tuned for a blast from the past! “

Creating a Pascal-like Language that Compiles to JavaScript: A Comprehensive Guide

In this article, we will walk you through the process of creating a Pascal-like language that compiles to JavaScript. This involves designing the language syntax, tokenizing the input, parsing it into an Abstract Syntax Tree (AST), generating JavaScript code, and executing that code.

Step 1: Design the Language Syntax

Before diving into code, define the syntax and structure of your Pascal-like language. This involves deciding on keywords, data types, control structures, and function/procedure declarations.

Example Syntax:

Variable Declaration:

var x: Integer;

Function Declaration:

function Add(a, b: Integer): Integer;
begin
 Add := a + b;
end;

Procedure Declaration:

procedure PrintSum(a, b: Integer);
begin
 WriteLn('The sum is: ', Add(a, b));
end;

Begin-End Blocks:

begin
 x := 5;
 y := 10;
 PrintSum(x, y);
end;

Step 2: Lexer/Tokenizer

The lexer (or tokenizer) processes the input source code and converts it into a stream of tokens. Each token represents a logical component, such as keywords (begin, end, function), identifiers (Add, a, b), operators (+, :=), and literals (5, 10).

Example Lexer in JavaScript:

function tokenize(input) {
 const tokens = [];
 const tokenRegex = /\s*(=>|:=|[{}();]|[a-zA-Z_]\w*|\d+|\S)\s*/g;
 let match;
 while (match = tokenRegex.exec(input)) {
 tokens.push(match[1]);
 }
 return tokens;
}

Step 3: Parser

The parser converts the token stream into an Abstract Syntax Tree (AST). The AST is a tree representation of the program’s structure, where each node corresponds to a construct in the source code.

Example Parser:

function parse(tokens) {
 return {
 type: 'FunctionDeclaration',
 name,
 params,
 body,
 };
 }
function parseParams() {
 const params = [];
 index++; // skip "("
 while (tokens[index]!== ')') {
 const param = tokens[index++];
 params.push(param);
 index++; // skip ","
 }
 index++; // skip ")"
 return params;
 }
function parseStatements() {
 const statements = [];
 while (tokens[index]!== 'end') {
 statements.push(parseStatement());
 }
 return statements;
 }
function parseStatement() {
 if (tokens[index] === 'WriteLn') {
 return parsePrint();
 } else {
 return parseAssignment();
 }
 }
function parsePrint() {
 index++; // skip "WriteLn"
 const argument = tokens[index++];
 return {
 type: 'PrintStatement',
 argument,
 };
 }
function parseAssignment() {
 const variable = tokens[index++];
 index++; // skip ":="
 const value = tokens[index++];
 return {
 type: 'AssignmentExpression',
 variable,
 value,
 };
 }
const ast = [];
 while (index < tokens.length) {
 if (tokens[index] === 'function') {
 index++; // skip "function"
 ast.push(parseFunction());
 } else {
 index++; // skip other tokens
 }
 }
 return ast;
}

Step 4: Code Generation

The code generator traverses the AST and converts it into JavaScript code. Each AST node is translated into the equivalent JavaScript construct.

Example Code Generator:

function generateJS(ast) {
 let jsCode = '';
function generateNode(node) {
 switch (node.type) {
 case 'FunctionDeclaration':
 jsCode += `function ${node.name}(${node.params.join(', ')}) {\n`;
 node.body.forEach(generateNode);
 jsCode += '}\n';
 break;
 case 'AssignmentExpression':
 jsCode += ` var ${node.variable} = ${node.value};\n`;
 break;
 case 'PrintStatement':
 jsCode += ` console.log(${node.argument});\n`;
 break;
 }
 }
ast.forEach(generateNode);
 return jsCode;
}

Step 5: Putting It All Together

Now, we can put everything together to create a simple Pascal-to-JavaScript compiler:

function compile(pascalCode) {
 const tokens = tokenize(pascalCode);
 const ast = parse(tokens);
 const jsCode = generateJS(ast);
 return jsCode;
}
const pascalCode = `
function Add(a, b: Integer): Integer;
begin
 Add := a + b;
end;
begin
 var x := 5;
 var y := 10;
 console.log('The sum is: ', Add(x, y));
end;
`;
const jsCode = compile(pascalCode);
console.log(jsCode);

Step 6: Running the Generated JavaScript

The output of the compiler is JavaScript code, which you can execute in any JavaScript environment:

function Add(a, b) {
 return a + b;
}
(function() {
 var x = 5;
 var y = 10;
 console.log('The sum is: ', Add(x, y));
})();

Step 7: Enhancements and Advanced Features

Now We can extend thisPascal-like language and compiler with more features, such as:

Support for More Data Types: Add support for strings, booleans, etc.
Control Structures: Implement if-else, for, while, and repeat-until loops.
Error Handling: Add syntax error detection and meaningful error messages.
Optimization: Implement optimizations like constant folding or dead code elimination.
Standard Library: Create a small standard library of functions (e.g., WriteLn, ReadLn).

By following these steps, anyone can create a Pascal-like language that compiles into JavaScript. This involves designing the language syntax, tokenizing the input, parsing it into an AST, generating JavaScript code, and executing that code. With further enhancements, you can create a robust, feature-rich language that brings the familiarity of Pascal to the modern web development landscape.

#PascalLanguage #JavaScriptCompiler #LanguageDesign #CompilerConstruction #ProgrammingLanguages