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

facebook · Feb 3, 2022 · 4b41560 · 4b41560
1 parent 6ec0db4
commit 4b41560
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 179 deletions.
diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
@@ -25,12 +25,10 @@
     "@docusaurus/theme-common": "2.0.0-beta.15",
     "@docusaurus/theme-translations": "2.0.0-beta.15",
     "@docusaurus/utils-validation": "2.0.0-beta.15",
-    "@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",
-    "react-live": "2.2.3",
+    "react-live-runner": "^1.0.0-rc.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

diff --git a/packages/docusaurus-theme-live-codeblock/src/custom-buble.ts b/packages/docusaurus-theme-live-codeblock/src/custom-buble.ts
diff --git a/packages/docusaurus-theme-live-codeblock/src/deps.d.ts b/packages/docusaurus-theme-live-codeblock/src/deps.d.ts
diff --git a/packages/docusaurus-theme-live-codeblock/src/index.ts b/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'),
-          },
-        },
-      };
-    },
   };
 }
 

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -14,7 +14,7 @@ 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;

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/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,7 +85,6 @@ 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};`)}

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.tsx b/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 global variables you need here
 const ReactLiveScope = {
   React,
   ...React,

diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
@@ -229,6 +229,12 @@ export function createBaseConfig(
             }),
           ],
         },
+        {
+          test: /\.m?js$/,
+          resolve: {
+            fullySpecified: false,
+          },
+        },
         {
           test: CSS_REGEX,
           exclude: CSS_MODULE_REGEX,

diff --git a/website/src/theme/ReactLiveScope/index.ts b/website/src/theme/ReactLiveScope/index.ts
@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import * as components from './components';
+import {ButtonExample} from './components';
 
 // Add react-live imports you need here
 const ReactLiveScope = {
   React,
   ...React,
-  ...components,
+  ButtonExample,
 };
 
 export default ReactLiveScope;