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

package/src/index.ts

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-
 /**
  * Notes
  * - how to add static files: https://github.com/facebook/docusaurus/discussions/6907
  *  ---> sitemap plugin: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-plugin-sitemap/src/index.ts
  * - call brython with arguments: https://github.com/brython-dev/brython/issues/2421
- * 
+ *
  */
 
+import { readDefaultCodeTranslationMessages } from '@docusaurus/theme-translations';
 import type { HtmlTags, LoadContext, Plugin } from '@docusaurus/types';
 // eslint-disable-next-line import/no-extraneous-dependencies, import/order
 import logger from '@docusaurus/logger';
@@ -26,33 +26,94 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export const NAME = 'docusaurus-live-brython' as const;
 export const DEFAULT_LIB_DIR = 'bry-libs' as const;
 
-const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (
-    context: LoadContext,
-    options: ThemeOptions,
-) => {
+const extractImports = (script: string): string[] => {
+    const imports: string[] = [];
+    script.split('\n').forEach((line) => {
+        const fromImport = line.match(/from\s+(\w+)\s+import\s+/);
+        if (fromImport) {
+            return imports.push(fromImport[1]);
+        }
+        const importImport = line.match(/import\s+(\w+)/);
+        if (importImport) {
+            return imports.push(importImport[1]);
+        }
+    });
+    return imports;
+};
+
+const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (context: LoadContext, options: ThemeOptions) => {
+    const {
+        i18n: { currentLocale }
+    } = context;
     const libDir = options.libDir || DEFAULT_LIB_DIR;
+    const isRemote = /https?:\/\//.test(libDir);
+    const isHashRouter = context.siteConfig.future?.experimental_router === 'hash';
     return {
         name: NAME,
         async loadContent() {
-            if (!options.skipCopyAssetsToLibDir) {
-                const staticDir = path.join(context.siteDir, context.siteConfig.staticDirectories[0], libDir);
+            const staticDir = path.join(context.siteDir, context.siteConfig.staticDirectories[0], libDir);
+            let assets: string[] = [];
+            const bryModules: { name: string; content: string }[] = [];
+            if (!options.skipCopyAssetsToLibDir && !isRemote) {
                 await fs.ensureDir(staticDir);
                 if (process.env.NODE_ENV !== 'production') {
-                    const assets = fs.readdirSync(path.join(__dirname, 'assets'));
+                    assets = fs.readdirSync(path.join(__dirname, 'assets'));
                     for (const asset of assets) {
                         const assetFile = path.join(__dirname, 'assets', asset);
                         const assetOutFile = path.join(staticDir, asset);
                         logger.info(`copy "${asset}" to "${assetOutFile}"`);
                         await fs.copyFile(assetFile, assetOutFile);
                     }
-                    return assets;
                 }
             }
+            if (isHashRouter && !isRemote) {
+                const libs = await fs.readdir(staticDir);
+                const libraries: { [key: string]: string } = {};
+                for (const lib of libs) {
+                    const libPath = path.join(staticDir, lib);
+                    if (libPath.endsWith('.py')) {
+                        const libContent = await fs.readFile(libPath, 'utf-8');
+                        libraries[lib.replace(/\.py$/i, '')] = libContent;
+                    }
+                }
+                const libNames = Object.keys(libraries);
+                for (const libName of libNames) {
+                    const libContent = libraries[libName];
+                    const imports = extractImports(libContent);
+                    const injectAt = Math.max(
+                        ...bryModules.map((lib, idx) => (imports.includes(lib.name) ? idx : -1)),
+                        -1
+                    );
+                    if (injectAt < 0) {
+                        bryModules.splice(0, 0, { name: libName, content: libContent });
+                    } else if (injectAt + 1 < bryModules.length) {
+                        bryModules.splice(injectAt + 1, 0, {
+                            name: libName,
+                            content: libContent
+                        });
+                    } else {
+                        bryModules.push({ name: libName, content: libContent });
+                    }
+                }
+            }
+            return {
+                assets: assets,
+                bryModules: bryModules
+            };
+        },
+        getDefaultCodeTranslationMessages() {
+            return readDefaultCodeTranslationMessages({
+                locale: currentLocale,
+                name: NAME
+            });
         },
         async contentLoaded({ content, actions }) {
             const { setGlobalData } = actions;
-            const libDir = (options.libDir || DEFAULT_LIB_DIR).replace(/(\/|\\)/g, '');
-            setGlobalData({ libDir: `${context.baseUrl}${libDir}/`, syncMaxOnceEvery: options.syncMaxOnceEvery || DEFAULT_OPTIONS.syncMaxOnceEvery});
+            const libUrl = isRemote ? libDir : path.join(context.baseUrl, libDir, '/');
+            setGlobalData({
+                libDir: libUrl,
+                syncMaxOnceEvery: options.syncMaxOnceEvery || DEFAULT_OPTIONS.syncMaxOnceEvery
+            });
         },
         configureWebpack() {
             return {
@@ -61,9 +122,9 @@ const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (
                         {
                             test: /\.raw\.*/,
                             type: 'asset/source'
-                        },
-                    ],
-                },
+                        }
+                    ]
+                }
             };
         },
         getThemePath() {
@@ -72,36 +133,46 @@ const theme: Plugin<{ remoteHeadTags: HtmlTags[] }> = (
         getTypeScriptThemePath() {
             return '../src/theme';
         },
-        injectHtmlTags() {
+        injectHtmlTags({ content }: { content: { bryModules: { name: string; content: string }[] } }) {
             return {
                 headTags: [
                     {
                         tagName: 'script',
                         attributes: {
                             src: options.brythonSrc || DEFAULT_OPTIONS.brythonSrc,
-                            crossorigin: "anonymous",
-                            referrerpolicy: "no-referrer",
+                            crossorigin: 'anonymous',
+                            referrerpolicy: 'no-referrer',
                             defer: 'defer'
-                        },
+                        }
                     },
                     {
                         tagName: 'script',
                         attributes: {
                             src: options.brythonStdlibSrc || DEFAULT_OPTIONS.brythonStdlibSrc,
-                            crossorigin: "anonymous",
-                            referrerpolicy: "no-referrer",
+                            crossorigin: 'anonymous',
+                            referrerpolicy: 'no-referrer',
                             defer: 'defer'
-                        },
+                        }
                     }
                 ],
+                postBodyTags: content.bryModules.map((module) => {
+                    return {
+                        tagName: 'script',
+                        attributes: {
+                            id: module.name,
+                            type: 'text/python'
+                        },
+                        innerHTML: module.content
+                    };
+                })
             };
         },
         getSwizzleComponentList() {
             return [];
         }
     } as Plugin;
-}
+};
 
 export default theme;
-export {validateThemeConfig} from './options';
-export {ThemeOptions, Options};
+export { validateThemeConfig } from './options';
+export { ThemeOptions, Options };

package/src/options.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {Joi} from '@docusaurus/utils-validation';
+import { Joi } from '@docusaurus/utils-validation';
 
-import type {ThemeConfigValidationContext} from '@docusaurus/types';
+import type { ThemeConfigValidationContext } from '@docusaurus/types';
 
 export type ThemeOptions = {
     /**
@@ -42,14 +42,13 @@ export type ThemeOptions = {
      * @default 1000
      */
     syncMaxOnceEvery: number;
-}
-
+};
 
 export type Options = Partial<ThemeOptions>;
 
 export const DEFAULT_OPTIONS: ThemeOptions = {
-    brythonSrc: 'https://raw.githack.com/brython-dev/brython/master/www/src/brython.js',
-    brythonStdlibSrc: 'https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js',
+    brythonSrc: 'https://cdn.jsdelivr.net/npm/brython@3.14/brython.min.js',
+    brythonStdlibSrc: 'https://cdn.jsdelivr.net/npm/brython@3.14/brython_stdlib.js',
     libDir: '/bry-libs/',
     skipCopyAssetsToLibDir: false,
     syncMaxOnceEvery: 1000
@@ -63,9 +62,10 @@ const ThemeOptionSchema = Joi.object<ThemeOptions>({
     syncMaxOnceEvery: Joi.number().default(DEFAULT_OPTIONS.syncMaxOnceEvery)
 });
 
-export function validateThemeConfig(
-    {themeConfig, validate}: ThemeConfigValidationContext<Options, ThemeOptions>
-): ThemeOptions {
-  const validatedConfig = validate(ThemeOptionSchema, themeConfig);
-  return validatedConfig;
-}
+export function validateThemeConfig({
+    themeConfig,
+    validate
+}: ThemeConfigValidationContext<Options, ThemeOptions>): ThemeOptions {
+    const validatedConfig = validate(ThemeOptionSchema, themeConfig);
+    return validatedConfig;
+}

package/src/theme/CodeBlock/index.tsx

@@ -1,57 +1,51 @@
 import React from 'react';
-import CodeBlock, {type Props as CodeBlockType} from '@theme-init/CodeBlock';
-// @ts-ignore
+import CodeBlock, { type Props as CodeBlockType } from '@theme-init/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor from 'docusaurus-live-brython/theme/CodeEditor';
-
-import ScriptContext from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { type MetaProps } from '@theme/CodeEditor';
 
+import ContextEditor, { splitCode } from '@theme/CodeEditor/ContextEditor';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 type Props = WrapperProps<typeof CodeBlockType>;
 
-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
-}
-
-
 const sanitizedTitle = (id: string) => {
     if (!id) {
         return;
     }
-    return id.replace(/--/g, '<<HYPHEN>>').replace(/__/g, '<<UNDERSCORE>>').replace(/[-_]/g, ' ').replace(/<<UNDERSCORE>>/g, '_').replace(/<<HYPHEN>>/g, '-')
-}
+    return id
+        .replace(/--/g, '<<HYPHEN>>')
+        .replace(/__/g, '<<UNDERSCORE>>')
+        .replace(/[-_]/g, ' ')
+        .replace(/<<UNDERSCORE>>/g, '_')
+        .replace(/<<HYPHEN>>/g, '-');
+};
 
-const extractMetaProps = (props: {metastring?: string}): MetaProps => {
+const extractMetaProps = (props: { metastring?: string }): MetaProps => {
     const metaString = (props?.metastring || '').replace(/\s*=\s*/g, '='); // remove spaces around =
     const metaRaw = metaString.split(/\s+/).map((s) => s.trim().split('='));
-    return metaRaw.reduce((acc, [key, value]) => {
-        if (!key) {
+    return metaRaw.reduce(
+        (acc, [key, value]) => {
+            if (!key) {
+                return acc;
+            }
+            /** casts to booleans and numbers. When no value was provided, true is used */
+            const val =
+                value === 'true'
+                    ? true
+                    : value === 'false'
+                        ? false
+                        : !Number.isNaN(Number(value))
+                            ? Number(value)
+                            : value || true;
+            acc[key] = val;
             return acc;
-        }
-        /** casts to booleans and numbers. When no value was provided, true is used */
-        const val = value === 'true' ? true
-                    : value === 'false' ? false
-                    : !Number.isNaN(Number(value)) ? Number(value)
-                    : value || true;
-        acc[key] = val;
-        return acc;
-    }, {} as {[key: string]: number | string | boolean});
-}
+        },
+        {} as { [key: string]: number | string | boolean }
+    );
+};
 
-export default function CodeBlockWrapper(props: Props): JSX.Element {
+export default function CodeBlockWrapper(props: Props): React.ReactNode {
     const metaProps = extractMetaProps(props);
     const langMatch = ((props.className || '') as string).match(/language-(?<lang>\w*)/);
     let lang = langMatch?.groups?.lang?.toLocaleLowerCase() ?? '';
@@ -61,38 +55,20 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
     // if (metaProps.live_jsx) {
     //     return <Playground scope={ReactLiveScope} {...props} />;
     // }
-    if (metaProps.live_py && ExecutionEnvironment.canUseDOM) {
+    if (metaProps.live_py) {
         const title = props.title || metaProps.title;
-
-        const rawcode: string = (props.children as string || '').replace(/\s*\n$/, '');
-        let code = rawcode;
+        const { code } = splitCode((props.children as string) || '');
         return (
-            <ScriptContext
-                id={metaProps.id}
-                lang={lang}
-                title={title}
-                raw={rawcode}
-                readonly={!!metaProps.readonly}
-                versioned={!!metaProps.versioned}
-            >
-                <CodeEditor
-                    {...props}
-                    {...metaProps}
-                    maxLines={metaProps.maxLines && Number.parseInt(metaProps.maxLines, 10)}
-                    readonly={!!metaProps.readonly}
-                    resettable={!metaProps.noReset}
-                    download={!metaProps.versioned && !metaProps.noDownload}
-                    slim={!!metaProps.slim}
-                    showLineNumbers={!(!!metaProps.slim && !/\n/.test(code))}
-                    versioned={!!metaProps.versioned}
-                    noHistory={!!metaProps.noHistory}
-                    noCompare={!!metaProps.noCompare}
-                    title={sanitizedTitle(title) || lang}
-                />
-            </ScriptContext>
+            <BrowserOnly fallback={<CodeBlock language={lang}>{code}</CodeBlock>}>
+                {() => {
+                    return (
+                        <ContextEditor {...props} {...metaProps} title={sanitizedTitle(title) || lang}>
+                            {props.children}
+                        </ContextEditor>
+                    );
+                }}
+            </BrowserOnly>
         );
     }
-    return (
-        <CodeBlock {...props} />
-    );
+    return <CodeBlock {...props} />;
 }

package/src/theme/CodeEditor/Actions/DownloadCode.tsx

@@ -1,38 +1,39 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button, { Color } from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 
-
-const DownloadCode = (props: {title: string}) => {
-    const { store } = useScript();
-    const code = useStore(store, (state) => state.code);
-    const lang = useStore(store, (state) => state.lang);
-    const id = useStore(store, (state) => state.id);
+const DownloadCode = (props: { title: string }) => {
+    const store = useStore();
+    const code = useScript(store, 'code');
+    const lang = useScript(store, 'lang');
+    const id = useScript(store, 'id');
     return (
         <Button
-            icon='Download'
+            icon="Download"
             onClick={() => {
-                const downloadLink = document.createElement("a");
-                const file = new Blob([code],    
-                            {type: 'text/plain;charset=utf-8'});
+                const downloadLink = document.createElement('a');
+                const file = new Blob([code], { type: 'text/plain;charset=utf-8' });
                 downloadLink.href = URL.createObjectURL(file);
                 const fExt = lang === 'python' ? '.py' : `.${lang}`;
-                const fTitle = props.title === lang ? id : props.title
+                const fTitle = props.title === lang ? id : props.title;
                 const fName = fTitle.endsWith(fExt) ? fTitle : `${fTitle}${fExt}`;
                 downloadLink.download = fName;
                 document.body.appendChild(downloadLink);
                 downloadLink.click();
                 document.body.removeChild(downloadLink);
             }}
-            title={translate({
-                message: 'Download code snippet {title}',
-                id: 'theme.CodeEditor.Actions.DownloadCode.title'
-            }, {
-                title: props.title || id
-            })}
+            title={translate(
+                {
+                    message: 'Download code snippet {title}',
+                    id: 'theme.CodeEditor.Actions.DownloadCode.title'
+                },
+                {
+                    title: props.title || id
+                }
+            )}
         />
-    )
-}
+    );
+};
 
-export default DownloadCode;
+export default DownloadCode;

package/src/theme/CodeEditor/Actions/Reset.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button, { Color } from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button, { Color } from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 
 const Reset = () => {
-    const { store } = useScript();
-    const pristine = useStore(store, (state) => state.pristineCode);
-    
+    const store = useStore();
+    const pristine = useScript(store, 'pristineCode');
+
     const onReset = () => {
-        const shouldReset = window.confirm(translate({
-            message: 'Discard your edits? Your changes will be lost!'
-        }));
+        const shouldReset = window.confirm(
+            translate({
+                message: 'Discard your edits? Your changes will be lost!'
+            })
+        );
         if (shouldReset) {
             store.setCode(pristine);
         }
@@ -21,11 +23,11 @@ const Reset = () => {
             title={translate({
                 message: 'Discard Changes',
                 description: 'Reset the code to its original state',
-                id: 'theme.CodeEditor.Header.reset',
+                id: 'theme.CodeEditor.Header.reset'
             })}
             icon="Reset"
         />
-    )
-}
+    );
+};
 
-export default Reset;
+export default Reset;

package/src/theme/CodeEditor/Actions/RunCode.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button, { Color } from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button, { Color } from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 
-interface Props {
+export interface Props {
     title: string;
     slim: boolean;
 }
 
 const RunCode = (props: Props) => {
-    const { store } = useScript();
-    const isExecuting = useStore(store, (state) => state.isExecuting);
+    const store = useStore();
+    const isExecuting = useScript(store, 'isExecuting');
     return (
         <Button
             icon={isExecuting ? 'Python' : 'Play'}
@@ -21,14 +21,17 @@ const RunCode = (props: Props) => {
             className={clsx(styles.runCode, props.slim && styles.slim)}
             iconSize={props.slim ? '1.2em' : '1.6em'}
             onClick={() => {
-                store.execScript()
+                store.execScript();
             }}
-            title={translate({
-                message: 'Run code snippet {title}',
-                id: 'theme.CodeEditor.Actions.RunCode.title'
-            }, {title: props.title})}
+            title={translate(
+                {
+                    message: 'Run code snippet {title}',
+                    id: 'theme.CodeEditor.Actions.RunCode.title'
+                },
+                { title: props.title }
+            )}
         />
     );
 };
 
-export default RunCode;
+export default RunCode;

package/src/theme/CodeEditor/Actions/ShowRaw.tsx

@@ -1,24 +1,30 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button, { Color } from 'docusaurus-live-brython/theme/CodeEditor/Button';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Button, { Color } from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 
 const ShowRaw = () => {
-    const { store } = useScript();
-    const showRaw = useStore(store, (state) => state.showRaw);
+    const store = useStore();
+    const showRaw = useScript(store, 'showRaw');
 
     return (
         <Button
             icon={showRaw ? 'EditCode' : 'Code'}
-            onClick={() => store.setState((state) => ({...state, showRaw: !showRaw}))}
+            onClick={() => store.setShowRaw(!showRaw)}
             color={showRaw ? Color.Primary : Color.Secondary}
             title={
-                showRaw 
-                ? translate({ message: 'Show edited Code', id: 'theme.CodeEditor.Actions.ShowCode.showEdited'})
-                : translate({ message: 'Show initial code', id: 'theme.CodeEditor.Actions.ShowCode.showRaw'})
+                showRaw
+                    ? translate({
+                          message: 'Show edited Code',
+                          id: 'theme.CodeEditor.Actions.ShowCode.showEdited'
+                      })
+                    : translate({
+                          message: 'Show initial code',
+                          id: 'theme.CodeEditor.Actions.ShowCode.showRaw'
+                      })
             }
         />
-    )
-}
+    );
+};
 
-export default ShowRaw;
+export default ShowRaw;

package/src/theme/CodeEditor/Actions/ShowSyncStatus.tsx

@@ -1,41 +1,46 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Icon, { Color } from 'docusaurus-live-brython/theme/CodeEditor/Icon';
-import { Status } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Types';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
+import Icon, { Color } from '@theme/CodeEditor/Icon';
+import { Status } from '@theme/CodeEditor/WithScript/Types';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 
 const ShowSyncStatus = () => {
-    const { store } = useScript();
-    const isLoaded = useStore(store, (state) => state.isLoaded);
-    const status = useStore(store, (state) => state.status);
+    const store = useStore();
+    const isLoaded = useScript(store, 'isLoaded');
+    const status = useScript(store, 'status');
 
     React.useEffect(() => {
         if (status !== Status.IDLE) {
             const disposer = setTimeout(() => {
-                store.setState((state) => ({ ...state, status: Status.IDLE }));
+                store.setStatus(Status.IDLE);
             }, 1200);
             return () => clearTimeout(disposer);
         }
     }, [status, store]);
 
     return (
-        <>
-            {!isLoaded && (
-                <Icon icon='Sync' spin size={'1.2em'} color={Color.Primary}/>
-            )}
-            <div style={{flexGrow: 1, flexShrink: 1, flexBasis: 0}}></div>
-            <span style={{ minWidth: '1em' }}>
-                {status === Status.SYNCING && (
-                    <Icon icon='Sync' spin size={'1.2em'} color={Color.Primary}/>
-                )}
-                {status === Status.SUCCESS && (
-                    <Icon icon='Check' size={'1.2em'} color={Color.Success}/>
-                )}
-                {status === Status.ERROR && (
-                    <Icon icon='Close' size={'1.2em'} color={Color.Danger}/>
-                )}
-            </span>
-        </>
-    )
-}
+        <BrowserOnly fallback={null}>
+            {() => {
+                return (
+                    <>
+                        {!isLoaded && <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />}
+                        <div style={{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }}></div>
+                        <span style={{ minWidth: '1em' }}>
+                            {status === Status.SYNCING && (
+                                <Icon icon="Sync" spin size={'1.2em'} color={Color.Primary} />
+                            )}
+                            {status === Status.SUCCESS && (
+                                <Icon icon="Check" size={'1.2em'} color={Color.Success} />
+                            )}
+                            {status === Status.ERROR && (
+                                <Icon icon="Close" size={'1.2em'} color={Color.Danger} />
+                            )}
+                        </span>
+                    </>
+                );
+            }}
+        </BrowserOnly>
+    );
+};
 
-export default ShowSyncStatus;
+export default ShowSyncStatus;