Deploying to gh-pages from @ 43b2003 🚀

Backend.d.ts

@@ -28,9 +28,10 @@ export interface WorkerDiagnostic {
      */
     message: string;
 }
-export interface RunMode {
-    mode: string;
-    active: boolean;
+export declare enum RunMode {
+    Run = "run",
+    Debug = "debug",
+    Doctest = "doctest"
 }
 export declare abstract class Backend<Extras extends SyncExtras = SyncExtras> {
     /**

BackendEvent.d.ts

@@ -9,12 +9,11 @@ export declare enum BackendEventType {
     Sleep = "sleep",
     Error = "error",
     Interrupt = "interrupt",
-    Loading = "loading"
+    Loading = "loading",
+    Frame = "frame",
+    FrameChange = "frame-change",
+    Stop = "stop"
 }
-/**
- * All possible types for ease of iteration
- */
-export declare const BACKEND_EVENT_TYPES: BackendEventType[];
 /**
  * Interface for events used for communication between threads
  */

CodeRunner.d.ts

@@ -1,8 +1,9 @@
 import { CodeEditor } from "./editor/CodeEditor";
 import { InputManager, InputManagerRenderOptions, InputMode } from "./InputManager";
 import { ProgrammingLanguage } from "./ProgrammingLanguage";
-import { RenderOptions, ButtonOptions, Renderable } from "./util/Rendering";
+import { ButtonOptions, Renderable, RenderOptions } from "./util/Rendering";
 import { OutputManager } from "./OutputManager";
+import { Debugger } from "./Debugger";
 interface CodeRunnerRenderOptions {
     /**
      * Options for rendering the panel
@@ -20,6 +21,7 @@ interface CodeRunnerRenderOptions {
      * RenderOptions for the output field
      */
     outputOptions: RenderOptions;
+    traceOptions: RenderOptions;
 }
 /**
  * Enum representing the possible states while processing code
@@ -64,6 +66,7 @@ export declare class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
      * Component to handle output generated by the user's code
      */
     readonly outputManager: OutputManager;
+    readonly traceViewer: Debugger;
     /**
      * The backend that executes the code asynchronously
      */
@@ -73,9 +76,13 @@ export declare class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
      */
     private state;
     /**
-     * Buttons managed by this component
+     * Foreign buttons inserted into this component
      */
-    private buttons;
+    private userButtons;
+    /**
+     * Internal buttons for different run modes
+     */
+    private runButtons;
     /**
      * Array of packages that are being installed
      */
@@ -94,6 +101,8 @@ export declare class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
      * @param {InputMode} inputMode The input mode to use
      */
     constructor(programmingLanguage: ProgrammingLanguage, inputMode: InputMode);
+    private updateRunButtons;
+    private addRunButton;
     /**
      * Start the backend to enable running code
      */
@@ -141,11 +150,13 @@ export declare class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
     /**
      * Generate a button that the user can click to process code
      * Can either run the code or interrupt it if already running
-     * @return {DynamicButton} A button to interact with the code according to the current state
+     * @return {DynamicButton} A list of buttons to interact with the code according to the current state
      */
-    private getCodeActionButton;
+    private getCodeActionButtons;
     /**
      * Specific helper method to render only the buttons required by the user
+     * @param {DynamicButton[]} buttons The buttons to render
+     * @param {string} id The id of the element to render the buttons in
      */
     private renderButtons;
     protected _render(options: CodeRunnerRenderOptions): HTMLElement;

Constants.d.ts

@@ -17,7 +17,7 @@ export declare const PANEL_WRAPPER_ID: string;
 export declare const STATE_SPINNER_ID: string;
 export declare const APPLICATION_STATE_TEXT_ID: string;
 export declare const CODE_BUTTONS_WRAPPER_ID: string;
-export declare const RUN_BTN_ID: string;
+export declare const RUN_BUTTONS_WRAPPER_ID: string;
 export declare const STOP_BTN_ID: string;
 export declare const SEND_INPUT_BTN_ID: string;
 export declare const SWITCH_INPUT_MODE_A_ID: string;

Debugger.d.ts

@@ -0,0 +1,18 @@
+import { Renderable, RenderOptions } from "./util/Rendering";
+import "@dodona/trace-component";
+export type FrameState = {
+    line: number;
+    outputs: number;
+    inputs: number;
+};
+export declare class Debugger extends Renderable<RenderOptions> {
+    private frameStates;
+    private currentOutputs;
+    private currentInputs;
+    private traceComponent;
+    private traceBuffer;
+    constructor();
+    protected _render(options: RenderOptions): void;
+    reset(): void;
+    clearBuffer(): void;
+}

Papyros.d.ts

@@ -1,8 +1,8 @@
 import { InputManagerRenderOptions, InputMode } from "./InputManager";
 import { ProgrammingLanguage } from "./ProgrammingLanguage";
-import { RunState, CodeRunner } from "./CodeRunner";
+import { CodeRunner, RunState } from "./CodeRunner";
 import { AtomicsChannelOptions, ServiceWorkerChannelOptions } from "sync-message";
-import { RenderOptions, ButtonOptions, Renderable } from "./util/Rendering";
+import { ButtonOptions, Renderable, RenderOptions } from "./util/Rendering";
 /**
  * Configuration options for this instance of Papyros
  */
@@ -62,6 +62,7 @@ export interface PapyrosRenderOptions {
      * Whether to render in dark mode
      */
     darkMode?: boolean;
+    traceOptions?: RenderOptions;
 }
 /**
  * Class that manages multiple components to form a coding scratchpad

Translations.d.ts

@@ -61,10 +61,19 @@ declare namespace ENGLISH_TRANSLATION {
     let loading_1: string;
     export { loading_1 as loading };
     export namespace run_modes {
-        let doctest: string;
+        export let doctest: string;
+        export let debug: string;
+        let run_1: string;
+        export { run_1 as run };
     }
     export let used_input: string;
     export let used_input_with_prompt: string;
+    export namespace _debugger {
+        let title: string;
+        let text_1: string;
+        let text_2: string;
+    }
+    export { _debugger as debugger };
 }
 declare namespace DUTCH_TRANSLATION {
     let Papyros_1: string;
@@ -88,8 +97,8 @@ declare namespace DUTCH_TRANSLATION {
     export { output_1 as output };
     let output_placeholder_1: string;
     export { output_placeholder_1 as output_placeholder };
-    let run_1: string;
-    export { run_1 as run };
+    let run_2: string;
+    export { run_2 as run };
     let stop_1: string;
     export { stop_1 as stop };
     export namespace states_1 {
@@ -153,12 +162,25 @@ declare namespace DUTCH_TRANSLATION {
     export namespace run_modes_1 {
         let doctest_1: string;
         export { doctest_1 as doctest };
+        let debug_1: string;
+        export { debug_1 as debug };
+        let run_3: string;
+        export { run_3 as run };
     }
     export { run_modes_1 as run_modes };
     let used_input_1: string;
     export { used_input_1 as used_input };
     let used_input_with_prompt_1: string;
     export { used_input_with_prompt_1 as used_input_with_prompt };
+    export namespace _debugger_1 {
+        let title_1: string;
+        export { title_1 as title };
+        let text_1_1: string;
+        export { text_1_1 as text_1 };
+        let text_2_1: string;
+        export { text_2_1 as text_2 };
+    }
+    export { _debugger_1 as debugger };
 }
 declare const ENGLISH_PHRASES: {
     "Go to line": string;

editor/CodeEditor.d.ts

@@ -11,6 +11,7 @@ export declare class CodeEditor extends CodeMirrorEditor {
     static PANEL: string;
     static AUTOCOMPLETION: string;
     static LINTING: string;
+    private debugLineGutter;
     /**
      * Construct a new CodeEditor
      * @param {Function} onRunRequest Callback for when the user wants to run the code

editor/Gutters.d.ts

@@ -98,3 +98,14 @@ export declare class UsedInputGutters extends Gutters<UsedInputGutterInfo> {
     constructor();
     protected marker(info: UsedInputGutterInfo): GutterMarker;
 }
+/**
+ * shows the debugged line
+ */
+export declare class DebugLineGutter extends Gutters<GutterInfo> {
+    private activeLine;
+    constructor();
+    protected marker(): GutterMarker;
+    private hide;
+    private show;
+    markLine(view: EditorView, lineNr: number): void;
+}

util/Rendering.d.ts

@@ -60,6 +60,10 @@ export interface ButtonOptions {
      * Optional classes to apply to the button
      */
     classNames?: string;
+    /**
+     * Optional icon to display in the button
+     */
+    icon?: string;
 }
 /**
  * Construct a HTML button string from the given options