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

package/src/theme/CodeEditor/index.tsx

@@ -1,16 +1,31 @@
 import * as React from 'react';
 import styles from './styles.module.css';
-import Editor from 'docusaurus-live-brython/theme/CodeEditor/Editor';
-import BrythonCommunicator from 'docusaurus-live-brython/theme/CodeEditor/BrythonCommunicator';
+import Editor from '@theme/CodeEditor/Editor';
+import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import CodeHistory from 'docusaurus-live-brython/theme/CodeEditor/CodeHistory';
+import CodeHistory from '@theme/CodeEditor/CodeHistory';
+import CodeBlock from '@theme/CodeBlock';
 
-interface Props {
+export interface MetaProps {
+    reference?: boolean;
+    live_jsx?: boolean;
+    live_py?: boolean;
+    id?: string;
+    slim?: boolean;
+    readonly?: boolean;
+    noReset?: boolean;
+    noDownload?: boolean;
+    versioned?: boolean;
+    noHistory?: boolean;
+    noCompare?: boolean;
+    maxLines?: string;
+    title?: string;
+}
+export interface Props {
     slim: boolean;
     readonly: boolean;
-    children: React.ReactNode;
     noCompare: boolean;
     title: string;
     versioned: boolean;
@@ -18,40 +33,39 @@ interface Props {
     download: boolean;
     showLineNumbers: boolean;
     lang: string;
-    precode: string;
+    preCode: string;
+    postCode: string;
+    code: string;
     maxLines?: number;
     noHistory: boolean;
+    className?: string;
+    onChange?: (code: string) => void;
 }
 
-const PyAceEditor = (props: Props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
+const CodeEditor = (props: Props) => {
+    const store = useStore();
+    const lang = useScript(store, 'lang');
     return (
-        <BrowserOnly
-            fallback={<div>Loading...</div>}
-        >
+        <BrowserOnly fallback={<CodeBlock language={props.lang}>{props.code}</CodeBlock>}>
             {() => {
-                    return (
-                        <div className={clsx(styles.wrapper, 'notranslate')}>
-                            <div
-                                className={clsx(
-                                    styles.playgroundContainer,
-                                    props.slim ? styles.containerSlim : styles.containerBig,
-                                    'live_py'
-                                )}
-                            >
-                                <Editor {...props} />
-                                {!props.noHistory && (
-                                    <CodeHistory />
-                                )}
-                            </div>
-                            {lang === 'python' && <BrythonCommunicator />}
+                return (
+                    <div className={clsx(styles.wrapper, 'notranslate', props.className)}>
+                        <div
+                            className={clsx(
+                                styles.playgroundContainer,
+                                props.slim ? styles.containerSlim : styles.containerBig,
+                                'live_py'
+                            )}
+                        >
+                            <Editor {...props} />
+                            {!props.noHistory && <CodeHistory />}
                         </div>
-                    )
+                        {lang === 'python' && <BrythonCommunicator />}
+                    </div>
+                );
             }}
         </BrowserOnly>
     );
 };
 
-export default PyAceEditor;
-
+export default CodeEditor;

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

@@ -1,43 +1,41 @@
 .containerBig {
-	display: grid;
-	flex-grow: 1;
-	flex-shrink: 1;
-	flex-basis: 250px;
-	grid-template-columns: 100%;
-	grid-template-rows: min-content 1fr min-content;
-	gap: 0px 0px;
-	grid-auto-flow: row;
-	grid-template-areas: 'controls' 'editor' 'result';
+    display: grid;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 250px;
+    grid-template-columns: 100%;
+    grid-template-rows: min-content 1fr min-content;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: 'controls' 'editor' 'result';
 }
 
 .containerSlim {
-	display: grid;
-	grid-template-columns: 1fr min-content;
-	grid-template-rows: 1fr min-content;
-	gap: 0px 0px;
-	grid-auto-flow: row;
-	grid-template-areas: 'editor controls' 'result result';
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: 1fr min-content;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas: 'editor controls' 'result result';
 }
 
-
 .containerSlim .headerButton {
-	z-index: calc(var(--ifm-z-index-fixed) - 2);
-	height: 100%;
-	border-radius: 0px;
-	padding: 2px 6px;
-	margin: 0px;
+    z-index: calc(var(--ifm-z-index-fixed) - 2);
+    height: 100%;
+    border-radius: 0px;
+    padding: 2px 6px;
+    margin: 0px;
 }
 
-
 .wrapper:last-child .playgroundContainer {
-	margin-bottom: inherit;
+    margin-bottom: inherit;
 }
 
 .playgroundContainer {
-	margin-bottom: var(--ifm-leading);
-	border-radius: var(--ifm-global-radius);
-	box-shadow: var(--ifm-global-shadow-lw);
-	overflow: hidden;
-	flex-grow: 1;
-	flex-shrink: 1;
-}
+    margin-bottom: var(--ifm-leading);
+    border-radius: var(--ifm-global-radius);
+    box-shadow: var(--ifm-global-shadow-lw);
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 1;
+}

package/src/typings.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@theme/Details' {
+  import { ReactNode } from 'react';
+  export interface Props {
+    readonly summary: ReactNode;
+    readonly children: ReactNode;
+    [key: string]: any;
+  }
+  export default function Details(props: Props): React.ReactNode;
+}

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

@@ -1,15 +0,0 @@
-import React from "react";
-import { type InitState, type Store } from "./Types";
-export declare const createStore: (props: InitState, libDir: string, syncMaxOnceEvery: number) => Store;
-type Selector<T, R> = (state: T) => R;
-export declare const useStore: <T, R>(store: Store<T>, selector: Selector<T, R>) => R;
-export declare const Context: React.Context<{
-    store: Store;
-}>;
-declare const ScriptContext: (props: InitState & {
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export declare function useScript(): {
-    store: Store;
-};
-export default ScriptContext;

package/lib/types.d.ts

@@ -1,28 +0,0 @@
-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/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,294 +0,0 @@
-import React, { useCallback } from "react";
-import { useSyncExternalStore } from "react";
-import { v4 as uuidv4 } from 'uuid';
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "docusaurus-live-brython/theme/CodeEditor/WithScript/helpers";
-import { ReactContextError, createStorageSlot } from "@docusaurus/theme-common";
-import { usePluginData } from "@docusaurus/useGlobalData";
-import { DOM_ELEMENT_IDS } from "docusaurus-live-brython/theme/CodeEditor/constants";
-import throttle from 'lodash/throttle';
-import { getStorageScript, syncStorageScript } from "docusaurus-live-brython/theme/CodeEditor/WithScript/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);
-    React.useEffect(() => {
-        const store = createStore(props, libDir, syncMaxOnceEvery);
-        setStore(store);
-        store.load();
-    }, [props.id, libDir]);
-
-    if (!store) {
-        return <div>Load</div>;
-    }
-
-    return (
-        <Context.Provider value={{store: store}}>
-            {props.children}
-        </Context.Provider>
-    );
-}
-
-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/types.ts

@@ -1,29 +0,0 @@
-
-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;
-}