@azerion/bunosaurus-theme-live-codeblock 0.0.0-stage → 4.0.0-canary-6927

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# `@docusaurus/theme-live-codeblock`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+You can create live code editors with a code block `live` meta string.
+
+Install
+
+```bash
+npm i @docusaurus/theme-live-codeblock # or yarn add @docusaurus/theme-live-codeblock
+```
+
+Modify your `docusaurus.config.js`
+
+```diff
+module.exports = {
+  ...
++ themes: ['@docusaurus/theme-live-codeblock'],
+  presets: ['@docusaurus/preset-classic']
+  ...
+}
+```
+
+Example:
+
+    ```jsx live
+    function Clock(props) {
+      const [date, setDate] = useState(new Date());
+      useEffect(() => {
+        var timerID = setInterval(() => tick(), 1000);
+
+        return function cleanup() {
+          clearInterval(timerID);
+        };
+      });
+
+      function tick() {
+        setDate(new Date());
+      }
+
+      return (
+        <div>
+          <h2>It is {date.toLocaleTimeString()}.</h2>
+        </div>
+      );
+    }
+    ```

package/lib/client/context.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+type PlaygroundContextValue = {
+    reset: () => void;
+};
+export declare function PlaygroundProvider({ value, children, }: {
+    value: PlaygroundContextValue;
+    children: ReactNode;
+}): ReactNode;
+export declare function usePlayground(): PlaygroundContextValue;
+export {};

package/lib/client/context.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { createContext, useContext } from 'react';
+const PlaygroundContext = createContext(null);
+export function PlaygroundProvider({ value, children, }) {
+    return <PlaygroundContext value={value}>{children}</PlaygroundContext>;
+}
+export function usePlayground() {
+    const context = useContext(PlaygroundContext);
+    if (!context) {
+        throw new Error('usePlayground must be used within PlaygroundProvider');
+    }
+    return context;
+}

package/lib/client/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { usePlayground, PlaygroundProvider } from './context';

package/lib/client/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { usePlayground, PlaygroundProvider } from './context';

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { LoadContext, Plugin } from '@docusaurus/types';
+export default function themeLiveCodeblock(context: LoadContext): Plugin;
+export { validateThemeConfig } from './validateThemeConfig';

package/lib/index.js

@@ -0,0 +1,31 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateThemeConfig = void 0;
+exports.default = themeLiveCodeblock;
+const theme_translations_1 = require("@docusaurus/theme-translations");
+function themeLiveCodeblock(context) {
+    const { i18n: { currentLocale }, } = context;
+    return {
+        name: 'docusaurus-theme-live-codeblock',
+        getThemePath() {
+            return '../lib/theme';
+        },
+        getTypeScriptThemePath() {
+            return '../src/theme';
+        },
+        getDefaultCodeTranslationMessages() {
+            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+                locale: currentLocale,
+                name: 'theme-live-codeblock',
+            });
+        },
+    };
+}
+var validateThemeConfig_1 = require("./validateThemeConfig");
+Object.defineProperty(exports, "validateThemeConfig", { enumerable: true, get: function () { return validateThemeConfig_1.validateThemeConfig; } });

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props as CodeBlockProps } from '@theme/CodeBlock';
+declare module '@theme/CodeBlock' {
+    interface Props {
+        live?: boolean;
+    }
+}
+export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode;

package/lib/theme/CodeBlock/index.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import OriginalCodeBlock from '@theme-init/CodeBlock';
+import LiveCodeBlock from '@theme/LiveCodeBlock';
+function isLiveCodeBlock(props) {
+  return (
+    !!props.live &&
+    (typeof props.children === 'undefined' ||
+      typeof props.children === 'string')
+  );
+}
+export default function CodeBlockEnhancer(props) {
+  return isLiveCodeBlock(props) ? (
+    <LiveCodeBlock {...props} />
+  ) : (
+    <OriginalCodeBlock {...props} />
+  );
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/LiveCodeBlock';
+export default function LiveCodeBlock(props: Props): ReactNode;

package/lib/theme/LiveCodeBlock/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
+export default function LiveCodeBlock(props) {
+  return <Playground scope={ReactLiveScope} {...props} />;
+}

package/lib/theme/Playground/Buttons/ResetButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Buttons/ResetButton';
+export default function ResetButton({ className }: Props): ReactNode;

package/lib/theme/Playground/Buttons/ResetButton/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import {usePlayground} from '@docusaurus/theme-live-codeblock/client';
+import styles from './styles.module.css';
+function Icon() {
+  return (
+    <svg
+      className={styles.resetButtonIcon}
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true">
+      <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
+      <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+    </svg>
+  );
+}
+function Label() {
+  return (
+    <Translate
+      id="theme.Playground.buttons.reset"
+      description="The reset button label for live code blocks">
+      Reset
+    </Translate>
+  );
+}
+export default function ResetButton({className}) {
+  const {reset} = usePlayground();
+  return (
+    <button
+      type="button"
+      aria-label="Reset code to original"
+      title="Reset"
+      className={clsx('clean-btn', className, styles.resetButton)}
+      onClick={() => reset()}>
+      <Icon />
+      <Label />
+    </button>
+  );
+}

package/lib/theme/Playground/Buttons/ResetButton/styles.module.css

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.resetButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+  background: var(--ifm-button-background-color);
+  color: var(--ifm-font-color-base);
+  cursor: pointer;
+  transition: all var(--ifm-transition-fast);
+}
+
+.resetButton:hover {
+  background: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-400);
+}
+
+.resetButton:active {
+  background: var(--ifm-color-emphasis-300);
+}
+
+.resetButtonIcon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}

package/lib/theme/Playground/Container/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Container';
+export default function PlaygroundContainer({ children }: Props): ReactNode;

package/lib/theme/Playground/Container/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import styles from './styles.module.css';
+export default function PlaygroundContainer({children}) {
+  return <div className={styles.playgroundContainer}>{children}</div>;
+}

package/lib/theme/Playground/Container/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+export default function PlaygroundEditor(): ReactNode;

package/lib/theme/Playground/Editor/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {LiveEditor} from 'react-live';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+import ResetButton from '@theme/Playground/Buttons/ResetButton';
+import styles from './styles.module.css';
+export default function PlaygroundEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <>
+      <PlaygroundHeader buttons={<ResetButton />}>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </PlaygroundHeader>
+      <LiveEditor
+        // We force remount the editor on hydration,
+        // otherwise dark prism theme is not applied
+        key={String(isBrowser)}
+        className={styles.playgroundEditor}
+      />
+    </>
+  );
+}

package/lib/theme/Playground/Editor/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundEditor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.playgroundEditor pre {
+  border-radius: 0;
+}

package/lib/theme/Playground/Header/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Header';
+export default function PlaygroundHeader({ children, buttons, }: Props): ReactNode;

package/lib/theme/Playground/Header/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import clsx from 'clsx';
+import styles from './styles.module.css';
+export default function PlaygroundHeader({children, buttons}) {
+  return (
+    <div className={clsx(styles.playgroundHeader)}>
+      <div className={styles.playgroundHeaderContent}>{children}</div>
+      {buttons && (
+        <div className={styles.playgroundHeaderButtons}>{buttons}</div>
+      )}
+    </div>
+  );
+}

package/lib/theme/Playground/Header/styles.module.css

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-content);
+  font-size: var(--ifm-code-font-size);
+}
+
+.playgroundHeaderContent {
+  font-weight: var(--ifm-font-weight-bold);
+  font-size: 0.875rem;
+}
+
+.playgroundHeaderButtons {
+  display: flex;
+  gap: 0.5rem;
+}

package/lib/theme/Playground/Layout/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Layout';
+export default function PlaygroundLayout(props: Props): ReactNode;

package/lib/theme/Playground/Layout/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useThemeConfig} from '@docusaurus/theme-common';
+import PlaygroundPreview from '@theme/Playground/Preview';
+import PlaygroundEditor from '@theme/Playground/Editor';
+function useLiveCodeBlockThemeConfig() {
+  const themeConfig = useThemeConfig();
+  return themeConfig.liveCodeBlock;
+}
+export default function PlaygroundLayout(props) {
+  const themeConfig = useLiveCodeBlockThemeConfig();
+  const position = props.position ?? themeConfig.playgroundPosition;
+  return (
+    <>
+      {position === 'top' ? (
+        <>
+          <PlaygroundPreview />
+          <PlaygroundEditor />
+        </>
+      ) : (
+        <>
+          <PlaygroundEditor />
+          <PlaygroundPreview />
+        </>
+      )}
+    </>
+  );
+}

package/lib/theme/Playground/Preview/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+export default function PlaygroundPreview(): ReactNode;

package/lib/theme/Playground/Preview/index.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {LiveError, LivePreview} from 'react-live';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import {ErrorBoundaryErrorMessageFallback} from '@docusaurus/theme-common';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+import styles from './styles.module.css';
+function Loader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
+function PlaygroundLivePreview() {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<Loader />}>
+      {() => (
+        <>
+          <ErrorBoundary
+            fallback={(params) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}>
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+export default function PlaygroundPreview() {
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </PlaygroundHeader>
+      <div className={styles.playgroundPreview}>
+        <PlaygroundLivePreview />
+      </div>
+    </>
+  );
+}

package/lib/theme/Playground/Preview/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundPreview {
+  padding: 1rem;
+  background-color: var(--ifm-pre-background);
+}

package/lib/theme/Playground/Provider/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Provider';
+export default function PlaygroundProvider(props: Props): ReactNode;

package/lib/theme/Playground/Provider/index.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import {useCallback, useMemo, useState} from 'react';
+import {LiveProvider} from 'react-live';
+import {PlaygroundProvider as PlaygroundProviderComponent} from '@docusaurus/theme-live-codeblock/client';
+import {usePrismTheme} from '@docusaurus/theme-common';
+// this should rather be a stable function
+// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
+const DEFAULT_TRANSFORM_CODE = (code) => `${code};`;
+function LiveProviderComponent({code, children, ...props}) {
+  const prismTheme = usePrismTheme();
+  const noInline = props.metastring?.includes('noInline') ?? false;
+  return (
+    <LiveProvider
+      noInline={noInline}
+      theme={prismTheme}
+      {...props}
+      code={code?.replace(/\n$/, '')}
+      transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
+      {children}
+    </LiveProvider>
+  );
+}
+export default function PlaygroundProvider(props) {
+  const [resetKey, setResetKey] = useState(0);
+  const reset = useCallback(() => setResetKey((prev) => prev + 1), []);
+  const value = useMemo(() => ({reset}), [reset]);
+  return (
+    <PlaygroundProviderComponent key={resetKey} value={value}>
+      <LiveProviderComponent {...props} />
+    </PlaygroundProviderComponent>
+  );
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { ReactNode } from 'react';
+import type { Props } from '@theme/Playground';
+export default function Playground({ children, transformCode, position, ...props }: Props): ReactNode;

package/lib/theme/Playground/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PlaygroundProvider from '@theme/Playground/Provider';
+import PlaygroundContainer from '@theme/Playground/Container';
+import PlaygroundLayout from '@theme/Playground/Layout';
+export default function Playground({
+  children,
+  transformCode,
+  position,
+  ...props
+}) {
+  return (
+    <PlaygroundContainer>
+      <PlaygroundProvider code={children} {...props}>
+        <PlaygroundLayout position={position} />
+      </PlaygroundProvider>
+    </PlaygroundContainer>
+  );
+}