Feat/compiler

.gitignore

@@ -24,3 +24,6 @@ out
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+**/.vscode/numbered-bookmars.json
+**/.antlr
+.idea/

.vscode/launch.json

@@ -34,6 +34,13 @@
       ],
       "outFiles": ["${workspaceFolder}/extension/build/test/**/*.js"],
       "preLaunchTask": "${defaultBuildTask}"
+    },
+    { 
+      "type": "chrome",
+      "request": "launch",
+      "name": "Test web ide",
+      "url": "http://localhost:3000/web-ide",
+      "webRoot": "${workspaceFolder}"
     }
   ]
 }

cli/src/index.ts

@@ -7,7 +7,7 @@ import { testRunner } from "./testrunner.js";
 import { NodeFileSystemAdapter } from "@davidsouther/jiffies/lib/esm/fs_node.js";
 import { FileSystem } from "@davidsouther/jiffies/lib/esm/fs.js";
 import * as fsCore from "fs";
-import { compile } from "@nand2tetris/simulator/jack/compiler.js";
+import { compile } from "@nand2tetris/simulator/jack/anltr.compiler.js";
 
 yargs(hideBin(process.argv))
   .usage("$0 <cmd>")

components/src/stores/compiler.store.ts

@@ -1,5 +1,8 @@
 import { FileSystem } from "@davidsouther/jiffies/lib/esm/fs.js";
-import { compile } from "@nand2tetris/simulator/jack/compiler.js";
+import {
+  compile,
+  validate,
+} from "@nand2tetris/simulator/jack/anltr.compiler.js";
 import { CompilationError } from "@nand2tetris/simulator/languages/base.js";
 import { Dispatch, MutableRefObject, useContext, useMemo, useRef } from "react";
 import { useImmerReducer } from "../react.js";
@@ -30,7 +33,10 @@ export type CompilerStoreDispatch = Dispatch<{
 function classTemplate(name: string) {
   return `class ${name} {\n\n}\n`;
 }
-
+interface FileEntry {
+  name: string;
+  content: string;
+}
 export function makeCompilerStore(
   setStatus: Action<string>,
   dispatch: MutableRefObject<CompilerStoreDispatch>,
@@ -46,13 +52,14 @@ export function makeCompilerStore(
       state.title = undefined;
     },
 
-    setFile(
-      state: CompilerPageState,
-      { name, content }: { name: string; content: string },
-    ) {
+    setFile(state: CompilerPageState, { name, content }: FileEntry) {
       state.files[name] = content;
       state.isCompiled = false;
-      this.compile(state);
+    },
+
+    setFileAndValidate(state: CompilerPageState, entry: FileEntry) {
+      this.setFile(state, entry);
+      this.validate(state);
     },
 
     // the keys of 'files' have to be the full file path, not basename
@@ -62,10 +69,12 @@ export function makeCompilerStore(
       this.compile(state);
     },
 
-    compile(state: CompilerPageState) {
-      const compiledFiles = compile(state.files);
+    _processCompilationResults(
+      state: CompilerPageState,
+      files: Record<string, string | CompilationError>,
+    ) {
       state.compiled = {};
-      for (const [name, compiled] of Object.entries(compiledFiles)) {
+      for (const [name, compiled] of Object.entries(files)) {
         if (typeof compiled === "string") {
           state.compiled[name] = {
             valid: true,
@@ -83,6 +92,16 @@ export function makeCompilerStore(
       );
     },
 
+    validate(state: CompilerPageState) {
+      state.isCompiled = false;
+      this._processCompilationResults(state, validate(state.files));
+    },
+
+    compile(state: CompilerPageState) {
+      state.isCompiled = false;
+      this._processCompilationResults(state, compile(state.files));
+    },
+
     writeCompiled(state: CompilerPageState) {
       if (Object.values(state.compiled).every((compiled) => compiled.valid)) {
         for (const [name, compiled] of Object.entries(state.compiled)) {
@@ -136,15 +155,29 @@ export function makeCompilerStore(
         await fs.writeFile(`${name}.jack`, content);
       }
     },
+    async writeNewFile(name: string, content?: string) {
+      content ??= classTemplate(name);
+      dispatch.current({
+        action: "setFileAndValidate",
+        payload: { name, content },
+      });
+      if (fs) {
+        await fs.writeFile(`${name}.jack`, content);
+      }
+    },
 
     async reset() {
       fs = undefined;
       dispatch.current({ action: "reset" });
     },
 
     async compile() {
+      dispatch.current({ action: "compile" });
       dispatch.current({ action: "writeCompiled" });
     },
+    async validate() {
+      dispatch.current({ action: "validate" });
+    },
   };
 
   const initialState: CompilerPageState = {

simulator/package.json

@@ -22,19 +22,24 @@
     "@nand2tetris/projects": "^1.0.0",
     "@nand2tetris/runner": "^1.0.0",
     "@types/node": "^20.14.2",
+    "antlr4ng": "^3.0.7",
     "ohm-js": "^17.1.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.24.7",
     "@types/jest": "^29.5.12",
+    "antlr4ng-cli": "^2.0.0",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "typescript": "^5.4.5"
   },
   "scripts": {
     "build": "tsc",
-    "test": "jest --verbose"
+    "test": "jest --verbose",
+    "test-jack": "npm run test -- -t \"Jack\"",
+    "test-jack-w": "npm run test-w -- -t \"Jack\"",
+    "gen": "cd src/languages/grammars && antlr4ng -Dlanguage=TypeScript JackLexer.g4 JackParser.g4 -o ../../jack/generated"
   }
 }

simulator/src/jack/README.md

@@ -0,0 +1,25 @@
+# ANTLR Jack compiler
+
+ANTLR gives us ability to generate lexer and parser in the target programming language(typescript in this case) using grammar files for [lexer](src/languages/grammars/JackLexer.g4) and [parser](src/languages/grammars/JackParser.g4).
+
+After parsing is done we get a tree data structure as an output. To do anything useful with this this tree we can use the next 2 design patterns:
+
+1. Listener
+2. Visitor
+
+You can read more about this design patterns and the difference between them in this [blog post](https://tomassetti.me/listeners-and-visitors/). You can also check out [antlr mega tutorial from the same company](https://tomassetti.me/antlr-mega-tutorial/).
+
+For jack we use next listeners:
+
+- Error listener - listens to lexer and parser errors
+- Global symbol table listener - creates global symbol table (classes and subroutines symbols)
+- Validator listener - validates jack program
+- VM Writer listener - generates VM code
+
+# Regenerate Jack Lexer and Parser files
+
+Next command gives us ability to regenerate parser and lexer after we've changed the grammar (.g4 files) for [lexer](src/languages/grammars/JackLexer.g4) or [parser](src/languages/grammars/JackParser.g4)
+
+```
+npm run gen
+```