Skip to content

Commit cd99ed5

Browse files
gregbergegregberge
authored
Fix OpenAPI spec rendering (#3037)
1 parent 27de1cd commit cd99ed5

17 files changed

+213
-115
lines changed

‎.changeset/stupid-peaches-work.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@gitbook/react-openapi": patch
3+
"gitbook": patch
4+
---
5+
6+
Fix spec properties rendering and missing keys

‎bun.lock

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@
241241
"@scalar/oas-utils": "^0.2.120",
242242
"clsx": "^2.1.1",
243243
"flatted": "^3.2.9",
244+
"json-decycle": "^4.0.0",
244245
"json-xml-parse": "^1.3.0",
245246
"react-aria": "^3.37.0",
246247
"react-aria-components": "^1.6.0",
@@ -2069,6 +2070,8 @@
20692070

20702071
"json-buffer": ["[email protected]", "", {}, "sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ=="],
20712072

2073+
"json-decycle": ["[email protected]", "", {}, "sha512-3GFL/vWazCbMu1kw+NdIfAHh6Ugq5pxkKcSUnK1f/Fw1nDtt1i+BiBfRJs0iPEKscYAz4k4+osvgjY95hmuJXQ=="],
2074+
20722075
"json-parse-even-better-errors": ["[email protected]", "", {}, "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="],
20732076

20742077
"json-schema": ["[email protected]", "", {}, "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="],

‎packages/gitbook/src/components/DocumentView/Blocks.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
5454
const { nodes, blockStyle, isOffscreen: defaultIsOffscreen = false, ...contextProps } = props;
5555

5656
let isOffscreen = defaultIsOffscreen;
57-
return nodes.map((node) => {
57+
return nodes.map((node, index) => {
5858
isOffscreen =
5959
isOffscreen ||
6060
isBlockOffscreen({
@@ -65,7 +65,7 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
6565

6666
return (
6767
<Block
68-
key={node.key}
68+
key={node.key || `${node.type}-${index}`}
6969
block={node}
7070
style={[
7171
'mx-auto w-full decoration-primary/6',

‎packages/gitbook/src/components/DocumentView/Inlines.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,16 @@ export function Inlines<T extends DocumentInline | DocumentText>(
2424
) {
2525
const { nodes, document, ancestorInlines, ...contextProps } = props;
2626

27-
return nodes.map((node) => {
27+
return nodes.map((node, index) => {
28+
const key = node.key || `key-${index}`;
29+
2830
if (node.object === 'text') {
29-
return <Text key={node.key} text={node} />;
31+
return <Text key={key} text={node} />;
3032
}
3133

3234
return (
3335
<Inline
34-
key={node.key}
36+
key={key}
3537
inline={node}
3638
document={document}
3739
ancestorInlines={ancestorInlines}

‎packages/react-openapi/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@scalar/oas-utils": "^0.2.120",
1717
"clsx": "^2.1.1",
1818
"flatted": "^3.2.9",
19+
"json-decycle": "^4.0.0",
1920
"json-xml-parse": "^1.3.0",
2021
"react-aria-components": "^1.6.0",
2122
"react-aria": "^3.37.0",

‎packages/react-openapi/src/InteractiveSection.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ export function InteractiveSection(props: {
3232
defaultTab?: string;
3333
/** Content of the header */
3434
header?: React.ReactNode;
35-
/** Body of the section */
36-
children?: React.ReactNode;
3735
/** Children to display within the container */
3836
overlay?: React.ReactNode;
3937
}) {
@@ -45,7 +43,6 @@ export function InteractiveSection(props: {
4543
tabs = [],
4644
defaultTab = tabs[0]?.key,
4745
header,
48-
children,
4946
overlay,
5047
toggleIcon = '▶',
5148
} = props;
@@ -83,7 +80,7 @@ export function InteractiveSection(props: {
8380
className={className}
8481
>
8582
<SectionHeaderContent className={className}>
86-
{(children || selectedTab?.body) && toggeable ? (
83+
{selectedTab?.body && toggeable ? (
8784
<button
8885
{...mergeProps(buttonProps, focusProps)}
8986
ref={triggerRef}
@@ -131,9 +128,8 @@ export function InteractiveSection(props: {
131128
</div>
132129
</SectionHeader>
133130
) : null}
134-
{(!toggeable || state.isExpanded) && (children || selectedTab?.body) ? (
131+
{(!toggeable || state.isExpanded) && selectedTab?.body ? (
135132
<SectionBody ref={panelRef} {...panelProps} className={className}>
136-
{children}
137133
{selectedTab?.body}
138134
</SectionBody>
139135
) : null}

‎packages/react-openapi/src/OpenAPICodeSample.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,13 @@ function generateCodeSamples(props: {
148148
return {
149149
key: `default-${generator.id}`,
150150
label: generator.label,
151-
body: <OpenAPIMediaTypeExamplesBody data={data} renderers={renderers} />,
151+
body: (
152+
<OpenAPIMediaTypeExamplesBody
153+
method={data.method}
154+
path={data.path}
155+
renderers={renderers}
156+
/>
157+
),
152158
footer: (
153159
<OpenAPICodeSampleFooter renderers={renderers} data={data} context={context} />
154160
),
@@ -189,9 +195,9 @@ function OpenAPICodeSampleFooter(props: {
189195
const { method, path } = data;
190196
const { specUrl } = context;
191197
const hideTryItPanel = data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'];
192-
const hasMediaTypes = renderers.length > 0;
198+
const hasMultipleMediaTypes = renderers.length > 1;
193199

194-
if (hideTryItPanel && !hasMediaTypes) {
200+
if (hideTryItPanel && !hasMultipleMediaTypes) {
195201
return null;
196202
}
197203

@@ -201,8 +207,12 @@ function OpenAPICodeSampleFooter(props: {
201207

202208
return (
203209
<div className="openapi-codesample-footer">
204-
{hasMediaTypes ? (
205-
<OpenAPIMediaTypeExamplesSelector data={data} renderers={renderers} />
210+
{hasMultipleMediaTypes ? (
211+
<OpenAPIMediaTypeExamplesSelector
212+
method={data.method}
213+
path={data.path}
214+
renderers={renderers}
215+
/>
206216
) : (
207217
<span />
208218
)}

‎packages/react-openapi/src/OpenAPICodeSampleInteractive.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import clsx from 'clsx';
33
import { useCallback } from 'react';
44
import { useStore } from 'zustand';
55
import type { MediaTypeRenderer } from './OpenAPICodeSample';
6-
import type { OpenAPIOperationData } from './types';
76
import { getOrCreateTabStoreByKey } from './useSyncedTabsGlobalState';
87

9-
function useMediaTypeState(data: OpenAPIOperationData, defaultKey: string) {
8+
function useMediaTypeState(data: { method: string; path: string }, defaultKey: string) {
109
const { method, path } = data;
1110
const store = useStore(getOrCreateTabStoreByKey(`media-type-${method}-${path}`, defaultKey));
1211
if (typeof store.tabKey !== 'string') {
@@ -18,7 +17,7 @@ function useMediaTypeState(data: OpenAPIOperationData, defaultKey: string) {
1817
};
1918
}
2019

21-
function useMediaTypeSampleIndexState(data: OpenAPIOperationData, mediaType: string) {
20+
function useMediaTypeSampleIndexState(data: { method: string; path: string }, mediaType: string) {
2221
const { method, path } = data;
2322
const store = useStore(
2423
getOrCreateTabStoreByKey(`media-type-sample-${mediaType}-${method}-${path}`, 0)
@@ -33,14 +32,15 @@ function useMediaTypeSampleIndexState(data: OpenAPIOperationData, mediaType: str
3332
}
3433

3534
export function OpenAPIMediaTypeExamplesSelector(props: {
36-
data: OpenAPIOperationData;
35+
method: string;
36+
path: string;
3737
renderers: MediaTypeRenderer[];
3838
}) {
39-
const { data, renderers } = props;
39+
const { method, path, renderers } = props;
4040
if (!renderers[0]) {
4141
throw new Error('No renderers provided');
4242
}
43-
const state = useMediaTypeState(data, renderers[0].mediaType);
43+
const state = useMediaTypeState({ method, path }, renderers[0].mediaType);
4444
const selected = renderers.find((r) => r.mediaType === state.mediaType) || renderers[0];
4545

4646
return (
@@ -56,17 +56,18 @@ export function OpenAPIMediaTypeExamplesSelector(props: {
5656
</option>
5757
))}
5858
</select>
59-
<ExamplesSelector data={data} renderer={selected} />
59+
<ExamplesSelector method={method} path={path} renderer={selected} />
6060
</div>
6161
);
6262
}
6363

6464
function ExamplesSelector(props: {
65-
data: OpenAPIOperationData;
65+
method: string;
66+
path: string;
6667
renderer: MediaTypeRenderer;
6768
}) {
68-
const { data, renderer } = props;
69-
const state = useMediaTypeSampleIndexState(data, renderer.mediaType);
69+
const { method, path, renderer } = props;
70+
const state = useMediaTypeSampleIndexState({ method, path }, renderer.mediaType);
7071
if (renderer.examples.length < 2) {
7172
return null;
7273
}
@@ -87,25 +88,26 @@ function ExamplesSelector(props: {
8788
}
8889

8990
export function OpenAPIMediaTypeExamplesBody(props: {
90-
data: OpenAPIOperationData;
91+
method: string;
92+
path: string;
9193
renderers: MediaTypeRenderer[];
9294
}) {
93-
const { renderers, data } = props;
95+
const { renderers, method, path } = props;
9496
if (!renderers[0]) {
9597
throw new Error('No renderers provided');
9698
}
97-
const mediaTypeState = useMediaTypeState(data, renderers[0].mediaType);
99+
const mediaTypeState = useMediaTypeState({ method, path }, renderers[0].mediaType);
98100
const selected =
99101
renderers.find((r) => r.mediaType === mediaTypeState.mediaType) ?? renderers[0];
100102
if (selected.examples.length === 0) {
101103
return selected.element;
102104
}
103-
return <ExamplesBody data={data} renderer={selected} />;
105+
return <ExamplesBody method={method} path={path} renderer={selected} />;
104106
}
105107

106-
function ExamplesBody(props: { data: OpenAPIOperationData; renderer: MediaTypeRenderer }) {
107-
const { data, renderer } = props;
108-
const exampleState = useMediaTypeSampleIndexState(data, renderer.mediaType);
108+
function ExamplesBody(props: { method: string; path: string; renderer: MediaTypeRenderer }) {
109+
const { method, path, renderer } = props;
110+
const exampleState = useMediaTypeSampleIndexState({ method, path }, renderer.mediaType);
109111
const example = renderer.examples[exampleState.index] ?? renderer.examples[0];
110112
if (!example) {
111113
throw new Error(`No example found for index ${exampleState.index}`);

‎packages/react-openapi/src/OpenAPIPath.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function formatPath(path: string) {
4747
parts.push(path.slice(lastIndex, offset));
4848
}
4949
parts.push(
50-
<span key={offset} className="openapi-path-variable">
50+
<span key={`offset-${offset}`} className="openapi-path-variable">
5151
{match}
5252
</span>
5353
);
@@ -61,7 +61,7 @@ function formatPath(path: string) {
6161

6262
const formattedPath = parts.map((part, index) => {
6363
if (typeof part === 'string') {
64-
return <span key={index}>{part}</span>;
64+
return <span key={`part-${index}`}>{part}</span>;
6565
}
6666
return part;
6767
});

‎packages/react-openapi/src/OpenAPIRequestBody.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { OpenAPIV3 } from '@gitbook/openapi-parser';
22
import { InteractiveSection } from './InteractiveSection';
3-
import { OpenAPIRootSchema } from './OpenAPISchema';
3+
import { OpenAPIRootSchema } from './OpenAPISchemaServer';
44
import type { OpenAPIClientContext } from './types';
55
import { checkIsReference } from './utils';
66

‎packages/react-openapi/src/OpenAPIResponse.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { OpenAPIV3 } from '@gitbook/openapi-parser';
22
import { OpenAPIDisclosure } from './OpenAPIDisclosure';
3-
import { OpenAPISchemaProperties } from './OpenAPISchema';
3+
import { OpenAPISchemaProperties } from './OpenAPISchemaServer';
44
import type { OpenAPIClientContext } from './types';
55
import { parameterToProperty, resolveDescription } from './utils';
66

@@ -29,9 +29,9 @@ export function OpenAPIResponse(props: {
2929
{headers.length > 0 ? (
3030
<OpenAPIDisclosure context={context} label="Headers">
3131
<OpenAPISchemaProperties
32-
properties={headers.map(([name, header]) => {
33-
return parameterToProperty({ name, ...header });
34-
})}
32+
properties={headers.map(([name, header]) =>
33+
parameterToProperty({ name, ...header })
34+
)}
3535
context={context}
3636
/>
3737
</OpenAPIDisclosure>

‎packages/react-openapi/src/OpenAPIResponses.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ export function OpenAPIResponses(props: {
2727
return {
2828
id: statusCode,
2929
label: (
30-
<div
31-
className="openapi-response-tab-content"
32-
key={`response-${statusCode}`}
33-
>
30+
<div className="openapi-response-tab-content">
3431
<span className="openapi-response-statuscode">
3532
{statusCode}
3633
</span>
@@ -47,7 +44,6 @@ export function OpenAPIResponses(props: {
4744
label: contentType,
4845
body: (
4946
<OpenAPIResponse
50-
key={`$response-${statusCode}-${contentType}`}
5147
response={response}
5248
mediaType={mediaType}
5349
context={context}

0 commit comments

Comments
 (0)