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

package/.devcontainer/devcontainer.json

@@ -0,0 +1,38 @@
+{
+    "name": "docusaurus-live-brython",
+    "image": "mcr.microsoft.com/devcontainers/typescript-node:24-bookworm",
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "pomdtr.excalidraw-editor",
+                "zhuangtongfa.Material-theme",
+                "mhutchie.git-graph",
+                "esbenp.prettier-vscode",
+                "dbaeumer.vscode-eslint",
+                "unifiedjs.vscode-mdx",
+                "motivesoft.vscode-uuid-generator",
+                "lukas-tr.materialdesignicons-intellisense"
+            ],
+            "settings": {
+                "workbench.colorTheme": "One Dark Pro",
+                "extensions.ignoreRecommendations": true,
+                "git.autofetch": true,
+                "editor.tabSize": 4,
+                "[mdx]": {
+                    "editor.defaultFormatter": "unifiedjs.vscode-mdx"
+                }
+            }
+        }
+    },
+    "remoteEnv": {
+        "OFFLINE_API": "true"
+    },
+    "postStartCommand": "yarn install",
+    "forwardPorts": [3000],
+    "features": {
+        "ghcr.io/devcontainers/features/node:1": {
+            "version": "24.12"
+        }
+    },
+    "runArgs": ["--network=host"]
+}

package/.prettierignore

@@ -0,0 +1,17 @@
+dist
+node_modules
+.yarn
+build
+coverage
+.docusaurus
+.github
+.drone.yml
+
+docs
+static
+
+*.md
+*.json
+*.js
+*.compose.yml
+i18n

package/.prettierrc

@@ -1,9 +1,10 @@
 {
-  "arrowParens": "always",
-  "bracketSpacing": false,
-  "bracketSameLine": true,
-  "printWidth": 80,
-  "proseWrap": "never",
-  "singleQuote": true,
-  "trailingComma": "all"
-}
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "bracketSameLine": false,
+    "printWidth": 110,
+    "proseWrap": "never",
+    "singleQuote": true,
+    "trailingComma": "none",
+    "tabWidth": 4
+}

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## Version 3.0.0beta.25
+- Breaking: Renamed `isGraphicsmodalOpen` to `graphicsModalExecutionNr` and changing it's type from `boolean` to `number`.
+  This fixes an issue that caused the Turtle Output to display the first animation instead of the current created one, when the user kept the graphics modal open while changing the code. 

package/README.md

@@ -1,6 +1,6 @@
 # Docusaurus Live Codeblock for Python
 
-![NPM Version](https://img.shields.io/npm/v/docusaurus-live-brython)
+[![NPM Version](https://img.shields.io/npm/v/docusaurus-live-brython)](https://www.npmjs.com/package/docusaurus-live-brython/)
 
 
 > [!NOTE]\
@@ -41,8 +41,8 @@ module.exports = {
 + themes: [
 +   ['docusaurus-live-brython'],
 +   {
-+     brython_src: 'https://cdn.jsdelivr.net/npm/brython@3.12.4/brython.min.js', // default
-+     brython_stdlib_src: 'https://cdn.jsdelivr.net/npm/brython@3.12.4/brython_stdlib.js' // default
++     brythonSrc: 'https://cdn.jsdelivr.net/npm/brython@3.12.4/brython.min.js', // default
++     brythonStdlibSrc: 'https://cdn.jsdelivr.net/npm/brython@3.12.4/brython_stdlib.js' // default
 +   }
   presets: ['@docusaurus/preset-classic']
   ...
@@ -117,6 +117,9 @@ yarn link docusaurus-live-brython
 
 Then start the website
 ```sh
+# in root
+yarn run watch
+# in website/
 yarn run start
 ```
 
@@ -127,4 +130,4 @@ yarn run build
 # when running inside wsl, use --auth=legacy
 npm login --auth=legacy
 npm publish --auth=legacy
-```
+```

package/lib/assets/py_back_trace.py

@@ -1,5 +1,6 @@
 from browser import document, window # type: ignore
 import sys
+import time
 
 # @source https://github.com/brython-dev/brython/blob/master/www/src/Lib/tb.py
 # instead of "print()" to "console.log()" in the original code, we use "notify()" to send the output to the react world
@@ -23,7 +24,7 @@ class EventOutput:
 
     def flush(self):
         if len(self.buf) > 0:
-            notify(self.node_id, {'type': self.out_type, 'output': self.buf})
+            notify(self.node_id, {'type': self.out_type, 'output': self.buf, 'time': time.time()})
         self.buf = ''
 
     def __len__(self):

package/lib/index.d.ts

@@ -4,13 +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 type { HtmlTags, Plugin } from '@docusaurus/types';
 import { type ThemeOptions, type Options } from './options';
 export declare const NAME: "docusaurus-live-brython";
@@ -21,3 +14,4 @@ declare const theme: Plugin<{
 export default theme;
 export { validateThemeConfig } from './options';
 export { ThemeOptions, Options };
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAWH,OAAO,KAAK,EAAE,QAAQ,EAAe,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAMvE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAmB,MAAM,WAAW,CAAC;AAG7E,eAAO,MAAM,IAAI,EAAG,yBAAkC,CAAC;AACvD,eAAO,MAAM,eAAe,EAAG,UAAmB,CAAC;AAiBnD,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC;IAAE,cAAc,EAAE,QAAQ,EAAE,CAAA;CAAE,CAkIjD,CAAC;AAEF,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC"}

package/lib/index.js

@@ -4,6 +4,14 @@
  * 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';
@@ -13,30 +21,90 @@ import { DEFAULT_OPTIONS } from './options';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export const NAME = 'docusaurus-live-brython';
 export const DEFAULT_LIB_DIR = 'bry-libs';
+const extractImports = (script) => {
+    const imports = [];
+    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 = (context, options) => {
+    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 = [];
+            const bryModules = [];
+            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 = {};
+                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 {
@@ -45,9 +113,9 @@ const theme = (context, options) => {
                         {
                             test: /\.raw\.*/,
                             type: 'asset/source'
-                        },
-                    ],
-                },
+                        }
+                    ]
+                }
             };
         },
         getThemePath() {
@@ -56,28 +124,38 @@ const theme = (context, options) => {
         getTypeScriptThemePath() {
             return '../src/theme';
         },
-        injectHtmlTags() {
+        injectHtmlTags({ content }) {
             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() {

package/lib/options.d.ts

@@ -42,3 +42,4 @@ export type ThemeOptions = {
 export type Options = Partial<ThemeOptions>;
 export declare const DEFAULT_OPTIONS: ThemeOptions;
 export declare function validateThemeConfig({ themeConfig, validate }: ThemeConfigValidationContext<Options, ThemeOptions>): ThemeOptions;
+//# sourceMappingURL=options.d.ts.map

package/lib/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,mBAAmB,CAAC;AAEtE,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,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAE5C,eAAO,MAAM,eAAe,EAAE,YAM7B,CAAC;AAUF,wBAAgB,mBAAmB,CAAC,EAChC,WAAW,EACX,QAAQ,EACX,EAAE,4BAA4B,CAAC,OAAO,EAAE,YAAY,CAAC,GAAG,YAAY,CAGpE"}

package/lib/options.js

@@ -6,8 +6,8 @@
  */
 import { Joi } from '@docusaurus/utils-validation';
 export const DEFAULT_OPTIONS = {
-    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

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-/// <reference types="@docusaurus/module-type-aliases" />
+import React from 'react';
 import { type Props as CodeBlockType } from '@theme-init/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
 type Props = WrapperProps<typeof CodeBlockType>;
-export default function CodeBlockWrapper(props: Props): JSX.Element;
+export default function CodeBlockWrapper(props: Props): React.ReactNode;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/CodeBlock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAkB,EAAE,KAAK,KAAK,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAsChD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA0BtE"}

package/lib/theme/CodeBlock/index.jsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import CodeBlock from '@theme-init/CodeBlock';
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import CodeEditor from 'docusaurus-live-brython/theme/CodeEditor';
-import ScriptContext from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import ContextEditor, { splitCode } from '@theme/CodeEditor/ContextEditor';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 const sanitizedTitle = (id) => {
     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) => {
     const metaString = (props?.metastring || '').replace(/\s*=\s*/g, '='); // remove spaces around =
@@ -17,9 +21,12 @@ const extractMetaProps = (props) => {
             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)
+        const val = value === 'true'
+            ? true
+            : value === 'false'
+                ? false
+                : !Number.isNaN(Number(value))
+                    ? Number(value)
                     : value || true;
         acc[key] = val;
         return acc;
@@ -35,13 +42,16 @@ export default function CodeBlockWrapper(props) {
     // 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 = (props.children || '').replace(/\s*\n$/, '');
-        let code = rawcode;
-        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>);
+        const { code } = splitCode(props.children || '');
+        return (<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/lib/theme/CodeEditor/Actions/DownloadCode.d.ts

@@ -3,3 +3,4 @@ declare const DownloadCode: (props: {
     title: string;
 }) => React.JSX.Element;
 export default DownloadCode;
+//# sourceMappingURL=DownloadCode.d.ts.map

package/lib/theme/CodeEditor/Actions/DownloadCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadCode.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/DownloadCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,YAAY,GAAI,OAAO;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,sBA+B7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button 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) => {
-    const { store } = useScript();
-    const code = useStore(store, (state) => state.code);
-    const lang = useStore(store, (state) => state.lang);
-    const id = useStore(store, (state) => state.id);
-    return (<Button icon='Download' onClick={() => {
-            const downloadLink = document.createElement("a");
+    const store = useStore();
+    const code = useScript(store, 'code');
+    const lang = useScript(store, 'lang');
+    const id = useScript(store, 'id');
+    return (<Button icon="Download" onClick={() => {
+            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}`;

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

@@ -1,3 +1,4 @@
 import * as React from 'react';
 declare const Reset: () => React.JSX.Element;
 export default Reset;
+//# sourceMappingURL=Reset.d.ts.map

package/lib/theme/CodeEditor/Actions/Reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reset.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/Reset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,KAAK,yBAyBV,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import Button 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 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!'
@@ -16,7 +16,7 @@ const Reset = () => {
     return (<Button onClick={onReset} 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;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-interface Props {
+export interface Props {
     title: string;
     slim: boolean;
 }
 declare const RunCode: (props: Props) => React.JSX.Element;
 export default RunCode;
+//# sourceMappingURL=RunCode.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RunCode.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/RunCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,KAAK;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,KAAK,sBAsB5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,12 +1,12 @@
 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';
 const RunCode = (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'} 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.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 declare const ShowRaw: () => React.JSX.Element;
 export default ShowRaw;
+//# sourceMappingURL=ShowRaw.d.ts.map

package/lib/theme/CodeEditor/Actions/ShowRaw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowRaw.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/ShowRaw.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,QAAA,MAAM,OAAO,yBAsBZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -1,12 +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 ShowRaw = () => {
-    const { store } = useScript();
-    const showRaw = useStore(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' })}/>);
+    const store = useStore();
+    const showRaw = useScript(store, 'showRaw');
+    return (<Button icon={showRaw ? 'EditCode' : 'Code'} 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'
+            })}/>);
 };
 export default ShowRaw;

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

@@ -1,3 +1,4 @@
 import * as React from 'react';
 declare const ShowSyncStatus: () => React.JSX.Element;
 export default ShowSyncStatus;
+//# sourceMappingURL=ShowSyncStatus.d.ts.map

package/lib/theme/CodeEditor/Actions/ShowSyncStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowSyncStatus.d.ts","sourceRoot":"","sources":["../../../../src/theme/CodeEditor/Actions/ShowSyncStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,cAAc,yBAqCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -1,27 +1,32 @@
 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>
-        </>);
+    return (<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;