fix: SSR considerations

Author: kausko

docusaurus.config.ts

@@ -129,7 +129,7 @@ const config: Config = {
   } satisfies Preset.ThemeConfig,
 
   clientModules: [
-    'node_modules/provenance-widgets/web-components/index.js'
+    require.resolve('./src/pw.js')
   ],
 
   themes: ['@docusaurus/theme-live-codeblock'],

src/components/lib/AbstractSelectionComponent.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { MultiselectComponent } from 'provenance-widgets';
 import type { NgWebComponent } from './types';
 import StateView from './StateView';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 type AbstractProps = Pick<MultiselectComponent, 'provenance' | 'provenanceChange' | 'selectedChange' | 'visualize' | 'freeze' | 'selected'>;
 
@@ -15,9 +16,11 @@ interface SelectionProps extends AbstractProps {
 }
 
 export default function AbstractSelectionComponent (props: SelectionProps) {
+    
+    const isBrowser = useIsBrowser();
+    if (!isBrowser) return <div>loading...</div>
 
     const ref = React.useRef<HTMLDivElement>(null);
-
     const [selected, setSelected] = React.useState<any>(null);
     const [provenance, setProvenance] = React.useState<any>({});
 

src/components/lib/ProvenanceInputText.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import type { InputtextComponent } from 'provenance-widgets';
 import type { NgWebComponent } from './types';
 import StateView from './StateView';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 type InputtextComponentProps = Pick<InputtextComponent, 'id' | 'value' | 'visualize' | 'freeze' | 'provenance' | 'provenanceChange' | 'valueChange'>;
 
 export default function ProvenanceInputText(props: InputtextComponentProps) {
+    
+    const isBrowser = useIsBrowser();
+    if (!isBrowser) return <div>loading...</div>
+    
     const ref = React.useRef<HTMLDivElement>(null);
 
     const [value, setValue] = React.useState<any>(null);

src/components/lib/ProvenanceSlider.tsx

@@ -2,10 +2,14 @@ import React from 'react';
 import type { SliderComponent } from 'provenance-widgets';
 import type { NgWebComponent } from './types';
 import StateView from './StateView';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 type SliderComponentProps = Pick<SliderComponent, 'id' | 'mode' | 'value' | 'highValue' | 'options' | 'provenance' | 'provenanceChange' | 'selectedChange' | 'visualize' | 'freeze'>;
 
 export default function ProvenanceSlider (props: SliderComponentProps) {
+    
+  const isBrowser = useIsBrowser();
+  if (!isBrowser) return <div>loading...</div>
 
   const ref = React.useRef<HTMLDivElement>(null);
 

src/components/lib/StateView.tsx

@@ -1,4 +1,6 @@
-import ReactJson, { ReactJsonViewProps } from '@microlink/react-json-view'
+import BrowserOnly from '@docusaurus/BrowserOnly';
+// import ReactJson, { ReactJsonViewProps } from '@microlink/react-json-view'
+import type { ReactJsonViewProps } from '@microlink/react-json-view'
 
 interface StateViewProps {
     selected: any;
@@ -14,19 +16,26 @@ const reactJsonProps: Omit<ReactJsonViewProps, 'src'> = {
 export default function StateView(props: StateViewProps) {
     return (
         <div className="row margin-top--md">
-            <div className="col col--6">
-                <ReactJson src={props.provenance} name="provenance" {...reactJsonProps} />
-            </div>
-            {
-                props.selected !== null &&
-                <div className="col col--6">
-                    {
-                        typeof props.selected === 'string' ?
-                        <code style={{ color: "black" }}>"{props.selectedAlias || "selected"}": "{props.selected}"</code> :
-                        <ReactJson src={props.selected} name={props.selectedAlias || "selected"} {...reactJsonProps} />
-                    }
-                </div>
-            }
+            <BrowserOnly>
+                {() => {
+                    const ReactJson = require('@microlink/react-json-view').default;
+                    return <>
+                        <div className="col col--6">
+                            <ReactJson src={props.provenance} name="provenance" {...reactJsonProps} />
+                        </div>
+                        {
+                            props.selected !== null &&
+                            <div className="col col--6">
+                                {
+                                    typeof props.selected === 'string' ?
+                                        <code style={{ color: "black" }}>"{props.selectedAlias || "selected"}": "{props.selected}"</code> :
+                                        <ReactJson src={props.selected} name={props.selectedAlias || "selected"} {...reactJsonProps} />
+                                }
+                            </div>
+                        }
+                    </>
+                }}
+            </BrowserOnly>
         </div>
     )
 }

src/pw.js

@@ -0,0 +1,3 @@
+if (typeof window !== "undefined") {
+    require('../node_modules/provenance-widgets/web-components/index.js')
+}