From 3f6f04cb92342a4c101f831d4e82a239604a92b5 Mon Sep 17 00:00:00 2001
From: Nick Gerleman <ngerlem@meta.com>
Date: Tue, 19 Dec 2023 12:46:26 -0800
Subject: [PATCH] Don't include code in SSR generation of Playground endpoint
 (#1518)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1518

We allow arbitrary code in the query param, that static site generation doesn't know about. Current experience in production build is confusing, since you can see a flash of one set of code (playground default), quickly change to another. It is less confusing to have it go from blank to code showing.

Reviewed By: yungsters

Differential Revision: D52162928

fbshipit-source-id: fc7b51455682351a0616be8b9ecf557122d3a8db
---
 .../src/components/Playground.module.css      |  4 ++
 website-next/src/components/Playground.tsx    | 12 +-----
 website-next/src/pages/playground.tsx         | 38 ++++++++++++++++---
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/website-next/src/components/Playground.module.css b/website-next/src/components/Playground.module.css
index c1c6a3f4..9c89296e 100644
--- a/website-next/src/components/Playground.module.css
+++ b/website-next/src/components/Playground.module.css
@@ -101,6 +101,10 @@ html[data-theme='dark'] {
     height: unset;
   }
 
+  .playgroundEditor :global(.prism-code) {
+    min-height: 10em;
+  }
+
   .playgroundRow {
     flex-direction: column;
     padding-inline: 5px;
diff --git a/website-next/src/components/Playground.tsx b/website-next/src/components/Playground.tsx
index dd0e6c75..9887eb30 100644
--- a/website-next/src/components/Playground.tsx
+++ b/website-next/src/components/Playground.tsx
@@ -28,16 +28,8 @@ import type {StyleNode} from './YogaViewer';
 
 import styles from './Playground.module.css';
 
-const defaultCode = `
-<Layout config={{useWebDefaults: false}}>
-  <Node style={{width: 350, height: 350, padding: 20}}>
-    <Node style={{flex: 1}} />
-  </Node>
-</Layout>
-`.trim();
-
 export type Props = Readonly<{
-  code?: string;
+  code: string;
   height?: CSSProperties['height'];
   autoFocus?: boolean;
 }>;
@@ -46,7 +38,7 @@ export default function Playground({code, height, autoFocus}: Props) {
   const prismTheme = usePrismTheme();
   const editorScrollRef = useRef<HTMLDivElement>(null);
 
-  const [liveCode, setLiveCode] = useState(code ?? defaultCode);
+  const [liveCode, setLiveCode] = useState(code);
   const [hasCodeChanged, setHasCodeChanged] = useState(false);
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
 
diff --git a/website-next/src/pages/playground.tsx b/website-next/src/pages/playground.tsx
index 7522b6e7..d16be6f4 100644
--- a/website-next/src/pages/playground.tsx
+++ b/website-next/src/pages/playground.tsx
@@ -12,18 +12,44 @@ import lzString from 'lz-string';
 import Playground from '../components/Playground';
 
 import styles from './playground.module.css';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+const defaultCode = `
+<Layout config={{useWebDefaults: false}}>
+  <Node style={{width: 350, height: 350, padding: 20}}>
+    <Node style={{flex: 1}} />
+  </Node>
+</Layout>
+`.trim();
 
 export default function PlaygroundPage(): JSX.Element {
-  const params = new URLSearchParams(useLocation().search);
-  const codeParam = params.get('code');
-  const code = codeParam
-    ? lzString.decompressFromEncodedURIComponent(codeParam)
-    : undefined;
+  const code = useCodeFromQueryParam();
 
   return (
     // @ts-ignore missing prop for `wrapperClassName`
     <Layout wrapperClassName={styles.bg} title="Playground">
-      <Playground height="max(80vh, 600px)" code={code} autoFocus={true} />
+      <Playground
+        height="max(80vh, 600px)"
+        code={code}
+        autoFocus={true}
+        key={String(useIsBrowser())}
+      />
     </Layout>
   );
 }
+
+function useCodeFromQueryParam(): string {
+  const location = useLocation();
+
+  // We don't know the query param ahead of time when doing SSR, so just render
+  // blank to avoid the appearance of code changing.
+  if (!useIsBrowser()) {
+    return '';
+  }
+
+  const params = new URLSearchParams(location.search);
+  const codeParam = params.get('code');
+  return codeParam
+    ? lzString.decompressFromEncodedURIComponent(codeParam)
+    : defaultCode;
+}