fix(v2): evaluate code in live editor on client only (#4318)

facebook · Mar 4, 2021 · 0383dd1 · 0383dd1
1 parent 788b4a7
commit 0383dd1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js
@@ -6,26 +6,14 @@
  */
 
 import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Playground from '@theme/Playground';
 import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
 
 const withLiveEditor = (Component) => {
   const WrappedComponent = (props) => {
-    const {isClient} = useDocusaurusContext();
-    const prismTheme = usePrismTheme();
-
     if (props.live) {
-      return (
-        <Playground
-          key={isClient}
-          scope={ReactLiveScope}
-          theme={prismTheme}
-          {...props}
-        />
-      );
+      return <Playground scope={ReactLiveScope} {...props} />;
     }
 
     return <Component {...props} />;

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
@@ -9,15 +9,21 @@ import * as React from 'react';
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import usePrismTheme from '@theme/hooks/usePrismTheme';
 
 import styles from './styles.module.css';
 
-export default function Playground({children, theme, transformCode, ...props}) {
+export default function Playground({children, transformCode, ...props}) {
+  const {isClient} = useDocusaurusContext();
+  const prismTheme = usePrismTheme();
+
   return (
     <LiveProvider
-      code={children.replace(/\n$/, '')}
+      key={isClient}
+      code={isClient ? children.replace(/\n$/, '') : ''}
       transformCode={transformCode || ((code) => `${code};`)}
-      theme={theme}
+      theme={prismTheme}
       {...props}>
       <div
         className={clsx(

diff --git a/website/src/pages/examples/markdownPageExample.md b/website/src/pages/examples/markdownPageExample.md
@@ -119,3 +119,12 @@ import MyComponentSource from '!!raw-loader!@site/src/pages/examples/\_myCompone
 <CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>
 
 </BrowserWindow>
+
+## Test
+
+```jsx live
+function Demo() {
+  React.useEffect(() => console.log('mount'), []);
+  return null;
+}
+```