Revised client state with context

BrettJephson · BrettJephson · commit 802ed7d9157e · 2024-09-20T09:36:48.000+01:00
diff --git a/packages/gitbook/src/app/(space)/(content)/[[...pathname]]/page.tsx b/packages/gitbook/src/app/(space)/(content)/[[...pathname]]/page.tsx
@@ -90,7 +90,6 @@ export default async function Page(props: {
                         // Display the page feedback in the page footer if the aside is not visible
                         withPageFeedback && !page.layout.outline
                     }
-                    searchParams={searchParams}
                 />
                 {page.layout.outline ? (
                     <PageAside
diff --git a/packages/gitbook/src/components/DocumentView/DocumentView.tsx b/packages/gitbook/src/components/DocumentView/DocumentView.tsx
@@ -46,8 +46,6 @@ export interface DocumentContext {
      * https://linear.app/gitbook-x/issue/RND-3588/gitbook-open-code-syntax-highlighting-runs-out-of-memory-after-a
      */
     shouldHighlightCode: (spaceId: string | undefined) => boolean;
-
-    searchParams?: Record<string, string>;
 }
 
 export interface DocumentContextProps {
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPI.tsx
@@ -1,12 +1,13 @@
 import { DocumentBlockSwagger } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { OpenAPIOperation, OpenAPIOperationData } from '@gitbook/react-openapi';
+import { OpenAPIOperation } from '@gitbook/react-openapi';
 import React from 'react';
 
 import { LoadingPane } from '@/components/primitives';
 import { fetchOpenAPIBlock } from '@/lib/openapi';
 import { tcls } from '@/lib/tailwind';
 
+import OpenAPIContext from './OpenAPIContext';
 import { BlockProps } from '../Block';
 import { PlainCodeBlock } from '../CodeBlock';
 
@@ -45,27 +46,23 @@ async function OpenAPIBody(props: BlockProps<DocumentBlockSwagger>) {
         return null;
     }
 
-    const enumSelectors =
-        context.searchParams && context.searchParams.block === block.key
-            ? parseModifiers(data, context.searchParams)
-            : undefined;
-
     return (
-        <OpenAPIOperation
-            data={data}
-            context={{
-                icons: {
-                    chevronDown: <Icon icon="chevron-down" />,
-                    chevronRight: <Icon icon="chevron-right" />,
-                },
-                CodeBlock: PlainCodeBlock,
-                defaultInteractiveOpened: context.mode === 'print',
-                id: block.meta?.id,
-                enumSelectors,
-                blockKey: block.key,
-            }}
-            className="openapi-block"
-        />
+        <OpenAPIContext block={block} data={data}>
+            <OpenAPIOperation
+                data={data}
+                context={{
+                    icons: {
+                        chevronDown: <Icon icon="chevron-down" />,
+                        chevronRight: <Icon icon="chevron-right" />,
+                    },
+                    CodeBlock: PlainCodeBlock,
+                    defaultInteractiveOpened: context.mode === 'print',
+                    id: block.meta?.id,
+                    blockKey: block.key
+                }}
+                className="openapi-block"
+            />
+         </OpenAPIContext>
     );
 }
 
@@ -97,27 +94,3 @@ function OpenAPIFallback() {
         </div>
     );
 }
-
-function parseModifiers(data: OpenAPIOperationData, params: Record<string, string>) {
-    if (!data) {
-        return;
-    }
-    const { server: serverQueryParam } = params;
-    const serverIndex =
-        serverQueryParam && !isNaN(Number(serverQueryParam))
-            ? Math.max(0, Math.min(Number(serverQueryParam), data.servers.length - 1))
-            : 0;
-    const server = data.servers[serverIndex];
-    if (server) {
-        return Object.keys(server.variables ?? {}).reduce<Record<string, number>>(
-            (result, key) => {
-                const selection = Number(params[key]);
-                if (!isNaN(selection)) {
-                    result[key] = selection;
-                }
-                return result;
-            },
-            { server: serverIndex },
-        );
-    }
-}
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx b/packages/gitbook/src/components/DocumentView/OpenAPI/OpenAPIContext.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { DocumentBlock } from "@gitbook/api";
+import { OpenAPIOperationData } from "@gitbook/react-openapi";
+import {OpenAPIContextProvider} from "@gitbook/react-openapi/client";
+import { useRouter, useSearchParams } from 'next/navigation';
+import * as React from 'react';
+
+export default function OpenAPIContext(props: { children: React.ReactNode; block: DocumentBlock; data: OpenAPIOperationData }) {
+    const { block, children, data } = props;
+    const [isPending, startTransition] = React.useTransition();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+
+    return <OpenAPIContextProvider isPending={isPending} data={data} params={searchParams.get("block") === block.key ? Object.fromEntries(searchParams.entries()) : undefined} onUpdate={async (params) => {
+        startTransition(() => {
+            const queryParams = new URLSearchParams(params ?? '');
+            router.replace(`?${queryParams}`, { scroll: false });
+        })
+    }}>{children}</OpenAPIContextProvider>
+}
diff --git a/packages/gitbook/src/components/PageBody/PageBody.tsx b/packages/gitbook/src/components/PageBody/PageBody.tsx
@@ -33,7 +33,6 @@ export function PageBody(props: {
     document: JSONDocument | null;
     context: ContentRefContext;
     withPageFeedback: boolean;
-    searchParams: Record<string, string>;
 }) {
     const {
         space,
@@ -44,7 +43,6 @@ export function PageBody(props: {
         page,
         document,
         withPageFeedback,
-        searchParams,
     } = props;
 
     const asFullWidth = document ? hasFullWidthBlock(document) : false;
@@ -96,7 +94,6 @@ export function PageBody(props: {
                             resolveContentRef: (ref, options) =>
                                 resolveContentRef(ref, context, options),
                             shouldHighlightCode,
-                            searchParams,
                         }}
                     />
                 ) : (
diff --git a/packages/react-openapi/package.json b/packages/react-openapi/package.json
@@ -6,7 +6,8 @@
             "types": "./dist/index.d.ts",
             "development": "./src/index.ts",
             "default": "./dist/index.js"
-        }
+        },
+        "./client": "./src/client.ts"
     },
     "version": "0.6.0",
     "dependencies": {
diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx
@@ -4,10 +4,9 @@ import { CodeSampleInput, codeSampleGenerators } from './code-samples';
 import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
 import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
 import { InteractiveSection } from './InteractiveSection';
-import { getServersURL } from './OpenAPIServerURL';
 import { ScalarApiButton } from './ScalarApiButton';
 import { OpenAPIContextProps } from './types';
-import { noReference } from './utils';
+import { getServersURL, noReference } from './utils';
 
 /**
  * Display code samples to execute the operation.
diff --git a/packages/react-openapi/src/OpenAPIContextProvider.tsx b/packages/react-openapi/src/OpenAPIContextProvider.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import * as React from 'react';
+import { OpenAPIOperationData } from './fetchOpenAPIOperation';
+import { getServersURL } from './utils';
+
+type OpenAPIContextProps = { isPending?: boolean; serverUrl?: string; state?: Record<string, string> | null, onUpdate: (params: Record<string, string> | null) => void; }
+const OpenAPIContext = React.createContext<OpenAPIContextProps | null>(null);
+
+export function useOpenAPIContext() {
+    return React.useContext(OpenAPIContext);
+}
+
+export function OpenAPIContextProvider(props: { children: React.ReactNode; data: OpenAPIOperationData; isPending?: boolean; params?: Record<string, string>; onUpdate: OpenAPIContextProps['onUpdate']; }) {
+    const { children, data, isPending, params, onUpdate } = props;
+    
+    const clientState = React.useMemo(() => {
+        if (!params) { return null; }
+        return parseClientStateModifiers(data, params);
+    }, [data, params]);
+    const serverUrl = getServersURL(data.servers, clientState ?? undefined)
+
+    return <OpenAPIContext.Provider value={{
+        isPending,
+        state: clientState,
+        serverUrl,
+        onUpdate
+    }}>{children}</OpenAPIContext.Provider>
+}
+
+
+function parseClientStateModifiers(data: OpenAPIOperationData, params: Record<string, string>) {
+    if (!data) {
+        return null;
+    }
+    const serverQueryParam = params['server'];
+    const serverIndex =
+        serverQueryParam && !isNaN(Number(serverQueryParam))
+            ? Math.max(0, Math.min(Number(serverQueryParam), data.servers.length - 1))
+            : 0;
+    const server = data.servers[serverIndex];
+    return server ? Object.keys(server.variables ?? {}).reduce<Record<string, string>>(
+        (result, key) => {
+            const selection = params[key];
+            if (!isNaN(Number(selection))) {
+                result[key] = selection;
+            }
+            return result;
+        },
+        { server: `${serverIndex}`, edit: params['edit'] },
+    ) : null;
+}
diff --git a/packages/react-openapi/src/OpenAPIOperation.tsx b/packages/react-openapi/src/OpenAPIOperation.tsx
@@ -5,7 +5,7 @@ import { OpenAPIOperationData, toJSON } from './fetchOpenAPIOperation';
 import { Markdown } from './Markdown';
 import { OpenAPICodeSample } from './OpenAPICodeSample';
 import { OpenAPIResponseExample } from './OpenAPIResponseExample';
-import { getServersURL, OpenAPIServerURL } from './OpenAPIServerURL';
+import { OpenAPIServerURL } from './OpenAPIServerURL';
 import { OpenAPISpec } from './OpenAPISpec';
 import { OpenAPIClientContext, OpenAPIContextProps } from './types';
 import { ScalarApiClient } from './ScalarApiButton';
@@ -25,11 +25,10 @@ export async function OpenAPIOperation(props: {
         defaultInteractiveOpened: context.defaultInteractiveOpened,
         icons: context.icons,
         blockKey: context.blockKey,
-        enumSelectors: context.enumSelectors,
     };
 
     return (
-        <ScalarApiClient serverUrl={getServersURL(data.servers, context.enumSelectors)}>
+        <ScalarApiClient>
             <div className={classNames('openapi-operation', className)}>
                 <div className="openapi-intro">
                     <h2 className="openapi-summary" id={context.id}>
diff --git a/packages/react-openapi/src/OpenAPIServerURL.tsx b/packages/react-openapi/src/OpenAPIServerURL.tsx
@@ -1,9 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import { OpenAPIV3 } from 'openapi-types';
 import { OpenAPIServerURLVariable } from './OpenAPIServerURLVariable';
 import { OpenAPIClientContext } from './types';
 import { ServerURLForm } from './OpenAPIServerURLForm';
-import { ServerSelector } from './ServerSelector';
+import { useOpenAPIContext } from './OpenAPIContextProvider';
+import { parseServerURL } from './utils';
 
 /**
  * Show the url of the server with variables replaced by their default values.
@@ -14,9 +17,12 @@ export function OpenAPIServerURL(props: {
     path?: string;
 }) {
     const { path, servers, context } = props;
-    const serverIndex = context.enumSelectors?.server ?? 0;
+    const ctx = useOpenAPIContext();
+    
+    const serverIndex = !isNaN(Number(ctx?.state?.server)) ? Number(ctx?.state?.server) : 0;
     const server = servers[serverIndex];
     const parts = parseServerURL(server?.url ?? '');
+    console.log({ ctxState: ctx?.state })
 
     return (
         <ServerURLForm context={context} servers={servers} serverIndex={serverIndex}>
@@ -33,7 +39,8 @@ export function OpenAPIServerURL(props: {
                             key={i}
                             name={part.name}
                             variable={server.variables[part.name]}
-                            enumIndex={context.enumSelectors?.[part.name]}
+                            selectionIndex={Number(ctx?.state?.[part.name])}
+                            selectable={Boolean(ctx?.state?.edit)}
                         />
                     );
                 }
@@ -42,40 +49,3 @@ export function OpenAPIServerURL(props: {
         </ServerURLForm>
     );
 }
-
-/**
- * Get the default URL for the server.
- */
-export function getServersURL(
-    servers: OpenAPIV3.ServerObject[],
-    selectors?: Record<string, number>,
-): string {
-    const serverIndex = selectors && !isNaN(selectors.server) ? Number(selectors.server) : 0;
-    const server = servers[serverIndex];
-    const parts = parseServerURL(server?.url ?? '');
-
-    return parts
-        .map((part) => {
-            if (part.kind === 'text') {
-                return part.text;
-            } else {
-                return selectors && !isNaN(selectors[part.name])
-                    ? server.variables?.[part.name]?.enum?.[selectors[part.name]]
-                    : (server.variables?.[part.name]?.default ?? `{${part.name}}`);
-            }
-        })
-        .join('');
-}
-
-function parseServerURL(url: string) {
-    const parts = url.split(/{([^}]+)}/g);
-    const result: Array<{ kind: 'variable'; name: string } | { kind: 'text'; text: string }> = [];
-    for (let i = 0; i < parts.length; i++) {
-        if (i % 2 === 0) {
-            result.push({ kind: 'text', text: parts[i] });
-        } else {
-            result.push({ kind: 'variable', name: parts[i] });
-        }
-    }
-    return result;
-}
diff --git a/packages/react-openapi/src/OpenAPIServerURLForm.tsx b/packages/react-openapi/src/OpenAPIServerURLForm.tsx
diff --git a/packages/react-openapi/src/OpenAPIServerURLVariable.tsx b/packages/react-openapi/src/OpenAPIServerURLVariable.tsx
diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx
diff --git a/packages/react-openapi/src/client.ts b/packages/react-openapi/src/client.ts
diff --git a/packages/react-openapi/src/utils.ts b/packages/react-openapi/src/utils.ts

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,6 @@ export default async function Page(props: {`
`90`	`90`	`// Display the page feedback in the page footer if the aside is not visible`
`91`	`91`	`withPageFeedback && !page.layout.outline`
`92`	`92`	`}`
`93`		`- searchParams={searchParams}`
`94`	`93`	`/>`
`95`	`94`	`{page.layout.outline ? (`
`96`	`95`	`<PageAside`
Original file line number	Diff line number	Diff line change
`@@ -46,8 +46,6 @@ export interface DocumentContext {`
`46`	`46`	`* https://linear.app/gitbook-x/issue/RND-3588/gitbook-open-code-syntax-highlighting-runs-out-of-memory-after-a`
`47`	`47`	`*/`
`48`	`48`	`shouldHighlightCode: (spaceId: string \| undefined) => boolean;`
`49`		`-`
`50`		`- searchParams?: Record<string, string>;`
`51`	`49`	`}`
`52`	`50`
`53`	`51`	`export interface DocumentContextProps {`