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

package/README.md

@@ -1,8 +1,5 @@
 # Docusaurus Live Codeblock for Python
 
-![NPM Version](https://img.shields.io/npm/v/docusaurus-live-brython)
-
-
 > [!NOTE]\
 > This theme works with Docusaurus v3+.
 
@@ -118,13 +115,4 @@ yarn link docusaurus-live-brython
 Then start the website
 ```sh
 yarn run start
-```
-
-### Publish
-
-```bash
-yarn run build
-# when running inside wsl, use --auth=legacy
-npm login --auth=legacy
-npm publish --auth=legacy
 ```

package/lib/index.d.ts

@@ -4,6 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * 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 type { HtmlTags, Plugin } from '@docusaurus/types';
 import { type ThemeOptions, type Options } from './options';
 export declare const NAME: "docusaurus-live-brython";

package/lib/index.js

@@ -4,14 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * 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';
 // eslint-disable-next-line import/no-extraneous-dependencies, import/order
 import logger from '@docusaurus/logger';
 import fs from 'fs-extra';
@@ -22,7 +14,6 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export const NAME = 'docusaurus-live-brython';
 export const DEFAULT_LIB_DIR = 'bry-libs';
 const theme = (context, options) => {
-    const { i18n: { currentLocale }, } = context;
     const libDir = options.libDir || DEFAULT_LIB_DIR;
     return {
         name: NAME,
@@ -42,12 +33,6 @@ const theme = (context, options) => {
                 }
             }
         },
-        getDefaultCodeTranslationMessages() {
-            return readDefaultCodeTranslationMessages({
-                locale: currentLocale,
-                name: NAME,
-            });
-        },
         async contentLoaded({ content, actions }) {
             const { setGlobalData } = actions;
             const libDir = (options.libDir || DEFAULT_LIB_DIR).replace(/(\/|\\)/g, '');

package/lib/theme/CodeBlock/index.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import CodeBlock from '@theme-init/CodeBlock';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor from '@theme/CodeEditor';
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import CodeEditor from '../CodeEditor';
+// import Playground from '@theme-original/Playground';
+// import ReactLiveScope from '@theme-original/ReactLiveScope';
+import ScriptContext from '../CodeEditor/WithScript/Store';
 const sanitizedTitle = (id) => {
     if (!id) {
         return;

package/lib/theme/CodeEditor/Actions/DownloadCode.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button from '../Button';
 import { translate } from '@docusaurus/Translate';
 const DownloadCode = (props) => {
     const { store } = useScript();

package/lib/theme/CodeEditor/Actions/Reset.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button from '../Button';
 import { translate } from '@docusaurus/Translate';
 const Reset = () => {
     const { store } = useScript();

package/lib/theme/CodeEditor/Actions/RunCode.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface Props {
+interface Props {
     title: string;
     slim: boolean;
 }

package/lib/theme/CodeEditor/Actions/RunCode.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 import styles from './styles.module.css';
 import clsx from 'clsx';

package/lib/theme/CodeEditor/Actions/ShowRaw.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Button, { Color } from '@theme/CodeEditor/Button';
+import { useScript, useStore } from '../WithScript/Store';
+import Button, { Color } from '../Button';
 import { translate } from '@docusaurus/Translate';
 const ShowRaw = () => {
     const { store } = useScript();

package/lib/theme/CodeEditor/Actions/ShowSyncStatus.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import Icon, { Color } from '@theme/CodeEditor/Icon';
-import { Status } from '@theme/CodeEditor/WithScript/Types';
+import { useScript, useStore } from '../WithScript/Store';
+import Icon, { Color } from '../Icon';
+import { Status } from '../WithScript/Types';
 const ShowSyncStatus = () => {
     const { store } = useScript();
     const isLoaded = useStore(store, (state) => state.isLoaded);

package/lib/theme/CodeEditor/BrythonCommunicator.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "./constants";
+import { useScript, useStore } from './WithScript/Store';
 const BrythonCommunicator = () => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);

package/lib/theme/CodeEditor/Button/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from '../Icon/icons';
 export declare enum Color {
     Primary = "button--primary",
     Secondary = "button--secondary",
@@ -13,7 +13,7 @@ export declare enum Size {
     Small = "button--sm",
     Large = "button--lg"
 }
-export interface Props {
+interface Props {
     icon: keyof typeof Icons;
     title?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

package/lib/theme/CodeEditor/Button/index.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icon from '@theme/CodeEditor/Icon';
+import Icon from '../Icon';
 export var Color;
 (function (Color) {
     Color["Primary"] = "button--primary";

package/lib/theme/CodeEditor/CodeHistory/index.jsx

@@ -4,9 +4,9 @@ import styles from './styles.module.css';
 import { Prism } from 'prism-react-renderer';
 import Slider from 'rc-slider';
 import 'rc-slider/assets/index.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from '../WithScript/Store';
 import Translate, { translate } from '@docusaurus/Translate';
-import Button from '@theme/CodeEditor/Button';
+import Button from '../Button';
 import DiffViewer from 'react-diff-viewer';
 import Details from '@theme/Details';
 const highlightSyntax = (str) => {

package/lib/theme/CodeEditor/Editor/EditorAce.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '../constants';
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/ext-searchbox';
 import 'ace-builds/src-noconflict/mode-python';
@@ -10,7 +10,7 @@ import 'ace-builds/src-noconflict/mode-svg';
 import 'ace-builds/src-noconflict/theme-dracula';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/webpack-resolver';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useScript, useStore } from '../WithScript/Store';
 const ALIAS_LANG_MAP_ACE = {
     mpy: 'python',
 };

package/lib/theme/CodeEditor/Editor/Header/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export interface Props {
+interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;

package/lib/theme/CodeEditor/Editor/Header/index.jsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
-import ShowSyncStatus from '@theme/CodeEditor/Actions/ShowSyncStatus';
-import Reset from '@theme/CodeEditor/Actions/Reset';
-import DownloadCode from '@theme/CodeEditor/Actions/DownloadCode';
-import ShowRaw from '@theme/CodeEditor/Actions/ShowRaw';
-import RunCode from '@theme/CodeEditor/Actions/RunCode';
+import { useScript, useStore } from '../../WithScript/Store';
+import ShowSyncStatus from '../../Actions/ShowSyncStatus';
+import Reset from '../../Actions/Reset';
+import DownloadCode from '../../Actions/DownloadCode';
+import ShowRaw from '../../Actions/ShowRaw';
+import RunCode from '../../Actions/RunCode';
 const Header = (props) => {
     const { store } = useScript();
     const hasEdits = useStore(store, (state) => state.hasEdits);

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const Canvas: () => React.JSX.Element;
-export default Canvas;
+declare const CanvasResult: () => React.JSX.Element;
+export default CanvasResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Canvas.jsx

@@ -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) => {
     const canvas = document.getElementById(canvasId);
     if (!canvas) {
@@ -21,11 +21,11 @@ const downloadCanvas = (canvasId) => {
     downloadLink.click();
     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 controls={<Button icon='Download' iconSize='12px' onClick={() => {
+    return (<GraphicsResult controls={<Button icon='Download' iconSize='12px' onClick={() => {
                 downloadCanvas(DOM_ELEMENT_IDS.canvasContainer(codeId));
             }} title="Download SVG" className={styles.slimStrippedButton}/>} main={<canvas id={DOM_ELEMENT_IDS.canvasContainer(codeId)} width="500" height="500" style={{
                 display: 'block',
@@ -33,4 +33,4 @@ const Canvas = () => {
                 height: '500px'
             }}></canvas>}/>);
 };
-export default Canvas;
+export default CanvasResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-declare const Turtle: () => React.JSX.Element;
-export default Turtle;
+declare const TurtleResult: () => React.JSX.Element;
+export default TurtleResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/Turtle.jsx

@@ -1,16 +1,16 @@
 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 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 controls={<React.Fragment>
+    return (<GraphicsResult controls={<React.Fragment>
                     <Button icon='AnimationPlay' onClick={() => {
                 const turtleResult = document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId));
                 if (turtleResult) {
@@ -25,4 +25,4 @@ const Turtle = () => {
             }} title="Download SVG" className={styles.slimStrippedButton}/>
                 </React.Fragment>}/>);
 };
-export default Turtle;
+export default TurtleResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-export interface Props {
+interface Props {
     controls?: JSX.Element;
     main?: JSX.Element;
 }
-declare const Graphics: (props: Props) => React.JSX.Element;
-export default Graphics;
+declare const GraphicsResult: (props: Props) => React.JSX.Element;
+export default GraphicsResult;

package/lib/theme/CodeEditor/Editor/Result/Graphics/index.jsx

@@ -1,12 +1,12 @@
 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';
-const Graphics = (props) => {
+const GraphicsResult = (props) => {
     const { store } = useScript();
     const codeId = useStore(store, (state) => state.codeId);
     return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: 0, y: '-50%' }}>
@@ -26,4 +26,4 @@ const Graphics = (props) => {
             </div>
         </Draggable>);
 };
-export default Graphics;
+export default GraphicsResult;

package/lib/theme/CodeEditor/Editor/Result/index.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-declare const Result: () => React.JSX.Element;
+interface Props {
+}
+declare const Result: (props: Props) => React.JSX.Element;
 export default Result;

package/lib/theme/CodeEditor/Editor/Result/index.jsx

@@ -1,8 +1,9 @@
 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';
-const Result = () => {
+import { useScript, useStore } from '../../WithScript/Store';
+const Result = (props) => {
     const { store } = useScript();
     const logs = useStore(store, (state) => state.logs);
     if (logs.length === 0) {

package/lib/theme/CodeEditor/Editor/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export interface Props {
+interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;

package/lib/theme/CodeEditor/Editor/index.jsx

@@ -1,12 +1,12 @@
 import * as React from "react";
-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";
+import { DOM_ELEMENT_IDS, } 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";
 const Editor = (props) => {
     const { store } = useScript();
     const lang = useStore(store, (state) => state.lang);
@@ -22,9 +22,9 @@ const Editor = (props) => {
           <Result />
           <div id={DOM_ELEMENT_IDS.outputDiv(codeId)}></div>
           {isGraphicsmodalOpen && (<>
-              {hasTurtleOutput && (<Turtle />)}
-              {hasCanvasOutput && (<Canvas />)}
-              {!hasCanvasOutput && !hasTurtleOutput && (<Graphics />)}
+              {hasTurtleOutput && (<TurtleResult />)}
+              {hasCanvasOutput && (<CanvasResult />)}
+              {!hasCanvasOutput && !hasTurtleOutput && (<GraphicsResult />)}
             </>)}
         </>}
     </React.Fragment>);

package/lib/theme/CodeEditor/Editor/utils/saveSvg.js

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

package/lib/theme/CodeEditor/Icon/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as Icons from '@theme/CodeEditor/Icon/icons';
+import * as Icons from './icons';
 export declare enum Color {
     Primary = "var(--ifm-color-primary)",
     Secondary = "var(--ifm-color-secondary)",
@@ -9,7 +9,7 @@ export declare enum Color {
     Danger = "var(--ifm-color-danger)",
     Link = "var(--ifm-color-link)"
 }
-export interface Props {
+interface Props {
     icon: keyof typeof Icons;
     size?: number | string;
     spin?: boolean;

package/lib/theme/CodeEditor/Icon/index.jsx

@@ -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';
 export var Color;

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

@@ -1,3 +1,3 @@
-import type { StorageSlot, StoredScript } from "@theme/CodeEditor/WithScript/Types";
+import type { StorageSlot, StoredScript } from "./Types";
 export declare const getStorageScript: (storage: StorageSlot) => StoredScript | undefined;
 export declare const syncStorageScript: (script: StoredScript, storage: StorageSlot) => boolean;

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

@@ -1,9 +1,15 @@
 import React from "react";
-import { type InitState, type Store } from "@theme/CodeEditor/WithScript/Types";
+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;