fix docs build

nlighten-oss · Apr 30, 2024 · f0c8551 · f0c8551
1 parent d53b206
commit f0c8551
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 35 deletions.
diff --git a/docs/src/components/TransformerTester.tsx b/docs/src/components/TransformerTester.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import MonacoEditor from "../components/monaco/MonacoEditor";
 import useJSONString from "../components/hooks/useJSONString";
 
@@ -28,28 +28,6 @@ const DEFAULT_INPUT_VALUE = `{
 }`;
 
 const TransformerTester = () => {
-
-    if (process.env.NODE_ENV !== 'production') {
-        useEffect(() => {
-            window.addEventListener('error', e => {
-                if (e.message.includes('ResizeObserver loop')) {
-                    const resizeObserverErrDiv = document.getElementById(
-                        'webpack-dev-server-client-overlay-div'
-                    );
-                    const resizeObserverErr = document.getElementById(
-                        'webpack-dev-server-client-overlay'
-                    );
-                    if (resizeObserverErr) {
-                        resizeObserverErr.setAttribute('style', 'display: none');
-                    }
-                    if (resizeObserverErrDiv) {
-                        resizeObserverErrDiv.setAttribute('style', 'display: none');
-                    }
-                }
-            });
-        }, []);
-    }
-
     const [inputString, setInputString, parsedInput, inputError] = useJSONString(DEFAULT_INPUT_VALUE);
     const [transformerString, setTransformerString, parsedTransformer, transformerError] =
         useJSONString(DEFAULT_DEFINITION_VALUE);

diff --git a/docs/src/components/hooks/preventResizeObserverError.ts b/docs/src/components/hooks/preventResizeObserverError.ts
@@ -0,0 +1,27 @@
+import {useEffect} from "react";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+
+const preventResizeObserverError = () => {
+    const isBrowser = useIsBrowser();
+    useEffect(() => {
+        if (isBrowser) {
+            window.addEventListener('error', e => {
+                if (e.message.includes('ResizeObserver loop')) {
+                    const resizeObserverErrDiv = document.getElementById(
+                        'webpack-dev-server-client-overlay-div'
+                    );
+                    const resizeObserverErr = document.getElementById(
+                        'webpack-dev-server-client-overlay'
+                    );
+                    if (resizeObserverErr) {
+                        resizeObserverErr.setAttribute('style', 'display: none');
+                    }
+                    if (resizeObserverErrDiv) {
+                        resizeObserverErrDiv.setAttribute('style', 'display: none');
+                    }
+                }
+            });
+        }
+    }, [isBrowser]);
+}
+export default preventResizeObserverError;
diff --git a/docs/src/pages/playground.tsx b/docs/src/pages/playground.tsx
@@ -1,18 +1,32 @@
+import {lazy} from "react";
 import Layout from '@theme/Layout';
-import TransformerTester from "../components/TransformerTester";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import preventResizeObserverError from "../components/hooks/preventResizeObserverError";
+
+const LazyBrowserLayout = lazy(() => import("../components/TransformerTester"))
 
 const playground = () => {
-    return <Layout>
-        <div className="container" style={{
-            // @ts-ignore
-            "--ifm-container-width-xl": "1600px"
-        }}>
-            <br/>
-            <h1>Playground</h1>
-            <p>Here you can test transformers yourself...</p>
-            <TransformerTester />
-        </div>
-    </Layout>
+
+    if (ExecutionEnvironment.canUseDOM) {
+        preventResizeObserverError();
+    }
+
+    return (
+        <Layout>
+            <div className="container" style={{
+                // @ts-ignore
+                "--ifm-container-width-xl": "1600px"
+            }}>
+                <br/>
+                <h1>Playground</h1>
+                <p>Here you can test transformers yourself...</p>
+                <BrowserOnly fallback={<div>Client-Only</div>}>
+                    {() => <LazyBrowserLayout />}
+                </BrowserOnly>
+            </div>
+        </Layout>
+    );
 }
 
 export default playground;