simplify LiveCodeBlock entrypoint

packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts

@@ -25,6 +25,7 @@ const plugin: Plugin<unknown[], Root> = function plugin(): Transformer<Root> {
       node.data.hProperties = node.data.hProperties || {};
       node.data.hProperties.metastring = node.meta;
 
+      // TODO Docusaurus v4: remove special case
       // Retrocompatible support for live codeblock metastring
       // Not really the appropriate place to handle that :s
       node.data.hProperties.live = node.meta?.split(' ').includes('live');

packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts

@@ -16,6 +16,14 @@ declare module '@docusaurus/theme-live-codeblock' {
   };
 }
 
+declare module '@theme/LiveCodeBlock' {
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+
+  export interface Props extends BaseProps {}
+
+  export default function LiveCodeBlock(props: Props): ReactNode;
+}
+
 declare module '@theme/Playground' {
   import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx

@@ -5,21 +5,28 @@
  * 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';
+import React, {type ReactNode} from 'react';
+import type {Props as CodeBlockProps} from '@theme/CodeBlock';
+import OriginalCodeBlock from '@theme-init/CodeBlock';
+import LiveCodeBlock from '@theme/LiveCodeBlock';
 
-const withLiveEditor = (Component: typeof CodeBlock) => {
-  function WrappedComponent(props: Props) {
-    if (props.live) {
-      return <Playground scope={ReactLiveScope} {...props} />;
-    }
-
-    return <Component {...props} />;
+// TODO Docusaurus v4: remove special case
+//  see packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts
+//  we can just use the metastring instead
+declare module '@theme/CodeBlock' {
+  interface Props {
+    live?: boolean;
   }
+}
 
-  return WrappedComponent;
-};
+function isLiveCodeBlock(props: CodeBlockProps): boolean {
+  return !!props.live;
+}
 
-export default withLiveEditor(CodeBlock);
+export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode {
+  return isLiveCodeBlock(props) ? (
+    <LiveCodeBlock {...props} />
+  ) : (
+    <OriginalCodeBlock {...props} />
+  );
+}

packages/docusaurus-theme-live-codeblock/src/theme/LiveCodeBlock/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * 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, {type ReactNode} from 'react';
+import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
+import type {Props} from '@theme/LiveCodeBlock';
+
+export default function LiveCodeBlock(props: Props): ReactNode {
+  return <Playground scope={ReactLiveScope} {...props} />;
+}

packages/docusaurus-theme-live-codeblock/src/types.d.ts

@@ -1,20 +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.
- */
-
-/// <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;
-}