Add stepping and breakpoints to debugger

ui/Mainframe.tsx

@@ -57,6 +57,21 @@ export const Mainframe = () => {
     await execController.pauseExecution();
   };
 
+  /** Run a single step of execution */
+  const executeStep = async () => {
+    // Check if controller is paused
+    if (execController.state !== "paused") {
+      console.error("Controller not paused");
+      return;
+    }
+
+    // Run and update execution states
+    const result = await execController.executeStep();
+    setRendererState(result.rendererState);
+    setCodeHighlights(result.nextStepLocation || undefined);
+    setOutput((o) => (o || "") + (result.output || ""));
+  };
+
   /** Resume the currently paused execution */
   const resumeExecution = async () => {
     // Check if controller is indeed paused
@@ -125,6 +140,7 @@ export const Mainframe = () => {
           onRun={runProgram}
           onPause={pauseExecution}
           onResume={resumeExecution}
+          onStep={executeStep}
           onStop={stopExecution}
         />
       )}

ui/execution-controls.tsx

@@ -24,6 +24,7 @@ const DebugControls = (props: {
   paused: boolean;
   onPause: () => void;
   onResume: () => void;
+  onStep: () => void;
   onStop: () => void;
 }) => {
   return (
@@ -37,6 +38,7 @@ const DebugControls = (props: {
       <Button
         small
         title="Step"
+        onClick={props.onStep}
         disabled={!props.paused}
         icon={<Icon icon="step-forward" intent="warning" />}
       />
@@ -55,6 +57,7 @@ type Props = {
   onRun: () => void;
   onPause: () => void;
   onResume: () => void;
+  onStep: () => void;
   onStop: () => void;
 };
 
@@ -68,6 +71,7 @@ export const ExecutionControls = (props: Props) => {
           paused={props.state === "paused"}
           onPause={props.onPause}
           onResume={props.onResume}
+          onStep={props.onStep}
           onStop={props.onStop}
         />
       )}

ui/use-exec-controller.ts

@@ -140,6 +140,20 @@ export const useExecController = <RS>() => {
     });
   }, []);
 
+  /**
+   * Run a single step of execution
+   * @return Execution result
+   */
+  const executeStep = React.useCallback(async () => {
+    const res = await requestWorker(
+      { type: "ExecuteStep" },
+      (res) => res.type !== "result"
+    );
+    if (res.type !== "result") throw new Error("Something unexpected happened");
+    if (!res.data.nextStepLocation) setWorkerState("done");
+    return res.data;
+  }, []);
+
   /**
    * Execute the code loaded into the engine
    * @param onResult Callback used when an execution result is received
@@ -172,6 +186,7 @@ export const useExecController = <RS>() => {
     prepare,
     pauseExecution,
     execute,
+    executeStep,
     updateBreakpoints,
   };
 };