chore(live-code): replace with react-runner

packages/docusaurus-theme-live-codeblock/package.json

@@ -25,10 +25,10 @@
     "@docusaurus/theme-common": "2.0.0-beta.17",
     "@docusaurus/theme-translations": "2.0.0-beta.17",
     "@docusaurus/utils-validation": "2.0.0-beta.17",
-    "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",
     "fs-extra": "^10.0.1",
-    "react-live": "2.2.3",
+    "react-live-runner": "^1.0.0-rc.2",
+    "react-runner": "^1.0.0-rc.2",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

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

@@ -30,16 +30,6 @@ export default function themeLiveCodeblock(context: LoadContext): Plugin {
         name: 'theme-live-codeblock',
       });
     },
-
-    configureWebpack() {
-      return {
-        resolve: {
-          alias: {
-            buble: path.resolve(__dirname, './custom-buble.js'),
-          },
-        },
-      };
-    },
   };
 }
 

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

@@ -14,12 +14,12 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
-  import type {LiveProviderProps} from 'react-live';
+  import type {LiveProviderProps} from 'react-live-runner';
 
   export interface Props extends LiveProviderProps {
-    children: string;
+    children?: string;
   }
-  export default function Playground(props: LiveProviderProps): JSX.Element;
+  export default function Playground(props: Props): JSX.Element;
 }
 
 declare module '@theme/ReactLiveScope' {

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

@@ -6,11 +6,15 @@
  */
 
 import React from 'react';
-import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
+import {
+  LiveProvider,
+  LiveEditor,
+  LiveError,
+  LivePreview,
+} from 'react-live-runner';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import BrowserOnly from '@docusaurus/BrowserOnly';
 import {usePrismTheme} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
@@ -21,11 +25,6 @@ function Header({children}: {children: React.ReactNode}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
 }
 
-function LivePreviewLoader() {
-  // Is it worth improving/translating?
-  return <div>Loading...</div>;
-}
-
 function ResultWithHeader() {
   return (
     <>
@@ -36,16 +35,9 @@ function ResultWithHeader() {
           Result
         </Translate>
       </Header>
-      {/* https://github.com/facebook/docusaurus/issues/5747 */}
       <div className={styles.playgroundPreview}>
-        <BrowserOnly fallback={<LivePreviewLoader />}>
-          {() => (
-            <>
-              <LivePreview />
-              <LiveError />
-            </>
-          )}
-        </BrowserOnly>
+        <LivePreview />
+        <LiveError />
       </div>
     </>
   );
@@ -93,10 +85,9 @@ export default function Playground({
 
   return (
     <div className={styles.playgroundContainer}>
-      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
-        code={children.replace(/\n$/, '')}
-        transformCode={transformCode || ((code) => `${code};`)}
+        code={children?.replace(/\n$/, '')}
+        transformCode={transformCode}
         theme={prismTheme}
         {...props}>
         {playgroundPosition === 'top' ? (

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-// Add react-live imports you need here
+// Add globals you need here
 const ReactLiveScope = {
   React,
   ...React,

packages/docusaurus/src/webpack/base.ts

@@ -229,6 +229,13 @@ export async function createBaseConfig(
             }),
           ],
         },
+        // See https://github.com/webpack/webpack/issues/11467
+        {
+          test: /\.m?js$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
         {
           test: CSS_REGEX,
           exclude: CSS_MODULE_REGEX,

website/docs/api/themes/theme-live-codeblock.md

@@ -5,7 +5,7 @@ title: '📦 theme-live-codeblock'
 slug: '/api/themes/@docusaurus/theme-live-codeblock'
 ---
 
-This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor) documentation.
+This theme provides a `@theme/CodeBlock` component that is powered by react-runner. You can read more on [interactive code editor](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor) documentation.
 
 ```bash npm2yarn
 npm install --save @docusaurus/theme-live-codeblock

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -263,7 +263,7 @@ In the future, we may extend the magic comment system and let you define custom
 
 ## Interactive code editor {#interactive-code-editor}
 
-(Powered by [React Live](https://github.com/FormidableLabs/react-live))
+(Powered by [React Runner](https://github.com/nihgwu/react-runner))
 
 You can create an interactive coding editor with the `@docusaurus/theme-live-codeblock` plugin.
 
@@ -339,13 +339,13 @@ function Clock(props) {
 
 ### Imports {#imports}
 
-:::caution react-live and imports
+:::caution globals and imports
 
-It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+To use components in the live code editor, you have to define available globals or imports upfront.
 
 :::
 
-By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
+By default, all React imports are available as globals. If you need more globals or imports available, swizzle the live code scope:
 
 ```bash npm2yarn
 npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
@@ -371,7 +371,7 @@ const ButtonExample = (props) => (
 );
 // highlight-end
 
-// Add react-live imports you need here
+// Add globals you need here
 const ReactLiveScope = {
   React,
   ...React,

website/src/theme/ReactLiveScope/index.ts

@@ -8,7 +8,7 @@
 import React from 'react';
 import * as components from './components';
 
-// Add react-live imports you need here
+// Add globals you need here
 export default {
   React,
   ...React,