Revert PR with bugs (#2819)

Author: gregberge

.changeset/fifty-donkeys-talk.md

@@ -1,17 +1,40 @@
 'use client';
 
 import classNames from 'classnames';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
-import { useSyncedTabsGlobalState } from './useSyncedTabsGlobalState';
 
 interface InteractiveSectionTab {
     key: string;
     label: string;
     body: React.ReactNode;
 }
 
+let globalState: Record<string, string> = {};
+const listeners = new Set<() => void>();
+
+function useSyncedTabsGlobalState() {
+    const subscribe = useCallback((callback: () => void) => {
+        listeners.add(callback);
+        return () => listeners.delete(callback);
+    }, []);
+
+    const getSnapshot = useCallback(() => globalState, []);
+
+    const setSyncedTabs = useCallback(
+        (updater: (tabs: Record<string, string>) => Record<string, string>) => {
+            globalState = updater(globalState);
+            listeners.forEach((listener) => listener());
+        },
+        [],
+    );
+
+    const tabs = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+    return [tabs, setSyncedTabs] as const;
+}
+
 /**
  * To optimize rendering, most of the components are server-components,
  * and the interactiveness is mainly handled by a few key components like this one.

.changeset/six-trainers-bathe.md

@@ -6,11 +6,9 @@ import { generateMediaTypeExample, generateSchemaExample } from './generateSchem
 import { InteractiveSection } from './InteractiveSection';
 import { getServersURL } from './OpenAPIServerURL';
 import { OpenAPIContextProps } from './types';
-import { createStateKey } from './utils';
+import { noReference } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
-import { OpenAPIV3 } from '@scalar/openapi-types';
-import { checkIsReference } from './utils';
 
 /**
  * Display code samples to execute the operation.
@@ -25,19 +23,24 @@ export function OpenAPICodeSample(props: {
     const searchParams = new URLSearchParams();
     const headersObject: { [k: string]: string } = {};
 
-    data.operation.parameters?.forEach((param) => {
+    data.operation.parameters?.forEach((rawParam) => {
+        const param = noReference(rawParam);
         if (!param) {
             return;
         }
 
         if (param.in === 'header' && param.required) {
-            const example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            const example = param.schema
+                ? generateSchemaExample(noReference(param.schema))
+                : undefined;
             if (example !== undefined && param.name) {
                 headersObject[param.name] =
                     typeof example !== 'string' ? stringifyOpenAPI(example) : example;
             }
         } else if (param.in === 'query' && param.required) {
-            const example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            const example = param.schema
+                ? generateSchemaExample(noReference(param.schema))
+                : undefined;
             if (example !== undefined && param.name) {
                 searchParams.append(
                     param.name,
@@ -47,9 +50,7 @@ export function OpenAPICodeSample(props: {
         }
     });
 
-    const requestBody = !checkIsReference(data.operation.requestBody)
-        ? data.operation.requestBody
-        : undefined;
+    const requestBody = noReference(data.operation.requestBody);
     const requestBodyContentEntries = requestBody?.content
         ? Object.entries(requestBody.content)
         : undefined;
@@ -117,7 +118,7 @@ export function OpenAPICodeSample(props: {
     }
 
     return (
-        <OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
+        <OpenAPITabs items={samples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
                 <OpenAPITabsPanels />
             </InteractiveSection>

packages/react-openapi/src/InteractiveSection.tsx

@@ -2,23 +2,19 @@ import * as React from 'react';
 
 import { OpenAPIV3 } from '@scalar/openapi-types';
 import { OpenAPIRootSchema } from './OpenAPISchema';
+import { noReference } from './utils';
 import { OpenAPIClientContext } from './types';
 import { InteractiveSection } from './InteractiveSection';
-import { checkIsReference } from './utils';
 
 /**
  * Display an interactive request body.
  */
 export function OpenAPIRequestBody(props: {
-    requestBody: OpenAPIV3.RequestBodyObject | OpenAPIV3.ReferenceObject;
+    requestBody: OpenAPIV3.RequestBodyObject;
     context: OpenAPIClientContext;
 }) {
     const { requestBody, context } = props;
 
-    if (checkIsReference(requestBody)) {
-        return null;
-    }
-
     return (
         <InteractiveSection
             header="Body"
@@ -30,7 +26,7 @@ export function OpenAPIRequestBody(props: {
                         label: contentType,
                         body: (
                             <OpenAPIRootSchema
-                                schema={mediaTypeObject.schema ?? {}}
+                                schema={noReference(mediaTypeObject.schema) ?? {}}
                                 context={context}
                             />
                         ),

packages/react-openapi/src/OpenAPICodeSample.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { OpenAPIV3 } from '@scalar/openapi-types';
 import { OpenAPISchemaProperties } from './OpenAPISchema';
+import { checkIsReference, noReference } from './utils';
 import { OpenAPIClientContext } from './types';
 import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 
@@ -14,7 +15,7 @@ export function OpenAPIResponse(props: {
 }) {
     const { response, context, mediaType } = props;
     const headers = Object.entries(response.headers ?? {}).map(
-        ([name, header]) => [name, header ?? {}] as const,
+        ([name, header]) => [name, noReference(header) ?? {}] as const,
     );
     const content = Object.entries(mediaType.schema ?? {});
 
@@ -29,7 +30,7 @@ export function OpenAPIResponse(props: {
                     <OpenAPISchemaProperties
                         properties={headers.map(([name, header]) => ({
                             propertyName: name,
-                            schema: header.schema ?? {},
+                            schema: noReference(header.schema) ?? {},
                             required: header.required,
                         }))}
                         context={context}
@@ -41,7 +42,7 @@ export function OpenAPIResponse(props: {
                     id={`response-${context.blockKey}`}
                     properties={[
                         {
-                            schema: mediaType.schema ?? {},
+                            schema: handleUnresolvedReference(mediaType.schema) ?? {},
                         },
                     ]}
                     context={context}
@@ -50,3 +51,17 @@ export function OpenAPIResponse(props: {
         </div>
     );
 }
+
+function handleUnresolvedReference(
+    input: OpenAPIV3.SchemaObject | OpenAPIV3.ReferenceObject | undefined,
+): OpenAPIV3.SchemaObject {
+    const isReference = checkIsReference(input);
+
+    if (isReference || input === undefined) {
+        // If we find a reference that wasn't resolved or needed to be resolved externally, do not try to render it.
+        // Instead we render `any`
+        return {};
+    }
+
+    return input;
+}

packages/react-openapi/src/OpenAPIRequestBody.tsx

@@ -1,7 +1,7 @@
 import { OpenAPIOperationData } from './fetchOpenAPIOperation';
 import { generateSchemaExample } from './generateSchemaExample';
 import { OpenAPIContextProps } from './types';
-import { createStateKey } from './utils';
+import { checkIsReference, noReference } from './utils';
 import { stringifyOpenAPI } from './stringifyOpenAPI';
 import { OpenAPIV3 } from '@scalar/openapi-types';
 import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
@@ -41,7 +41,7 @@ export function OpenAPIResponseExample(props: {
 
     const examples = responses
         .map(([key, value]) => {
-            const responseObject = value;
+            const responseObject = noReference(value);
             const mediaTypeObject = (() => {
                 if (!responseObject.content) {
                     return null;
@@ -61,28 +61,30 @@ export function OpenAPIResponseExample(props: {
                 };
             }
 
-            const example: OpenAPIV3.ExampleObject | null = (() => {
-                const { examples, example } = mediaTypeObject;
-                if (examples) {
-                    const firstKey = Object.keys(examples)[0];
-                    // @TODO handle multiple examples
-                    const firstExample = examples[firstKey];
-                    if (firstExample) {
-                        return firstExample;
+            const example = handleUnresolvedReference(
+                (() => {
+                    const { examples, example } = mediaTypeObject;
+                    if (examples) {
+                        const firstKey = Object.keys(examples)[0];
+                        // @TODO handle multiple examples
+                        const firstExample = noReference(examples[firstKey]);
+                        if (firstExample) {
+                            return firstExample;
+                        }
                     }
-                }
 
-                if (example) {
-                    return { value: example };
-                }
+                    if (example) {
+                        return { value: example };
+                    }
 
-                const schema = mediaTypeObject.schema;
-                if (!schema) {
-                    return null;
-                }
+                    const schema = noReference(mediaTypeObject.schema);
+                    if (!schema) {
+                        return null;
+                    }
 
-                return { value: generateSchemaExample(schema) };
-            })();
+                    return { value: generateSchemaExample(schema) };
+                })(),
+            );
 
             return {
                 key: key,
@@ -111,7 +113,7 @@ export function OpenAPIResponseExample(props: {
     }
 
     return (
-        <OpenAPITabs stateKey={createStateKey('response-example')} items={examples}>
+        <OpenAPITabs items={examples}>
             <InteractiveSection header={<OpenAPITabsList />} className="openapi-response-example">
                 <OpenAPITabsPanels />
             </InteractiveSection>
@@ -126,3 +128,16 @@ function OpenAPIEmptyResponseExample() {
         </pre>
     );
 }
+
+function handleUnresolvedReference(
+    input: OpenAPIV3.ExampleObject | null,
+): OpenAPIV3.ExampleObject | null {
+    const isReference = checkIsReference(input?.value);
+
+    if (isReference) {
+        // If we find a reference that wasn't resolved or needed to be resolved externally, render out the URL
+        return { value: input.value.$ref };
+    }
+
+    return input;
+}

packages/react-openapi/src/OpenAPIResponse.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { createStateKey } from './utils';
+import { createStateKey, noReference } from './utils';
 import { OpenAPIResponse } from './OpenAPIResponse';
 import { OpenAPIClientContext } from './types';
 import { InteractiveSection } from './InteractiveSection';
 import { OpenAPIV3, OpenAPIV3_1 } from '@scalar/openapi-types';
 import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { Markdown } from './Markdown';
+import { OpenAPIRootSchema, OpenAPISchemaProperties, OpenAPISchemaProperty } from './OpenAPISchema';
+import { OpenAPIDisclosure } from './OpenAPIDisclosure';
 
 /**
  * Display an interactive response body.