docusaurus-theme-openapi-docs 0.0.0-1093 → 0.0.0-1096

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/theme/ApiExplorer/Body/index.js +86 -6
  2. package/lib/theme/RequestSchema/index.js +56 -52
  3. package/package.json +3 -3
  4. package/src/theme/ApiExplorer/Body/index.tsx +30 -6
  5. package/src/theme/RequestSchema/index.tsx +40 -38
package/lib/theme/ApiExplorer/Body/index.js CHANGED
@@ -5,13 +5,69 @@
5
5
  * This source code is licensed under the MIT license found in the
6
6
  * LICENSE file in the root directory of this source tree.
7
7
  * ========================================================================== */
8
+ var __createBinding =
9
+ (this && this.__createBinding) ||
10
+ (Object.create
11
+ ? function (o, m, k, k2) {
12
+ if (k2 === undefined) k2 = k;
13
+ var desc = Object.getOwnPropertyDescriptor(m, k);
14
+ if (
15
+ !desc ||
16
+ ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
17
+ ) {
18
+ desc = {
19
+ enumerable: true,
20
+ get: function () {
21
+ return m[k];
22
+ },
23
+ };
24
+ }
25
+ Object.defineProperty(o, k2, desc);
26
+ }
27
+ : function (o, m, k, k2) {
28
+ if (k2 === undefined) k2 = k;
29
+ o[k2] = m[k];
30
+ });
31
+ var __setModuleDefault =
32
+ (this && this.__setModuleDefault) ||
33
+ (Object.create
34
+ ? function (o, v) {
35
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
36
+ }
37
+ : function (o, v) {
38
+ o["default"] = v;
39
+ });
40
+ var __importStar =
41
+ (this && this.__importStar) ||
42
+ (function () {
43
+ var ownKeys = function (o) {
44
+ ownKeys =
45
+ Object.getOwnPropertyNames ||
46
+ function (o) {
47
+ var ar = [];
48
+ for (var k in o)
49
+ if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
50
+ return ar;
51
+ };
52
+ return ownKeys(o);
53
+ };
54
+ return function (mod) {
55
+ if (mod && mod.__esModule) return mod;
56
+ var result = {};
57
+ if (mod != null)
58
+ for (var k = ownKeys(mod), i = 0; i < k.length; i++)
59
+ if (k[i] !== "default") __createBinding(result, mod, k[i]);
60
+ __setModuleDefault(result, mod);
61
+ return result;
62
+ };
63
+ })();
8
64
  var __importDefault =
9
65
  (this && this.__importDefault) ||
10
66
  function (mod) {
11
67
  return mod && mod.__esModule ? mod : { default: mod };
12
68
  };
13
69
  Object.defineProperty(exports, "__esModule", { value: true });
14
- const react_1 = __importDefault(require("react"));
70
+ const react_1 = __importStar(require("react"));
15
71
  const Translate_1 = require("@docusaurus/Translate");
16
72
  const json2xml_1 = __importDefault(require("@theme/ApiExplorer/Body/json2xml"));
17
73
  const FormFileUpload_1 = __importDefault(
@@ -24,6 +80,7 @@ const Markdown_1 = __importDefault(require("@theme/Markdown"));
24
80
  const SchemaTabs_1 = __importDefault(require("@theme/SchemaTabs"));
25
81
  const TabItem_1 = __importDefault(require("@theme/TabItem"));
26
82
  const translationIds_1 = require("@theme/translationIds");
83
+ const createSchemaExample_1 = require("docusaurus-plugin-openapi-docs/src/openapi/createSchemaExample");
27
84
  const xml_formatter_1 = __importDefault(require("xml-formatter"));
28
85
  const slice_1 = require("./slice");
29
86
  const FormBodyItem_1 = __importDefault(require("./FormBodyItem"));
@@ -137,12 +194,22 @@ function Body({
137
194
  let defaultBody = ""; //"body content";
138
195
  let exampleBody;
139
196
  let examplesBodies = [];
197
+ // Generate example from the schema for the current content type
198
+ let contentTypeExample;
199
+ if (schema) {
200
+ contentTypeExample = (0, createSchemaExample_1.sampleFromSchema)(schema, {
201
+ type: "request",
202
+ });
203
+ } else if (jsonRequestBodyExample) {
204
+ // Fallback to the build-time generated example if no schema is available
205
+ contentTypeExample = jsonRequestBodyExample;
206
+ }
140
207
  if (
141
208
  contentType.includes("application/json") ||
142
209
  contentType.endsWith("+json")
143
210
  ) {
144
- if (jsonRequestBodyExample) {
145
- defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
211
+ if (contentTypeExample) {
212
+ defaultBody = JSON.stringify(contentTypeExample, null, 2);
146
213
  }
147
214
  if (example) {
148
215
  exampleBody = JSON.stringify(example, null, 2);
@@ -177,10 +244,10 @@ function Body({
177
244
  language = "json";
178
245
  }
179
246
  if (contentType === "application/xml" || contentType.endsWith("+xml")) {
180
- if (jsonRequestBodyExample) {
247
+ if (contentTypeExample) {
181
248
  try {
182
249
  defaultBody = (0, xml_formatter_1.default)(
183
- (0, json2xml_1.default)(jsonRequestBodyExample, ""),
250
+ (0, json2xml_1.default)(contentTypeExample, ""),
184
251
  {
185
252
  indentation: " ",
186
253
  lineSeparator: "\n",
@@ -188,7 +255,7 @@ function Body({
188
255
  }
189
256
  );
190
257
  } catch {
191
- defaultBody = (0, json2xml_1.default)(jsonRequestBodyExample);
258
+ defaultBody = (0, json2xml_1.default)(contentTypeExample);
192
259
  }
193
260
  }
194
261
  if (example) {
@@ -249,6 +316,14 @@ function Body({
249
316
  }
250
317
  language = "xml";
251
318
  }
319
+ // Update body in Redux when content type changes
320
+ (0, react_1.useEffect)(() => {
321
+ if (defaultBody) {
322
+ dispatch((0, slice_1.setStringRawBody)(defaultBody));
323
+ }
324
+ // Only re-run when contentType changes, not when defaultBody changes
325
+ // eslint-disable-next-line react-hooks/exhaustive-deps
326
+ }, [contentType]);
252
327
  if (exampleBody) {
253
328
  return react_1.default.createElement(
254
329
  FormItem_1.default,
@@ -269,6 +344,7 @@ function Body({
269
344
  react_1.default.createElement(
270
345
  LiveEditor_1.default,
271
346
  {
347
+ key: contentType,
272
348
  action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
273
349
  language: language,
274
350
  required: required,
@@ -289,6 +365,7 @@ function Body({
289
365
  react_1.default.createElement(
290
366
  LiveEditor_1.default,
291
367
  {
368
+ key: contentType,
292
369
  action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
293
370
  language: language,
294
371
  required: required,
@@ -319,6 +396,7 @@ function Body({
319
396
  react_1.default.createElement(
320
397
  LiveEditor_1.default,
321
398
  {
399
+ key: contentType,
322
400
  action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
323
401
  language: language,
324
402
  required: required,
@@ -346,6 +424,7 @@ function Body({
346
424
  react_1.default.createElement(
347
425
  LiveEditor_1.default,
348
426
  {
427
+ key: `${contentType}-${example.label}`,
349
428
  action: (code) =>
350
429
  dispatch((0, slice_1.setStringRawBody)(code)),
351
430
  language: language,
@@ -364,6 +443,7 @@ function Body({
364
443
  react_1.default.createElement(
365
444
  LiveEditor_1.default,
366
445
  {
446
+ key: contentType,
367
447
  action: (code) => dispatch((0, slice_1.setStringRawBody)(code)),
368
448
  language: language,
369
449
  required: required,
package/lib/theme/RequestSchema/index.js CHANGED
@@ -34,7 +34,7 @@ const RequestSchemaComponent = ({ title, body, style }) => {
34
34
  if (mimeTypes.length > 1) {
35
35
  return react_1.default.createElement(
36
36
  MimeTabs_1.default,
37
- { className: "openapi-tabs__mime", schemaType: "request" },
37
+ { className: "openapi-tabs__mime", schemaType: "request", lazy: true },
38
38
  mimeTypes.map((mimeType) => {
39
39
  const firstBody = body.content[mimeType].schema;
40
40
  if (
@@ -50,62 +50,66 @@ const RequestSchemaComponent = ({ title, body, style }) => {
50
50
  TabItem_1.default,
51
51
  { key: mimeType, label: mimeType, value: mimeType },
52
52
  react_1.default.createElement(
53
- Details_1.default,
54
- {
55
- className: "openapi-markdown__details mime",
56
- "data-collapsed": false,
57
- open: true,
58
- style: style,
59
- summary: react_1.default.createElement(
60
- react_1.default.Fragment,
61
- null,
62
- react_1.default.createElement(
63
- "summary",
53
+ "div",
54
+ { style: { marginTop: "1rem" } },
55
+ react_1.default.createElement(
56
+ Details_1.default,
57
+ {
58
+ className: "openapi-markdown__details mime",
59
+ "data-collapsed": false,
60
+ open: true,
61
+ style: style,
62
+ summary: react_1.default.createElement(
63
+ react_1.default.Fragment,
64
64
  null,
65
65
  react_1.default.createElement(
66
- "h3",
67
- {
68
- className:
69
- "openapi-markdown__details-summary-header-body",
70
- },
71
- (0, Translate_1.translate)({
72
- id: translationIds_1.OPENAPI_REQUEST.BODY_TITLE,
73
- message: title,
74
- }),
75
- body.required === true &&
76
- react_1.default.createElement(
77
- "span",
78
- { className: "openapi-schema__required" },
79
- (0, Translate_1.translate)({
80
- id: translationIds_1.OPENAPI_SCHEMA_ITEM.REQUIRED,
81
- message: "required",
82
- })
83
- )
66
+ "summary",
67
+ null,
68
+ react_1.default.createElement(
69
+ "h3",
70
+ {
71
+ className:
72
+ "openapi-markdown__details-summary-header-body",
73
+ },
74
+ (0, Translate_1.translate)({
75
+ id: translationIds_1.OPENAPI_REQUEST.BODY_TITLE,
76
+ message: title,
77
+ }),
78
+ body.required === true &&
79
+ react_1.default.createElement(
80
+ "span",
81
+ { className: "openapi-schema__required" },
82
+ (0, Translate_1.translate)({
83
+ id: translationIds_1.OPENAPI_SCHEMA_ITEM.REQUIRED,
84
+ message: "required",
85
+ })
86
+ )
87
+ )
84
88
  )
85
- )
86
- ),
87
- },
88
- react_1.default.createElement(
89
- "div",
90
- { style: { textAlign: "left", marginLeft: "1rem" } },
91
- body.description &&
92
- react_1.default.createElement(
93
- "div",
94
- { style: { marginTop: "1rem", marginBottom: "1rem" } },
89
+ ),
90
+ },
91
+ react_1.default.createElement(
92
+ "div",
93
+ { style: { textAlign: "left", marginLeft: "1rem" } },
94
+ body.description &&
95
95
  react_1.default.createElement(
96
- Markdown_1.default,
97
- null,
98
- body.description
96
+ "div",
97
+ { style: { marginTop: "1rem", marginBottom: "1rem" } },
98
+ react_1.default.createElement(
99
+ Markdown_1.default,
100
+ null,
101
+ body.description
102
+ )
99
103
  )
100
- )
101
- ),
102
- react_1.default.createElement(
103
- "ul",
104
- { style: { marginLeft: "1rem" } },
105
- react_1.default.createElement(Schema_1.default, {
106
- schema: firstBody,
107
- schemaType: "request",
108
- })
104
+ ),
105
+ react_1.default.createElement(
106
+ "ul",
107
+ { style: { marginLeft: "1rem" } },
108
+ react_1.default.createElement(Schema_1.default, {
109
+ schema: firstBody,
110
+ schemaType: "request",
111
+ })
112
+ )
109
113
  )
110
114
  )
111
115
  )
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "docusaurus-theme-openapi-docs",
3
3
  "description": "OpenAPI theme for Docusaurus.",
4
- "version": "0.0.0-1093",
4
+ "version": "0.0.0-1096",
5
5
  "license": "MIT",
6
6
  "keywords": [
7
7
  "openapi",
@@ -38,7 +38,7 @@
38
38
  "@types/postman-collection": "^3.5.11",
39
39
  "@types/react-modal": "^3.16.3",
40
40
  "concurrently": "^9.2.0",
41
- "docusaurus-plugin-openapi-docs": "0.0.0-1093",
41
+ "docusaurus-plugin-openapi-docs": "0.0.0-1096",
42
42
  "docusaurus-plugin-sass": "^0.2.6",
43
43
  "eslint-plugin-prettier": "^5.5.1"
44
44
  },
@@ -81,5 +81,5 @@
81
81
  "engines": {
82
82
  "node": ">=14"
83
83
  },
84
- "gitHead": "25ec109b85febce944f00689f6985a89886280ae"
84
+ "gitHead": "0582169799b8f32b85ee3bca3cc43250e68976a2"
85
85
  }
package/src/theme/ApiExplorer/Body/index.tsx CHANGED
@@ -5,7 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  * ========================================================================== */
7
7
 
8
- import React from "react";
8
+ import React, { useEffect } from "react";
9
9
 
10
10
  import { translate } from "@docusaurus/Translate";
11
11
 
@@ -19,6 +19,7 @@ import SchemaTabs from "@theme/SchemaTabs";
19
19
  import TabItem from "@theme/TabItem";
20
20
  import { OPENAPI_BODY, OPENAPI_REQUEST } from "@theme/translationIds";
21
21
  import { RequestBodyObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
22
+ import { sampleFromSchema } from "docusaurus-plugin-openapi-docs/src/openapi/createSchemaExample";
22
23
  import format from "xml-formatter";
23
24
 
24
25
  import { clearRawBody, setFileRawBody, setStringRawBody } from "./slice";
@@ -149,12 +150,21 @@ function Body({
149
150
  let exampleBody;
150
151
  let examplesBodies = [] as any;
151
152
 
153
+ // Generate example from the schema for the current content type
154
+ let contentTypeExample;
155
+ if (schema) {
156
+ contentTypeExample = sampleFromSchema(schema, { type: "request" });
157
+ } else if (jsonRequestBodyExample) {
158
+ // Fallback to the build-time generated example if no schema is available
159
+ contentTypeExample = jsonRequestBodyExample;
160
+ }
161
+
152
162
  if (
153
163
  contentType.includes("application/json") ||
154
164
  contentType.endsWith("+json")
155
165
  ) {
156
- if (jsonRequestBodyExample) {
157
- defaultBody = JSON.stringify(jsonRequestBodyExample, null, 2);
166
+ if (contentTypeExample) {
167
+ defaultBody = JSON.stringify(contentTypeExample, null, 2);
158
168
  }
159
169
  if (example) {
160
170
  exampleBody = JSON.stringify(example, null, 2);
@@ -191,15 +201,15 @@ function Body({
191
201
  }
192
202
 
193
203
  if (contentType === "application/xml" || contentType.endsWith("+xml")) {
194
- if (jsonRequestBodyExample) {
204
+ if (contentTypeExample) {
195
205
  try {
196
- defaultBody = format(json2xml(jsonRequestBodyExample, ""), {
206
+ defaultBody = format(json2xml(contentTypeExample, ""), {
197
207
  indentation: " ",
198
208
  lineSeparator: "\n",
199
209
  collapseContent: true,
200
210
  });
201
211
  } catch {
202
- defaultBody = json2xml(jsonRequestBodyExample);
212
+ defaultBody = json2xml(contentTypeExample);
203
213
  }
204
214
  }
205
215
  if (example) {
@@ -255,6 +265,15 @@ function Body({
255
265
  language = "xml";
256
266
  }
257
267
 
268
+ // Update body in Redux when content type changes
269
+ useEffect(() => {
270
+ if (defaultBody) {
271
+ dispatch(setStringRawBody(defaultBody));
272
+ }
273
+ // Only re-run when contentType changes, not when defaultBody changes
274
+ // eslint-disable-next-line react-hooks/exhaustive-deps
275
+ }, [contentType]);
276
+
258
277
  if (exampleBody) {
259
278
  return (
260
279
  <FormItem>
@@ -269,6 +288,7 @@ function Body({
269
288
  default
270
289
  >
271
290
  <LiveApp
291
+ key={contentType}
272
292
  action={(code: string) => dispatch(setStringRawBody(code))}
273
293
  language={language}
274
294
  required={required}
@@ -281,6 +301,7 @@ function Body({
281
301
  {example.summary && <Markdown>{example.summary}</Markdown>}
282
302
  {exampleBody && (
283
303
  <LiveApp
304
+ key={contentType}
284
305
  action={(code: string) => dispatch(setStringRawBody(code))}
285
306
  language={language}
286
307
  required={required}
@@ -308,6 +329,7 @@ function Body({
308
329
  default
309
330
  >
310
331
  <LiveApp
332
+ key={contentType}
311
333
  action={(code: string) => dispatch(setStringRawBody(code))}
312
334
  language={language}
313
335
  required={required}
@@ -326,6 +348,7 @@ function Body({
326
348
  {example.summary && <Markdown>{example.summary}</Markdown>}
327
349
  {example.body && (
328
350
  <LiveApp
351
+ key={`${contentType}-${example.label}`}
329
352
  action={(code: string) => dispatch(setStringRawBody(code))}
330
353
  language={language}
331
354
  >
@@ -343,6 +366,7 @@ function Body({
343
366
  return (
344
367
  <FormItem>
345
368
  <LiveApp
369
+ key={contentType}
346
370
  action={(code: string) => dispatch(setStringRawBody(code))}
347
371
  language={language}
348
372
  required={required}
package/src/theme/RequestSchema/index.tsx CHANGED
@@ -45,7 +45,7 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
45
45
 
46
46
  if (mimeTypes.length > 1) {
47
47
  return (
48
- <MimeTabs className="openapi-tabs__mime" schemaType="request">
48
+ <MimeTabs className="openapi-tabs__mime" schemaType="request" lazy>
49
49
  {mimeTypes.map((mimeType) => {
50
50
  const firstBody = body.content![mimeType].schema;
51
51
  if (
@@ -58,43 +58,45 @@ const RequestSchemaComponent: React.FC<Props> = ({ title, body, style }) => {
58
58
  return (
59
59
  // @ts-ignore
60
60
  <TabItem key={mimeType} label={mimeType} value={mimeType}>
61
- <Details
62
- className="openapi-markdown__details mime"
63
- data-collapsed={false}
64
- open={true}
65
- style={style}
66
- summary={
67
- <>
68
- <summary>
69
- <h3 className="openapi-markdown__details-summary-header-body">
70
- {translate({
71
- id: OPENAPI_REQUEST.BODY_TITLE,
72
- message: title,
73
- })}
74
- {body.required === true && (
75
- <span className="openapi-schema__required">
76
- {translate({
77
- id: OPENAPI_SCHEMA_ITEM.REQUIRED,
78
- message: "required",
79
- })}
80
- </span>
81
- )}
82
- </h3>
83
- </summary>
84
- </>
85
- }
86
- >
87
- <div style={{ textAlign: "left", marginLeft: "1rem" }}>
88
- {body.description && (
89
- <div style={{ marginTop: "1rem", marginBottom: "1rem" }}>
90
- <Markdown>{body.description}</Markdown>
91
- </div>
92
- )}
93
- </div>
94
- <ul style={{ marginLeft: "1rem" }}>
95
- <SchemaNode schema={firstBody} schemaType="request" />
96
- </ul>
97
- </Details>
61
+ <div style={{ marginTop: "1rem" }}>
62
+ <Details
63
+ className="openapi-markdown__details mime"
64
+ data-collapsed={false}
65
+ open={true}
66
+ style={style}
67
+ summary={
68
+ <>
69
+ <summary>
70
+ <h3 className="openapi-markdown__details-summary-header-body">
71
+ {translate({
72
+ id: OPENAPI_REQUEST.BODY_TITLE,
73
+ message: title,
74
+ })}
75
+ {body.required === true && (
76
+ <span className="openapi-schema__required">
77
+ {translate({
78
+ id: OPENAPI_SCHEMA_ITEM.REQUIRED,
79
+ message: "required",
80
+ })}
81
+ </span>
82
+ )}
83
+ </h3>
84
+ </summary>
85
+ </>
86
+ }
87
+ >
88
+ <div style={{ textAlign: "left", marginLeft: "1rem" }}>
89
+ {body.description && (
90
+ <div style={{ marginTop: "1rem", marginBottom: "1rem" }}>
91
+ <Markdown>{body.description}</Markdown>
92
+ </div>
93
+ )}
94
+ </div>
95
+ <ul style={{ marginLeft: "1rem" }}>
96
+ <SchemaNode schema={firstBody} schemaType="request" />
97
+ </ul>
98
+ </Details>
99
+ </div>
98
100
  </TabItem>
99
101
  );
100
102
  })}