docs: Don't SSR hidden editor tabs (#3136)

Author: ntucker

website/docusaurus.config.ts

@@ -318,6 +318,14 @@ const config: Config = {
             to: '/docs/getting-started/resource',
             from: ['/docs/getting-started/endpoint'],
           },
+          {
+            to: '/docs/api/useQuery',
+            from: ['/rest/api/IndexEndpoint'],
+          },
+          {
+            to: '/rest/api/schema',
+            from: ['/rest/api/Schema'],
+          },
           {
             to: '/blog/2023/07/04/v0.2-release-announcement',
             from: ['/blog/2023/07/04/v8-release-announcement'],

website/src/components/DiffEditorMonaco.tsx

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 
 import { extensionToMonacoLanguage } from './Playground/extensionToMonacoLanguage';
+import { options } from './Playground/monacoOptions';
 import MonacoPreloads from './Playground/MonacoPreloads';
-import { options } from './Playground/PlaygroundMonacoEditor';
 import styles from './Playground/styles.module.css';
 import useAutoHeight from './Playground/useAutoHeight';
 

website/src/components/Playground/PlaygroundMonacoEditor.tsx

@@ -7,6 +7,7 @@ import { LiveEditor } from 'react-live';
 import './monaco-init';
 
 import { extensionToMonacoLanguage } from './extensionToMonacoLanguage';
+import { largeOptions, options } from './monacoOptions';
 import useAutoHeight from './useAutoHeight';
 
 export default function PlaygroundMonacoEditor({
@@ -15,13 +16,12 @@ export default function PlaygroundMonacoEditor({
   path = '',
   onFocus,
   tabIndex,
-  highlights,
+  highlights = undefined,
   autoFocus = false,
   large = false,
   isFocused = false,
   language = 'tsx',
-  original,
-  readOnly,
+  readOnly = false,
   ...rest
 }) {
   const editorOptions = useMemo(
@@ -103,59 +103,3 @@ export default function PlaygroundMonacoEditor({
     />
   );
 }
-
-export const options = {
-  scrollbar: { alwaysConsumeMouseWheel: false },
-  minimap: { enabled: false },
-  wordWrap: 'on',
-  scrollBeyondLastLine: false,
-  wrappingIndent: 'indent',
-  lineNumbers: 'off',
-  //glyphMargin: false,
-  folding: false,
-  // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
-  //lineDecorationsWidth: 0,
-  //lineNumbersMinChars: 0,
-  fontLigatures: true,
-  fontFamily:
-    '"Roboto Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
-  fontSize: 13,
-  lineHeight: 19,
-} as const;
-
-const largeOptions = {
-  ...options,
-  fontSize: 14,
-  lineHeight: 20,
-};
-
-/*function useMonacoWorker(
-  callback: (worker: languages.typescript.TypeScriptWorker) => void,
-): MutableRefObject<languages.typescript.TypeScriptWorker | undefined> {
-  const monaco = useMonaco();
-  const workerRef = useRef<languages.typescript.TypeScriptWorker | undefined>();
-  useEffect(() => {
-    if (!monaco) return;
-    monaco.languages.typescript
-      .getTypeScriptWorker()
-      .then(a => a())
-      .then(worker => {
-        workerRef.current = worker;
-        //callback(worker);
-      });
-  }, [monaco]);
-  return workerRef;
-}
-
-function useWorkerCB(
-  callback: (worker: languages.typescript.TypeScriptWorker) => void,
-  deps: any[],
-) {
-  const tsWorkerRef = useMonacoWorker(callback);
-
-  return useCallback((...args) => {
-    if (!tsWorkerRef.current) return;
-    callback(tsWorkerRef.current);
-  }, deps);
-}
-*/

website/src/components/Playground/PlaygroundTextEdit.tsx

@@ -2,12 +2,19 @@ import type { Fixture, Interceptor } from '@data-client/test';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Translate from '@docusaurus/Translate';
 import clsx from 'clsx';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import {
+  ComponentProps,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import React from 'react';
 import { LiveEditor } from 'react-live';
 
 import FixturePreview from './FixturePreview';
 import Header from './Header';
+import { isGoogleBot } from './isGoogleBot';
 import PlaygroundEditor from './PlaygroundEditor';
 import styles from './styles.module.css';
 import CodeTabContext from '../Demo/CodeTabContext';
@@ -77,42 +84,23 @@ export function PlaygroundTextEdit({
                 lastChild={i === codeTabs.length - 1 && large}
               />
             : null}
-            <div
+            <TextEditTab
+              hidden={closedList[i]}
               key={i}
-              className={clsx(styles.playgroundEditor, {
-                [styles.hidden]: closedList[i],
-              })}
-            >
-              <BrowserOnly
-                fallback={
-                  <LiveEditor
-                    key={i}
-                    language={language}
-                    code={codes[i]}
-                    disabled
-                  />
-                }
-              >
-                {() => (
-                  /*closedList[i] ? null : */ <PlaygroundEditor
-                    key={i}
-                    tabIndex={i}
-                    onFocus={
-                      row && !col && codeTabs.length > 1 ?
-                        handleTabSwitch
-                      : handleTabOpen
-                    }
-                    onChange={handleCodeChange[i]}
-                    code={codes[i]}
-                    path={'/' + id + '/' + path}
-                    isFocused={!closedList[i]}
-                    language={language}
-                    {...rest}
-                    large={large}
-                  />
-                )}
-              </BrowserOnly>
-            </div>
+              tabIndex={i}
+              onFocus={
+                row && !col && codeTabs.length > 1 ?
+                  handleTabSwitch
+                : handleTabOpen
+              }
+              onChange={handleCodeChange[i]}
+              code={codes[i]}
+              path={'/' + id + '/' + path}
+              isFocused={!closedList[i]}
+              language={language}
+              {...rest}
+              large={large}
+            />
           </React.Fragment>
         ),
       )}
@@ -129,6 +117,48 @@ interface PlaygroundProps {
   isPlayground?: boolean;
 }
 
+function TextEditTab({
+  hidden,
+  code,
+  language,
+  tabIndex,
+  ...rest
+}: ComponentProps<typeof PlaygroundEditor> & { hidden: boolean }) {
+  const fallback =
+    // to reduce HTML sent, in SSR don't render hidden tabs
+    hidden ? <></>
+      // google doesn't benefit from syntax highlighting, so just rendering code will greatly reduce html
+      // TODO: make this actually work in SSR for google - currently does nothing since isGoogleBot is only true client-side
+    : isGoogleBot ?
+      <pre className="prism-code language-tsx" spellCheck="false">
+        {code}
+      </pre>
+      // monaco editor doesn't work with SSR - so use LiveEditor which still shows readable code while the js loads
+    : <LiveEditor key={tabIndex} language={language} code={code} disabled />;
+  return (
+    <>
+      <div
+        key={tabIndex}
+        className={clsx(styles.playgroundEditor, {
+          [styles.hidden]: hidden,
+        })}
+      >
+        <BrowserOnly fallback={fallback}>
+          {() => (
+            <PlaygroundEditor
+              key={tabIndex}
+              tabIndex={tabIndex}
+              code={code}
+              language={language}
+              {...rest}
+            />
+          )}
+        </BrowserOnly>
+      </div>
+    </>
+  );
+}
+
 function CodeTabHeader({
   onClick,
   closed,

website/src/components/Playground/monacoOptions.tsx

@@ -0,0 +1,24 @@
+export const options = {
+  scrollbar: { alwaysConsumeMouseWheel: false },
+  minimap: { enabled: false },
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
+  wrappingIndent: 'indent',
+  lineNumbers: 'off',
+  //glyphMargin: false,
+  folding: false,
+  // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
+  //lineDecorationsWidth: 0,
+  //lineNumbersMinChars: 0,
+  fontLigatures: true,
+  fontFamily:
+    '"Roboto Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
+  fontSize: 13,
+  lineHeight: 19,
+} as const;
+
+export const largeOptions = {
+  ...options,
+  fontSize: 14,
+  lineHeight: 20,
+};