@basthon/console-react 0.1.0 → 0.1.2

package/lib/gui/terminal.js

@@ -0,0 +1,242 @@
+import $ from "jquery";
+import "jquery.terminal";
+import "jquery.terminal/css/jquery.terminal.css";
+/**
+ * Wrapper class arround JQTerminal.
+ */
+export default class Terminal {
+    constructor(element, kernel) {
+        // A buffer to handle multiline terminal input.
+        this._buffer = [];
+        // tell wether we are waiting for user input during
+        // program execution (Python's input())
+        this._inputMode = false;
+        // array of destroy callbacks
+        this._destroyCb = [];
+        this._elem = element;
+        this._kernel = kernel;
+        // just to be safe
+        this.reset_buffer();
+        this._term = $(element).terminal(this._interpreter.bind(this), {
+            greetings: this.banner(),
+            prompt: kernel.ps1(),
+            completionEscape: false,
+            completion: async (command, callback) => {
+                await kernel.ready();
+                return (await kernel.complete(command))?.[0] ?? [];
+            },
+        });
+        // this prevents JQuery Terminal to redraw terminal and remove
+        // script wrapping feature
+        // @ts-ignore
+        // term.resize = () => {};
+        /* Event connections */
+        const events = {
+            "eval.finished": (data) => {
+                if (data.interactive && "result" in data) {
+                    this.echo(data.result["text/plain"] + "\n");
+                }
+                this._term.set_prompt(this._kernel.ps1());
+                this.wakeup();
+            },
+            "eval.output": (data) => {
+                switch (data.stream) {
+                    case "stdout":
+                        this.echo(data.content);
+                        break;
+                    case "stderr":
+                        this.error(data.content);
+                        break;
+                }
+            },
+            "eval.error": (data) => {
+                this._term.set_prompt(this._kernel.ps1());
+                this.wakeup();
+            },
+            "eval.input": (data) => {
+                this._inputMode = true;
+                const prompt = data?.content?.prompt;
+                if (prompt != null)
+                    this.echo(prompt);
+                this._inputResolve = data.resolve;
+                this.wakeup();
+                this.focus();
+            },
+        };
+        for (const event in events) {
+            const callback = events[event];
+            this._kernel.addEventListener(event, callback);
+            // remember to remove listeners on destroy
+            this._destroyCb.push(() => this._kernel.removeEventListener(event, callback));
+        }
+    }
+    /**
+     * Mimic CPython's REPL banner.
+     */
+    banner() {
+        let banner = this._kernel.banner();
+        banner = banner.replace("on WebAssembly/Emscripten", "");
+        return banner;
+    }
+    /**
+     * Reset the multiline input buffer.
+     */
+    reset_buffer() {
+        this._buffer = [];
+    }
+    async _interpreter(command) {
+        // user answers to its program's input
+        if (this._inputMode) {
+            this._term.set_prompt("");
+            this._inputMode = false;
+            this.pause();
+            this._inputResolve?.(command);
+            return;
+        }
+        // user interacts with REPL
+        this._buffer.push(command);
+        const source = this._buffer.join("\n");
+        if (await this._kernel.more(source)) {
+            this._term.set_prompt(this._kernel.ps2());
+        }
+        else {
+            this._term.set_prompt(this._kernel.ps1());
+            this.reset_buffer();
+            this.launch(source, true);
+        }
+    }
+    /**
+     * Force waiting for input to end.
+     */
+    async _stopWaitInput() {
+        if (!this._inputMode)
+            return;
+        this._inputResolve?.();
+        this._inputMode = false;
+    }
+    /**
+     * Print a string in the terminal.
+     */
+    echo(message) {
+        // JQuery.terminal adds a trailing newline that is not easy
+        // to remove with the current API. Doing our best here.
+        message = message.toString();
+        // prompt can be polluted with previous echo
+        // _prompt_tail is the line part just before the prompt
+        const term = this._term;
+        let prompt_tail = this._prompt_tail ?? "";
+        let prompt = term.get_prompt();
+        if (prompt.startsWith(prompt_tail))
+            prompt = prompt.slice(prompt_tail.length);
+        else
+            prompt_tail = "";
+        // here, prompt and _prompt_tail should be correctly isolated
+        const lines = message.split("\n");
+        lines[0] = prompt_tail + lines[0];
+        prompt_tail = lines.pop() ?? "";
+        term.set_prompt(prompt_tail + prompt);
+        if (lines.length) {
+            // term.echo("") does not display blank line
+            // so we replace this call with term.echo('\b')
+            term.echo(lines.join("\n") || "\b");
+        }
+        this._prompt_tail = prompt_tail;
+    }
+    /**
+     * Print error in terminal (in red).
+     */
+    error(message) {
+        // JQuery.terminal adds a trailing newline that is not easy
+        // to remove with the current API. Doing our best here.
+        message = message.toString();
+        return this._term.error(message.replace(/\n+$/, ""));
+    }
+    /**
+     * Pause the terminal execution (usefull to wait for event or promise).
+     */
+    pause() {
+        this._term.pause();
+    }
+    /**
+     * Resume the terminal execution (see `pause`).
+     */
+    wakeup() {
+        this._term.resume();
+    }
+    /**
+     * Recover the terminal as it was at start.
+     */
+    clear() {
+        this._term.clear();
+        this.echo(this.banner() + "\n");
+        this.reset_buffer();
+        this._stopWaitInput();
+    }
+    /**
+     * Launch code in terminal.
+     */
+    launch(code, interactive = true) {
+        this._stopWaitInput();
+        if (!interactive)
+            this.showScript(code);
+        this.pause();
+        this._term.set_prompt("");
+        this._kernel.dispatchEvent("eval.request", {
+            code: code,
+            interactive: interactive,
+        });
+    }
+    /**
+     * Give focus to terminal.
+     */
+    focus() {
+        this._term.focus();
+    }
+    /**
+     * Show script in terminal with content as dropdown
+     * (should improve readability).
+     */
+    showScript(code) {
+        code = `# script executed\n${code}`;
+        let script = `${this._kernel.ps1()}`;
+        script += code.split("\n").join(`\n${this._kernel.ps2()}`);
+        script += "\n";
+        this.echo(script);
+        const output = this._elem.querySelector(".terminal-output")?.lastElementChild;
+        const header = output?.firstElementChild;
+        if (header == null)
+            return;
+        header.classList.add("exec-script-header");
+        for (const e of header.children)
+            e.style.backgroundColor = "inherit";
+        function hideShow() {
+            const converter = {
+                none: "block",
+                "": "none",
+                block: "none",
+            };
+            if (output == null)
+                return;
+            for (const e of output.children) {
+                if (e === header)
+                    continue;
+                const style = e.style;
+                style.display = converter[style.display];
+            }
+        }
+        header.addEventListener("click", hideShow);
+        // remember to remove listeners on destroy
+        this._destroyCb.push(() => header.removeEventListener("click", hideShow));
+        hideShow();
+    }
+    /**
+     * Destroy all created by terminal.
+     */
+    destroy() {
+        this._destroyCb.forEach((cb) => cb());
+        this._destroyCb = [];
+        this._term.destroy();
+        this._term.empty();
+        this._term.off();
+    }
+}

package/lib/hooks/async-effect.d.ts

@@ -0,0 +1,7 @@
+import { type MutableRefObject } from "react";
+type AsyncEffectCallback = () => Promise<void>;
+/**
+ * Custom hook to use async mount/unmount.
+ */
+declare const useAsyncEffect: (onMount: AsyncEffectCallback, onUnmount?: AsyncEffectCallback, deps?: readonly unknown[], syncTo?: MutableRefObject<Promise<void>>) => MutableRefObject<Promise<void>>;
+export { useAsyncEffect };

package/lib/hooks/async-effect.js

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from "react";
+/**
+ * Custom hook to use async mount/unmount.
+ */
+const useAsyncEffect = (onMount, onUnmount, deps, syncTo) => {
+    const promise = syncTo ?? useRef(Promise.resolve());
+    useEffect(() => {
+        promise.current = promise.current.then(onMount);
+        if (onUnmount == null)
+            return;
+        return () => {
+            promise.current = promise.current.then(onUnmount);
+        };
+    }, deps);
+    return promise;
+};
+export { useAsyncEffect };

package/lib/hooks/basthon.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from "react";
+import { GUIBase } from "@basthon/gui-base";
+declare const useGUI: () => GUIBase;
+interface BasthonContextProps {
+    GUI?: typeof GUIBase;
+    rootPath?: string;
+    kernel?: string;
+    pyodideURLs?: string[];
+    noCheckpointsInit?: boolean;
+}
+/**
+ * This (pseudo) context is in charge of basthon
+ * kernel loading.
+ */
+declare const BasthonContext: FC<PropsWithChildren<BasthonContextProps>>;
+export { BasthonContext, useGUI, type BasthonContextProps };

package/lib/hooks/basthon.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const GUIContext = createContext(null);
+const useGUI = () => useContext(GUIContext);
+let gui;
+/**
+ * This (pseudo) context is in charge of basthon
+ * kernel loading.
+ */
+const BasthonContext = (props) => {
+    if (props.GUI == null)
+        throw Error("Basthon GUI class not set");
+    const rootPath = props.rootPath ?? "assets";
+    const pyodideURLs = props.pyodideURLs;
+    const noCheckpointsInit = props.noCheckpointsInit ?? false;
+    let kernel = props.kernel;
+    // set kernel
+    if (kernel == null) {
+        const url = new URL(window.location.href);
+        const params = url.searchParams;
+        kernel = params.get("kernel")?.toLowerCase() ?? "python3";
+    }
+    // set legacy
+    let legacy = false;
+    if (kernel.endsWith("-legacy")) {
+        kernel = kernel.slice(0, -"-legacy".length);
+        legacy = true;
+    }
+    // set language
+    kernel =
+        {
+            // shortcuts
+            py: "python3",
+            python: "python3",
+            "python3-old": "python3", // for backward compatibility
+            js: "javascript",
+        }[kernel] ?? kernel;
+    const language = kernel;
+    // transition phase: we force legacy mode for pyhton3 kernel
+    legacy = legacy === true || language === "python3";
+    if (gui == null) {
+        gui = new props.GUI({
+            kernelOptions: {
+                rootPath,
+                language,
+                legacy,
+                pyodideURLs,
+            },
+            noCheckpointsInit,
+        });
+        gui.init();
+    }
+    return (_jsx(GUIContext.Provider, { value: gui, children: props.children }));
+};
+export { BasthonContext, useGUI };

package/lib/hooks/dispatch.d.ts

@@ -0,0 +1,4 @@
+import { type Dispatch, type Action } from "../state-manager";
+declare const DispatchContext: import("react").Context<Dispatch<Action> | null>;
+declare const useDispatch: () => Dispatch<Action>;
+export { DispatchContext, useDispatch };

package/lib/hooks/dispatch.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const DispatchContext = createContext(null);
+const useDispatch = () => useContext(DispatchContext);
+export { DispatchContext, useDispatch };

package/lib/hooks/gui.d.ts

@@ -0,0 +1,3 @@
+import GUI from "../gui/gui";
+declare const useGUI: () => GUI;
+export { useGUI };

package/lib/hooks/gui.js

@@ -0,0 +1,3 @@
+import { useGUI as useGUIBase } from "./basthon";
+const useGUI = () => useGUIBase();
+export { useGUI };

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import ConsoleApp from "./components/app";
+export { ConsoleApp };

package/lib/index.js

@@ -0,0 +1,2 @@
+import ConsoleApp from "./components/app";
+export { ConsoleApp };

package/lib/state-manager.d.ts

@@ -0,0 +1,38 @@
+import { type Dispatch } from "react";
+type Language = "python3" | "sql" | "javascript" | "ocaml" | "xcas";
+type Theme = "light" | "dark";
+type ViewMode = "default" | "reversed" | "terminal-only" | "script-only";
+type RightPanel = "terminal" | "graphics";
+interface State {
+    ready: boolean;
+    language: Language;
+    theme: Theme;
+    viewMode: ViewMode;
+    rightPanel: RightPanel;
+    graphicsDirty: boolean;
+    editorContent: string;
+}
+interface Action {
+    type: "init" | "set-theme" | "switch-theme" | "set-view-mode" | "switch-view" | "set-right-panel" | "graphics-dirty" | "set-editor-content";
+    payload?: Theme | ViewMode | RightPanel | State | string;
+}
+declare const stateManager: {
+    useReducer: (language: Language) => readonly [{
+        language: Language;
+        ready: boolean;
+        theme: Theme;
+        viewMode: ViewMode;
+        rightPanel: RightPanel;
+        graphicsDirty: boolean;
+        editorContent: string;
+    }, Dispatch<Action>];
+    ready: (state: State) => boolean;
+    language: (state: State) => Language;
+    theme: (state: State) => Theme;
+    viewMode: (state: State) => ViewMode;
+    rightPanel: (state: State) => RightPanel;
+    graphicsDirty: (state: State) => boolean;
+    editorContent: (state: State) => string;
+};
+export { type Dispatch, type Action, type Language, type Theme, type ViewMode, type RightPanel, };
+export default stateManager;

package/lib/state-manager.js

@@ -0,0 +1,101 @@
+import { useEffect } from "react";
+/* we use immer to fake mutable state */
+import { useImmerReducer } from "use-immer";
+import { Storage } from "@basthon/checkpoints";
+/* this initial state */
+const initialState = {
+    ready: false,
+    language: "python3",
+    theme: "dark",
+    viewMode: "default",
+    rightPanel: "terminal",
+    graphicsDirty: false,
+    editorContent: "",
+};
+/* copy throught JSON, should be sufficient for what we do */
+function copy(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+/* states to store */
+const storedStates = ["theme", "viewMode", "rightPanel", "editorContent"];
+/* get state from storage */
+const stateFromStorage = async (language) => {
+    const storage = new Storage(`console.${language}.states`);
+    await storage.ready();
+    const state = { ...initialState, language };
+    for (let key of storedStates) {
+        const storageValue = await storage.get(key);
+        if (storageValue != null)
+            state[key] = storageValue;
+    }
+    return state;
+};
+/* save state to storage */
+const stateToStorage = async (state) => {
+    const storage = new Storage(`console.${state.language}.states`);
+    await storage.ready();
+    for (let key of storedStates)
+        await storage.set(key, state[key]);
+};
+/* where our global logic takes place */
+const reducer = (state, action) => {
+    const { type, payload } = action;
+    switch (type) {
+        case "init": {
+            const state = copy(payload);
+            state.ready = true;
+            return state;
+        }
+        case "set-theme":
+            state.theme = payload;
+            break;
+        case "switch-theme":
+            state.theme = state.theme === "light" ? "dark" : "light";
+            break;
+        case "switch-view":
+            state.viewMode = state.viewMode === "default" ? "reversed" : "default";
+            break;
+        case "set-view-mode":
+            state.viewMode = payload;
+            break;
+        case "set-right-panel":
+            state.rightPanel = payload;
+            if (state.rightPanel === "graphics")
+                state.graphicsDirty = false;
+            break;
+        case "graphics-dirty":
+            if (state.rightPanel !== "graphics")
+                state.graphicsDirty = true;
+            break;
+        case "set-editor-content":
+            state.editorContent = payload;
+            break;
+        default:
+            throw Error(`Internal error: unrecognized action type: '${type}'!`);
+    }
+    stateToStorage(copy(state));
+};
+/* stateManager exposed as API */
+const stateManager = {
+    useReducer: (language) => {
+        const [state, dispatch] = useImmerReducer(reducer, {
+            ...initialState,
+            language,
+        });
+        // dispatch init from storage
+        useEffect(() => {
+            stateFromStorage(language).then((payload) => {
+                dispatch({ type: "init", payload });
+            });
+        }, []);
+        return [state, dispatch];
+    },
+    ready: (state) => state.ready,
+    language: (state) => state.language,
+    theme: (state) => state.theme,
+    viewMode: (state) => state.viewMode,
+    rightPanel: (state) => state.rightPanel,
+    graphicsDirty: (state) => state.graphicsDirty,
+    editorContent: (state) => state.editorContent,
+};
+export default stateManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basthon/console-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Basthon - Console React Component",
   "homepage": "https://basthon.fr",
   "bugs": {