docusaurus-live-brython 3.0.0-beta.13 → 3.0.0-beta.15

package/lib/options.d.ts

@@ -41,10 +41,5 @@ export type ThemeOptions = {
 };
 export type Options = Partial<ThemeOptions>;
 export declare const DEFAULT_OPTIONS: ThemeOptions;
-export type ThemeData = {
-    libDir: string;
-    syncMaxOnceEvery: number;
-    isHashRouter: boolean;
-};
 export declare function validateThemeConfig({ themeConfig, validate }: ThemeConfigValidationContext<Options, ThemeOptions>): ThemeOptions;
 //# sourceMappingURL=options.d.ts.map

package/lib/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAC,4BAA4B,EAAC,MAAM,mBAAmB,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG;IACvB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC;CAC5B,CAAA;AAGD,MAAM,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAE5C,eAAO,MAAM,eAAe,EAAE,YAM7B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;CACzB,CAAA;AAUD,wBAAgB,mBAAmB,CAC/B,EAAC,WAAW,EAAE,QAAQ,EAAC,EAAE,4BAA4B,CAAC,OAAO,EAAE,YAAY,CAAC,GAC7E,YAAY,CAGd"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAC,4BAA4B,EAAC,MAAM,mBAAmB,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG;IACvB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;;;;;OAOG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC;CAC5B,CAAA;AAGD,MAAM,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAE5C,eAAO,MAAM,eAAe,EAAE,YAM7B,CAAC;AAUF,wBAAgB,mBAAmB,CAC/B,EAAC,WAAW,EAAE,QAAQ,EAAC,EAAE,4BAA4B,CAAC,OAAO,EAAE,YAAY,CAAC,GAC7E,YAAY,CAGd"}

package/lib/theme/CodeBlock/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="@docusaurus/module-type-aliases" />
 /// <reference types="react" />
+/// <reference types="@docusaurus/module-type-aliases" />
 import { type Props as CodeBlockType } from '@theme-init/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
 type Props = WrapperProps<typeof CodeBlockType>;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 import { translate } from '@docusaurus/Translate';
 const DownloadCode = (props) => {
-    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 { store } = useStore();
+    const code = useScript(store, (state) => state.code);
+    const lang = useScript(store, (state) => state.lang);
+    const id = useScript(store, (state) => state.id);
     return (<Button icon='Download' onClick={() => {
             const downloadLink = document.createElement("a");
             const file = new Blob([code], { type: 'text/plain;charset=utf-8' });

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button 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, (state) => state.pristineCode);
     const onReset = () => {
         const shouldReset = window.confirm(translate({
             message: 'Discard your edits? Your changes will be lost!'

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+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';
 const RunCode = (props) => {
-    const { store } = useScript();
-    const isExecuting = useStore(store, (state) => state.isExecuting);
+    const { store } = useStore();
+    const isExecuting = useScript(store, (state) => state.isExecuting);
     return (<Button icon={isExecuting ? 'Python' : 'Play'} spin={isExecuting} color={Color.Success} className={clsx(styles.runCode, props.slim && styles.slim)} iconSize={props.slim ? '1.2em' : '1.6em'} onClick={() => {
             store.execScript();
         }} title={translate({

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+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, (state) => state.showRaw);
     return (<Button icon={showRaw ? 'EditCode' : 'Code'} onClick={() => store.setState((state) => ({ ...state, showRaw: !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' })}/>);

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Icon, { Color } from '@theme/CodeEditor/Icon';
 import { Status } from '@theme/CodeEditor/WithScript/Types';
 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, (state) => state.isLoaded);
+    const status = useScript(store, (state) => state.status);
     React.useEffect(() => {
         if (status !== Status.IDLE) {
             const disposer = setTimeout(() => {

package/lib/theme/CodeEditor/BrythonCommunicator.jsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 const BrythonCommunicator = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
     const ref = React.useRef(null);
     React.useEffect(() => {
         const { current } = ref;

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

@@ -4,10 +4,10 @@ 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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Translate, { translate } from '@docusaurus/Translate';
 import Button from '@theme/CodeEditor/Button';
-import DiffViewer from 'react-diff-viewer';
+import DiffViewer from 'react-diff-viewer-continued';
 import Details from '@theme/Details';
 const highlightSyntax = (str) => {
     if (!str) {
@@ -19,9 +19,9 @@ const highlightSyntax = (str) => {
 };
 const CodeHistory = () => {
     const [version, setVersion] = React.useState(1);
-    const { store } = useScript();
-    const versions = useStore(store, (state) => state.versions);
-    const versionsLoaded = useStore(store, (state) => state.versionsLoaded);
+    const { store } = useStore();
+    const versions = useScript(store, (state) => state.versions);
+    const versionsLoaded = useScript(store, (state) => state.versionsLoaded);
     if (versions?.length < 2) {
         return null;
     }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import CodeEditor from '@theme/CodeEditor';
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
 import CodeBlock from '@theme/CodeBlock';
 /**
  * Use this component when you want a working CodeEditor.

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

@@ -10,18 +10,18 @@ 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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 const ALIAS_LANG_MAP_ACE = {
     mpy: 'python',
 };
 const EditorAce = (props) => {
     const eRef = React.useRef(null);
-    const { store } = useScript();
-    const code = useStore(store, (state) => state.code);
-    const pristineCode = useStore(store, (state) => state.pristineCode);
-    const lang = useStore(store, (state) => state.lang);
-    const codeId = useStore(store, (state) => state.codeId);
-    const showRaw = useStore(store, (state) => state.showRaw);
+    const { store } = useStore();
+    const code = useScript(store, (state) => state.code);
+    const pristineCode = useScript(store, (state) => state.pristineCode);
+    const lang = useScript(store, (state) => state.lang);
+    const codeId = useScript(store, (state) => state.codeId);
+    const showRaw = useScript(store, (state) => state.showRaw);
     React.useEffect(() => {
         if (eRef && eRef.current) {
             const node = eRef.current;

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } 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';
 const Header = (props) => {
-    const { store } = useScript();
-    const hasEdits = useStore(store, (state) => state.hasEdits);
-    const lang = useStore(store, (state) => state.lang);
+    const { store } = useStore();
+    const hasEdits = useScript(store, (state) => state.hasEdits);
+    const lang = useScript(store, (state) => state.lang);
     return (<div className={clsx(styles.controls, props.slim && styles.slim)}>
             {!props.slim && (<React.Fragment>
                     <div className={styles.title}>{props.title}</div>

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 const downloadCanvas = (canvasId) => {
     const canvas = document.getElementById(canvasId);
@@ -22,9 +22,9 @@ const downloadCanvas = (canvasId) => {
     document.body.removeChild(downloadLink);
 };
 const Canvas = () => {
-    const { store } = useScript();
+    const { store } = useStore();
     // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
-    const codeId = useStore(store, (state) => state.codeId);
+    const codeId = useScript(store, (state) => state.codeId);
     return (<Graphics 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={{

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

@@ -3,13 +3,13 @@ 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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 const Turtle = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
-    const code = useStore(store, (state) => state.code);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
+    const code = useScript(store, (state) => state.code);
     return (<Graphics controls={<React.Fragment>
                     <Button icon='AnimationPlay' onClick={() => {
                 const turtleResult = document.getElementById(DOM_ELEMENT_IDS.turtleSvgContainer(codeId));

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

@@ -3,12 +3,12 @@ import styles from './styles.module.css';
 import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Draggable from 'react-draggable';
 import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 const Graphics = (props) => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
     return (<Draggable onStop={checkForButtonClick} positionOffset={{ x: 0, y: '-50%' }}>
             <div className={styles.brythonGraphicsResult}>
                 <div className={styles.brythonGraphicsResultHead}>

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import styles from './styles.module.css';
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 const Result = () => {
-    const { store } = useScript();
-    const logs = useStore(store, (state) => state.logs);
+    const { store } = useStore();
+    const logs = useScript(store, (state) => state.logs);
     if (logs.length === 0) {
         return null;
     }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DOM_ELEMENT_IDS, } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } 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";
@@ -8,12 +8,12 @@ import Graphics from "@theme/CodeEditor/Editor/Result/Graphics";
 import Header from "@theme/CodeEditor/Editor/Header";
 import EditorAce from "@theme/CodeEditor/Editor/EditorAce";
 const Editor = (props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
-    const codeId = useStore(store, (state) => state.codeId);
-    const hasCanvasOutput = useStore(store, (state) => state.hasCanvasOutput);
-    const hasTurtleOutput = useStore(store, (state) => state.hasTurtleOutput);
-    const isGraphicsmodalOpen = useStore(store, (state) => state.isGraphicsmodalOpen);
+    const { store } = useStore();
+    const lang = useScript(store, (state) => state.lang);
+    const codeId = useScript(store, (state) => state.codeId);
+    const hasCanvasOutput = useScript(store, (state) => state.hasCanvasOutput);
+    const hasTurtleOutput = useScript(store, (state) => state.hasTurtleOutput);
+    const isGraphicsmodalOpen = useScript(store, (state) => state.isGraphicsmodalOpen);
     return (<React.Fragment>
       <Header slim={props.slim} title={props.title} resettable={props.resettable} download={props.download} noCompare={props.noCompare}/>
       <EditorAce showLineNumbers={props.showLineNumbers} maxLines={props.maxLines} versioned={props.versioned}/>

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { type InitState, type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare const Context: React.Context<{
+    store: Document;
+}>;
+declare const ScriptContext: (props: InitState & {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default ScriptContext;
+//# sourceMappingURL=ScriptContext.d.ts.map

package/lib/theme/CodeEditor/WithScript/ScriptContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScriptContext.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/ScriptContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEnF,eAAO,MAAM,OAAO;WAA+B,QAAQ;EAAyB,CAAC;AAErF,QAAA,MAAM,aAAa,UAAW,SAAS,GAAG;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAAE,sBAkBvE,CAAA;AAED,eAAe,aAAa,CAAC"}

package/lib/theme/CodeEditor/WithScript/ScriptContext.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { usePluginData } from "@docusaurus/useGlobalData";
+import { createStore } from "@theme/CodeEditor/WithScript/createStore";
+export const Context = React.createContext(undefined);
+const ScriptContext = (props) => {
+    const { libDir, syncMaxOnceEvery } = usePluginData('docusaurus-live-brython');
+    const [store, setStore] = React.useState(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 default ScriptContext;

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

@@ -1 +1 @@
-{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Store.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAIhF,eAAO,MAAM,OAAO;WAA+B,KAAK;EAAyB,CAAC;AAElF,QAAA,MAAM,aAAa,UAAW,SAAS,GAAG;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAAE,sBAkBvE,CAAA;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Store.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Store.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAEhF,eAAO,MAAM,OAAO;WAA+B,KAAK;EAAyB,CAAC;AAElF,QAAA,MAAM,aAAa,UAAW,SAAS,GAAG;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;CAAE,sBAkBvE,CAAA;AAED,eAAe,aAAa,CAAC"}

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

@@ -68,7 +68,7 @@ export interface InitState {
     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;

package/lib/theme/CodeEditor/WithScript/Types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/Types.ts"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-import { type InitState, type Store } from "@theme/CodeEditor/WithScript/Types";
-export declare const createStore: (props: InitState, libDir: string, syncMaxOnceEvery: number) => Store;
+import { type InitState, type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare const createStore: (props: InitState, libDir: string, syncMaxOnceEvery: number) => Document;
 //# sourceMappingURL=createStore.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/createStore.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAwC,KAAK,KAAK,EAAmC,MAAM,oCAAoC,CAAC;AAIvJ,eAAO,MAAM,WAAW,UAAW,SAAS,UAAU,MAAM,oBAAoB,MAAM,KAAG,KA8OxF,CAAC"}
+{"version":3,"file":"createStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/createStore.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAwC,KAAK,QAAQ,EAAmC,MAAM,oCAAoC,CAAC;AAI1J,eAAO,MAAM,WAAW,UAAW,SAAS,UAAU,MAAM,oBAAoB,MAAM,KAAG,QA8OxF,CAAC"}

package/lib/theme/CodeEditor/WithScript/createStore.js

@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid';
 import { createStorageSlot } from "@docusaurus/theme-common";
 import { getStorageScript, syncStorageScript } from "@theme/CodeEditor/WithScript/Storage";
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "@theme/CodeEditor/WithScript/helpers";
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, splitPreCode as splitPreCode, sanitizePyScript } from "@theme/CodeEditor/WithScript/helpers";
 import { Status } from "@theme/CodeEditor/WithScript/Types";
 import { DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
 import throttle from 'lodash/throttle';
@@ -53,9 +53,9 @@ export const createStore = (props, libDir, syncMaxOnceEvery) => {
     };
     const prepareCode = (raw, config = {}) => {
         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);
+            ? { pre: splitPreCode(state.pristineCode).pre, code: raw }
+            : splitPreCode(raw);
+        const hasEdits = code !== (config.stateNotInitialized ? splitPreCode(props.raw).code : state.pristineCode);
         const updatedAt = new Date();
         const hasCanvasOutput = checkCanvasOutput(raw);
         const hasTurtleOutput = checkTurtleOutput(raw);

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

@@ -1,7 +1,7 @@
 export declare const checkGraphicsOutput: (raw: string) => boolean;
 export declare const checkTurtleOutput: (raw: string) => boolean;
 export declare const checkCanvasOutput: (raw: string) => boolean;
-export declare const getPreCode: (rawcode: string) => {
+export declare const splitPreCode: (rawcode: string) => {
     pre: string;
     code: string;
 };

package/lib/theme/CodeEditor/WithScript/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/helpers.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,OAEjD,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAA;AAED,eAAO,MAAM,UAAU,YAAa,MAAM;;;CAYzC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,WAE9C,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/WithScript/helpers.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,OAEjD,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAA;AAED,eAAO,MAAM,iBAAiB,QAAS,MAAM,KAAG,OAE/C,CAAA;AAED,eAAO,MAAM,YAAY,YAAa,MAAM;;;CAY3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,WAE9C,CAAA"}

package/lib/theme/CodeEditor/WithScript/helpers.js

@@ -11,7 +11,7 @@ export const checkTurtleOutput = (raw) => {
 export const checkCanvasOutput = (raw) => {
     return CANVAS_OUTPUT_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
 };
-export const getPreCode = (rawcode) => {
+export const splitPreCode = (rawcode) => {
     const match = rawcode.match(/\n###\s*PRE.*?\n/);
     if (match) {
         return {

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

@@ -1,3 +1,3 @@
-export { useScript } from './useScript';
-export { useStore } from './useStore';
+export { useStore as useStore } from '@theme/CodeEditor/hooks/useStore';
+export { useScript as useScript } from '@theme/CodeEditor/hooks/useScript';
 //# sourceMappingURL=index.d.ts.map

package/lib/theme/CodeEditor/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,IAAI,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAC,SAAS,IAAI,SAAS,EAAC,MAAM,mCAAmC,CAAC"}

package/lib/theme/CodeEditor/hooks/index.js

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

package/lib/theme/CodeEditor/hooks/useSScript.d.ts

@@ -0,0 +1,3 @@
+import { Selector, type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare const useSScript: <T, R>(store: Document<T>, selector: Selector<T, R>) => R;
+//# sourceMappingURL=useSScript.d.ts.map

package/lib/theme/CodeEditor/hooks/useSScript.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSScript.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useSScript.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAG5E,eAAO,MAAM,UAAU,gBAAiB,SAAS,CAAC,CAAC,YAAY,SAAS,CAAC,EAAE,CAAC,CAAC,KAAG,CAK/E,CAAA"}

package/lib/theme/CodeEditor/hooks/useSScript.js

@@ -0,0 +1,4 @@
+import { useCallback, useSyncExternalStore } from "react";
+export const useSScript = (store, selector) => {
+    return useSyncExternalStore(store.subscribe, useCallback(() => selector(store.getState()), [store, selector]));
+};

package/lib/theme/CodeEditor/hooks/useSStore.d.ts

@@ -0,0 +1,5 @@
+import { type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare function useSStore(): {
+    store: Document;
+};
+//# sourceMappingURL=useSStore.d.ts.map

package/lib/theme/CodeEditor/hooks/useSStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useSStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAIlE,wBAAgB,SAAS,IAAI;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAC,CAS7C"}

package/lib/theme/CodeEditor/hooks/useSStore.js

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

package/lib/theme/CodeEditor/hooks/useScript.d.ts

@@ -1,5 +1,3 @@
-import { type Store } from "@theme/CodeEditor/WithScript/Types";
-export declare function useScript(): {
-    store: Store;
-};
+import { Selector, type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare const useScript: <T, R>(store: Document<T>, selector: Selector<T, R>) => R;
 //# sourceMappingURL=useScript.d.ts.map

package/lib/theme/CodeEditor/hooks/useScript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScript.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useScript.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAI/D,wBAAgB,SAAS,IAAI;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAS1C"}
+{"version":3,"file":"useScript.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useScript.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAG5E,eAAO,MAAM,SAAS,gBAAiB,SAAS,CAAC,CAAC,YAAY,SAAS,CAAC,EAAE,CAAC,CAAC,KAAG,CAK9E,CAAA"}

package/lib/theme/CodeEditor/hooks/useScript.js

@@ -1,10 +1,4 @@
-import { Context } from "@theme/CodeEditor/WithScript/Store";
-import { ReactContextError } from "@docusaurus/theme-common";
-import { useContext } from "react";
-export function useScript() {
-    const context = useContext(Context);
-    if (context === null) {
-        throw new ReactContextError('ScriptContextProvider', 'The Component must be a child of the ScriptContextProvider component');
-    }
-    return context;
-}
+import { useCallback, useSyncExternalStore } from "react";
+export const useScript = (store, selector) => {
+    return useSyncExternalStore(store.subscribe, useCallback(() => selector(store.getState()), [store, selector]));
+};

package/lib/theme/CodeEditor/hooks/useStore.d.ts

@@ -1,3 +1,5 @@
-import { Selector, type Store } from "@theme/CodeEditor/WithScript/Types";
-export declare const useStore: <T, R>(store: Store<T>, selector: Selector<T, R>) => R;
+import { type Document } from "@theme/CodeEditor/WithScript/Types";
+export declare function useStore(): {
+    store: Document;
+};
 //# sourceMappingURL=useStore.d.ts.map

package/lib/theme/CodeEditor/hooks/useStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,oCAAoC,CAAC;AAGzE,eAAO,MAAM,QAAQ,gBAAiB,MAAM,CAAC,CAAC,YAAY,SAAS,CAAC,EAAE,CAAC,CAAC,KAAG,CAK1E,CAAA"}
+{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/hooks/useStore.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAIlE,wBAAgB,QAAQ,IAAI;IAAC,KAAK,EAAE,QAAQ,CAAA;CAAC,CAS5C"}

package/lib/theme/CodeEditor/hooks/useStore.js

@@ -1,4 +1,10 @@
-import { useCallback, useSyncExternalStore } from "react";
-export const useStore = (store, selector) => {
-    return useSyncExternalStore(store.subscribe, useCallback(() => selector(store.getState()), [store, selector]));
-};
+import { Context } from "@theme/CodeEditor/WithScript/ScriptContext";
+import { ReactContextError } from "@docusaurus/theme-common";
+import { useContext } from "react";
+export function useStore() {
+    const context = useContext(Context);
+    if (context === null) {
+        throw new ReactContextError('ScriptContextProvider', 'The Component must be a child of the ScriptContextProvider component');
+    }
+    return context;
+}

package/lib/theme/CodeEditor/index.jsx

@@ -3,12 +3,12 @@ import styles from './styles.module.css';
 import Editor from '@theme/CodeEditor/Editor';
 import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeHistory from '@theme/CodeEditor/CodeHistory';
 const CodeEditor = (props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
+    const { store } = useStore();
+    const lang = useScript(store, (state) => state.lang);
     return (<BrowserOnly fallback={<div>Loading...</div>}>
             {() => {
             return (<div className={clsx(styles.wrapper, 'notranslate', props.className)}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docusaurus-live-brython",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "description": "Docusaurus live code block component for python.",
   "publishConfig": {
     "access": "public"
@@ -104,7 +104,7 @@
     "prism-react-renderer": "^2.3.1",
     "rc-slider": "^10.6.2",
     "react-ace": "^11.0.1",
-    "react-diff-viewer": "^3.1.1",
+    "react-diff-viewer-continued": "^3.4.0",
     "react-draggable": "^4.4.6",
     "svg-parser": "^2.0.4",
     "uuid": "^9.0.1"

package/src/theme/CodeBlock/index.tsx

@@ -4,7 +4,7 @@ import type { WrapperProps } from '@docusaurus/types';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import CodeEditor, { type MetaProps } from '@theme/CodeEditor';
 
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
 import ContextEditor from '@theme/CodeEditor/ContextEditor';
 
 

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button, { Color } 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 { store } = useStore();
+    const code = useScript(store, (state) => state.code);
+    const lang = useScript(store, (state) => state.lang);
+    const id = useScript(store, (state) => state.id);
     return (
         <Button
             icon='Download'

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+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, (state) => state.pristineCode);
     
     const onReset = () => {
         const shouldReset = window.confirm(translate({

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+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';
@@ -11,8 +11,8 @@ export interface Props {
 }
 
 const RunCode = (props: Props) => {
-    const { store } = useScript();
-    const isExecuting = useStore(store, (state) => state.isExecuting);
+    const { store } = useStore();
+    const isExecuting = useScript(store, (state) => state.isExecuting);
     return (
         <Button
             icon={isExecuting ? 'Python' : 'Play'}

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+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, (state) => state.showRaw);
 
     return (
         <Button

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Icon, { Color } from '@theme/CodeEditor/Icon';
 import { Status } from '@theme/CodeEditor/WithScript/Types';
 
 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, (state) => state.isLoaded);
+    const status = useScript(store, (state) => state.status);
 
     React.useEffect(() => {
         if (status !== Status.IDLE) {

package/src/theme/CodeEditor/BrythonCommunicator.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import { type LogMessage } from '@theme/CodeEditor/WithScript/Types';
 
 const BrythonCommunicator = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
     
 
     const ref = React.useRef<HTMLDivElement>(null);

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

@@ -4,10 +4,10 @@ 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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Translate, { translate } from '@docusaurus/Translate';
 import Button from '@theme/CodeEditor/Button';
-import DiffViewer from 'react-diff-viewer';
+import DiffViewer from 'react-diff-viewer-continued';
 import Details from '@theme/Details';
 
 const highlightSyntax = (str: string) => {
@@ -25,9 +25,9 @@ const highlightSyntax = (str: string) => {
 
 const CodeHistory = () => {
     const [version, setVersion] = React.useState(1);
-    const { store } = useScript();
-    const versions = useStore(store, (state) => state.versions);
-    const versionsLoaded = useStore(store, (state) => state.versionsLoaded);
+    const { store } = useStore();
+    const versions = useScript(store, (state) => state.versions);
+    const versionsLoaded = useScript(store, (state) => state.versionsLoaded);
 
     if (versions?.length < 2) {
         return null;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 import CodeEditor, { type MetaProps } from '@theme/CodeEditor';
-import ScriptContext from '@theme/CodeEditor/WithScript/Store';
+import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
 import CodeBlock from '@theme/CodeBlock';
 
 interface Props extends MetaProps {

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

@@ -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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 // import 'ace-builds/src-noconflict/theme-textmate';
 // import('ace-builds/src-noconflict/snippets/python'),
 
@@ -26,12 +26,12 @@ const ALIAS_LANG_MAP_ACE = {
 
 const EditorAce = (props: Props) => {
     const eRef = React.useRef<AceEditor>(null);
-    const { store } = useScript();
-    const code = useStore(store, (state) => state.code);
-    const pristineCode = useStore(store, (state) => state.pristineCode);
-    const lang = useStore(store, (state) => state.lang);
-    const codeId = useStore(store, (state) => state.codeId);
-    const showRaw = useStore(store, (state) => state.showRaw);
+    const { store } = useStore();
+    const code = useScript(store, (state) => state.code);
+    const pristineCode = useScript(store, (state) => state.pristineCode);
+    const lang = useScript(store, (state) => state.lang);
+    const codeId = useScript(store, (state) => state.codeId);
+    const showRaw = useScript(store, (state) => state.showRaw);
 
     React.useEffect(() => {
         if (eRef && eRef.current) {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } 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';
@@ -17,10 +17,10 @@ export interface Props {
 }
 
 const Header = (props: Props) => {
-    const { store } = useScript();
+    const { store } = useStore();
 
-    const hasEdits = useStore(store, (state) => state.hasEdits);
-    const lang = useStore(store, (state) => state.lang);
+    const hasEdits = useScript(store, (state) => state.hasEdits);
+    const lang = useScript(store, (state) => state.lang);
     return (
         <div className={clsx(styles.controls, props.slim && styles.slim)}>
             {!props.slim && (

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Graphics from '@theme/CodeEditor/Editor/Result/Graphics';
 import styles from './styles.module.css';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 
 const downloadCanvas = (canvasId: string) => {
@@ -26,9 +26,9 @@ const downloadCanvas = (canvasId: string) => {
   };
 
 const Canvas = () => {
-    const { store } = useScript();
+    const { store } = useStore();
     // const { codeId } = useStore(store, (state) => ({codeId: state.codeId}));
-    const codeId = useStore(store, (state) => state.codeId);
+    const codeId = useScript(store, (state) => state.codeId);
 
     return (
         <Graphics

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

@@ -3,14 +3,14 @@ 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 { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 
 const Turtle = () => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
-    const code = useStore(store, (state) => state.code);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
+    const code = useScript(store, (state) => state.code);
     return (
         <Graphics
             controls={

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

@@ -3,7 +3,7 @@ import styles from './styles.module.css';
 import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
 import Draggable from 'react-draggable';
 import { checkForButtonClick } from '@theme/CodeEditor/Editor/utils/checkForButtonClick';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Button from '@theme/CodeEditor/Button';
 import clsx from 'clsx';
 export interface Props {
@@ -11,8 +11,8 @@ export interface Props {
     main?: JSX.Element;
 }
 const Graphics = (props: Props) => {
-    const { store } = useScript();
-    const codeId = useStore(store, (state) => state.codeId);
+    const { store } = useStore();
+    const codeId = useScript(store, (state) => state.codeId);
     return (
         <Draggable
             onStop={checkForButtonClick}

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styles from './styles.module.css';
 import CodeBlock from '@theme/CodeBlock';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 
 const Result = () => {
-    const { store } = useScript();
-    const logs = useStore(store, (state) => state.logs);
+    const { store } = useStore();
+    const logs = useScript(store, (state) => state.logs);
     if (logs.length === 0) {
         return null;
     }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import {
   DOM_ELEMENT_IDS,
 } from "@theme/CodeEditor/constants";
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } 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";
@@ -24,12 +24,12 @@ export interface Props {
 }
 
 const Editor = (props: Props) => {
-  const { store } = useScript();
-  const lang = useStore(store, (state) => state.lang);
-  const codeId = useStore(store, (state) => state.codeId);
-  const hasCanvasOutput = useStore(store, (state) => state.hasCanvasOutput);
-  const hasTurtleOutput = useStore(store, (state) => state.hasTurtleOutput);
-  const isGraphicsmodalOpen = useStore(store, (state) => state.isGraphicsmodalOpen);
+  const { store } = useStore();
+  const lang = useScript(store, (state) => state.lang);
+  const codeId = useScript(store, (state) => state.codeId);
+  const hasCanvasOutput = useScript(store, (state) => state.hasCanvasOutput);
+  const hasTurtleOutput = useScript(store, (state) => state.hasTurtleOutput);
+  const isGraphicsmodalOpen = useScript(store, (state) => state.isGraphicsmodalOpen);
   
   return (
     <React.Fragment>

package/src/theme/CodeEditor/WithScript/{Store.tsx → ScriptContext.tsx}

@@ -1,12 +1,12 @@
 import React from "react";
 import { usePluginData } from "@docusaurus/useGlobalData";
-import { type InitState, type Store } from "@theme/CodeEditor/WithScript/Types";
+import { type InitState, type Document } from "@theme/CodeEditor/WithScript/Types";
 import { createStore } from "@theme/CodeEditor/WithScript/createStore";
-export const Context = React.createContext<{store: Store} | undefined>(undefined);
+export const Context = React.createContext<{store: 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<Store | null>(null);
+    const [store, setStore] = React.useState<Document | null>(null);
     React.useEffect(() => {
         const store = createStore(props, libDir, syncMaxOnceEvery);
         setStore(store);

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

@@ -76,7 +76,7 @@ export interface InitState {
     versioned: boolean;
 }
 
-export interface Store<T = Script> {
+export interface Document<T = Script> {
     getState: () => T;
     setState: (fn: (state: Script) => Script) => void;
     subscribe: (listener: () => void) => () => void;

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

@@ -1,12 +1,12 @@
 import { v4 as uuidv4 } from 'uuid';
 import { createStorageSlot } from "@docusaurus/theme-common";
 import { getStorageScript, syncStorageScript } from "@theme/CodeEditor/WithScript/Storage";
-import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, getPreCode, sanitizePyScript } from "@theme/CodeEditor/WithScript/helpers";
-import { type InitState, type LogMessage, type Script, Status, type Store, type StoredScript, type Version } from "@theme/CodeEditor/WithScript/Types";
+import { checkCanvasOutput, checkGraphicsOutput, checkTurtleOutput, splitPreCode as splitPreCode, sanitizePyScript } 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';
 
-export const createStore = (props: InitState, libDir: string, syncMaxOnceEvery: number): Store => {
+export const createStore = (props: InitState, libDir: string, syncMaxOnceEvery: number): Document => {
     const canSave = !!props.id;
     const id = props.id || uuidv4();
     const codeId = `code.${props.title || props.lang}.${id}`.replace(/(-|\.)/g, '_');
@@ -56,9 +56,9 @@ export const createStore = (props: InitState, libDir: string, syncMaxOnceEvery:
 
     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);
+                                ? { pre: splitPreCode(state.pristineCode).pre, code: raw }
+                                : splitPreCode(raw);
+        const hasEdits = code !== (config.stateNotInitialized ? splitPreCode(props.raw).code : state.pristineCode);
         const updatedAt = new Date();
         const hasCanvasOutput = checkCanvasOutput(raw);
         const hasTurtleOutput = checkTurtleOutput(raw);
@@ -243,5 +243,5 @@ run("""${sanitizePyScript(toExec || '')}""", '${codeId}', ${lineShift})
         stopScript,
         load, 
         loadVersions
-    } satisfies Store;
+    } satisfies Document;
 };

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

@@ -16,7 +16,7 @@ export const checkCanvasOutput = (raw: string): boolean => {
     return CANVAS_OUTPUT_TESTER.test(raw) || GRID_IMPORTS_TESTER.test(raw);
 }
 
-export const getPreCode = (rawcode: string) => {
+export const splitPreCode = (rawcode: string) => {
     const match = rawcode.match(/\n###\s*PRE.*?\n/);
     if (match) {
         return {

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

@@ -1,2 +1,2 @@
-export {useScript} from './useScript';
-export {useStore} from './useStore';
+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

@@ -1,15 +1,9 @@
-import { Context } from "@theme/CodeEditor/WithScript/Store";
-import {type Store } from "@theme/CodeEditor/WithScript/Types";
-import { ReactContextError } from "@docusaurus/theme-common";
-import { useContext } from "react";
+import {Selector, type Document } from "@theme/CodeEditor/WithScript/Types";
+import { useCallback, useSyncExternalStore } from "react";
 
-export function useScript(): {store: Store} {
-    const context = useContext(Context);
-    if (context === null) {
-      throw new ReactContextError(
-        'ScriptContextProvider',
-        'The Component must be a child of the ScriptContextProvider component',
-      );
-    }
-    return context;
+export const useScript = <T, R>(store: Document<T>, selector: Selector<T, R>): R => {
+    return useSyncExternalStore(
+        store.subscribe,
+        useCallback(() => selector(store.getState()), [store, selector])
+    );
 }

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

@@ -1,9 +1,15 @@
-import {Selector, type Store } from "@theme/CodeEditor/WithScript/Types";
-import { useCallback, useSyncExternalStore } from "react";
+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 const useStore = <T, R>(store: Store<T>, selector: Selector<T, R>): R => {
-    return useSyncExternalStore(
-        store.subscribe,
-        useCallback(() => selector(store.getState()), [store, selector])
-    );
+export function useStore(): {store: Document} {
+    const context = useContext(Context);
+    if (context === null) {
+      throw new ReactContextError(
+        'ScriptContextProvider',
+        'The Component must be a child of the ScriptContextProvider component',
+      );
+    }
+    return context;
 }

package/src/theme/CodeEditor/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.css';
 import Editor from '@theme/CodeEditor/Editor';
 import BrythonCommunicator from '@theme/CodeEditor/BrythonCommunicator';
 import clsx from 'clsx';
-import { useScript, useStore } from '@theme/CodeEditor/hooks';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeHistory from '@theme/CodeEditor/CodeHistory';
 
@@ -40,8 +40,8 @@ export interface Props {
 }
 
 const CodeEditor = (props: Props) => {
-    const { store } = useScript();
-    const lang = useStore(store, (state) => state.lang);
+    const { store } = useStore();
+    const lang = useScript(store, (state) => state.lang);
     return (
         <BrowserOnly
             fallback={<div>Loading...</div>}