docusaurus-live-brython 3.0.0-beta.9 → 3.0.1

package/src/theme/CodeEditor/Icon/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from 'docusaurus-live-brython/theme/CodeEditor/Icon/icons';
+import * as Icons from '@theme/CodeEditor/Icon/icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 
@@ -13,10 +13,11 @@ export enum Color {
     Link = 'var(--ifm-color-link)'
 }
 
-interface Props {
+export interface Props {
     icon: keyof typeof Icons;
     size?: number | string;
     spin?: boolean;
+    rotate?: number;
     color?: string;
     className?: string;
 }
@@ -26,20 +27,39 @@ const Icon = (props: Props) => {
 
     if (props.spin) {
         return (
-            <svg viewBox="0 0 24 24" role="presentation" style={{width: size, height: size}} className={clsx(props.className, styles.icon, styles.spin)}>
+            <svg
+                viewBox="0 0 24 24"
+                role="presentation"
+                style={{ width: size, height: size }}
+                className={clsx(props.className, styles.icon, styles.spin)}
+            >
                 <style>{`@keyframes spin-inverse { to { transform: rotate(-360deg) } }`}</style>
-                <g style={{animation: '2s linear 0s infinite normal none running spin-inverse', transformOrigin: 'center center'}}>
-                    <path d={Icons[props.icon]} style={{fill: props.color || 'currentcolor'}}></path>
+                <g
+                    style={{
+                        animation: '2s linear 0s infinite normal none running spin-inverse',
+                        transformOrigin: 'center center'
+                    }}
+                >
+                    <path d={Icons[props.icon]} style={{ fill: props.color || 'currentcolor' }}></path>
                 </g>
             </svg>
-        )
+        );
     }
 
     return (
-        <svg viewBox="0 0 24 24" role="presentation" style={{width: size, height: size}} className={clsx(props.className, styles.icon)}>
-            <path d={Icons[props.icon]} style={{fill: props.color || 'currentcolor'}}></path>
+        <svg
+            viewBox="0 0 24 24"
+            role="presentation"
+            style={{
+                width: size,
+                height: size,
+                transform: `translateY(15%) rotate(${props.rotate || 0}deg)`
+            }}
+            className={clsx(props.className, styles.icon)}
+        >
+            <path d={Icons[props.icon]} style={{ fill: props.color || 'currentcolor' }}></path>
         </svg>
-    )
-}
+    );
+};
 
-export default Icon;
+export default Icon;

package/src/theme/CodeEditor/Icon/styles.module.css

@@ -1,3 +1,3 @@
 .icon {
     transform: translateY(15%);
-}
+}

package/src/theme/CodeEditor/WithScript/ScriptContext.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import { type InitState, type Document } from '@theme/CodeEditor/WithScript/Types';
+import { createStore } from '@theme/CodeEditor/WithScript/createStore';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import CodeBlock from '@theme/CodeBlock';
+export const Context = React.createContext<Document | undefined>(undefined);
+
+const ScriptContext = (props: InitState & { children: React.ReactNode }) => {
+    const { libDir, syncMaxOnceEvery } = usePluginData('docusaurus-live-brython') as {
+        libDir: string;
+        syncMaxOnceEvery: number;
+    };
+    const [store, setStore] = React.useState<Document | null>(null);
+    const { siteConfig } = useDocusaurusContext();
+    React.useEffect(() => {
+        const router = siteConfig.future.experimental_router;
+        const store = createStore(props, libDir, syncMaxOnceEvery, router);
+        setStore(store);
+        store.load();
+    }, [props.id, libDir, siteConfig]);
+
+    return (
+        <BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
+            {() => {
+                if (!store) {
+                    return <CodeBlock language={props.lang}>{props.code}</CodeBlock>;
+                }
+                return <Context.Provider value={store}>{props.children}</Context.Provider>;
+            }}
+        </BrowserOnly>
+    );
+};
+
+export default ScriptContext;

package/src/theme/CodeEditor/WithScript/Storage.ts

@@ -1,4 +1,4 @@
-import type { StorageSlot, StoredScript } from "docusaurus-live-brython/theme/CodeEditor/WithScript/Types";
+import type { StorageSlot, StoredScript } from '@theme/CodeEditor/WithScript/Types';
 
 export const getStorageScript = (storage: StorageSlot): StoredScript | undefined => {
     const storedCode = storage.get();
@@ -14,7 +14,7 @@ export const getStorageScript = (storage: StorageSlot): StoredScript | undefined
         }
     }
     return;
-}
+};
 
 export const syncStorageScript = (script: StoredScript, storage: StorageSlot): boolean => {
     try {
@@ -24,4 +24,4 @@ export const syncStorageScript = (script: StoredScript, storage: StorageSlot): b
         console.warn(`Failed to save the code ${script}`, e);
         return false;
     }
-}
+};

package/src/theme/CodeEditor/WithScript/Types.ts

@@ -1,4 +1,3 @@
-
 export interface Version {
     code: string;
     createdAt: Date;
@@ -13,6 +12,7 @@ export interface StoredScript {
     versions: Version[];
 }
 
+export type Selector<T, R> = (state: T) => R;
 export interface Script extends StoredScript {
     /**
      * this is normally a uuid
@@ -22,7 +22,7 @@ export interface Script extends StoredScript {
      * this is the codeId used to
      * - identify dom elements for this block
      * - setup the brython communicator with this id
-     * - when using the default storage, this is the key used to 
+     * - when using the default storage, this is the key used to
      *   store the code to local storage
      */
     codeId: string;
@@ -30,20 +30,21 @@ export interface Script extends StoredScript {
     showRaw: boolean;
     isExecuting?: boolean;
     preCode: string;
+    postCode: string;
     lang: 'py' | string;
     logs: LogMessage[];
-    isGraphicsmodalOpen: boolean;
+    graphicsModalExecutionNr: number;
     hasGraphicsOutput: boolean;
     hasTurtleOutput: boolean;
     hasCanvasOutput: boolean;
     hasEdits: boolean;
     /**
      * Storage props
-    */
-   isLoaded: boolean;
-   status: Status;
-   versionsLoaded: boolean;
-   isPasted: boolean;
+     */
+    isLoaded: boolean;
+    status: Status;
+    versionsLoaded: boolean;
+    isPasted: boolean;
 }
 
 export interface LogMessage {
@@ -70,23 +71,28 @@ export interface InitState {
     id: string | undefined;
     lang: 'py' | string;
     title: string;
-    raw: string;
+    code: string;
+    preCode: string;
+    postCode: string;
     readonly: boolean;
     versioned: boolean;
 }
 
-export interface Store<T = Script> {
+export interface Document<T = Script> {
     getState: () => T;
     setState: (fn: (state: Script) => Script) => void;
     subscribe: (listener: () => void) => () => void;
     saveNow: () => Promise<Status>;
     setCode: (code: string, action?: 'insert' | 'remove' | string) => void;
     setExecuting: (executing: boolean) => void;
-    execScript: () => void,
+    execScript: () => void;
     stopScript: () => void;
     closeGraphicsModal: () => void;
     addLogMessage: (log: LogMessage) => void;
     clearLogMessages: () => void;
     load: () => Promise<Status>;
     loadVersions: () => Promise<void>;
+    setIsPasted: (isPasted: boolean) => void;
+    setShowRaw: (showRaw: boolean) => void;
+    setStatus: (status: Status) => void;
 }

package/src/theme/CodeEditor/WithScript/bryRunner.ts

@@ -0,0 +1,39 @@
+import { RouterType } from '@docusaurus/types';
+import { DOM_ELEMENT_IDS } from '../constants';
+import { sanitizePyScript } from './helpers';
+
+export const runCode = (
+    code: string,
+    preCode: string,
+    postCode: string,
+    codeId: string,
+    libDir: string,
+    router: RouterType,
+    cache: boolean = true
+) => {
+    const lineShift = preCode
+        .trim()
+        .split(/\n/)
+        .filter((l) => l.length > 0).length;
+    const pre = lineShift > 0 ? `${preCode.trim()}\n` : '';
+    const post = postCode.trim().length > 0 ? `\n${postCode.trim()}` : '';
+    const toExec = `${pre}${code}${post}`;
+    const src = `from brython_runner import run\nrun("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})\n`;
+    if (!(window as any).__BRYTHON__) {
+        alert('Brython not loaded');
+        return;
+    }
+    const active = document.getElementById(DOM_ELEMENT_IDS.communicator(codeId));
+    active!.setAttribute('data--start-time', `${Date.now()}`);
+    /**
+     * ensure that the script is executed after the current event loop.
+     * Otherwise, the brython script will not be able to access the graphics output.
+     */
+    setTimeout(() => {
+        (window as any).__BRYTHON__.runPythonSource(src, {
+            pythonpath: router === 'hash' ? [] : [libDir],
+            cache: cache
+        });
+    }, 0);
+    return src;
+};

package/src/theme/CodeEditor/WithScript/createStore.ts

@@ -0,0 +1,276 @@
+import { v4 as uuidv4 } from 'uuid';
+import { createStorageSlot } from '@docusaurus/theme-common';
+import { getStorageScript, syncStorageScript } from '@theme/CodeEditor/WithScript/Storage';
+import {
+    checkCanvasOutput,
+    checkGraphicsOutput,
+    checkTurtleOutput
+} from '@theme/CodeEditor/WithScript/helpers';
+import {
+    type InitState,
+    type LogMessage,
+    type Script,
+    Status,
+    type Document,
+    type StoredScript,
+    type Version
+} from '@theme/CodeEditor/WithScript/Types';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import throttle from 'lodash/throttle';
+import { RouterType } from '@docusaurus/types';
+import { runCode } from '@theme/CodeEditor/WithScript/bryRunner';
+
+export const createStore = (
+    props: InitState,
+    libDir: string,
+    syncMaxOnceEvery: number,
+    router: RouterType
+): Document => {
+    const canSave = !!props.id;
+    const id = props.id || uuidv4();
+    const codeId = `code.${props.title || props.lang}.${id}`.replace(/(-|\.)/g, '_');
+    const createdAt = new Date();
+    const storageKey = `code.${props.title || 'code_block'}.${id}`;
+    const storage = createStorageSlot(storageKey);
+    storage.listen((e) => {
+        if (e.key === storageKey) {
+            try {
+                if (e.newValue) {
+                    const script = JSON.parse(e.newValue) as StoredScript;
+                    if (new Date(script.updatedAt) > state.updatedAt) {
+                        loadData(storage);
+                    }
+                }
+            } catch (err) {
+                console.warn(err);
+            }
+        }
+    });
+
+    const loadData = (store) => {
+        setState((s) => ({ ...s, status: canSave ? Status.SYNCING : s.status }));
+        const script = getStorageScript(store);
+        const loadedCode = script?.code ? prepareCode(script.code, { codeOnly: true }) : {};
+        addVersion.cancel();
+        if (!state.isLoaded) {
+            setState((s) => ({
+                ...s,
+                isLoaded: true,
+                ...(script || {}),
+                ...loadedCode,
+                versions: script?.versions || [],
+                versionsLoaded: true,
+                status: canSave ? Status.SUCCESS : s.status
+            }));
+            return Status.SUCCESS;
+        }
+        if (script) {
+            setState((s) => ({
+                ...s,
+                ...script,
+                ...loadedCode,
+                status: canSave ? Status.SUCCESS : s.status,
+                versionsLoaded: true
+            }));
+            return Status.SUCCESS;
+        }
+        setState((s) => ({ ...s, status: canSave ? Status.ERROR : s.status }));
+        return Status.ERROR;
+    };
+
+    const prepareCode = (
+        code: string,
+        config: { codeOnly?: boolean; stateNotInitialized?: boolean } = {}
+    ) => {
+        const hasEdits = code !== (config.stateNotInitialized ? code : state.pristineCode);
+        const updatedAt = new Date();
+        const allCode = `${props.preCode}\n${code}\n${props.postCode}`;
+        const hasCanvasOutput = checkCanvasOutput(allCode);
+        const hasTurtleOutput = checkTurtleOutput(allCode);
+        const hasGraphicsOutput = checkGraphicsOutput(allCode);
+        if (props.versioned && !config.stateNotInitialized) {
+            addVersion({
+                code: code,
+                createdAt: updatedAt,
+                version: state.versions.length + 1
+            });
+        }
+        return {
+            code: code,
+            hasCanvasOutput: hasCanvasOutput,
+            hasTurtleOutput: hasTurtleOutput,
+            hasGraphicsOutput: hasGraphicsOutput,
+            hasEdits: hasEdits,
+            updatedAt: updatedAt
+        };
+    };
+
+    const setCode = (raw: string, action?: 'insert' | 'remove' | string) => {
+        if (state.isPasted && action === 'remove') {
+            return;
+        }
+        const data = prepareCode(raw);
+        setState((state) => ({
+            ...state,
+            ...data
+        }));
+        if (props.id) {
+            const toStore: StoredScript = {
+                code: data.code,
+                createdAt: state.createdAt,
+                updatedAt: data.updatedAt,
+                versions: state.versions
+            };
+            if (state.isPasted) {
+                addVersion.flush();
+                if (toStore.versions.length > 0) {
+                    toStore.versions[toStore.versions.length - 1].pasted = true;
+                }
+                set(toStore);
+                set.flush();
+                state.isPasted = false;
+            } else {
+                set(toStore);
+            }
+        }
+    };
+
+    const execScript = () => {
+        setState((s) => ({
+            ...s,
+            isExecuting: true,
+            graphicsModalExecutionNr: state.hasGraphicsOutput ? state.graphicsModalExecutionNr + 1 : 0
+        }));
+        runCode(state.code, state.preCode, state.postCode, codeId, libDir, router);
+    };
+
+    const load = async () => {
+        return loadData(storage);
+    };
+
+    const _set = async (script: StoredScript) => {
+        setState((s) => ({ ...s, status: canSave ? Status.SYNCING : s.status }));
+        if (syncStorageScript(script, storage)) {
+            setState((s) => ({ ...s, status: canSave ? Status.SUCCESS : s.status }));
+            return Status.SUCCESS;
+        }
+        setState((s) => ({ ...s, status: canSave ? Status.ERROR : s.status }));
+        return Status.ERROR;
+    };
+
+    const setIsPasted = (isPasted: boolean) => {
+        setState((s) => ({ ...s, isPasted: isPasted }));
+    };
+
+    const set = throttle(_set, syncMaxOnceEvery, {
+        leading: false,
+        trailing: true
+    });
+
+    const _addVersion = (version: Version) => {
+        if (!props.versioned || !props.id) {
+            return;
+        }
+        const versions = [...state.versions];
+        versions.push(version);
+        setState((s) => ({ ...s, versions: versions }));
+    };
+    const addVersion = throttle(_addVersion, syncMaxOnceEvery, {
+        leading: false,
+        trailing: true
+    });
+
+    const saveNow = async () => {
+        addVersion.flush();
+        return set.flush();
+    };
+
+    const del = async () => {
+        storage.del();
+        return Status.SUCCESS;
+    };
+    const codeData = prepareCode(props.code, { stateNotInitialized: true });
+    const setExecuting = (isExecuting: boolean) => {
+        setState((s) => ({ ...s, isExecuting: isExecuting }));
+    };
+    const addLogMessage = (log: LogMessage) => {
+        setState((s) => ({ ...s, logs: [...s.logs, log] }));
+    };
+    const clearLogMessages = () => {
+        setState((s) => ({ ...s, logs: [] }));
+    };
+    const closeGraphicsModal = () => {
+        setState((s) => ({ ...s, graphicsModalExecutionNr: 0 }));
+    };
+    const stopScript = () => {
+        const code = document.getElementById(DOM_ELEMENT_IDS.communicator(state.codeId));
+        if (code) {
+            code.removeAttribute('data--start-time');
+        }
+    };
+    let state: Script = {
+        id: id,
+        codeId: codeId,
+        lang: props.lang,
+        showRaw: false,
+        pristineCode: codeData.code,
+        isExecuting: false,
+        logs: [],
+        graphicsModalExecutionNr: 0,
+        hasEdits: false,
+        createdAt: createdAt,
+        isLoaded: false,
+        status: Status.IDLE,
+        versions: [],
+        versionsLoaded: false,
+        isPasted: false,
+        preCode: props.preCode,
+        postCode: props.postCode,
+        ...codeData
+    };
+
+    const getState = () => state;
+    const listeners = new Set<() => void>();
+    const setState = (fn: (state: Script) => Script) => {
+        state = fn(state);
+        listeners.forEach((l) => l());
+    };
+    const subscribe = (listener: () => void) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    };
+    const loadVersions = async () => {
+        // noop
+        state.isLoaded = false;
+        load();
+        setState((s) => ({ ...s, versionsLoaded: true }));
+        return Promise.resolve();
+    };
+
+    const setShowRaw = (showRaw: boolean) => {
+        setState((s) => ({ ...s, showRaw: showRaw }));
+    };
+
+    const setStatus = (status: Status) => {
+        setState((s) => ({ ...s, status: status }));
+    };
+
+    return {
+        getState,
+        setState,
+        subscribe,
+        saveNow,
+        addLogMessage,
+        clearLogMessages,
+        closeGraphicsModal,
+        setCode,
+        execScript,
+        setExecuting,
+        stopScript,
+        load,
+        setIsPasted,
+        setShowRaw,
+        setStatus,
+        loadVersions
+    } satisfies Document;
+};

package/src/theme/CodeEditor/WithScript/helpers.ts

@@ -1,40 +1,30 @@
-
-const TURTLE_IMPORTS_TESTER = /(^from turtle import)|(^import turtle)/m
-const GRID_IMPORTS_TESTER = /(^from grid import)|(^import grid)/m
-const GRAPHICS_OUTPUT_TESTER = /^(SETUP_)?GRAPHICS_OUTPUT\s*=\s*(True|1)/m
-const CANVAS_OUTPUT_TESTER = /^(SETUP_)?CANVAS_OUTPUT\s*=\s*(True|1)/m
+const TURTLE_IMPORTS_TESTER = /(^from turtle import)|(^import turtle)/m;
+const GRID_IMPORTS_TESTER = /(^from grid import)|(^import grid)/m;
+const GRAPHICS_OUTPUT_TESTER = /^(SETUP_)?GRAPHICS_OUTPUT\s*=\s*(True|1)/m;
+const CANVAS_OUTPUT_TESTER = /^(SETUP_)?CANVAS_OUTPUT\s*=\s*(True|1)/m;
 
 export const checkGraphicsOutput = (raw: string): boolean => {
-    return CANVAS_OUTPUT_TESTER.test(raw) || GRAPHICS_OUTPUT_TESTER.test(raw) || TURTLE_IMPORTS_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
-}
+    return (
+        CANVAS_OUTPUT_TESTER.test(raw) ||
+        GRAPHICS_OUTPUT_TESTER.test(raw) ||
+        TURTLE_IMPORTS_TESTER.test(raw) ||
+        GRID_IMPORTS_TESTER.test(raw)
+    );
+};
 
 export const checkTurtleOutput = (raw: string): boolean => {
     return TURTLE_IMPORTS_TESTER.test(raw);
-}
+};
 
 export const checkCanvasOutput = (raw: string): boolean => {
     return CANVAS_OUTPUT_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
-}
-
-export const getPreCode = (rawcode: string) => {
-    const match = rawcode.match(/\n###\s*PRE.*?\n/);
-    if (match) {
-        return {
-            pre: rawcode.slice(0, match.index || 0),
-            code: rawcode.slice((match.index || 0) + match[0].length)
-        }
-    }
-    return {
-        pre: '',
-        code: rawcode
-    };
-}
+};
 
 /**
  * The python script is transformed to a string by embedding it with """ characters.
  * So we must prevent the script itself to contain this sequence of characters.
- * @param {String} script 
+ * @param {String} script
  */
 export const sanitizePyScript = (script: string) => {
-    return script.replace(/"{3}/g, "'''").replace(/\\n/g, '\\\\n').replace(/\\r/g, '\\\\r')
-}
+    return script.replace(/"{3}/g, "'''").replace(/\\n/g, '\\\\n').replace(/\\r/g, '\\\\r');
+};

package/src/theme/CodeEditor/constants.ts

@@ -1,4 +1,3 @@
-
 const DOM_ELEMENT_IDS = {
     communicator: (codeId: string) => `py_${codeId}`,
     graphicsResult: (codeId: string) => `${codeId}_graphics`,
@@ -6,16 +5,15 @@ const DOM_ELEMENT_IDS = {
     aceEditor: (codeId: string) => `${codeId}_editor`,
     turtleSvgContainer: (codeId: string) => `${codeId}_svg`,
     canvasContainer: (codeId: string) => `${codeId}_canvas`
-}
-
-const BRYTHON_NOTIFICATION_EVENT = 'bry_notify'
-const CLOSE_TURTLE_MODAL_EVENT = 'close_turtle_modal'
-const TURTLE_IMPORTS_TESTER = /(^from turtle import)|(^import turtle)/m
-const TURTLE3D_IMPORTS_TESTER = /(^from turtle3d import)|(^import turtle3d)/m
-const GRID_IMPORTS_TESTER = /(^from grid import)|(^import grid)/m
-const GRAPHICS_OUTPUT_TESTER = /^(SETUP_)?GRAPHICS_OUTPUT\s*=\s*(True|1)/m
-const CANVAS_OUTPUT_TESTER = /^(SETUP_)?CANVAS_OUTPUT\s*=\s*(True|1)/m
+};
 
+const BRYTHON_NOTIFICATION_EVENT = 'bry_notify';
+const CLOSE_TURTLE_MODAL_EVENT = 'close_turtle_modal';
+const TURTLE_IMPORTS_TESTER = /(^from turtle import)|(^import turtle)/m;
+const TURTLE3D_IMPORTS_TESTER = /(^from turtle3d import)|(^import turtle3d)/m;
+const GRID_IMPORTS_TESTER = /(^from grid import)|(^import grid)/m;
+const GRAPHICS_OUTPUT_TESTER = /^(SETUP_)?GRAPHICS_OUTPUT\s*=\s*(True|1)/m;
+const CANVAS_OUTPUT_TESTER = /^(SETUP_)?CANVAS_OUTPUT\s*=\s*(True|1)/m;
 
 export {
     DOM_ELEMENT_IDS,
@@ -26,4 +24,4 @@ export {
     CANVAS_OUTPUT_TESTER,
     GRID_IMPORTS_TESTER,
     TURTLE3D_IMPORTS_TESTER
-}
+};

package/src/theme/CodeEditor/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useStore as useStore } from '@theme/CodeEditor/hooks/useStore';
+export { useScript as useScript } from '@theme/CodeEditor/hooks/useScript';

package/src/theme/CodeEditor/hooks/useScript.ts

@@ -0,0 +1,9 @@
+import { Selector, type Script, type Document } from '@theme/CodeEditor/WithScript/Types';
+import { useCallback, useSyncExternalStore } from 'react';
+
+export const useScript = <T extends keyof Script>(store: Document, selector: T): Script[T] => {
+    return useSyncExternalStore(
+        store.subscribe,
+        useCallback(() => store.getState()[selector], [store, selector])
+    );
+};

package/src/theme/CodeEditor/hooks/useStore.ts

@@ -0,0 +1,15 @@
+import { Context } from '@theme/CodeEditor/WithScript/ScriptContext';
+import { type Document } from '@theme/CodeEditor/WithScript/Types';
+import { ReactContextError } from '@docusaurus/theme-common';
+import { useContext } from 'react';
+
+export function useStore(): Document {
+    const context = useContext(Context);
+    if (context === null) {
+        throw new ReactContextError(
+            'ScriptContextProvider',
+            'The Component must be a child of the ScriptContextProvider component'
+        );
+    }
+    return context;
+}