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

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

@@ -27,10 +27,9 @@
     "@docusaurus/theme-common": "2.0.0-beta.21",
     "@docusaurus/theme-translations": "2.0.0-beta.21",
     "@docusaurus/utils-validation": "2.0.0-beta.21",
-    "@philpl/buble": "^0.19.7",
     "clsx": "^1.1.1",
     "fs-extra": "^10.1.0",
-    "react-live": "2.2.3",
+    "react-live-runner": "^1.0.4",
     "tslib": "^2.4.0"
   },
   "devDependencies": {

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

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

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

@@ -17,15 +17,12 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
-  import type {Props as BaseProps} from '@theme/CodeBlock';
-  import type {LiveProviderProps} from 'react-live';
+  import type {LiveProviderProps} from 'react-live-runner';
 
-  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
-
-  export interface Props extends CodeBlockProps, LiveProviderProps {
-    children: string;
+  export interface Props extends LiveProviderProps {
+    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,12 +6,16 @@
  */
 
 import React from 'react';
+import {
+  LiveProvider,
+  LiveEditor,
+  LiveError,
+  LivePreview,
+} from 'react-live-runner';
 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';
 
@@ -22,12 +26,6 @@ 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 (
     <>
@@ -38,16 +36,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,15 +84,11 @@ export default function Playground({
   } = 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};`)}
+        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,

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

@@ -3,9 +3,7 @@ sidebar_position: 3
 slug: /api/themes/@docusaurus/theme-live-codeblock
 ---
 
-# 📦 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

@@ -430,7 +430,7 @@ export default MyComponent;
 
 ## 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. First, add the plugin to your package.
 
@@ -510,13 +510,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
@@ -542,7 +542,7 @@ const ButtonExample = (props) => (
 );
 // highlight-end
 
-// Add react-live imports you need here
+// Add globals you need here
 const ReactLiveScope = {
   React,
   ...React,
@@ -573,42 +573,6 @@ function MyPlayground(props) {
 </BrowserWindow>
 ```
 
-### Imperative Rendering (noInline)
-
-The `noInline` option should be used to avoid errors when your code spans multiple components or variables.
-
-````md
-```jsx live noInline
-const project = 'Docusaurus';
-
-const Greeting = () => <p>Hello {project}!</p>;
-
-render(<Greeting />);
-```
-````
-
-Unlike an ordinary interactive code block, when using `noInline` React Live won't wrap your code in an inline function to render it.
-
-You will need to explicitly call `render()` at the end of your code to display the output.
-
-````mdx-code-block
-<BrowserWindow>
-
-```jsx live noInline
-const project = "Docusaurus";
-
-const Greeting = () => (
-  <p>Hello {project}!</p>
-);
-
-render(
-  <Greeting />
-);
-```
-
-</BrowserWindow>
-````
-
 ## Using JSX markup in code blocks {#using-jsx-markup}
 
 Code block in Markdown always preserves its content as plain text, meaning you can't do something like:

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,