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

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

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

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

@@ -9,6 +9,5 @@
 }
 
 html[data-theme='dark'] .runCode {
-        color: white
-} 
-  
+    color: white;
+}

package/src/theme/CodeEditor/BrythonCommunicator.tsx

@@ -1,12 +1,11 @@
-import * as React from "react";
-import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from "docusaurus-live-brython/theme/CodeEditor/constants";
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import { type LogMessage } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Types';
+import * as React from 'react';
+import { BRYTHON_NOTIFICATION_EVENT, DOM_ELEMENT_IDS } from '@theme/CodeEditor/constants';
+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, 'codeId');
 
     const ref = React.useRef<HTMLDivElement>(null);
     React.useEffect(() => {
@@ -18,32 +17,30 @@ const BrythonCommunicator = () => {
             if (event.detail) {
                 const data = event.detail as LogMessage;
                 switch (data.type) {
-                    case "start":
+                    case 'start':
                         store.clearLogMessages();
                         store.setExecuting(true);
                         break;
-                    case "done":
+                    case 'done':
                         store.setExecuting(false);
                         break;
                     default:
-                        store.addLogMessage(data);
+                        store.addLogMessage({
+                            type: data.type,
+                            output: data.output,
+                            timeStamp: data.timeStamp
+                        });
                         break;
                 }
             }
         };
         current.addEventListener(BRYTHON_NOTIFICATION_EVENT, onBryNotify as EventListener);
         return () => {
-            current.removeEventListener(BRYTHON_NOTIFICATION_EVENT, onBryNotify as EventListener)
-        }
-
+            current.removeEventListener(BRYTHON_NOTIFICATION_EVENT, onBryNotify as EventListener);
+        };
     }, [ref, store]);
 
-    return (
-        <div
-            id={DOM_ELEMENT_IDS.communicator(codeId)}
-            ref={ref}
-        ></div>
-    );
+    return <div id={DOM_ELEMENT_IDS.communicator(codeId)} ref={ref}></div>;
 };
 
 export default BrythonCommunicator;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as Icons from 'docusaurus-live-brython/theme/CodeEditor/Icon/icons';
+import * as Icons from '@theme/CodeEditor/Icon/icons';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icon from 'docusaurus-live-brython/theme/CodeEditor/Icon';
+import Icon from '@theme/CodeEditor/Icon';
 
 export enum Color {
     Primary = 'button--primary',
@@ -11,14 +11,14 @@ export enum Color {
     Info = 'button--info',
     Warning = 'button--warning',
     Danger = 'button--danger',
-    Link = 'button--link',
+    Link = 'button--link'
 }
 export enum Size {
     Small = 'button--sm',
-    Large = 'button--lg',
+    Large = 'button--lg'
 }
 
-interface Props {
+export interface Props {
     icon: keyof typeof Icons;
     title?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -29,23 +29,27 @@ interface Props {
     className?: string;
 }
 
-
 const Button = (props: Props) => {
-
     return (
-        <button 
-            className={clsx('button', props.color || Color.Secondary, props.size || Size.Small, styles.button, props.className)}
+        <button
+            className={clsx(
+                'button',
+                props.color || Color.Secondary,
+                props.size || Size.Small,
+                styles.button,
+                props.className
+            )}
             onClick={props.onClick}
             title={props.title}
         >
-            <Icon 
+            <Icon
                 icon={props.icon}
                 className={styles.icon}
                 spin={props.spin}
                 size={props.iconSize || '1.6em'}
             />
         </button>
-    )
-}
+    );
+};
 
-export default Button;
+export default Button;

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

@@ -6,4 +6,4 @@
     cursor: pointer;
     margin: 0px 2px;
     padding: 4px 10px;
-}
+}

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 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 import Translate, { translate } from '@docusaurus/Translate';
-import Button from 'docusaurus-live-brython/theme/CodeEditor/Button';
-import DiffViewer from 'react-diff-viewer';
+import Button from '@theme/CodeEditor/Button';
+import DiffViewer from 'react-diff-viewer-continued';
 import Details from '@theme/Details';
 
 const highlightSyntax = (str: string) => {
@@ -17,7 +17,7 @@ const highlightSyntax = (str: string) => {
     return (
         <span
             dangerouslySetInnerHTML={{
-                __html: Prism.highlight(str, Prism.languages.python, 'python'),
+                __html: Prism.highlight(str, Prism.languages.python, 'python')
             }}
         />
     );
@@ -25,13 +25,13 @@ 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, 'versions');
+    const versionsLoaded = useScript(store, 'versionsLoaded');
     if (versions?.length < 2) {
         return null;
     }
+
     return (
         <div className={clsx(styles.codeHistory)}>
             <Details
@@ -40,16 +40,26 @@ const CodeHistory = () => {
                     <summary>
                         <div className={clsx(styles.summary)}>
                             <span className="badge badge--secondary">
-                                {
-                                    versionsLoaded
-                                        ? translate({message: '{n} Versions', id: 'CodeHistory.nVersions.text'}, {n: versions.length})
-                                        : translate({message: 'Load Versions', id: 'CodeHistory.LoadVersions.text'})
-                                }
+                                {versionsLoaded
+                                    ? translate(
+                                          {
+                                              message: '{n} Versions',
+                                              id: 'CodeHistory.nVersions.text'
+                                          },
+                                          { n: versions.length }
+                                      )
+                                    : translate({
+                                          message: 'Load Versions',
+                                          id: 'CodeHistory.LoadVersions.text'
+                                      })}
                             </span>
                             <span className={clsx(styles.spacer)}></span>
                             <Button
-                                icon='Sync'
-                                title={translate({message: 'Sync Versions', id: 'CodeHistory.LoadVersions.text'})}
+                                icon="Sync"
+                                title={translate({
+                                    message: 'Sync Versions',
+                                    id: 'CodeHistory.LoadVersions.text'
+                                })}
                                 onClick={(e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
@@ -80,9 +90,7 @@ const CodeHistory = () => {
                             max={versions.length - 1}
                             dots={versions.length < 50}
                         />
-                        <span className="badge badge--primary">
-                            V{version}
-                        </span>
+                        <span className="badge badge--primary">V{version}</span>
                     </div>
                     <div className={clsx(styles.diffViewer)}>
                         {versions.length > 1 && (
@@ -95,7 +103,9 @@ const CodeHistory = () => {
                                         {`V${version}`}
                                         {versions[version].pasted && (
                                             <span className={clsx('badge', 'badge--danger')}>
-                                                <Translate id="CodeHistory.PastedBadge.Text">Pasted</Translate>
+                                                <Translate id="CodeHistory.PastedBadge.Text">
+                                                    Pasted
+                                                </Translate>
                                             </span>
                                         )}
                                     </div>
@@ -105,7 +115,9 @@ const CodeHistory = () => {
                                         {`V${version}`}
                                         {versions[version].pasted && (
                                             <span className={clsx('badge', 'badge--danger')}>
-                                                <Translate id="CodeHistory.PastedBadge.Text">Pasted</Translate>
+                                                <Translate id="CodeHistory.PastedBadge.Text">
+                                                    Pasted
+                                                </Translate>
                                             </span>
                                         )}
                                     </div>

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

@@ -1,54 +1,54 @@
-.codeHistory>.historyDetails {
-	cursor: pointer;
-	margin-bottom: 0;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
+.codeHistory > .historyDetails {
+    cursor: pointer;
+    margin-bottom: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
 .summary {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 }
 .spacer {
-	flex-grow: 1;
-	flex-shrink: 1;
-	flex-basis: 0;
-} 
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
 
 .versionControl {
-	padding: 1em 2em;
-	box-shadow: var(--ifm-global-shadow-lw);
-	border-radius: var(--ifm-global-radius);
+    padding: 1em 2em;
+    box-shadow: var(--ifm-global-shadow-lw);
+    border-radius: var(--ifm-global-radius);
 }
 
 .faButton {
-	margin-left: 1em;
+    margin-left: 1em;
 }
 
 .faButton:hover {
-	transform: scale(1.2);
+    transform: scale(1.2);
 }
 
 .diffViewer {
-	--ifm-pre-background: rgba(255, 255, 255, 0);
-	--ifm-alert-background-color: rgba(255, 255, 255, 0);
-	--ifm-alert-background-color-highlight: rgba(255, 255, 255, 0);
-	--ifm-table-stripe-background: rgba(255, 255, 255, 0);
-	font-family: monospace;
-	overflow: auto;
+    --ifm-pre-background: rgba(255, 255, 255, 0);
+    --ifm-alert-background-color: rgba(255, 255, 255, 0);
+    --ifm-alert-background-color-highlight: rgba(255, 255, 255, 0);
+    --ifm-table-stripe-background: rgba(255, 255, 255, 0);
+    font-family: monospace;
+    overflow: auto;
 }
 
 .diffViewer table tbody tr td {
-	padding-top: 0;
-	padding-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
 }
 
 .diffViewer table tbody tr td pre {
-	white-space: nowrap;
-	padding-top: 0;
-	padding-bottom: 0;
-	line-height: 18px;
+    white-space: nowrap;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 18px;
 }
 .diffHeader {
-	display: flex;
-	justify-content: space-between;
-}
+    display: flex;
+    justify-content: space-between;
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import CodeEditor, { type MetaProps } from '@theme/CodeEditor';
+import ScriptContext from '@theme/CodeEditor/WithScript/ScriptContext';
+import CodeBlock from '@theme/CodeBlock';
+
+interface Props extends MetaProps {
+    className?: string;
+    title?: string;
+    children: string | React.ReactNode;
+    onChange?: (code: string) => void;
+}
+
+const SPLIT_CODE_REGEX = /^(?:(?<pre>.*?)\n###\s*PRE\s*)?(?<code>.*?)(?:\n###\s*POST\s*(?<post>.*))?$/s;
+export const splitCode = (rawCode: string) => {
+    const { pre, code, post } = rawCode.replace(/\s*\n$/, '').match(SPLIT_CODE_REGEX).groups || {};
+    return {
+        pre: pre || '',
+        code: code || '',
+        post: post || ''
+    };
+};
+
+/**
+ * Use this component when you want a working CodeEditor.
+ * The CodeEditor must be wrapped in a ScriptContext - this component does that.
+ * wraps it in a ScriptContext and initializes the CodeEditor with the given
+ * params.
+ */
+const ContextEditor = (props: Props) => {
+    const langMatch = ((props.className || '') as string).match(/language-(?<lang>\w*)/);
+    let lang = langMatch?.groups?.lang?.toLocaleLowerCase() ?? '';
+    if (lang === 'py') {
+        lang = 'python';
+    }
+    if (ExecutionEnvironment.canUseDOM) {
+        const title = props.title || lang;
+        const { pre, code, post } = splitCode((props.children as string) || '');
+        return (
+            <ScriptContext
+                id={props.id}
+                lang={lang}
+                title={title}
+                code={code}
+                preCode={pre}
+                postCode={post}
+                readonly={!!props.readonly}
+                versioned={!!props.versioned}
+            >
+                <CodeEditor
+                    code={code}
+                    lang={lang}
+                    preCode={pre}
+                    postCode={post}
+                    maxLines={props.maxLines && Number.parseInt(props.maxLines, 10)}
+                    readonly={!!props.readonly}
+                    resettable={!props.noReset}
+                    download={!props.versioned && !props.noDownload}
+                    slim={!!props.slim}
+                    showLineNumbers={!(!!props.slim && !/\n/.test(code))}
+                    versioned={!!props.versioned}
+                    noHistory={!!props.noHistory}
+                    noCompare={!!props.noCompare}
+                    title={title}
+                    className={props.className}
+                    onChange={props.onChange}
+                />
+            </ScriptContext>
+        );
+    }
+    return <CodeBlock {...props} />;
+};
+
+export default ContextEditor;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { DOM_ELEMENT_IDS } from 'docusaurus-live-brython/theme/CodeEditor/constants';
+import { DOM_ELEMENT_IDS } from '@theme/CodeEditor/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 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
+import { useStore, useScript } from '@theme/CodeEditor/hooks';
 // import 'ace-builds/src-noconflict/theme-textmate';
 // import('ace-builds/src-noconflict/snippets/python'),
 
@@ -18,20 +18,21 @@ export interface Props {
     versioned?: boolean;
     showLineNumbers: boolean;
     maxLines?: number;
+    onChange?: (code: string) => void;
 }
 
 const ALIAS_LANG_MAP_ACE = {
-    mpy: 'python',
-}
+    mpy: 'python'
+};
 
 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, 'code');
+    const pristineCode = useScript(store, 'pristineCode');
+    const lang = useScript(store, 'lang');
+    const codeId = useScript(store, 'codeId');
+    const showRaw = useScript(store, 'showRaw');
 
     React.useEffect(() => {
         if (eRef && eRef.current) {
@@ -41,7 +42,7 @@ const EditorAce = (props: Props) => {
                     // commands is array of key bindings.
                     name: 'execute',
                     bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
-                    exec: () => store.execScript(),
+                    exec: () => store.execScript()
                 });
             }
             node.editor.commands.addCommand({
@@ -50,7 +51,7 @@ const EditorAce = (props: Props) => {
                 bindKey: { win: 'Ctrl-s', mac: 'Command-s' },
                 exec: () => {
                     store.saveNow();
-                },
+                }
             });
             return () => {
                 if (node && node.editor) {
@@ -65,7 +66,7 @@ const EditorAce = (props: Props) => {
                 }
             };
         }
-    }, [eRef, lang]);
+    }, [eRef, lang, store]);
 
     return (
         <div className={clsx(styles.editor)}>
@@ -83,7 +84,7 @@ const EditorAce = (props: Props) => {
                         /**
                          * Save immediately as pasted content
                          */
-                        store.setState((s) => ({ ...s, isPasted: true }));
+                        store.setIsPasted(true);
                     }
                 }}
                 focus={false}
@@ -92,8 +93,11 @@ const EditorAce = (props: Props) => {
                 ref={eRef}
                 mode={ALIAS_LANG_MAP_ACE[lang as keyof typeof ALIAS_LANG_MAP_ACE] ?? lang}
                 theme="dracula"
-                onChange={(value: string, e: {action: 'insert' | 'remove'}) => {
+                onChange={(value: string, e: { action: 'insert' | 'remove' }) => {
                     store.setCode(value, e.action);
+                    if (props.onChange) {
+                        props.onChange(value);
+                    }
                 }}
                 readOnly={showRaw}
                 value={showRaw ? pristineCode : code}
@@ -103,7 +107,7 @@ const EditorAce = (props: Props) => {
                 setOptions={{
                     displayIndentGuides: true,
                     vScrollBarAlwaysVisible: false,
-                    highlightGutterLine: false,
+                    highlightGutterLine: false
                 }}
                 showPrintMargin={false}
                 highlightActiveLine={false}

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
-import { useScript, useStore } from 'docusaurus-live-brython/theme/CodeEditor/WithScript/Store';
-import ShowSyncStatus from 'docusaurus-live-brython/theme/CodeEditor/Actions/ShowSyncStatus';
-import Reset from 'docusaurus-live-brython/theme/CodeEditor/Actions/Reset';
-import DownloadCode from 'docusaurus-live-brython/theme/CodeEditor/Actions/DownloadCode';
-import ShowRaw from 'docusaurus-live-brython/theme/CodeEditor/Actions/ShowRaw';
-import RunCode from 'docusaurus-live-brython/theme/CodeEditor/Actions/RunCode';
+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';
 
-interface Props {
+export interface Props {
     slim: boolean;
     title: string;
     resettable: boolean;
@@ -17,25 +17,19 @@ 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, 'hasEdits');
+    const lang = useScript(store, 'lang');
     return (
         <div className={clsx(styles.controls, props.slim && styles.slim)}>
             {!props.slim && (
                 <React.Fragment>
                     <div className={styles.title}>{props.title}</div>
                     <ShowSyncStatus />
-                    {hasEdits && props.resettable && (
-                        <Reset />
-                    )}
-                    {props.download && (
-                        <DownloadCode title={props.title} />
-                    )}
-                    {hasEdits && !props.noCompare && (
-                       <ShowRaw />
-                    )}
+                    {hasEdits && props.resettable && <Reset />}
+                    {props.download && <DownloadCode title={props.title} />}
+                    {hasEdits && !props.noCompare && <ShowRaw />}
                 </React.Fragment>
             )}
             {lang === 'python' && <RunCode title={props.title} slim={props.slim} />}