Feat: breakpoints

components/src/runbar.tsx

@@ -1,5 +1,5 @@
 import { Timer } from "@nand2tetris/simulator/timer.js";
-import { ChangeEvent, ReactNode, useEffect, useRef } from "react";
+import { ChangeEvent, MutableRefObject, ReactNode, useEffect, useRef } from "react";
 import { useStateInitializer } from "./react.js";
 import { useTimer } from "./timer.js";
 
@@ -11,6 +11,17 @@ interface RunbarTooltipOverrides {
 }
 
 export type RunSpeed = 0 | 1 | 2 | 3 | 4;
+interface TimerConfiguration {
+  speed: number;
+  steps: number;
+}
+const speedValues: Record<RunSpeed, TimerConfiguration> = {
+  0: { speed: 1000, steps: 1 },
+  1: { speed: 500, steps: 1 },
+  2: { speed: 16, steps: 1 },
+  3: { speed: 16, steps: 16666 },
+  4: { speed: 16, steps: 16666 * 30 },
+};
 
 export const Runbar = (props: {
   runner: Timer;
@@ -20,24 +31,22 @@ export const Runbar = (props: {
   children?: ReactNode;
   overrideTooltips?: Partial<RunbarTooltipOverrides>;
   onSpeedChange?: (speed: RunSpeed) => void;
+  breakpointsRef?: MutableRefObject<number[]>;
 }) => {
   const runner = useTimer(props.runner);
   const [speedValue, setSpeed] = useStateInitializer(props.speed ?? 2);
 
-  const speedValues: Record<RunSpeed, [number, number]> = {
-    0: [1000, 1],
-    1: [500, 1],
-    2: [16, 1],
-    3: [16, 16666],
-    4: [16, 16666 * 30],
-  };
+  useEffect(() => {
+    updateSpeed();
+  }, []);
 
   useEffect(() => {
     updateSpeed();
   }, [speedValue]);
 
+
   const updateSpeed = () => {
-    const [speed, steps] = speedValues[speedValue];
+    const {speed, steps} = speedValues[speedValue];
     runner.dispatch({ action: "setSpeed", payload: speed });
     runner.dispatch({ action: "setSteps", payload: steps });
   };
@@ -82,11 +91,13 @@ export const Runbar = (props: {
           className="flex-0"
           ref={toggleRef}
           disabled={props.disabled}
-          onClick={() =>
+          onClick={() =>{
+            runner.actions.setBreakpoints( props.breakpointsRef?.current ?? [])
             runner.state.running
               ? runner.actions.stop()
               : runner.actions.start()
           }
+          }
           data-tooltip={
             runner.state.running
               ? (props.overrideTooltips?.pause ?? `Pause`)

components/src/stores/vm.store.ts

@@ -346,12 +346,12 @@ export function makeVmStore(
     setPaused(paused = true) {
       vm.setPaused(paused);
     },
-    step() {
+    step(): VmStepResult {
       showHighlight = true;
       try {
         let done = false;
 
-        const exitCode = vm.step();
+        const { exitCode, lineNumber } = vm.step();
         if (exitCode !== undefined) {
           done = true;
           dispatch.current({ action: "setExitCode", payload: exitCode });
@@ -360,11 +360,11 @@ export function makeVmStore(
         if (animate) {
           dispatch.current({ action: "update" });
         }
-        return done;
+        return { done, lineNumber };
       } catch (e) {
         setStatus(`Runtime error: ${(e as Error).message}`);
         dispatch.current({ action: "setValid", payload: false });
-        return true;
+        return { done: true, lineNumber: -1 };
       }
     },
     reset() {
@@ -387,6 +387,24 @@ export function makeVmStore(
 
   return { initialState, reducers, actions };
 }
+export interface VmStepResult {
+  done: boolean;
+  lineNumber: number;
+}
+
+export interface VmPageStoreActions {
+  setVm(content: string): boolean | undefined;
+  loadVm(files: VmFile[]): boolean | undefined;
+  replaceVm(buildResult: Result<Vm, CompilationError>): boolean;
+  loadTest(path: string, source: string, cmp?: string): boolean;
+  setAnimate(value: boolean): void;
+  testStep(): Promise<boolean>;
+  setPaused(paused?: boolean): void;
+  step(): VmStepResult;
+  reset(): void;
+  toggleUseTest(): void;
+  initialize(): void;
+}
 
 export function useVmPageStore() {
   const { fs, setStatus, storage } = useContext(BaseContext);

components/src/timer.tsx

@@ -49,6 +49,10 @@ const makeTimerStore = (
     frame() {
       timer.frame();
     },
+    setBreakpoints(breakpoints: number[]) {
+      timer.setBreakpoints(breakpoints);
+    },
+
     start() {
       timer.start();
       dispatch.current({ action: "update" });

simulator/src/timer.ts

@@ -74,4 +74,7 @@ export abstract class Timer {
     this.#running = false;
     this.toggle();
   }
+  setBreakpoints(breakpoints: number[]) {
+
+  }
 }

simulator/src/vm/vm.ts

@@ -48,6 +48,7 @@ export interface VmFunction {
   labels: Record<string, number>;
   operations: VmInstruction[];
   opBase: number;
+  lineNumberOffset: number;
 }
 
 interface VmFunctionInvocation {
@@ -64,6 +65,8 @@ interface VmFunctionInvocation {
   thatInitialized: boolean;
   // The size of the memory block pointed to by the function's THIS (if exists)
   thisN?: number;
+  // Function line number offset
+  lineNumberOffset: number;
 }
 
 export const IMPLICIT = "__implicit";
@@ -73,6 +76,8 @@ export const SYS_INIT: VmFunction = {
   labels: {},
   nVars: 0,
   opBase: 0,
+  //TODO: RL change?
+  lineNumberOffset: 0,
   operations: [
     { op: "function", name: "Sys.init", nVars: 0 },
     { op: "call", name: "Math.init", nArgs: 0 },
@@ -305,6 +310,7 @@ export class Vm {
       labels: {},
       operations: [{ op: "function", name, nVars, span: instructions[i].span }],
       opBase: 0,
+      lineNumberOffset: i + 2,
     };
 
     const declaredLabels: Set<string> = new Set();
@@ -437,6 +443,7 @@ export class Vm {
         opPtr: 0,
         thisInitialized: false,
         thatInitialized: false,
+        lineNumberOffset: -3, //TODO: RL change?
       };
     }
     return invocation;
@@ -567,6 +574,7 @@ export class Vm {
         nArgs: 0,
         thisInitialized: false,
         thatInitialized: false,
+        lineNumberOffset: -2, //TODO: RL change
       },
     ];
     this.memory.reset();
@@ -631,20 +639,27 @@ export class Vm {
     this.os.paused = paused;
   }
 
-  step(): number | undefined {
+  step(): VmStepResult {
     if (this.os.sys.halted) {
-      return this.os.sys.exitCode;
+      return {
+        exitCode: this.os.sys.exitCode,
+        lineNumber: this.invocation.lineNumberOffset + this.invocation.opPtr,
+      };
     }
     if (this.os.sys.blocked) {
-      return;
+      return {
+        lineNumber: this.invocation.lineNumberOffset + this.invocation.opPtr,
+      };
     }
     if (this.os.sys.released && this.operation?.op == "call") {
       const ret = this.os.sys.readReturnValue();
       const sp = this.memory.SP - this.operation.nArgs;
       this.memory.set(sp, ret);
       this.memory.SP = sp + 1;
       this.invocation.opPtr += 1;
-      return;
+      return {
+        lineNumber: this.invocation.lineNumberOffset + this.invocation.opPtr,
+      };
     }
 
     if (this.operation == undefined) {
@@ -748,11 +763,12 @@ export class Vm {
             frameBase: base,
             thisInitialized: false,
             thatInitialized: false,
+            lineNumberOffset: -1, //TODO: RL change?
           });
         } else if (VM_BUILTINS[fnName]) {
           const ret = VM_BUILTINS[fnName].func(this.memory, this.os);
           if (this.os.sys.blocked) {
-            return; // we will handle the return when the OS is released
+            return { lineNumber: -1 }; // we will handle the return when the OS is released
           }
           const sp = this.memory.SP - operation.nArgs;
           this.memory.set(sp, ret);
@@ -767,13 +783,20 @@ export class Vm {
         this.invocation.opPtr = ret;
         if (this.executionStack.length === 0) {
           this.returnLine = line;
-          return 0;
+          return {
+            exitCode: 0,
+            lineNumber:
+              this.invocation.lineNumberOffset + this.invocation.opPtr,
+          };
         }
         break;
       }
     }
     this.invocation.opPtr += 1;
-    return;
+    const e = this.currentFunction;
+    const lineNumber = e.lineNumberOffset + this.invocation.opPtr - 1;
+
+    return { lineNumber };
   }
 
   private goto(label: string) {
@@ -899,6 +922,11 @@ export class Vm {
   }
 }
 
+interface VmStepResult {
+  exitCode?: number;
+  lineNumber: number;
+}
+
 export function writeFrame(frame: VmFrame): string {
   return [
     `Frame: ${frame.fn?.name ?? "Unknown Fn"} ARG:${frame.frame.ARG} LCL:${

web/package.json

@@ -31,6 +31,7 @@
     "immer": "^10.1.1",
     "jszip": "^3.10.1",
     "make-plural": "^7.4.0",
+    "monaco-breakpoints": "^0.2.0",
     "ohm-js": "^17.1.0",
     "prettier": "^3.3.1",
     "raw-loader": "^4.0.2",