make react-live client side

bruceharrison1984 · Jul 24, 2023 · 78b7a77 · 78b7a77
1 parent 52237bc
commit 78b7a77
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 94 deletions.
diff --git a/apps/schedulely-docs/components/pre.tsx b/apps/schedulely-docs/components/pre.tsx
@@ -1,11 +1,22 @@
 import { Highlight, themes } from 'prism-react-renderer';
-import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live';
 import { Schedulely } from 'schedulely';
 import { generateEvents } from './helpers.stories';
-import React, { PropsWithChildren, isValidElement } from 'react';
+import React, {
+  PropsWithChildren,
+  isValidElement,
+  useEffect,
+  useState,
+} from 'react';
 import ReactDOMServer from 'react-dom/server';
 import he from 'he';
 
+type ClientSideLiveReloadElements = {
+  liveProvider: any;
+  livePreview: any;
+  liveEditor: any;
+  liveError: any;
+};
+
 export const LivePre = (props: PropsWithChildren) => {
   const children = props.children as JSX.Element;
   const options = children.props.className.split(',');
@@ -15,24 +26,43 @@ export const LivePre = (props: PropsWithChildren) => {
     ReactDOMServer.renderToString(children.props.children)
   );
 
-  if (live && isValidElement(props.children) && children.type.name === 'Code') {
+  const [reactLiveComponents, setReactLiveComponents] = useState<
+    ClientSideLiveReloadElements | undefined
+  >();
+
+  useEffect(() => {
+    import('react-live').then((x) =>
+      setReactLiveComponents({
+        liveEditor: x.LiveEditor,
+        livePreview: x.LivePreview,
+        liveProvider: x.LiveProvider,
+        liveError: x.LiveError,
+      })
+    );
+  }, []);
+
+  if (
+    live &&
+    reactLiveComponents &&
+    isValidElement(props.children) &&
+    children.type.name === 'Code'
+  ) {
     return (
-      <LiveProvider
+      <reactLiveComponents.liveProvider
         code={code}
         language={language}
         scope={{ React, generateEvents, Schedulely }} // <-- inject objects you need access to
         noInline={true}
-        enableTypeScript={true}
         theme={themes.vsDark}
       >
-        <LivePreview />
-        <LiveError />
-        <LiveEditor
+        <reactLiveComponents.livePreview />
+        <reactLiveComponents.liveError />
+        <reactLiveComponents.liveEditor
           code={code}
           language={language}
           style={{ borderRadius: '0.5em', overflow: 'hidden' }}
         />
-      </LiveProvider>
+      </reactLiveComponents.liveProvider>
     );
   }
 

diff --git a/apps/schedulely-docs/package.json b/apps/schedulely-docs/package.json
@@ -32,5 +32,8 @@
   },
   "devDependencies": {
     "@types/node": "18.11.10"
+  },
+  "overrides": {
+    "prism-react-renderer": "^2.0.6"
   }
 }