feat: support for run modes and doctests

.gitignore

@@ -25,8 +25,8 @@ yarn-debug.log*
 yarn-error.log*
 
 .eslintcache
-
+.vscode
 # script outputs
 translationIssues.txt
-
+# Ignore output of local pip install when building the tar
 src/workers/python/python_package/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodona/papyros",
-  "version": "0.3.8",
+  "version": "0.4.3",
   "private": false,
   "homepage": ".",
   "devDependencies": {

scripts/ValidateTranslations.js

@@ -35,7 +35,8 @@ const checks = [
             "Papyros.locales.*",
             "Papyros.states.*",
             "Papyros.switch_input_mode_to.*",
-            "Papyros.input_placeholder.*"
+            "Papyros.input_placeholder.*",
+            "Papyros.run_modes.*"
         ]
     }
 ];

src/App.ts

@@ -20,7 +20,7 @@ async function startPapyros(): Promise<void> {
         standAlone: true,
         programmingLanguage: language,
         locale: locale,
-        inputMode: InputMode.Interactive,
+        inputMode: InputMode.Batch,
         channelOptions: {
             serviceWorkerName: DEFAULT_SERVICE_WORKER
         }
@@ -45,9 +45,14 @@ async function startPapyros(): Promise<void> {
     if (previousCode) {
         papyros.setCode(previousCode);
     }
-    papyros.codeRunner.editor.onChange(code => {
-        window.localStorage.setItem(LOCAL_STORAGE_CODE_KEY, code);
-    });
+    papyros.codeRunner.editor.onChange(
+        {
+            onChange: (code: string) => {
+                window.localStorage.setItem(LOCAL_STORAGE_CODE_KEY, code);
+            },
+            delay: 0
+        }
+    );
 
     await papyros.launch();
 }

src/Backend.ts

@@ -65,6 +65,11 @@ export interface WorkerDiagnostic {
     message: string;
 }
 
+export interface RunMode {
+    mode: string;
+    active: boolean;
+}
+
 export abstract class Backend<Extras extends SyncExtras = SyncExtras> {
     /**
      * SyncExtras object that grants access to helpful methods
@@ -122,13 +127,24 @@ export abstract class Backend<Extras extends SyncExtras = SyncExtras> {
         return Promise.resolve();
     }
 
+    /**
+     * Determine whether the modes supported by this Backend are active
+     * @param {string} code The current code in the editor
+     * @return {Array<RunMode>} The run modes of this Backend
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public runModes(code: string): Array<RunMode> {
+        return [];
+    }
+
     /**
      * Executes the given code
      * @param {Extras} extras Helper properties to run code
      * @param {string} code The code to run
+     * @param {string} mode The mode to run the code in
      * @return {Promise<void>} Promise of execution
      */
-    public abstract runCode(extras: Extras, code: string): Promise<void>;
+    public abstract runCode(extras: Extras, code: string, mode?: string): Promise<void>;
 
     /**
      * Converts the context to a cloneable object containing useful properties

src/CodeRunner.ts

@@ -3,12 +3,13 @@ import { SyncClient } from "comsync";
 import { Backend } from "./Backend";
 import { BackendEvent, BackendEventType } from "./BackendEvent";
 import { BackendManager } from "./BackendManager";
-import { CodeEditor } from "./CodeEditor";
+import { CodeEditor } from "./editor/CodeEditor";
 import {
-    APPLICATION_STATE_TEXT_ID, RUN_BTN_ID,
+    addPapyrosPrefix,
+    APPLICATION_STATE_TEXT_ID, CODE_BUTTONS_WRAPPER_ID, DEFAULT_EDITOR_DELAY, RUN_BTN_ID,
     STATE_SPINNER_ID, STOP_BTN_ID
 } from "./Constants";
-import { InputManager } from "./InputManager";
+import { InputManager, InputManagerRenderOptions, InputMode } from "./InputManager";
 import { ProgrammingLanguage } from "./ProgrammingLanguage";
 import { renderSpinningCircle } from "./util/HTMLShapes";
 import {
@@ -35,7 +36,7 @@ interface CodeRunnerRenderOptions {
     /**
      * Options for rendering the InputManager
      */
-    inputOptions: RenderOptions;
+    inputOptions: InputManagerRenderOptions;
     /**
      * Options for rendering the editor
      */
@@ -116,33 +117,55 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
     /**
      * Construct a new RunStateManager with the given listeners
      * @param {ProgrammingLanguage} programmingLanguage The language to use
+     * @param {InputMode} inputMode The input mode to use
      */
-    constructor(programmingLanguage: ProgrammingLanguage) {
+    constructor(programmingLanguage: ProgrammingLanguage, inputMode: InputMode) {
         super();
         this.programmingLanguage = programmingLanguage;
         this.editor = new CodeEditor(() => {
             if (this.state === RunState.Ready) {
-                this.runCode(this.editor.getCode());
+                this.runCode(this.editor.getText());
             }
         });
         this.inputManager = new InputManager(async (input: string) => {
             const backend = await this.backend;
             backend.writeMessage(input);
             this.setState(RunState.Running);
-        });
+        }, inputMode);
         this.outputManager = new OutputManager();
         this.backend = Promise.resolve({} as SyncClient<Backend>);
         this.buttons = [];
         this.addButton({
             id: RUN_BTN_ID,
             buttonText: t("Papyros.run"),
             classNames: "_tw-text-white _tw-bg-blue-500"
-        }, () => this.runCode(this.editor.getCode()));
+        }, () => this.runCode(this.editor.getText()));
         this.addButton({
             id: STOP_BTN_ID,
             buttonText: t("Papyros.stop"),
             classNames: "_tw-text-white _tw-bg-red-500"
         }, () => this.stop());
+        this.editor.onChange({
+            onChange: async code => {
+                const backend = await this.backend;
+                const modes = await backend.workerProxy.runModes(code);
+                modes.forEach(mode => {
+                    const id = addPapyrosPrefix(mode.mode);
+                    if (mode.active) {
+                        this.addButton({
+                            id: id,
+                            buttonText: t(`Papyros.run_modes.${mode.mode}`),
+                            classNames: "_tw-text-white _tw-bg-green-500"
+                        }, () => this.runCode(this.editor.getText(), mode.mode));
+                    } else {
+                        this.removeButton(id);
+                    }
+                });
+                this.renderButtons();
+            },
+            delay: DEFAULT_EDITOR_DELAY
+        });
+
         BackendManager.subscribe(BackendEventType.Input,
             () => this.setState(RunState.AwaitingInput));
         this.loadingPackages = [];
@@ -177,7 +200,7 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
             });
             this.editor.setLintingSource(
                 async view => {
-                    const workerDiagnostics = await workerProxy.lintCode(this.editor.getCode());
+                    const workerDiagnostics = await workerProxy.lintCode(this.editor.getText());
                     return workerDiagnostics.map(d => {
                         const fromline = view.state.doc.line(d.lineNr);
                         const toLine = view.state.doc.line(d.endLineNr);
@@ -250,7 +273,11 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
      * @param {string} message Optional message to indicate the state
      */
     public setState(state: RunState, message?: string): void {
-        this.state = state;
+        if (state !== this.state) {
+            getElement(APPLICATION_STATE_TEXT_ID).innerText =
+                message || t(`Papyros.states.${state}`);
+            this.state = state;
+        }
         this.stopButton.disabled = [RunState.Ready, RunState.Loading].includes(state);
         if ([RunState.Ready, RunState.Loading].includes(state)) {
             this.showSpinner(state == RunState.Loading);
@@ -259,41 +286,53 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
             this.showSpinner(true);
             this.runButton.disabled = true;
         }
-        getElement(APPLICATION_STATE_TEXT_ID).innerText =
-            message || t(`Papyros.states.${state}`);
     }
 
     public getState(): RunState {
         return this.state;
     }
 
+    public removeButton(id: string): void {
+        const existingIndex = this.buttons.findIndex(b => b.id === id);
+        if (existingIndex !== -1) {
+            this.buttons.splice(existingIndex, 1);
+        }
+    }
+
     /**
      * Add a button to display to the user
      * @param {ButtonOptions} options Options for rendering the button
      * @param {function} onClick Listener for click events on the button
      */
     public addButton(options: ButtonOptions, onClick: () => void): void {
+        this.removeButton(options.id);
         this.buttons.push({
             id: options.id,
             buttonHTML: renderButton(options),
             onClick: onClick
         });
     }
 
+    private renderButtons(): void {
+        getElement(CODE_BUTTONS_WRAPPER_ID).innerHTML =
+            this.buttons.map(b => b.buttonHTML).join("\n");
+        // Buttons are freshly added to the DOM, so attach listeners now
+        this.buttons.forEach(b => addListener(b.id, b.onClick, "click"));
+        // Ensure buttons are shown properly
+        this.setState(this.state);
+    }
+
     protected override _render(options: CodeRunnerRenderOptions): HTMLElement {
         const rendered = renderWithOptions(options.statusPanelOptions, `
 <div class="_tw-grid _tw-grid-cols-2 _tw-items-center _tw-mx-1">
-    <div class="_tw-col-span-1 _tw-flex _tw-flex-row">
-        ${this.buttons.map(b => b.buttonHTML).join("\n")}
+    <div id="${CODE_BUTTONS_WRAPPER_ID}" class="_tw-col-span-1 _tw-flex _tw-flex-row">
     </div>
     <div class="_tw-col-span-1 _tw-flex _tw-flex-row-reverse _tw-items-center">
         <div id="${APPLICATION_STATE_TEXT_ID}"></div>
         ${renderSpinningCircle(STATE_SPINNER_ID, "_tw-border-gray-200 _tw-border-b-red-500")}
     </div>
 </div>`);
-        // Buttons are freshly added to the DOM, so attach listeners now
-        this.buttons.forEach(b => addListener(b.id, b.onClick, "click"));
-        this.setState(this.state);
+        this.renderButtons();
         this.inputManager.render(options.inputOptions);
         this.outputManager.render(options.outputOptions);
         this.editor.render(options.codeEditorOptions);
@@ -305,9 +344,10 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
 
     /**
      * @param {string} code The code to run
+     * @param {string} mode The mode to run with
      * @return {Promise<void>} Promise of running the code
      */
-    public async runCode(code: string): Promise<void> {
+    public async runCode(code: string, mode?: string): Promise<void> {
         // Setup pre-run
         this.setState(RunState.Running);
         BackendManager.publish({
@@ -321,7 +361,7 @@ export class CodeRunner extends Renderable<CodeRunnerRenderOptions> {
         const backend = await this.backend;
         try {
             await backend.call(
-                backend.workerProxy.runCode, code
+                backend.workerProxy.runCode, code, mode
             );
         } catch (error: any) {
             if (error.type === "InterruptError") {

src/Constants.ts

@@ -20,6 +20,7 @@ export const EDITOR_WRAPPER_ID = addPapyrosPrefix("code-area");
 export const PANEL_WRAPPER_ID = addPapyrosPrefix("code-status-panel");
 export const STATE_SPINNER_ID = addPapyrosPrefix("state-spinner");
 export const APPLICATION_STATE_TEXT_ID = addPapyrosPrefix("application-state-text");
+export const CODE_BUTTONS_WRAPPER_ID = addPapyrosPrefix("code-buttons");
 export const RUN_BTN_ID = addPapyrosPrefix("run-code-btn");
 export const STOP_BTN_ID = addPapyrosPrefix("stop-btn");
 export const SEND_INPUT_BTN_ID = addPapyrosPrefix("send-input-btn");
@@ -32,3 +33,4 @@ export const DARK_MODE_TOGGLE_ID = addPapyrosPrefix("toggle-dark-mode");
 export const DEFAULT_PROGRAMMING_LANGUAGE = ProgrammingLanguage.Python;
 export const DEFAULT_LOCALE = "nl";
 export const DEFAULT_SERVICE_WORKER = "InputServiceWorker.js";
+export const DEFAULT_EDITOR_DELAY = 750; // milliseconds

src/InputManager.ts

@@ -12,6 +12,7 @@ import { UserInputHandler } from "./input/UserInputHandler";
 import { BatchInputHandler } from "./input/BatchInputHandler";
 import { BackendManager } from "./BackendManager";
 import { Renderable, RenderOptions, renderWithOptions } from "./util/Rendering";
+import { EditorStyling } from "./editor/CodeMirrorEditor";
 
 export enum InputMode {
     Interactive = "interactive",
@@ -20,18 +21,25 @@ export enum InputMode {
 
 export const INPUT_MODES = [InputMode.Batch, InputMode.Interactive];
 
-export class InputManager extends Renderable {
+export interface InputManagerRenderOptions extends RenderOptions {
+    /**
+     * Option to allow styling the editor area of the input handler
+     */
+    inputStyling?: Partial<EditorStyling>;
+}
+
+export class InputManager extends Renderable<InputManagerRenderOptions> {
     private inputMode: InputMode;
     private inputHandlers: Map<InputMode, UserInputHandler>;
     private waiting: boolean;
     private prompt: string;
 
     private sendInput: (input: string) => void;
 
-    constructor(sendInput: (input: string) => void) {
+    constructor(sendInput: (input: string) => void, inputMode: InputMode) {
         super();
         this.inputHandlers = this.buildInputHandlerMap();
-        this.inputMode = InputMode.Interactive;
+        this.inputMode = inputMode;
         this.sendInput = sendInput;
         this.waiting = false;
         this.prompt = "";
@@ -62,15 +70,15 @@ export class InputManager extends Renderable {
         this.inputHandler.toggle(true);
     }
 
-    private get inputHandler(): UserInputHandler {
+    public get inputHandler(): UserInputHandler {
         return this.inputHandlers.get(this.inputMode)!;
     }
 
     public isWaiting(): boolean {
         return this.waiting;
     }
 
-    protected override _render(options: RenderOptions): void {
+    protected override _render(options: InputManagerRenderOptions): void {
         let switchMode = "";
         const otherMode = this.inputMode === InputMode.Interactive ?
             InputMode.Batch : InputMode.Interactive;
@@ -88,7 +96,8 @@ ${switchMode}`);
 
         this.inputHandler.render({
             parentElementId: USER_INPUT_WRAPPER_ID,
-            darkMode: options.darkMode
+            darkMode: options.darkMode,
+            inputStyling: options.inputStyling
         });
         this.inputHandler.waitWithPrompt(this.waiting, this.prompt);
     }
@@ -99,7 +108,7 @@ ${switchMode}`);
         this.inputHandler.waitWithPrompt(this.waiting, this.prompt);
     }
 
-    private async onUserInput(): Promise<void> {
+    private onUserInput(): void {
         if (this.inputHandler.hasNext()) {
             const line = this.inputHandler.next();
             this.sendInput(line);
@@ -112,11 +121,10 @@ ${switchMode}`);
     /**
      * Asynchronously handle an input request by prompting the user for input
      * @param {BackendEvent} e Event containing the input data
-     * @return {Promise<void>} Promise of handling the request
      */
-    private async onInputRequest(e: BackendEvent): Promise<void> {
+    private onInputRequest(e: BackendEvent): void {
         this.prompt = e.data;
-        return await this.onUserInput();
+        this.onUserInput();
     }
 
     private onRunStart(): void {

src/Library.ts

@@ -1,5 +1,5 @@
 import { BackendEvent } from "./BackendEvent";
-import { CodeEditor } from "./CodeEditor";
+import { CodeEditor } from "./editor/CodeEditor";
 import { InputManager, InputMode } from "./InputManager";
 import { FriendlyError, OutputManager } from "./OutputManager";
 import { Papyros, PapyrosConfig, PapyrosRenderOptions } from "./Papyros";