@docusaurus/theme-live-codeblock 2.0.0-beta.ff31de0ff → 2.0.0-rc.1

package/lib/custom-buble.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 TransformOptions, type TransformOutput } from '@philpl/buble';
+export { features } from '@philpl/buble';
+export declare function transform(source: string, options: TransformOptions): TransformOutput;

package/{src → lib}/custom-buble.js

@@ -4,17 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 // fork of Buble which removes Buble's large dependency and weighs in
 // at a smaller size of ~51kB
 // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
-const {transform, features: bubleFeatures} = require('@philpl/buble');
-
+import { transform as bubleTransform, } from '@philpl/buble';
 // This file is designed to mimic what's written in
 // https://github.com/kitten/buble/blob/mini/src/index.js, with custom transforms options,
 // so that webpack can consume it correctly.
-exports.features = bubleFeatures;
-
-exports.transform = function customTransform(source, options) {
-  return transform(source, {...options, transforms: {asyncAwait: false}});
-};
+export { features } from '@philpl/buble';
+export function transform(source, options) {
+    return bubleTransform(source, {
+        ...options,
+        transforms: {
+            asyncAwait: false,
+            classes: false,
+            getterSetter: false,
+            ...options.transforms,
+        },
+    });
+}

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,40 @@
+"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;
+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',
+            });
+        },
+        configureWebpack() {
+            return {
+                resolve: {
+                    alias: {
+                        buble: require.resolve('./custom-buble.js'),
+                    },
+                },
+            };
+        },
+    };
+}
+exports.default = themeLiveCodeblock;
+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,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.
+ */
+/// <reference types="react" />
+import { type Props } from '@theme-init/CodeBlock';
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/{src → lib}/theme/CodeBlock/index.js

@@ -4,22 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
 import React from 'react';
 import Playground from '@theme/Playground';
 import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
-
 const withLiveEditor = (Component) => {
-  const WrappedComponent = (props) => {
+  function WrappedComponent(props) {
     if (props.live) {
+      // @ts-expect-error: we have deliberately widened the type of language prop
       return <Playground scope={ReactLiveScope} {...props} />;
     }
-
     return <Component {...props} />;
-  };
-
+  }
   return WrappedComponent;
 };
-
 export default withLiveEditor(CodeBlock);

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.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/Playground';
+export default function Playground({ children, transformCode, ...props }: Props): JSX.Element;

package/{src → lib}/theme/Playground/index.js

@@ -4,19 +4,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-import * as React from 'react';
-import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
+import React from 'react';
 import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import {usePrismTheme} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
-
 function Header({children}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
-
+function LivePreviewLoader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
 function ResultWithHeader() {
   return (
     <>
@@ -27,14 +31,31 @@ function ResultWithHeader() {
           Result
         </Translate>
       </Header>
+      {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <LivePreview />
-        <LiveError />
+        <BrowserOnly fallback={<LivePreviewLoader />}>
+          {() => (
+            <>
+              <LivePreview />
+              <LiveError />
+            </>
+          )}
+        </BrowserOnly>
       </div>
     </>
   );
 }
-
+function ThemedLiveEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <LiveEditor
+      // We force remount the editor on hydration,
+      // otherwise dark prism theme is not applied
+      key={String(isBrowser)}
+      className={styles.playgroundEditor}
+    />
+  );
+}
 function EditorWithHeader() {
   return (
     <>
@@ -45,28 +66,26 @@ function EditorWithHeader() {
           Live Editor
         </Translate>
       </Header>
-      <LiveEditor className={styles.playgroundEditor} />
+      <ThemedLiveEditor />
     </>
   );
 }
-
 export default function Playground({children, transformCode, ...props}) {
   const {
-    isClient,
-    siteConfig: {
-      themeConfig: {
-        liveCodeBlock: {playgroundPosition},
-      },
-    },
+    siteConfig: {themeConfig},
   } = useDocusaurusContext();
+  const {
+    liveCodeBlock: {playgroundPosition},
+  } = themeConfig;
   const prismTheme = usePrismTheme();
-
+  const noInline = props.metastring?.includes('noInline') ?? false;
   return (
     <div className={styles.playgroundContainer}>
+      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
-        key={isClient}
-        code={isClient ? children.replace(/\n$/, '') : ''}
-        transformCode={transformCode || ((code) => `${code};`)}
+        code={children.replace(/\n$/, '')}
+        noInline={noInline}
+        transformCode={transformCode ?? ((code) => `${code};`)}
         theme={prismTheme}
         {...props}>
         {playgroundPosition === 'top' ? (

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

@@ -0,0 +1,40 @@
+/**
+ * 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;
+}
+
+.playgroundHeader {
+  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);
+}
+
+.playgroundHeader:first-of-type {
+  background: var(--ifm-color-emphasis-600);
+  color: var(--ifm-color-content-inverse);
+}
+
+.playgroundEditor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.playgroundPreview {
+  padding: 1rem;
+  background-color: var(--ifm-pre-background);
+}

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

@@ -0,0 +1,83 @@
+/**
+ * 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 React from 'react';
+declare const ReactLiveScope: {
+    createFactory<T extends HTMLElement>(type: keyof React.ReactHTML): React.HTMLFactory<T>;
+    createFactory(type: keyof React.ReactSVG): React.SVGFactory;
+    createFactory<P extends React.DOMAttributes<T_1>, T_1 extends Element>(type: string): React.DOMFactory<P, T_1>;
+    createFactory<P_1>(type: React.FunctionComponent<P_1>): React.FunctionComponentFactory<P_1>;
+    createFactory<P_2>(type: React.ClassType<P_2, React.ClassicComponent<P_2, any>, React.ClassicComponentClass<P_2>>): React.CFactory<P_2, React.ClassicComponent<P_2, any>>;
+    createFactory<P_3, T_2 extends React.Component<P_3, any, any>, C extends React.ComponentClass<P_3, any>>(type: React.ClassType<P_3, T_2, C>): React.CFactory<P_3, T_2>;
+    createFactory<P_4>(type: React.ComponentClass<P_4, any>): React.Factory<P_4>;
+    createElement(type: "input", props?: (React.InputHTMLAttributes<HTMLInputElement> & React.ClassAttributes<HTMLInputElement>) | null | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    createElement<P_5 extends React.HTMLAttributes<T_3>, T_3 extends HTMLElement>(type: keyof React.ReactHTML, props?: (React.ClassAttributes<T_3> & P_5) | null | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<P_5, T_3>;
+    createElement<P_6 extends React.SVGAttributes<T_4>, T_4 extends SVGElement>(type: keyof React.ReactSVG, props?: (React.ClassAttributes<T_4> & P_6) | null | undefined, ...children: React.ReactNode[]): React.ReactSVGElement;
+    createElement<P_7 extends React.DOMAttributes<T_5>, T_5 extends Element>(type: string, props?: (React.ClassAttributes<T_5> & P_7) | null | undefined, ...children: React.ReactNode[]): React.DOMElement<P_7, T_5>;
+    createElement<P_8 extends {}>(type: React.FunctionComponent<P_8>, props?: (React.Attributes & P_8) | null | undefined, ...children: React.ReactNode[]): React.FunctionComponentElement<P_8>;
+    createElement<P_9 extends {}>(type: React.ClassType<P_9, React.ClassicComponent<P_9, any>, React.ClassicComponentClass<P_9>>, props?: (React.ClassAttributes<React.ClassicComponent<P_9, any>> & P_9) | null | undefined, ...children: React.ReactNode[]): React.CElement<P_9, React.ClassicComponent<P_9, any>>;
+    createElement<P_10 extends {}, T_6 extends React.Component<P_10, any, any>, C_1 extends React.ComponentClass<P_10, any>>(type: React.ClassType<P_10, T_6, C_1>, props?: (React.ClassAttributes<T_6> & P_10) | null | undefined, ...children: React.ReactNode[]): React.CElement<P_10, T_6>;
+    createElement<P_11 extends {}>(type: string | React.FunctionComponent<P_11> | React.ComponentClass<P_11, any>, props?: (React.Attributes & P_11) | null | undefined, ...children: React.ReactNode[]): React.ReactElement<P_11, string | React.JSXElementConstructor<any>>;
+    cloneElement<P_12 extends React.HTMLAttributes<T_7>, T_7 extends HTMLElement>(element: React.DetailedReactHTMLElement<P_12, T_7>, props?: P_12 | undefined, ...children: React.ReactNode[]): React.DetailedReactHTMLElement<P_12, T_7>;
+    cloneElement<P_13 extends React.HTMLAttributes<T_8>, T_8 extends HTMLElement>(element: React.ReactHTMLElement<T_8>, props?: P_13 | undefined, ...children: React.ReactNode[]): React.ReactHTMLElement<T_8>;
+    cloneElement<P_14 extends React.SVGAttributes<T_9>, T_9 extends SVGElement>(element: React.ReactSVGElement, props?: P_14 | undefined, ...children: React.ReactNode[]): React.ReactSVGElement;
+    cloneElement<P_15 extends React.DOMAttributes<T_10>, T_10 extends Element>(element: React.DOMElement<P_15, T_10>, props?: (React.DOMAttributes<T_10> & P_15) | undefined, ...children: React.ReactNode[]): React.DOMElement<P_15, T_10>;
+    cloneElement<P_16>(element: React.FunctionComponentElement<P_16>, props?: (Partial<P_16> & React.Attributes) | undefined, ...children: React.ReactNode[]): React.FunctionComponentElement<P_16>;
+    cloneElement<P_17, T_11 extends React.Component<P_17, any, any>>(element: React.CElement<P_17, T_11>, props?: (Partial<P_17> & React.ClassAttributes<T_11>) | undefined, ...children: React.ReactNode[]): React.CElement<P_17, T_11>;
+    cloneElement<P_18>(element: React.ReactElement<P_18, string | React.JSXElementConstructor<any>>, props?: (Partial<P_18> & React.Attributes) | undefined, ...children: React.ReactNode[]): React.ReactElement<P_18, string | React.JSXElementConstructor<any>>;
+    createContext<T_12>(defaultValue: T_12): React.Context<T_12>;
+    isValidElement<P_19>(object: {} | null | undefined): object is React.ReactElement<P_19, string | React.JSXElementConstructor<any>>;
+    createRef<T_13>(): React.RefObject<T_13>;
+    forwardRef<T_14, P_20 = {}>(render: React.ForwardRefRenderFunction<T_14, P_20>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P_20> & React.RefAttributes<T_14>>;
+    memo<P_21 extends object>(Component: React.FunctionComponent<P_21>, propsAreEqual?: ((prevProps: Readonly<P_21>, nextProps: Readonly<P_21>) => boolean) | undefined): React.NamedExoticComponent<P_21>;
+    memo<T_15 extends React.ComponentType<any>>(Component: T_15, propsAreEqual?: ((prevProps: Readonly<React.ComponentProps<T_15>>, nextProps: Readonly<React.ComponentProps<T_15>>) => boolean) | undefined): React.MemoExoticComponent<T_15>;
+    lazy<T_16 extends React.ComponentType<any>>(factory: () => Promise<{
+        default: T_16;
+    }>): React.LazyExoticComponent<T_16>;
+    useContext<T_17>(context: React.Context<T_17>): T_17;
+    useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>];
+    useState<S_1 = undefined>(): [S_1 | undefined, React.Dispatch<React.SetStateAction<S_1 | undefined>>];
+    useReducer<R extends React.ReducerWithoutAction<any>, I>(reducer: R, initializerArg: I, initializer: (arg: I) => React.ReducerStateWithoutAction<R>): [React.ReducerStateWithoutAction<R>, React.DispatchWithoutAction];
+    useReducer<R_1 extends React.ReducerWithoutAction<any>>(reducer: R_1, initializerArg: React.ReducerStateWithoutAction<R_1>, initializer?: undefined): [React.ReducerStateWithoutAction<R_1>, React.DispatchWithoutAction];
+    useReducer<R_2 extends React.Reducer<any, any>, I_1>(reducer: R_2, initializerArg: I_1 & React.ReducerState<R_2>, initializer: (arg: I_1 & React.ReducerState<R_2>) => React.ReducerState<R_2>): [React.ReducerState<R_2>, React.Dispatch<React.ReducerAction<R_2>>];
+    useReducer<R_3 extends React.Reducer<any, any>, I_2>(reducer: R_3, initializerArg: I_2, initializer: (arg: I_2) => React.ReducerState<R_3>): [React.ReducerState<R_3>, React.Dispatch<React.ReducerAction<R_3>>];
+    useReducer<R_4 extends React.Reducer<any, any>>(reducer: R_4, initialState: React.ReducerState<R_4>, initializer?: undefined): [React.ReducerState<R_4>, React.Dispatch<React.ReducerAction<R_4>>];
+    useRef<T_18>(initialValue: T_18): React.MutableRefObject<T_18>;
+    useRef<T_19>(initialValue: T_19 | null): React.RefObject<T_19>;
+    useRef<T_20 = undefined>(): React.MutableRefObject<T_20 | undefined>;
+    useLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList | undefined): void;
+    useEffect(effect: React.EffectCallback, deps?: React.DependencyList | undefined): void;
+    useImperativeHandle<T_21, R_5 extends T_21>(ref: React.Ref<T_21> | undefined, init: () => R_5, deps?: React.DependencyList | undefined): void;
+    useCallback<T_22 extends Function>(callback: T_22, deps: React.DependencyList): T_22;
+    useMemo<T_23>(factory: () => T_23, deps: React.DependencyList | undefined): T_23;
+    useDebugValue<T_24>(value: T_24, format?: ((value: T_24) => any) | undefined): void;
+    useDeferredValue<T_25>(value: T_25): T_25;
+    useTransition(): [boolean, React.TransitionStartFunction];
+    startTransition(scope: React.TransitionFunction): void;
+    useId(): string;
+    useInsertionEffect(effect: React.EffectCallback, deps?: React.DependencyList | undefined): void;
+    useSyncExternalStore<Snapshot>(subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: (() => Snapshot) | undefined): Snapshot;
+    Children: {
+        map<T_26, C_2>(children: C_2 | readonly C_2[], fn: (child: C_2, index: number) => T_26): C_2 extends null | undefined ? C_2 : Exclude<T_26, boolean | null | undefined>[];
+        forEach<C_3>(children: C_3 | readonly C_3[], fn: (child: C_3, index: number) => void): void;
+        count(children: any): number;
+        only<C_4>(children: C_4): C_4 extends any[] ? never : C_4;
+        toArray(children: React.ReactNode | React.ReactNode[]): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
+    };
+    Fragment: React.ExoticComponent<{
+        children?: React.ReactNode;
+    }>;
+    StrictMode: React.ExoticComponent<{
+        children?: React.ReactNode;
+    }>;
+    Suspense: React.ExoticComponent<React.SuspenseProps>;
+    version: string;
+    Profiler: React.ExoticComponent<React.ProfilerProps>;
+    Component: typeof React.Component;
+    PureComponent: typeof React.PureComponent;
+    React: typeof React;
+};
+export default ReactLiveScope;

package/lib/theme/ReactLiveScope/index.js

@@ -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.
+ */
+import React from 'react';
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+};
+export default ReactLiveScope;

package/lib/validateThemeConfig.d.ts

@@ -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.
+ */
+import { Joi } from '@docusaurus/utils-validation';
+import type { ThemeConfig, ThemeConfigValidationContext } from '@docusaurus/types';
+export declare const DEFAULT_CONFIG: {
+    playgroundPosition: string;
+};
+export declare const Schema: Joi.ObjectSchema<ThemeConfig>;
+export declare function validateThemeConfig({ validate, themeConfig, }: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig;

package/lib/validateThemeConfig.js

@@ -0,0 +1,26 @@
+"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 = exports.Schema = exports.DEFAULT_CONFIG = void 0;
+const utils_validation_1 = require("@docusaurus/utils-validation");
+exports.DEFAULT_CONFIG = {
+    playgroundPosition: 'bottom',
+};
+exports.Schema = utils_validation_1.Joi.object({
+    liveCodeBlock: utils_validation_1.Joi.object({
+        playgroundPosition: utils_validation_1.Joi.string()
+            .equal('top', 'bottom')
+            .default(exports.DEFAULT_CONFIG.playgroundPosition),
+    })
+        .label('themeConfig.liveCodeBlock')
+        .default(exports.DEFAULT_CONFIG),
+});
+function validateThemeConfig({ validate, themeConfig, }) {
+    return validate(exports.Schema, themeConfig);
+}
+exports.validateThemeConfig = validateThemeConfig;

package/package.json

@@ -1,11 +1,21 @@
 {
   "name": "@docusaurus/theme-live-codeblock",
-  "version": "2.0.0-beta.ff31de0ff",
+  "version": "2.0.0-rc.1",
   "description": "Docusaurus live code block component.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
+  "types": "src/theme-live-codeblock.d.ts",
+  "sideEffects": [
+    "lib/theme/Playground/*"
+  ],
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc --build && node ../../admin/scripts/copyUntypedFiles.js && prettier --config ../../.prettierrc --write \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/docusaurus.git",
@@ -13,20 +23,26 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.ff31de0ff",
-    "@docusaurus/utils-validation": "2.0.0-beta.ff31de0ff",
+    "@docusaurus/core": "2.0.0-rc.1",
+    "@docusaurus/theme-common": "2.0.0-rc.1",
+    "@docusaurus/theme-translations": "2.0.0-rc.1",
+    "@docusaurus/utils-validation": "2.0.0-rc.1",
     "@philpl/buble": "^0.19.7",
-    "clsx": "^1.1.1",
-    "parse-numeric-range": "^1.2.0",
-    "prism-react-renderer": "^1.2.1",
-    "react-live": "^2.2.3"
+    "clsx": "^1.2.1",
+    "fs-extra": "^10.1.0",
+    "react-live": "2.2.3",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@docusaurus/types": "2.0.0-rc.1",
+    "@types/buble": "^0.20.1"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
   "engines": {
-    "node": ">=12.13.0"
+    "node": ">=16.14"
   },
-  "gitHead": "6cacb313da4a21283fe08176097df89df836ee23"
+  "gitHead": "c8ddd02a8e68dfaf515c20465a049a83153bd205"
 }

package/src/custom-buble.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+// fork of Buble which removes Buble's large dependency and weighs in
+// at a smaller size of ~51kB
+// https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
+import {
+  transform as bubleTransform,
+  type TransformOptions,
+  type TransformOutput,
+} from '@philpl/buble';
+
+// This file is designed to mimic what's written in
+// https://github.com/kitten/buble/blob/mini/src/index.js, with custom transforms options,
+// so that webpack can consume it correctly.
+export {features} from '@philpl/buble';
+
+export function transform(
+  source: string,
+  options: TransformOptions,
+): TransformOutput {
+  return bubleTransform(source, {
+    ...options,
+    transforms: {
+      asyncAwait: false,
+      classes: false,
+      getterSetter: false,
+      ...options.transforms,
+    },
+  });
+}

package/src/deps.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+declare module '@philpl/buble' {
+  import type {TransformOptions as OriginalTransformOptions} from 'buble';
+  // eslint-disable-next-line import/no-extraneous-dependencies, no-restricted-syntax
+  export * from 'buble';
+  export const features: string[];
+  export type TransformOptions = OriginalTransformOptions & {
+    transforms?: OriginalTransformOptions['transforms'] & {
+      asyncAwait?: boolean;
+      getterSetter?: boolean;
+    };
+  };
+}

package/src/index.ts

@@ -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 {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import type {LoadContext, Plugin} from '@docusaurus/types';
+
+export default function themeLiveCodeblock(context: LoadContext): Plugin {
+  const {
+    i18n: {currentLocale},
+  } = context;
+
+  return {
+    name: 'docusaurus-theme-live-codeblock',
+
+    getThemePath() {
+      return '../lib/theme';
+    },
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'theme-live-codeblock',
+      });
+    },
+
+    configureWebpack() {
+      return {
+        resolve: {
+          alias: {
+            buble: require.resolve('./custom-buble.js'),
+          },
+        },
+      };
+    },
+  };
+}
+
+export {validateThemeConfig} from './validateThemeConfig';

package/src/theme/CodeBlock/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 React from 'react';
+import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
+import CodeBlock, {type Props} from '@theme-init/CodeBlock';
+
+const withLiveEditor = (Component: typeof CodeBlock) => {
+  function WrappedComponent(props: Props) {
+    if (props.live) {
+      // @ts-expect-error: we have deliberately widened the type of language prop
+      return <Playground scope={ReactLiveScope} {...props} />;
+    }
+
+    return <Component {...props} />;
+  }
+
+  return WrappedComponent;
+};
+
+export default withLiveEditor(CodeBlock);

package/src/theme/Playground/index.tsx

@@ -0,0 +1,121 @@
+/**
+ * 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 React from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import {usePrismTheme} from '@docusaurus/theme-common';
+import type {Props} from '@theme/Playground';
+
+import styles from './styles.module.css';
+import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
+
+function Header({children}: {children: React.ReactNode}) {
+  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+}
+
+function LivePreviewLoader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
+
+function ResultWithHeader() {
+  return (
+    <>
+      <Header>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </Header>
+      {/* https://github.com/facebook/docusaurus/issues/5747 */}
+      <div className={styles.playgroundPreview}>
+        <BrowserOnly fallback={<LivePreviewLoader />}>
+          {() => (
+            <>
+              <LivePreview />
+              <LiveError />
+            </>
+          )}
+        </BrowserOnly>
+      </div>
+    </>
+  );
+}
+
+function ThemedLiveEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <LiveEditor
+      // We force remount the editor on hydration,
+      // otherwise dark prism theme is not applied
+      key={String(isBrowser)}
+      className={styles.playgroundEditor}
+    />
+  );
+}
+
+function EditorWithHeader() {
+  return (
+    <>
+      <Header>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </Header>
+      <ThemedLiveEditor />
+    </>
+  );
+}
+
+export default function Playground({
+  children,
+  transformCode,
+  ...props
+}: Props): JSX.Element {
+  const {
+    siteConfig: {themeConfig},
+  } = useDocusaurusContext();
+  const {
+    liveCodeBlock: {playgroundPosition},
+  } = themeConfig as ThemeConfig;
+  const prismTheme = usePrismTheme();
+
+  const noInline = props.metastring?.includes('noInline') ?? false;
+
+  return (
+    <div className={styles.playgroundContainer}>
+      {/* @ts-expect-error: type incompatibility with refs */}
+      <LiveProvider
+        code={children.replace(/\n$/, '')}
+        noInline={noInline}
+        transformCode={transformCode ?? ((code) => `${code};`)}
+        theme={prismTheme}
+        {...props}>
+        {playgroundPosition === 'top' ? (
+          <>
+            <ResultWithHeader />
+            <EditorWithHeader />
+          </>
+        ) : (
+          <>
+            <EditorWithHeader />
+            <ResultWithHeader />
+          </>
+        )}
+      </LiveProvider>
+    </div>
+  );
+}

package/src/theme/Playground/styles.module.css

@@ -7,6 +7,9 @@
 
 .playgroundContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
 }
 
 .playgroundHeader {
@@ -22,23 +25,16 @@
 .playgroundHeader:first-of-type {
   background: var(--ifm-color-emphasis-600);
   color: var(--ifm-color-content-inverse);
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
 }
 
 .playgroundEditor {
   font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
     var(--ifm-font-family-monospace) !important;
-  /*rtl:ignore*/
+  /* rtl:ignore */
   direction: ltr;
 }
 
 .playgroundPreview {
-  border: 1px solid var(--ifm-color-emphasis-200);
   padding: 1rem;
-}
-
-.playgroundPreview:last-of-type, .playgroundEditor:last-of-type {
-  border-bottom-left-radius: var(--ifm-global-radius);
-  border-bottom-right-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-pre-background);
 }

package/src/theme-live-codeblock.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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.
+ */
+
+/// <reference types="@docusaurus/theme-classic" />
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@docusaurus/theme-live-codeblock' {
+  export type ThemeConfig = {
+    liveCodeBlock: {
+      playgroundPosition: 'top' | 'bottom';
+    };
+  };
+}
+
+declare module '@theme/Playground' {
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+  import type {LiveProviderProps} from 'react-live';
+
+  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+
+  export interface Props extends CodeBlockProps, LiveProviderProps {
+    children: string;
+  }
+  export default function Playground(props: LiveProviderProps): JSX.Element;
+}
+
+declare module '@theme/ReactLiveScope' {
+  type Scope = {
+    [key: string]: unknown;
+  };
+
+  const ReactLiveScope: Scope;
+  export default ReactLiveScope;
+}

package/src/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+/// <reference types="@docusaurus/theme-classic" />
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@theme-init/CodeBlock' {
+  import type CodeBlock from '@theme/CodeBlock';
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+
+  export interface Props extends BaseProps {
+    live?: boolean;
+  }
+  const CodeBlockComp: typeof CodeBlock;
+  export default CodeBlockComp;
+}

package/src/{validateThemeConfig.js → validateThemeConfig.ts}

@@ -5,14 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {Joi} = require('@docusaurus/utils-validation');
+import {Joi} from '@docusaurus/utils-validation';
+import type {
+  ThemeConfig,
+  ThemeConfigValidationContext,
+} from '@docusaurus/types';
 
-const DEFAULT_CONFIG = {
+export const DEFAULT_CONFIG = {
   playgroundPosition: 'bottom',
 };
-exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
-const Schema = Joi.object({
+export const Schema = Joi.object<ThemeConfig>({
   liveCodeBlock: Joi.object({
     playgroundPosition: Joi.string()
       .equal('top', 'bottom')
@@ -21,8 +24,10 @@ const Schema = Joi.object({
     .label('themeConfig.liveCodeBlock')
     .default(DEFAULT_CONFIG),
 });
-exports.Schema = Schema;
 
-exports.validateThemeConfig = function ({validate, themeConfig}) {
+export function validateThemeConfig({
+  validate,
+  themeConfig,
+}: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig {
   return validate(Schema, themeConfig);
-};
+}

package/src/__tests__/validateThemeConfig.test.js

@@ -1,91 +0,0 @@
-/**
- * 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.
- */
-
-const {validateThemeConfig, DEFAULT_CONFIG} = require('../validateThemeConfig');
-
-function testValidateThemeConfig(themeConfig) {
-  function validate(schema, cfg) {
-    const {value, error} = schema.validate(cfg, {
-      convert: false,
-    });
-    if (error) {
-      throw error;
-    }
-    return value;
-  }
-
-  return validateThemeConfig({validate, themeConfig});
-}
-
-describe('validateThemeConfig', () => {
-  test('undefined config', () => {
-    const liveCodeBlock = undefined;
-    expect(testValidateThemeConfig({liveCodeBlock})).toEqual({
-      liveCodeBlock: {
-        ...DEFAULT_CONFIG,
-      },
-    });
-  });
-
-  test('unexist config', () => {
-    expect(testValidateThemeConfig({})).toEqual({
-      liveCodeBlock: {
-        ...DEFAULT_CONFIG,
-      },
-    });
-  });
-
-  test('empty config', () => {
-    const liveCodeBlock = {};
-    expect(testValidateThemeConfig({liveCodeBlock})).toEqual({
-      liveCodeBlock: {
-        ...DEFAULT_CONFIG,
-      },
-    });
-  });
-
-  test('playgroundPosition top', () => {
-    const liveCodeBlock = {
-      playgroundPosition: 'top',
-    };
-    expect(testValidateThemeConfig({liveCodeBlock})).toEqual({
-      liveCodeBlock: {
-        ...DEFAULT_CONFIG,
-        ...liveCodeBlock,
-      },
-    });
-  });
-
-  test('playgroundPosition bottom', () => {
-    const liveCodeBlock = {
-      playgroundPosition: 'bottom',
-    };
-    expect(testValidateThemeConfig({liveCodeBlock})).toEqual({
-      liveCodeBlock: {
-        ...DEFAULT_CONFIG,
-        ...liveCodeBlock,
-      },
-    });
-  });
-
-  test('playgroundPosition invalid string', () => {
-    const liveCodeBlock = {playgroundPosition: 'invalid'};
-    expect(() =>
-      testValidateThemeConfig({liveCodeBlock}),
-    ).toThrowErrorMatchingInlineSnapshot(
-      `"\\"liveCodeBlock.playgroundPosition\\" must be one of [top, bottom]"`,
-    );
-  });
-  test('playgroundPosition invalid boolean', () => {
-    const liveCodeBlock = {playgroundPosition: true};
-    expect(() =>
-      testValidateThemeConfig({liveCodeBlock}),
-    ).toThrowErrorMatchingInlineSnapshot(
-      `"\\"liveCodeBlock.playgroundPosition\\" must be one of [top, bottom]"`,
-    );
-  });
-});

package/src/index.js

@@ -1,33 +0,0 @@
-/**
- * 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.
- */
-
-const path = require('path');
-const {validateThemeConfig} = require('./validateThemeConfig');
-
-function theme() {
-  return {
-    name: 'docusaurus-theme-live-codeblock',
-
-    getThemePath() {
-      return path.resolve(__dirname, './theme');
-    },
-
-    configureWebpack() {
-      return {
-        resolve: {
-          alias: {
-            buble: path.resolve(__dirname, './custom-buble.js'),
-          },
-        },
-      };
-    },
-  };
-}
-
-module.exports = theme;
-
-theme.validateThemeConfig = validateThemeConfig;