docusaurus-live-brython 3.0.0-beta.11 → 3.0.0-beta.5

package/src/theme/CodeEditor/Editor/Result/Graphics/Canvas.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 
 const downloadCanvas = (canvasId: string) => {
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
@@ -25,13 +25,13 @@ const downloadCanvas = (canvasId: string) => {
     document.body.removeChild(downloadLink);
   };
 
-const Canvas = () => {
+const CanvasResult = () => {
     const { store } = useScript();
     // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
     const codeId = useStore(store, (state) => state.codeId);
 
     return (
-        <Graphics
+        <GraphicsResult
             controls={
                 <Button
                     icon='Download'
@@ -58,4 +58,4 @@ const Canvas = () => {
     )
 };
 
-export default Canvas;
+export default CanvasResult;

package/src/theme/CodeEditor/Editor/Result/Graphics/Turtle.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
-import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
-import { saveSvg } from '@theme/CodeEditor/Editor/utils/saveSvg';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button from '@theme/CodeEditor/Button';
+import { DOM_ELEMENT_IDS } from '../../../constants';
+import GraphicsResult from '.';
+import { saveSvg } from '../../utils/saveSvg';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button, { Color } from '../../../Button';
 import clsx from 'clsx';
 
-const Turtle = () => {
+const TurtleResult = () => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     const code = useStore(store, (state) => state.code);
     return (
-        <Graphics
+        <GraphicsResult
             controls={
                 <React.Fragment>
                     <Button
@@ -45,4 +45,4 @@ const Turtle = () => {
     )
 }
 
-export default Turtle;
+export default TurtleResult;

package/src/theme/CodeEditor/Editor/Result/Graphics/index.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '../../../constants';
 import Draggable from 'react-draggable';
-import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button from '@theme/CodeEditor/Button';
+import { checkForButtonClick } from '../../utils/checkForButtonClick';
+import { useScript, useStore } from '../../../WithScript/Store';
+import Button from '../../../Button';
 import clsx from 'clsx';
-export interface Props {
+interface Props {
     controls?: JSX.Element;
     main?: JSX.Element;
 }
-const Graphics = (props: Props) => {
+const GraphicsResult = (props: Props) => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     return (
@@ -44,4 +44,4 @@ const Graphics = (props: Props) => {
     );
 };
 
-export default Graphics;
+export default GraphicsResult;

package/src/theme/CodeEditor/Editor/Result/index.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import styles from './styles.module.css';
+// @ts-ignore
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from '../../WithScript/Store';
 
-const Result = () => {
+interface Props {
+}
+
+const Result = (props: Props) => {
     const { store } = useScript();
     const logs = useStore(store, (state) => state.logs);
     if (logs.length === 0) {

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

@@ -1,16 +1,18 @@
 import * as React from "react";
+import clsx from "clsx";
+import styles from "./styles.module.css";
 import {
   DOM_ELEMENT_IDS,
-} from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Result from "@theme/CodeEditor/Editor/Result";
-import Turtle from "@theme/CodeEditor/Editor/Result/Graphics/Turtle";
-import Canvas from "@theme/CodeEditor/Editor/Result/Graphics/Canvas";
-import Graphics from "@theme/CodeEditor/Editor/Result/Graphics";
-import Header from "@theme/CodeEditor/Editor/Header";
-import EditorAce from "@theme/CodeEditor/Editor/EditorAce";
+} from "../constants";
+import { useScript, useStore } from '../WithScript/Store';
+import Result from "./Result";
+import TurtleResult from "./Result/Graphics/Turtle";
+import CanvasResult from "./Result/Graphics/Canvas";
+import GraphicsResult from "./Result/Graphics";
+import Header from "./Header";
+import EditorAce from "./EditorAce";
 
-export interface Props {
+interface Props {
   slim: boolean;
   title: string;
   resettable: boolean;
@@ -52,13 +54,13 @@ const Editor = (props: Props) => {
           {isGraphicsmodalOpen && (
             <>
               {hasTurtleOutput && (
-                <Turtle />
+                <TurtleResult />
               )}
               {hasCanvasOutput && (
-                <Canvas />
+                <CanvasResult />
               )}
               {!hasCanvasOutput && !hasTurtleOutput && (
-                <Graphics />
+                <GraphicsResult />
               )}
             </>
           )}
@@ -68,4 +70,4 @@ const Editor = (props: Props) => {
   );
 };
 
-export default Editor;
+export default Editor;

package/src/theme/CodeEditor/Editor/utils/saveSvg.ts

@@ -1,4 +1,4 @@
-import { removeAnimations } from "@theme/CodeEditor/Editor/utils/svgWithoutAnimations";
+import { removeAnimations } from "./svgWithoutAnimations";
 
 const duration = (anim: SVGAnimateElement) => {
   const dur = anim.getAttribute('dur') || '';

package/src/theme/CodeEditor/Editor/utils/svgWithoutAnimations.ts

@@ -1,4 +1,4 @@
-import { parse, RootNode, Node } from "svg-parser";
+import { parse, RootNode, ElementNode, Node } from "svg-parser";
 
 const objToAttr = (obj: Object) => {
   return Object.entries(obj || {})

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from './icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 
@@ -13,7 +13,7 @@ export enum Color {
     Link = 'var(--ifm-color-link)'
 }
 
-export interface Props {
+interface Props {
     icon: keyof typeof Icons;
     size?: number | string;
     spin?: boolean;

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

@@ -1,4 +1,4 @@
-import type { StorageSlot, StoredScript } from "@theme/CodeEditor/WithScript/Types";
+import type { StorageSlot, StoredScript } from "./Types";
 
 export const getStorageScript = (storage: StorageSlot): StoredScript | undefined => {
     const storedCode = storage.get();

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

@@ -1,10 +1,264 @@
-import React from "react";
+import React, { useCallback } from "react";
+import { useSyncExternalStore } from "react";
+import { v4 as uuidv4 } from 'uuid';
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "./helpers";
+import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { type InitState, type Store } from "@theme/CodeEditor/WithScript/Types";
-import { createStore } from "@theme/CodeEditor/WithScript/createStore";
+import { DOM_ELEMENT_IDS } from "../constants";
+import throttle from 'lodash/throttle';
+import { getStorageScript, syncStorageScript } from "./Storage";
+import { type InitState, type LogMessage, type Script, Status, type Store, type StoredScript, type Version } from "./Types";
+export const createStore = (props: InitState, libDir: string, syncMaxOnceEvery: number): Store => {
+    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 = (raw: string, config: { codeOnly?: boolean, stateNotInitialized?: boolean } = {}) => {
+        const { pre, code } = config.codeOnly 
+                                ? { pre: getPreCode(state.pristineCode).pre, code: raw }
+                                : getPreCode(raw);
+        const hasEdits = code !== (config.stateNotInitialized ? getPreCode(props.raw).code : state.pristineCode);
+        const updatedAt = new Date();
+        const hasCanvasOutput = checkCanvasOutput(raw);
+        const hasTurtleOutput = checkTurtleOutput(raw);
+        const hasGraphicsOutput = checkGraphicsOutput(raw);
+        if (props.versioned && !config.stateNotInitialized) {
+            addVersion({code: code, createdAt: updatedAt, version: state.versions.length + 1});
+        }
+        return {
+            code: code,
+            preCode: pre,
+            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 = () => {
+        const toExec = `${state.code}`;
+        const lineShift = state.preCode.split(/\n/).length;
+        const src = `from brython_runner import run
+run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
+`;
+        if (!(window as any).__BRYTHON__) {
+            alert('Brython not loaded');
+            return;
+        }
+        setState((s) => ({...s, isExecuting: true, isGraphicsmodalOpen: state.hasGraphicsOutput}));
+        const active = document.getElementById(DOM_ELEMENT_IDS.communicator(state.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: [libDir]
+                }
+            );
+        }, 0);
+    };
+    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 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.raw, { 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, isGraphicsmodalOpen: false}));
+    };
+    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: [],
+        isGraphicsmodalOpen: false,
+        hasEdits: false,
+        createdAt: createdAt,
+        isLoaded: false,
+        status: Status.IDLE,
+        versions: [],
+        versionsLoaded: false,
+        isPasted: false,
+        ...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();
+    }
+
+    return { 
+        getState, 
+        setState, 
+        subscribe, 
+        saveNow, 
+        addLogMessage, 
+        clearLogMessages, 
+        closeGraphicsModal, 
+        setCode, 
+        execScript, 
+        setExecuting, 
+        stopScript,
+        load, 
+        loadVersions
+    } satisfies Store;
+};
+
+type Selector<T, R> = (state: T) => R;
+export const useStore = <T, R>(store: Store<T>, selector: Selector<T, R>): R => {
+    return useSyncExternalStore(
+        store.subscribe,
+        useCallback(() => selector(store.getState()), [store, selector])
+    );
+}
 
 export const Context = React.createContext<{store: Store} | 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<Store | null>(null);
@@ -25,4 +279,16 @@ const ScriptContext = (props: InitState & { children: React.ReactNode; }) => {
     );
 }
 
+export function useScript(): {store: Store} {
+    const context = React.useContext(Context);
+    if (context === null) {
+      throw new ReactContextError(
+        'ScriptContextProvider',
+        'The Component must be a child of the CodeContextProvider component',
+      );
+    }
+    return context;
+}
+
+
 export default ScriptContext;

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

@@ -13,7 +13,6 @@ export interface StoredScript {
     versions: Version[];
 }
 
-export type Selector<T, R> = (state: T) => R;
 export interface Script extends StoredScript {
     /**
      * this is normally a uuid

package/src/theme/CodeEditor/index.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import Editor from '@theme/CodeEditor/Editor';
-import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
+import Editor from './Editor';
+import BrythonCommunicator from './BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { useScript, useStore } from './WithScript/Store';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeHistory from './CodeHistory';
 
-export interface Props {
+interface Props {
     slim: boolean;
     readonly: boolean;
     children: React.ReactNode;
@@ -23,7 +24,7 @@ export interface Props {
     noHistory: boolean;
 }
 
-const CodeEditor = (props: Props) => {
+const PyAceEditor = (props: Props) => {
     const { store } = useScript();
     const lang = useStore(store, (state) => state.lang);
     return (
@@ -53,5 +54,4 @@ const CodeEditor = (props: Props) => {
     );
 };
 
-export default CodeEditor;
-
+export default PyAceEditor;

package/src/types.ts

@@ -0,0 +1,29 @@
+
+export type ThemeOptions = {
+    /**
+     * The path to the brython source file.
+     * @default 'https://raw.githack.com/brython-dev/brython/master/www/src/brython.js
+     */
+    brython_src?: string;
+    /**
+     * The path to the brython standard library source file.
+     * @default 'https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js'
+     */
+    brython_stdlib_src?: string;
+    /**
+     * The folder path to brython specific libraries.
+     * When a python file imports a module, the module is searched in the libDir directory.
+     * By default, the libDir is created in the static folder and the needed python files are copied there.
+     * This can be changed by setting skipCopyAssetsToLibDir to true and setting libDir to a custom path.
+     * Make sure to copy the needed python files to the custom libDir.
+     * @default '/bry-libs/'
+     */
+    libDir?: string;
+    /**
+     * Skip copying the brython specific libraries to the libDir.
+     * Make sure to copy the needed python files to the custom libDir yourself.
+     * @ref [needed python files](https://github.com/lebalz/docusaurus-live-brython/tree/main/src/assets)
+     * @default false
+     */
+    skipCopyAssetsToLibDir?: boolean;
+}

package/lib/theme/CodeEditor/WithScript/createStore.d.ts

@@ -1,2 +0,0 @@
-import { type InitState, type Store } from "@theme/CodeEditor/WithScript/Types";
-export declare const createStore: (props: InitState, libDir: string, syncMaxOnceEvery: number) => Store;