@basthon/console-react 0.5.8 → 0.6.8

package/lib/components/app.d.ts

@@ -1,10 +1,14 @@
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, type ReactNode } from "react";
 import { type BasthonContextProps } from "@basthon/gui-react";
 import { type Theme } from "../state-manager";
+import { type PanelTitles } from "./main-container";
 interface InnerAppProps {
     initFromStorage?: boolean;
+    storedStates?: string[];
     forceTheme?: Theme;
     compactHeader?: boolean;
+    header?: ReactNode;
+    panelTitles?: PanelTitles;
     onChangeEditor?: () => void;
 }
 interface AppProps extends BasthonContextProps, InnerAppProps {
@@ -13,4 +17,5 @@ interface AppProps extends BasthonContextProps, InnerAppProps {
  * Main app setting up state manager, header, main container and footer.
  */
 declare const ConsoleApp: FC<PropsWithChildren<AppProps>>;
+export { type AppProps };
 export default ConsoleApp;

package/lib/components/app.js

@@ -5,36 +5,42 @@ import GUI from "../gui/gui";
 import { useGUI } from "../hooks/gui";
 import stateManager from "../state-manager";
 import { DispatchContext } from "../hooks/dispatch";
+import { StateContext } from "../hooks/state";
 import { Header } from "./header";
 import { MainContainer } from "./main-container";
 import { Footer } from "./footer";
 import * as styles from "./styles.module.scss";
-const InnerApp = ({ initFromStorage, forceTheme, compactHeader, onChangeEditor, children, }) => {
+const InnerApp = ({ initFromStorage, storedStates, forceTheme, compactHeader, header, panelTitles, onChangeEditor, children, }) => {
     const gui = useGUI();
     // state
-    const [state, dispatch] = stateManager.useReducer(gui.language, initFromStorage ?? true);
+    const [state, dispatch] = stateManager.useReducer(gui.language, initFromStorage ?? true, storedStates);
     const language = stateManager.language(state);
     const theme = forceTheme != null ? forceTheme : stateManager.theme(state);
     // set data-theme for basthon-loader footer
     // FIXME: remove this when basthon-loader is a plain react component
     useEffect(() => {
+        gui.setTheme(theme);
         document.body.setAttribute("data-theme", theme);
         return () => {
             document.body.removeAttribute("data-theme");
         };
     }, [theme]);
     // build component
-    return (_jsxs(DispatchContext.Provider, { value: dispatch, children: [children, _jsxs("div", { className: styles.root, children: [_jsx(Header, { language: language, theme: theme, compact: compactHeader }), stateManager.ready(state) && (_jsx(MainContainer, { language: language, theme: theme, viewMode: stateManager.viewMode(state), rightPanel: stateManager.rightPanel(state), graphicsDirty: stateManager.graphicsDirty(state), editorContent: stateManager.editorContent(state), onChangeEditor: onChangeEditor, compactHeader: compactHeader })), _jsx(Footer, { theme: theme })] })] }));
+    return (_jsx(DispatchContext.Provider, { value: dispatch, children: _jsxs(StateContext.Provider, { value: { ...state, theme }, children: [children, _jsxs("div", { className: styles.root, children: [header !== undefined ? (header) : (_jsx(Header, { language: language, theme: theme, compact: compactHeader })), stateManager.ready(state) && (_jsx(MainContainer, { language: language, theme: theme, viewMode: stateManager.viewMode(state), rightPanel: stateManager.rightPanel(state), graphicsDirty: stateManager.graphicsDirty(state), editorContent: stateManager.editorContent(state), onChangeEditor: onChangeEditor, compactHeader: compactHeader, panelTitles: panelTitles })), _jsx(Footer, { theme: theme })] })] }) }));
 };
 /**
  * Main app setting up state manager, header, main container and footer.
  */
-const ConsoleApp = ({ initFromStorage, forceTheme, compactHeader, onChangeEditor, children, ...props }) => {
-    props.GUI = GUI;
+const ConsoleApp = ({ initFromStorage, storedStates, forceTheme, compactHeader, header, panelTitles, onChangeEditor, children, ...props }) => {
+    // custom GUI classes should extend the console's GUI
+    props.GUI ?? (props.GUI = GUI);
     const innerProps = {
         initFromStorage,
+        storedStates,
         forceTheme,
         compactHeader,
+        header,
+        panelTitles,
         onChangeEditor,
     };
     return (_jsx(BasthonContext, { ...props, children: _jsx(InnerApp, { ...innerProps, children: children }) }));

package/lib/components/button.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./styles.module.scss";
-const Button = ({ children, titled, blink, ...props }) => {
-    let className = styles.btn;
+const Button = ({ children, titled, blink, className: extraClassName, ...props }) => {
+    const classNames = [styles.btn];
     if (blink === true)
-        className = [className, styles["btn-eye-catcher"]].join(" ");
+        classNames.push(styles["btn-eye-catcher"]);
+    if (extraClassName != null)
+        classNames.push(extraClassName);
+    const className = classNames.join(" ");
     return (_jsx("button", { className: className, "data-titled": titled, ...props, children: children }));
 };
 export { Button };

package/lib/components/main-container.d.ts

@@ -1,5 +1,10 @@
-import { FC } from "react";
+import { FC, type ReactNode } from "react";
 import { type Language, type Theme, type ViewMode, type RightPanel } from "../state-manager";
+interface PanelTitles {
+    editor?: ReactNode;
+    terminal?: ReactNode;
+    graphics?: ReactNode;
+}
 interface MainContainerProps {
     language: Language;
     theme: Theme;
@@ -9,6 +14,7 @@ interface MainContainerProps {
     editorContent: string;
     onChangeEditor?: () => void;
     compactHeader?: boolean;
+    panelTitles?: PanelTitles;
 }
 declare const MainContainer: FC<MainContainerProps>;
-export { MainContainer };
+export { MainContainer, type PanelTitles };

package/lib/components/main-container.js

@@ -11,13 +11,18 @@ import { faCogs, faFolderOpen, faDownload, faShareAltSquare, faEyeSlash, faUndoA
 const MainContainer = (props) => {
     const gui = useGUI();
     const dispatch = useDispatch();
-    return (_jsxs("div", { className: styles.container, "data-theme": props.theme, "data-compact-header": props.compactHeader, children: [_jsxs("div", { className: styles["left-panel"], "data-view-mode": props.viewMode, children: [_jsx(Editor, { language: props.language, theme: props.theme, content: props.editorContent, onSetContent: (content) => dispatch({ type: "set-editor-content", payload: content }), onChange: props.onChangeEditor }), _jsxs("div", { className: styles["buttons-container"], children: [_jsxs(Button, { titled: true, title: "Ex\u00E9cuter le script", onClick: () => gui.runScript(), children: [_jsx(FontAwesomeIcon, { icon: faCogs, className: styles["btn-logo"] }), "Ex\u00E9cuter"] }), _jsx(Button, { title: "Ouvrir un script, charger un module ou un fichier", onClick: () => gui.openFile(), children: _jsx(FontAwesomeIcon, { icon: faFolderOpen, className: styles["btn-logo"] }) }), _jsx(Button, { title: "T\u00E9l\u00E9charger le script", onClick: () => gui.download(), children: _jsx(FontAwesomeIcon, { icon: faDownload, className: styles["btn-logo"] }) }), _jsx(Button, { title: "Partager ce code", onClick: () => gui.share(), children: _jsx(FontAwesomeIcon, { icon: faShareAltSquare, className: styles["btn-logo"] }) }), props.viewMode === "script-only" && (_jsx(Button, { title: "Afficher seulement la console", onClick: () => dispatch({
+    const titles = props.panelTitles;
+    const rightTitle = props.rightPanel === "graphics" ? titles?.graphics : titles?.terminal;
+    return (_jsxs("div", { className: styles.container, "data-theme": props.theme, "data-compact-header": props.compactHeader, "data-titled": titles != null, children: [_jsxs("div", { className: styles["left-panel"], "data-view-mode": props.viewMode, children: [titles?.editor != null && (_jsx("div", { className: styles["panel-title"], children: titles.editor })), _jsx(Editor, { id: "editor", language: props.language, theme: props.theme, content: props.editorContent, onSetContent: (content) => dispatch({ type: "set-editor-content", payload: content }), onChange: () => {
+                            gui.editorChanged();
+                            props.onChangeEditor?.();
+                        } }), _jsxs("div", { className: styles["buttons-container"], children: [_jsxs(Button, { titled: true, id: "run", title: "Ex\u00E9cuter le script", onClick: () => gui.runScript(), children: [_jsx(FontAwesomeIcon, { icon: faCogs, className: styles["btn-logo"] }), "Ex\u00E9cuter"] }), _jsx(Button, { id: "open", title: "Ouvrir un script, charger un module ou un fichier", onClick: () => gui.openFile(), children: _jsx(FontAwesomeIcon, { icon: faFolderOpen, className: styles["btn-logo"] }) }), _jsx(Button, { id: "download", title: "T\u00E9l\u00E9charger le script", onClick: () => gui.download(), children: _jsx(FontAwesomeIcon, { icon: faDownload, className: styles["btn-logo"] }) }), _jsx(Button, { id: "share", title: "Partager ce code", onClick: () => gui.share(), children: _jsx(FontAwesomeIcon, { icon: faShareAltSquare, className: styles["btn-logo"] }) }), props.viewMode === "script-only" && (_jsx(Button, { id: "hide-editor", title: "Afficher seulement la console", onClick: () => dispatch({
                                     type: "set-view-mode",
                                     payload: "terminal-only",
-                                }), children: _jsx(FontAwesomeIcon, { icon: faEyeSlash, className: styles["btn-logo"] }) })), _jsx(Button, { title: "Revenir \u00E0 une version pr\u00E9c\u00E9dente du script", onClick: () => gui.rollback(), children: _jsx(FontAwesomeIcon, { icon: faUndoAlt, className: styles["btn-logo"] }) })] })] }), _jsxs("div", { className: styles["right-panel"], "data-view-mode": props.viewMode, children: [_jsx(Terminal, { "data-right-panel": props.rightPanel }), _jsx(Graphics, { "data-right-panel": props.rightPanel, onContentUpdate: () => dispatch({ type: "graphics-dirty" }) }), _jsxs("div", { className: styles["buttons-container"], children: [_jsx(Button, { title: "Red\u00E9marrer le noyau", onClick: () => gui.restart(), children: _jsx(FontAwesomeIcon, { icon: faBroom, className: styles["btn-logo"] }) }), _jsx(Button, { title: "Afficher la console", onClick: () => dispatch({ type: "set-right-panel", payload: "terminal" }), children: _jsx(FontAwesomeIcon, { icon: faTerminal, className: styles["btn-logo"] }) }), _jsx(Button, { title: "Afficher la vue graphique", onClick: () => dispatch({ type: "set-right-panel", payload: "graphics" }), blink: props.graphicsDirty, children: _jsx(FontAwesomeIcon, { icon: faImage, className: styles["btn-logo"] }) }), _jsx(Button, { title: "Changer le th\u00E8me (sombre/lumineux)", onClick: () => dispatch({ type: "switch-theme" }), children: _jsx(FontAwesomeIcon, { icon: faAdjust, className: styles["btn-logo"] }) }), ["default", "reversed"].includes(props.viewMode) && (_jsxs(_Fragment, { children: [_jsx(Button, { title: "\u00C9changer l'\u00E9diteur et la console", onClick: () => dispatch({ type: "switch-view" }), children: _jsx(FontAwesomeIcon, { icon: faExchangeAlt, className: styles["btn-logo"] }) }), _jsx(Button, { title: "Afficher seulement l'\u00E9diteur", onClick: () => dispatch({
+                                }), children: _jsx(FontAwesomeIcon, { icon: faEyeSlash, className: styles["btn-logo"] }) })), _jsx(Button, { id: "rollback", title: "Revenir \u00E0 une version pr\u00E9c\u00E9dente du script", onClick: () => gui.rollback(), children: _jsx(FontAwesomeIcon, { icon: faUndoAlt, className: styles["btn-logo"] }) })] })] }), _jsxs("div", { className: styles["right-panel"], "data-view-mode": props.viewMode, children: [rightTitle != null && (_jsx("div", { className: styles["panel-title"], children: rightTitle })), _jsx(Terminal, { id: "shell", "data-right-panel": props.rightPanel }), _jsx(Graphics, { id: "graphics", "data-right-panel": props.rightPanel, onContentUpdate: () => dispatch({ type: "graphics-dirty" }) }), _jsxs("div", { className: styles["buttons-container"], children: [_jsx(Button, { id: "raz", title: "Red\u00E9marrer le noyau", onClick: () => gui.restart(), children: _jsx(FontAwesomeIcon, { icon: faBroom, className: styles["btn-logo"] }) }), _jsx(Button, { id: "btn_shell", title: "Afficher la console", onClick: () => dispatch({ type: "set-right-panel", payload: "terminal" }), children: _jsx(FontAwesomeIcon, { icon: faTerminal, className: styles["btn-logo"] }) }), _jsx(Button, { id: "btn_graph_view", title: "Afficher la vue graphique", onClick: () => dispatch({ type: "set-right-panel", payload: "graphics" }), blink: props.graphicsDirty, children: _jsx(FontAwesomeIcon, { icon: faImage, className: styles["btn-logo"] }) }), _jsx(Button, { id: "darklight", title: "Changer le th\u00E8me (sombre/lumineux)", onClick: () => dispatch({ type: "switch-theme" }), children: _jsx(FontAwesomeIcon, { icon: faAdjust, className: styles["btn-logo"] }) }), ["default", "reversed"].includes(props.viewMode) && (_jsxs(_Fragment, { children: [_jsx(Button, { id: "switch", title: "\u00C9changer l'\u00E9diteur et la console", onClick: () => dispatch({ type: "switch-view" }), children: _jsx(FontAwesomeIcon, { icon: faExchangeAlt, className: styles["btn-logo"] }) }), _jsx(Button, { id: "hide-console", title: "Afficher seulement l'\u00E9diteur", onClick: () => dispatch({
                                             type: "set-view-mode",
                                             payload: "script-only",
-                                        }), children: _jsx(FontAwesomeIcon, { icon: faEyeSlash, className: styles["btn-logo"] }) })] })), props.viewMode === "terminal-only" && (_jsx(Button, { title: "Afficher l'\u00E9diteur et la console", onClick: () => dispatch({
+                                        }), children: _jsx(FontAwesomeIcon, { icon: faEyeSlash, className: styles["btn-logo"] }) })] })), props.viewMode === "terminal-only" && (_jsx(Button, { id: "show-editor-console", title: "Afficher l'\u00E9diteur et la console", onClick: () => dispatch({
                                     type: "set-view-mode",
                                     payload: "default",
                                 }), children: _jsx(FontAwesomeIcon, { icon: faColumns, className: styles["btn-logo"] }) }))] })] })] }));

package/lib/components/styles.module.scss

@@ -11,8 +11,8 @@
   --logo-height: 12vh;
   --term-height: 60vh;
   --term-font-size: 12pt;
-  --term-font: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro",
-    monospace;
+  --term-font:
+    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
   --term-script-color: var(--python-grey);
   --main-container-width: 90%;
   --main-container-height: 75vh;
@@ -114,6 +114,7 @@ textarea:focus {
 }
 
 .left-panel {
+  position: relative;
   width: var(--left-container-width);
   margin: auto;
   float: left;
@@ -151,6 +152,36 @@ textarea:focus {
   }
 }
 
+.panel-title {
+  z-index: 100;
+  position: absolute;
+  top: -1.3vw;
+  left: 1.5vw;
+  margin: 0;
+  padding: 0vw 0.7vw 0.2vw 0.7vw;
+  color: #fff;
+  background-color: var(--python-blue);
+  border-radius: var(--corner-radius);
+  border: none;
+  font-size: var(--main-font-size);
+  user-select: none;
+}
+
+/* leave room for panel titles */
+.container[data-titled="true"] {
+  margin-top: 1.3vw;
+
+  .editor {
+    box-sizing: border-box;
+    border-top: 1vw solid var(--term-bg-color);
+  }
+
+  .terminal {
+    box-sizing: border-box;
+    padding-top: 0.7vw;
+  }
+}
+
 %darklighted {
   background-color: var(--term-bg-color);
   --background: var(--term-bg-color);

package/lib/gui/editor.d.ts

@@ -7,6 +7,7 @@ export default class Editor {
     private _kernel;
     private _editor;
     private _onSetContent?;
+    private _silent;
     constructor(element: HTMLElement, kernel: KernelBase, onSetContent?: (_: string) => void, onChange?: () => void);
     /**
      * Set Ace mode from language.

package/lib/gui/editor.js

@@ -4,6 +4,8 @@ import ace from "./ace";
  */
 export default class Editor {
     constructor(element, kernel, onSetContent, onChange) {
+        // true while content is set programmatically (no onChange call)
+        this._silent = false;
         this._kernel = kernel;
         this._onSetContent = onSetContent;
         this._editor = ace.edit(element);
@@ -14,9 +16,12 @@ export default class Editor {
             highlightSelectedWord: true,
             fontSize: "12pt",
         });
-        // connect onchange
+        // connect onchange (only for user changes)
         if (onChange != null)
-            this._editor.session.on("change", () => onChange());
+            this._editor.session.on("change", () => {
+                if (!this._silent)
+                    onChange();
+            });
         /* editor's completion */
         // removing all completers and keeping track of local completer
         const localCompleter = this._editor.completers[1]; // any hint to detect this dynamically?
@@ -85,14 +90,24 @@ export default class Editor {
      * Dispatch action to set content.
      */
     setContent(content) {
+        // set it directly since state may not change
+        // (user modifications are not dispatched)
+        this.setContentNoDispatch(content);
         this._onSetContent?.(content);
     }
     /**
      * Set Ace editor content.
      */
     setContentNoDispatch(content) {
-        if (content != null)
+        if (content == null)
+            return;
+        this._silent = true;
+        try {
             this._editor.setValue(content, -1);
+        }
+        finally {
+            this._silent = false;
+        }
     }
     /**
      * Get editor's content

package/lib/gui/gui.d.ts

@@ -8,6 +8,8 @@ export default class GUI extends GUIBase {
     private _editor?;
     private _term?;
     private _graphics?;
+    private _pendingContent?;
+    private _theme?;
     constructor(options: GUIOptions);
     /**
      * Set editor.
@@ -41,6 +43,14 @@ export default class GUI extends GUIBase {
      * Set editor's content.
      */
     setContent(content: string): void;
+    /**
+     * Set the current theme (called by the app on theme change).
+     */
+    setTheme(theme: "dark" | "light"): void;
+    /**
+     * Get the current theme.
+     */
+    theme(): Promise<"dark" | "light" | undefined>;
     /**
      * Notify the user with an error.
      */
@@ -65,6 +75,19 @@ export default class GUI extends GUIBase {
      */
     rollback(): Promise<void>;
     protected setupUI(options: any): Promise<void>;
+    /**
+     * Called when the editor's content is modified by the user.
+     */
+    editorChanged(): void;
+    /**
+     * Called on ctrl+s (download the script by default).
+     */
+    protected onSaveShortcut(): void;
+    /**
+     * Called before closing the page (backup by default).
+     * Return a string to ask the user for confirmation.
+     */
+    protected onBeforeUnload(): string | undefined;
     /**
      * Run the editor script in the terminal.
      */

package/lib/gui/gui.js

@@ -22,6 +22,10 @@ export default class GUI extends GUIBase {
      */
     setEditor(editor) {
         this._editor = editor;
+        if (this._pendingContent != null) {
+            editor.setContent(this._pendingContent);
+            this._pendingContent = undefined;
+        }
     }
     /**
      * Set terminal.
@@ -58,13 +62,31 @@ export default class GUI extends GUIBase {
      * Get editor's content.
      */
     content() {
-        return this._editor?.getContent();
+        if (this._editor == null)
+            return this._pendingContent;
+        return this._editor.getContent();
     }
     /**
      * Set editor's content.
      */
     setContent(content) {
-        this._editor?.setContent(content);
+        // editor not yet available, delay
+        if (this._editor == null)
+            this._pendingContent = content;
+        else
+            this._editor.setContent(content);
+    }
+    /**
+     * Set the current theme (called by the app on theme change).
+     */
+    setTheme(theme) {
+        this._theme = theme;
+    }
+    /**
+     * Get the current theme.
+     */
+    async theme() {
+        return this._theme;
     }
     /**
      * Notify the user with an error.
@@ -135,13 +157,29 @@ export default class GUI extends GUIBase {
             if ((event.ctrlKey || event.metaKey) &&
                 String.fromCharCode(event.which).toLowerCase() === "s") {
                 event.preventDefault();
-                this.download();
+                this.onSaveShortcut();
             }
         });
         /* backup before closing */
-        window.onbeforeunload = () => {
-            this.backup().catch(this.notifyError.bind(this));
-        };
+        window.onbeforeunload = () => this.onBeforeUnload();
+    }
+    /**
+     * Called when the editor's content is modified by the user.
+     */
+    editorChanged() { }
+    /**
+     * Called on ctrl+s (download the script by default).
+     */
+    onSaveShortcut() {
+        this.download();
+    }
+    /**
+     * Called before closing the page (backup by default).
+     * Return a string to ask the user for confirmation.
+     */
+    onBeforeUnload() {
+        this.backup().catch(this.notifyError.bind(this));
+        return undefined;
     }
     /**
      * Run the editor script in the terminal.

package/lib/hooks/state.d.ts

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

package/lib/hooks/state.js

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

package/lib/index.d.ts

@@ -1,2 +1,9 @@
-import ConsoleApp from "./components/app";
-export { ConsoleApp };
+import ConsoleApp, { type AppProps } from "./components/app";
+import GUI from "./gui/gui";
+import { useGUI } from "./hooks/gui";
+import { useDispatch } from "./hooks/dispatch";
+import { useConsoleState } from "./hooks/state";
+import { Button } from "./components/button";
+import { type PanelTitles } from "./components/main-container";
+import { defaultStoredStates, type State, type Action, type Language, type Theme, type ViewMode, type RightPanel } from "./state-manager";
+export { ConsoleApp, GUI, useGUI, useDispatch, useConsoleState, Button, defaultStoredStates, type AppProps, type PanelTitles, type State, type Action, type Language, type Theme, type ViewMode, type RightPanel, };

package/lib/index.js

@@ -1,2 +1,8 @@
 import ConsoleApp from "./components/app";
-export { ConsoleApp };
+import GUI from "./gui/gui";
+import { useGUI } from "./hooks/gui";
+import { useDispatch } from "./hooks/dispatch";
+import { useConsoleState } from "./hooks/state";
+import { Button } from "./components/button";
+import { defaultStoredStates, } from "./state-manager";
+export { ConsoleApp, GUI, useGUI, useDispatch, useConsoleState, Button, defaultStoredStates, };

package/lib/state-manager.d.ts

@@ -11,14 +11,17 @@ interface State {
     rightPanel: RightPanel;
     graphicsDirty: boolean;
     editorContent: string;
+    storedStates: 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 defaultStoredStates: string[];
 declare const stateManager: {
-    useReducer: (language: Language, initFromStorage: boolean) => readonly [{
+    useReducer: (language: Language, initFromStorage: boolean, storedStates?: string[]) => readonly [{
         language: Language;
+        storedStates: string[];
         ready: boolean;
         theme: Theme;
         viewMode: ViewMode;
@@ -34,5 +37,6 @@ declare const stateManager: {
     graphicsDirty: (state: State) => boolean;
     editorContent: (state: State) => string;
 };
-export { type Dispatch, type Action, type Language, type Theme, type ViewMode, type RightPanel, };
+export { type State, type Dispatch, type Action, type Language, type Theme, type ViewMode, type RightPanel, };
+export { defaultStoredStates };
 export default stateManager;

package/lib/state-manager.js

@@ -2,6 +2,13 @@ import { useEffect } from "react";
 /* we use immer to fake mutable state */
 import { useImmerReducer } from "use-immer";
 import { Storage } from "@basthon/checkpoints";
+/* states to store (by default) */
+const defaultStoredStates = [
+    "theme",
+    "viewMode",
+    "rightPanel",
+    "editorContent",
+];
 /* this initial state */
 const initialState = {
     ready: false,
@@ -11,18 +18,17 @@ const initialState = {
     rightPanel: "terminal",
     graphicsDirty: false,
     editorContent: "",
+    storedStates: defaultStoredStates,
 };
 /* 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 stateFromStorage = async (language, storedStates) => {
     const storage = new Storage(`console.${language}.states`);
     await storage.ready();
-    const state = { ...initialState, language };
+    const state = { ...initialState, language, storedStates };
     for (let key of storedStates) {
         const storageValue = await storage.get(key);
         if (storageValue != null)
@@ -34,7 +40,7 @@ const stateFromStorage = async (language) => {
 const stateToStorage = async (state) => {
     const storage = new Storage(`console.${state.language}.states`);
     await storage.ready();
-    for (let key of storedStates)
+    for (let key of state.storedStates)
         await storage.set(key, state[key]);
 };
 /* where our global logic takes place */
@@ -78,17 +84,18 @@ const reducer = (state, action) => {
 };
 /* stateManager exposed as API */
 const stateManager = {
-    useReducer: (language, initFromStorage) => {
+    useReducer: (language, initFromStorage, storedStates = defaultStoredStates) => {
         const [state, dispatch] = useImmerReducer(reducer, {
             ...initialState,
             language,
+            storedStates,
         });
         // dispatch init from storage
         useEffect(() => {
             (async () => {
                 let payload = undefined;
                 if (initFromStorage)
-                    payload = await stateFromStorage(language);
+                    payload = await stateFromStorage(language, storedStates);
                 dispatch({ type: "init", payload });
             })();
         }, []);
@@ -102,4 +109,5 @@ const stateManager = {
     graphicsDirty: (state) => state.graphicsDirty,
     editorContent: (state) => state.editorContent,
 };
+export { defaultStoredStates };
 export default stateManager;

package/package.json

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