internal: Clean up Playground component interfaces and data flow (#3781)

ntucker · web-flow · commit 31fd29192758 · 2026-03-08T19:25:52.000-04:00
* internal: Clean up Playground component types and logic

Fix parseCodeBlockPath accessing wrong regex named group (groups.title
instead of groups.path). Add missing TypeScript prop types to Boundary,
transformCode, PlaygroundLiveEditor, and PlaygroundTextEdit sub-components.
Simplify collapsed/column metastring regexes. Fix MonacoPreloads guard
flag placement.

Made-with: Cursor

* bugbot

* internal: Simplify Playground interfaces and data flow

- Extract shared PreviewProps&lt;T&gt; and FixtureOrInterceptor&lt;T&gt; types
- Inline PreviewWithHeader into PreviewWithScope (trivial passthrough)
- Consolidate bot/mobile detection into single module
- Type PlaygroundProps properly (remove any)
- Derive selectedValue from storage instead of render-time setState
- Simplify Reversible component logic

Made-with: Cursor
diff --git a/website/src/components/Playground/FixturePreview.tsx b/website/src/components/Playground/FixturePreview.tsx
@@ -1,11 +1,11 @@
-import type { Fixture, Interceptor } from '@data-client/test';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
 import { memo, type ReactElement } from 'react';
 
 import styles from './styles.module.css';
+import type { FixtureOrInterceptor } from './types';
 
-function FixturePreview({ fixtures }: { fixtures: (Fixture | Interceptor)[] }) {
+function FixturePreview({ fixtures }: { fixtures: FixtureOrInterceptor[] }) {
   return (
     <div className={styles.fixtureBlock}>
       {fixtures.map((fixture, i) => (
@@ -19,7 +19,7 @@ export default memo(FixturePreview);
 function FixtureResponse({
   fixture,
 }: {
-  fixture: Fixture | Interceptor;
+  fixture: FixtureOrInterceptor;
 }): ReactElement {
   return (
     'fetchResponse' in fixture ?
@@ -47,7 +47,7 @@ function FixtureResponse({
 function FixtureOrInterceptor({
   fixture,
 }: {
-  fixture: Fixture | Interceptor;
+  fixture: FixtureOrInterceptor;
 }): JSX.Element {
   if ('args' in fixture) {
     return (
diff --git a/website/src/components/Playground/MonacoPreloads.tsx b/website/src/components/Playground/MonacoPreloads.tsx
@@ -31,6 +31,7 @@ const workerPreloads = [
   `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}/min/vs/assets/editor.worker-Be8ye1pW.js`,
 ];
 
+// Regex must match isMobileOrBot in isMobileOrBot.ts (cannot import into script string)
 const preloadScript = `
 if (!/bot|googlebot|crawler|spider|robot|crawling|Mobile|Android|BlackBerry/i.test(
   navigator.userAgent,
diff --git a/website/src/components/Playground/PlaygroundTextEdit.tsx b/website/src/components/Playground/PlaygroundTextEdit.tsx
@@ -1,4 +1,3 @@
-import type { Fixture, Interceptor } from '@data-client/test';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import Translate from '@docusaurus/Translate';
 import clsx from 'clsx';
@@ -14,9 +13,11 @@ import { LiveEditor } from 'react-live';
 
 import FixturePreview from './FixturePreview';
 import Header from './Header';
-import { isGoogleBot } from './isGoogleBot';
+import { isGoogleBot } from './isMobileOrBot';
 import PlaygroundEditor from './PlaygroundEditor';
 import styles from './styles.module.css';
+import type { FixtureOrInterceptor } from './types';
+import type { CodeTab, UseCodeReturn } from './useCode';
 import CodeTabContext from '../Demo/CodeTabContext';
 
 export function PlaygroundTextEdit({
@@ -108,11 +109,11 @@ export function PlaygroundTextEdit({
   );
 }
 interface PlaygroundProps {
-  fixtures: (Fixture | Interceptor)[];
+  fixtures: FixtureOrInterceptor[];
   row: boolean;
-  codeTabs: any;
-  handleCodeChange: any;
-  codes: any;
+  codeTabs: CodeTab[];
+  handleCodeChange: UseCodeReturn['handleCodeChange'];
+  codes: UseCodeReturn['codes'];
   large?: boolean;
   isPlayground?: boolean;
 }
@@ -281,7 +282,7 @@ function EditorHeader({
   fixtures = [],
 }: {
   title?: React.ReactNode;
-  fixtures?: (Fixture | Interceptor)[];
+  fixtures?: FixtureOrInterceptor[];
 }) {
   const { values } = useContext(CodeTabContext);
   const hasTabs = values.length > 0;
diff --git a/website/src/components/Playground/Preview.tsx b/website/src/components/Playground/Preview.tsx
@@ -4,18 +4,15 @@ import {
   SubscriptionManager,
   NetworkManager,
 } from '@data-client/react';
-import {
-  type Fixture,
-  type Interceptor,
-  MockResolver,
-} from '@data-client/test/browser';
+import { MockResolver } from '@data-client/test/browser';
 import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal';
 import clsx from 'clsx';
-import React, { memo, useCallback, useState, useMemo, lazy } from 'react';
+import React, { memo, useCallback, useMemo, lazy } from 'react';
 
 import Boundary from './Boundary';
 import StoreInspector from './StoreInspector';
 import styles from './styles.module.css';
+import type { PreviewProps } from './types';
 import { useTabStorage } from '../../utils/tabStorage';
 
 function Preview<T>({
@@ -24,31 +21,21 @@ function Preview<T>({
   row,
   fixtures,
   getInitialInterceptorData,
-}: {
-  groupId: string;
-  row: boolean;
-  defaultOpen: 'y' | 'n';
-  fixtures: (Fixture | Interceptor<T>)[];
-  getInitialInterceptorData?: () => T;
-}) {
+}: PreviewProps<T>) {
   const [choice, setTabGroupChoice] = useTabStorage(
     `docusaurus.tab.${groupId}`,
   );
-  const [selectedValue, setSelectedValue] = useState(defaultOpen);
+  const selectedValue = (choice ?? defaultOpen) as 'y' | 'n';
   const { blockElementScrollPositionUntilNextRender } =
     useScrollPositionBlocker();
 
-  if (choice != null && choice !== selectedValue) {
-    setSelectedValue(choice as any);
-  }
-
   const toggle = useCallback(
     (
       event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
     ) => {
       blockElementScrollPositionUntilNextRender(event.currentTarget);
-      setSelectedValue(open => (open === 'y' ? 'n' : 'y'));
-      setTabGroupChoice(selectedValue === 'y' ? 'n' : 'y');
+      const next = selectedValue === 'y' ? 'n' : 'y';
+      setTabGroupChoice(next);
     },
     [
       blockElementScrollPositionUntilNextRender,
diff --git a/website/src/components/Playground/PreviewWithHeader.tsx b/website/src/components/Playground/PreviewWithHeader.tsx
diff --git a/website/src/components/Playground/PreviewWithScope.tsx b/website/src/components/Playground/PreviewWithScope.tsx
@@ -2,16 +2,17 @@ import * as graphql from '@data-client/graphql';
 import * as rhReact from '@data-client/react';
 import * as rhReactNext from '@data-client/react/next';
 import * as rest from '@data-client/rest';
-import type { Fixture, Interceptor } from '@data-client/test';
 import { Temporal, Intl as PolyIntl } from '@js-temporal/polyfill';
 import BigNumber from 'bignumber.js';
 import { use } from 'react';
 import { LiveProvider } from 'react-live';
 import { v4 as uuid } from 'uuid';
 
 import * as designSystem from './DesignSystem';
-import PreviewWithHeader from './PreviewWithHeader';
+import Preview from './Preview';
+import PreviewWrapper from './PreviewWrapper';
 import transformCode from './transformCode';
+import type { PreviewProps } from './types';
 import ResetableErrorBoundary from '../ResettableErrorBoundary';
 
 function randomFloatInRange(min, max, decimals) {
@@ -55,14 +56,7 @@ const scope = {
 export default function PreviewWithScope<T>({
   code,
   ...props
-}: {
-  code: string;
-  groupId: string;
-  defaultOpen: 'y' | 'n';
-  row: boolean;
-  fixtures: (Fixture | Interceptor<T>)[];
-  getInitialInterceptorData?: () => T;
-}) {
+}: PreviewProps<T> & { code: string }) {
   return (
     <LiveProvider
       key="preview"
@@ -72,7 +66,9 @@ export default function PreviewWithScope<T>({
       noInline
       scope={scope}
     >
-      <PreviewWithHeader key="preview" {...props} />
+      <PreviewWrapper>
+        <Preview key="preview" {...props} />
+      </PreviewWrapper>
     </LiveProvider>
   );
 }
diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
@@ -1,16 +1,16 @@
-import type { Fixture, Interceptor } from '@data-client/test';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import clsx from 'clsx';
 import type { Language, PrismTheme } from 'prism-react-renderer';
 import React, { lazy } from 'react';
 import { LiveProvider } from 'react-live';
 
 import Boundary from './Boundary';
-import { isGoogleBot } from './isGoogleBot';
+import { isGoogleBot } from './isMobileOrBot';
 import MonacoPreloads from './MonacoPreloads';
 import { PlaygroundTextEdit } from './PlaygroundTextEdit';
 import PreviewWrapper from './PreviewWrapper';
 import styles from './styles.module.css';
+import type { PreviewProps } from './types';
 import { useCode } from './useCode';
 import { useReactLiveTheme } from './useReactLiveTheme';
 
@@ -38,15 +38,12 @@ export default function Playground<T>({
   getInitialInterceptorData,
   defaultTab,
   ...props
-}: Omit<LiveProviderProps, 'ref'> & {
-  groupId: string;
-  defaultOpen: 'y' | 'n';
-  row?: boolean;
-  children: string | any[];
-  fixtures: (Fixture | Interceptor<T>)[];
-  getInitialInterceptorData?: () => T;
-  defaultTab?: string;
-}) {
+}: Omit<LiveProviderProps, 'ref'> &
+  Omit<PreviewProps<T>, 'row'> & {
+    row?: boolean;
+    children: string | any[];
+    defaultTab?: string;
+  }) {
   const {
     liveCodeBlock: { playgroundPosition },
   } = useDocusaurusContext().siteConfig.themeConfig as any;
@@ -119,14 +116,9 @@ function PlaygroundContent<T>({
     </Reversible>
   );
 }
-interface ContentProps<T = any> {
-  groupId: string;
-  defaultOpen: 'y' | 'n';
-  row: boolean;
-  fixtures: (Fixture | Interceptor<T>)[];
+interface ContentProps<T = any> extends PreviewProps<T> {
   children: React.ReactNode;
   reverse?: boolean;
-  getInitialInterceptorData?: () => T;
   defaultTab?: string;
 }
 
@@ -157,10 +149,5 @@ function Reversible({
   children: React.ReactNode[];
   reverse?: boolean;
 }): React.ReactElement {
-  const newchild = [...children];
-  newchild.reverse();
-  if (reverse) {
-    return newchild as any;
-  }
-  return children as any;
+  return (reverse ? [...children].reverse() : children) as React.ReactElement;
 }
diff --git a/website/src/components/Playground/isGoogleBot.tsx b/website/src/components/Playground/isGoogleBot.tsx
diff --git a/website/src/components/Playground/isMobileOrBot.ts b/website/src/components/Playground/isMobileOrBot.ts
@@ -1,6 +1,14 @@
+/** Shared user-agent patterns for bot/mobile detection. Inline copy in MonacoPreloads.tsx script string. */
+const BOT_UA_REGEX = /bot|googlebot|crawler|spider|robot|crawling/i;
+const MOBILE_OR_BOT_UA_REGEX =
+  /bot|googlebot|crawler|spider|robot|crawling|Mobile|Android|BlackBerry/i;
+
+/** True if crawler/bot (SSR-safe). Used for skipping Monaco/Preview load. */
+export const isGoogleBot =
+  typeof navigator === 'object' &&
+  BOT_UA_REGEX.test(navigator?.userAgent ?? '');
+
 /** Check if current browser is mobile or a bot - must be called client-side only */
 export function isMobileOrBot(): boolean {
-  return /bot|googlebot|crawler|spider|robot|crawling|Mobile|Android|BlackBerry/i.test(
-    navigator.userAgent,
-  );
+  return MOBILE_OR_BOT_UA_REGEX.test(navigator.userAgent);
 }
diff --git a/website/src/components/Playground/types.ts b/website/src/components/Playground/types.ts
@@ -0,0 +1,11 @@
+import type { Fixture, Interceptor } from '@data-client/test';
+
+export type FixtureOrInterceptor<T = any> = Fixture | Interceptor<T>;
+
+export interface PreviewProps<T = any> {
+  groupId: string;
+  defaultOpen: 'y' | 'n';
+  row: boolean;
+  fixtures: FixtureOrInterceptor<T>[];
+  getInitialInterceptorData?: () => T;
+}
diff --git a/website/src/components/Playground/useCode.tsx b/website/src/components/Playground/useCode.tsx
@@ -1,14 +1,28 @@
 import { parseCodeBlockTitle } from '@docusaurus/theme-common/internal';
-import { useMemo, useReducer } from 'react';
+import React, { useMemo, useReducer } from 'react';
 
-export function useCode(children, defaultTab) {
-  const codeTabs: {
-    code: string;
-    path?: string;
-    title?: string;
-    collapsed: boolean;
-    [k: string]: any;
-  }[] = useMemo(() => {
+export interface CodeTab {
+  code: string;
+  path?: string;
+  title?: string;
+  collapsed: boolean;
+  col?: boolean;
+  highlights?: string;
+  language?: string;
+  [k: string]: unknown;
+}
+
+export interface UseCodeReturn {
+  handleCodeChange: ((v: string) => void)[];
+  codes: string[];
+  codeTabs: CodeTab[];
+}
+
+export function useCode(
+  children: string | React.ReactNode | React.ReactNode[],
+  defaultTab?: string,
+): UseCodeReturn {
+  const codeTabs: CodeTab[] = useMemo(() => {
     if (typeof children === 'string')
       return [{ code: getCode(children), collapsed: false }];
     return (Array.isArray(children) ? children : [children])
diff --git a/website/src/components/StackBlitz.tsx b/website/src/components/StackBlitz.tsx
@@ -1,7 +1,6 @@
 import Link from '@docusaurus/Link';
-import React, { useEffect } from 'react';
 
-import { isGoogleBot } from './Playground/isGoogleBot';
+import { isGoogleBot } from './Playground/isMobileOrBot';
 import { useHasIntersected } from './useHasIntersected';
 
 export default function StackBlitz({
