@docusaurus/theme-live-codeblock 2.0.0-beta.15 → 2.0.0-beta.16

package/lib/custom-buble.d.ts

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { features as bubleFeatures, type TransformOptions, type TransformOutput } from '@philpl/buble';
-export { bubleFeatures as features };
+import { type TransformOptions, type TransformOutput } from '@philpl/buble';
+export { features } from '@philpl/buble';
 export declare function transform(source: string, options: TransformOptions): TransformOutput;

package/lib/custom-buble.js

@@ -1,26 +1,25 @@
-"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.transform = exports.features = void 0;
 // 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 buble_1 = require("@philpl/buble");
-Object.defineProperty(exports, "features", { enumerable: true, get: function () { return buble_1.features; } });
-function transform(source, options) {
-    return (0, buble_1.transform)(source, {
-        ...options,
-        transforms: {
-            asyncAwait: false,
-            classes: false,
-            getterSetter: false,
-            ...options.transforms,
-        },
-    });
+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.
+export {features} from '@philpl/buble';
+export function transform(source, options) {
+  return bubleTransform(source, {
+    ...options,
+    transforms: {
+      asyncAwait: false,
+      classes: false,
+      getterSetter: false,
+      ...options.transforms,
+    },
+  });
 }
-exports.transform = transform;

package/lib/index.d.ts

@@ -4,6 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { DocusaurusContext, Plugin } from '@docusaurus/types';
-export default function theme(context: DocusaurusContext): Plugin;
+import type { LoadContext, Plugin } from '@docusaurus/types';
+export default function themeLiveCodeblock(context: LoadContext): Plugin;
 export { validateThemeConfig } from './validateThemeConfig';

package/lib/index.js

@@ -1,39 +1,49 @@
-"use strict";
+'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 });
+Object.defineProperty(exports, '__esModule', {value: true});
 exports.validateThemeConfig = void 0;
-const tslib_1 = require("tslib");
-const path_1 = (0, tslib_1.__importDefault)(require("path"));
-const theme_translations_1 = require("@docusaurus/theme-translations");
-function theme(context) {
-    const { i18n: { currentLocale }, } = context;
-    return {
-        name: 'docusaurus-theme-live-codeblock',
-        getThemePath() {
-            return path_1.default.resolve(__dirname, './theme');
+const tslib_1 = require('tslib');
+const path_1 = (0, tslib_1.__importDefault)(require('path'));
+const theme_translations_1 = require('@docusaurus/theme-translations');
+function themeLiveCodeblock(context) {
+  const {
+    i18n: {currentLocale},
+  } = context;
+  return {
+    name: 'docusaurus-theme-live-codeblock',
+    getThemePath() {
+      return path_1.default.resolve(__dirname, '../lib/theme');
+    },
+    getTypeScriptThemePath() {
+      return path_1.default.resolve(__dirname, '../src/theme');
+    },
+    getDefaultCodeTranslationMessages() {
+      return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+        locale: currentLocale,
+        name: 'theme-live-codeblock',
+      });
+    },
+    configureWebpack() {
+      return {
+        resolve: {
+          alias: {
+            buble: path_1.default.resolve(__dirname, './custom-buble.js'),
+          },
         },
-        getDefaultCodeTranslationMessages() {
-            return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
-                locale: currentLocale,
-                name: 'theme-live-codeblock',
-            });
-        },
-        configureWebpack() {
-            return {
-                resolve: {
-                    alias: {
-                        buble: path_1.default.resolve(__dirname, './custom-buble.js'),
-                    },
-                },
-            };
-        },
-    };
+      };
+    },
+  };
 }
-exports.default = theme;
-var validateThemeConfig_1 = require("./validateThemeConfig");
-Object.defineProperty(exports, "validateThemeConfig", { enumerable: true, get: function () { return validateThemeConfig_1.validateThemeConfig; } });
+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,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 Props } from '@theme-init/CodeBlock';
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/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) => {
   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/lib/theme/Playground/index.js

@@ -4,8 +4,7 @@
  * 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 React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
@@ -14,16 +13,13 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-
 function Header({children}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
-
 function LivePreviewLoader() {
   // Is it worth improving/translating?
   return <div>Loading...</div>;
 }
-
 function ResultWithHeader() {
   return (
     <>
@@ -48,19 +44,17 @@ function ResultWithHeader() {
     </>
   );
 }
-
 function ThemedLiveEditor() {
   const isBrowser = useIsBrowser();
   return (
     <LiveEditor
       // We force remount the editor on hydration,
       // otherwise dark prism theme is not applied
-      key={isBrowser}
+      key={String(isBrowser)}
       className={styles.playgroundEditor}
     />
   );
 }
-
 function EditorWithHeader() {
   return (
     <>
@@ -75,19 +69,17 @@ function EditorWithHeader() {
     </>
   );
 }
-
 export default function Playground({children, transformCode, ...props}) {
   const {
-    siteConfig: {
-      themeConfig: {
-        liveCodeBlock: {playgroundPosition},
-      },
-    },
+    siteConfig: {themeConfig},
   } = useDocusaurusContext();
+  const {
+    liveCodeBlock: {playgroundPosition},
+  } = themeConfig;
   const prismTheme = usePrismTheme();
-
   return (
     <div className={styles.playgroundContainer}>
+      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
         transformCode={transformCode || ((code) => `${code};`)}

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

@@ -0,0 +1,71 @@
+/**
+ * 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<React.PropsWithChildren<P_21>>, nextProps: Readonly<React.PropsWithChildren<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 (...args: any[]) => any>(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;
+    Children: React.ReactChildren;
+    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

@@ -4,13 +4,10 @@
  * 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

@@ -6,12 +6,11 @@
  */
 import { Joi } from '@docusaurus/utils-validation';
 import type { ThemeConfig, Validate, ValidationResult } from '@docusaurus/types';
-declare const DEFAULT_CONFIG: {
+export declare const DEFAULT_CONFIG: {
     playgroundPosition: string;
 };
-declare const Schema: Joi.ObjectSchema<any>;
-declare function validateThemeConfig({ validate, themeConfig, }: {
+export declare const Schema: Joi.ObjectSchema<any>;
+export declare function validateThemeConfig({ validate, themeConfig, }: {
     validate: Validate<ThemeConfig>;
     themeConfig: ThemeConfig;
 }): ValidationResult<ThemeConfig>;
-export { DEFAULT_CONFIG, Schema, validateThemeConfig };

package/lib/validateThemeConfig.js

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

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@docusaurus/theme-live-codeblock",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "description": "Docusaurus live code block component.",
   "main": "lib/index.js",
+  "types": "src/theme-live-codeblock.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc && node copyUntypedFiles.mjs",
-    "watch": "node copyUntypedFiles.mjs && tsc --watch"
+    "build": "yarn build:server && yarn build:client && yarn build:copy && yarn build:format",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build:client": "tsc --project tsconfig.client.json",
+    "build:copy": "node copyUntypedFiles.mjs",
+    "build:format": "prettier --config ../../.prettierrc --write \"lib/**/*.js\""
   },
   "repository": {
     "type": "git",
@@ -17,20 +21,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/theme-common": "2.0.0-beta.15",
-    "@docusaurus/theme-translations": "2.0.0-beta.15",
-    "@docusaurus/utils-validation": "2.0.0-beta.15",
+    "@docusaurus/core": "2.0.0-beta.16",
+    "@docusaurus/theme-common": "2.0.0-beta.16",
+    "@docusaurus/theme-translations": "2.0.0-beta.16",
+    "@docusaurus/utils-validation": "2.0.0-beta.16",
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",
-    "fs-extra": "^10.0.0",
-    "parse-numeric-range": "^1.3.0",
-    "prism-react-renderer": "^1.2.1",
+    "fs-extra": "^10.0.1",
     "react-live": "2.2.3",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@docusaurus/types": "2.0.0-beta.15",
+    "@docusaurus/types": "2.0.0-beta.16",
     "@types/buble": "^0.20.1"
   },
   "peerDependencies": {
@@ -40,5 +42,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "6cfad16436c07d8d11e5c2e1486dc59afd483e33"
+  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
 }

package/src/custom-buble.ts

@@ -10,7 +10,6 @@
 // https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
 import {
   transform as bubleTransform,
-  features as bubleFeatures,
   type TransformOptions,
   type TransformOutput,
 } from '@philpl/buble';
@@ -18,7 +17,7 @@ import {
 // 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 {bubleFeatures as features};
+export {features} from '@philpl/buble';
 
 export function transform(
   source: string,

package/src/deps.d.ts

@@ -7,7 +7,7 @@
 
 declare module '@philpl/buble' {
   import type {TransformOptions as OriginalTransformOptions} from 'buble';
-  // eslint-disable-next-line import/no-extraneous-dependencies
+  // eslint-disable-next-line import/no-extraneous-dependencies, no-restricted-syntax
   export * from 'buble';
   export const features: string[];
   export interface TransformOptions extends OriginalTransformOptions {

package/src/index.ts

@@ -7,9 +7,9 @@
 
 import path from 'path';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
-import type {DocusaurusContext, Plugin} from '@docusaurus/types';
+import type {LoadContext, Plugin} from '@docusaurus/types';
 
-export default function theme(context: DocusaurusContext): Plugin {
+export default function themeLiveCodeblock(context: LoadContext): Plugin {
   const {
     i18n: {currentLocale},
   } = context;
@@ -18,7 +18,10 @@ export default function theme(context: DocusaurusContext): Plugin {
     name: 'docusaurus-theme-live-codeblock',
 
     getThemePath() {
-      return path.resolve(__dirname, './theme');
+      return path.resolve(__dirname, '../lib/theme');
+    },
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, '../src/theme');
     },
 
     getDefaultCodeTranslationMessages() {

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

@@ -8,11 +8,12 @@
 import React from 'react';
 import Playground from '@theme/Playground';
 import ReactLiveScope from '@theme/ReactLiveScope';
-import CodeBlock from '@theme-init/CodeBlock';
+import CodeBlock, {type Props} from '@theme-init/CodeBlock';
 
-const withLiveEditor = (Component) => {
-  function WrappedComponent(props) {
+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} />;
     }
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as React from 'react';
+import React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
@@ -14,8 +14,10 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import type {Props} from '@theme/Playground';
+import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
 
-function Header({children}) {
+function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
@@ -55,7 +57,7 @@ function ThemedLiveEditor() {
     <LiveEditor
       // We force remount the editor on hydration,
       // otherwise dark prism theme is not applied
-      key={isBrowser}
+      key={String(isBrowser)}
       className={styles.playgroundEditor}
     />
   );
@@ -76,18 +78,22 @@ function EditorWithHeader() {
   );
 }
 
-export default function Playground({children, transformCode, ...props}) {
+export default function Playground({
+  children,
+  transformCode,
+  ...props
+}: Props): JSX.Element {
   const {
-    siteConfig: {
-      themeConfig: {
-        liveCodeBlock: {playgroundPosition},
-      },
-    },
+    siteConfig: {themeConfig},
   } = useDocusaurusContext();
+  const {
+    liveCodeBlock: {playgroundPosition},
+  } = themeConfig as ThemeConfig;
   const prismTheme = usePrismTheme();
 
   return (
     <div className={styles.playgroundContainer}>
+      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
         transformCode={transformCode || ((code) => `${code};`)}

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

@@ -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.
+ */
+
+declare module '@docusaurus/theme-live-codeblock' {
+  export type ThemeConfig = {
+    liveCodeBlock: {
+      playgroundPosition: 'top' | 'bottom';
+    };
+  };
+}
+
+declare module '@theme/Playground' {
+  import type {LiveProviderProps} from 'react-live';
+
+  export interface Props extends LiveProviderProps {
+    children: string;
+  }
+  export default function Playground(props: LiveProviderProps): JSX.Element;
+}
+
+declare module '@theme/ReactLiveScope' {
+  interface Scope {
+    [key: string]: unknown;
+  }
+
+  const ReactLiveScope: Scope;
+  export default ReactLiveScope;
+}

package/src/types.d.ts

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

package/src/validateThemeConfig.ts

@@ -8,11 +8,11 @@
 import {Joi} from '@docusaurus/utils-validation';
 import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
 
-const DEFAULT_CONFIG = {
+export const DEFAULT_CONFIG = {
   playgroundPosition: 'bottom',
 };
 
-const Schema = Joi.object({
+export const Schema = Joi.object({
   liveCodeBlock: Joi.object({
     playgroundPosition: Joi.string()
       .equal('top', 'bottom')
@@ -22,7 +22,7 @@ const Schema = Joi.object({
     .default(DEFAULT_CONFIG),
 });
 
-function validateThemeConfig({
+export function validateThemeConfig({
   validate,
   themeConfig,
 }: {
@@ -31,5 +31,3 @@ function validateThemeConfig({
 }): ValidationResult<ThemeConfig> {
   return validate(Schema, themeConfig);
 }
-
-export {DEFAULT_CONFIG, Schema, validateThemeConfig};