docusaurus-theme-openapi-docs 1.4.0 → 1.4.1

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.
@@ -35,15 +35,14 @@ function createPersistanceMiddleware(options) {
35
35
  if (state.auth.selected) {
36
36
  storage.setItem((0, _storageUtils.hashArray)(Object.keys(state.auth.options)), state.auth.selected);
37
37
  }
38
- }
39
-
40
- if (action.type === "contentType/setContentType") {
41
- storage.setItem("contentType", action.payload);
42
- }
38
+ } // TODO: determine way to rehydrate without flashing
39
+ // if (action.type === "contentType/setContentType") {
40
+ // storage.setItem("contentType", action.payload);
41
+ // }
42
+ // if (action.type === "accept/setAccept") {
43
+ // storage.setItem("accept", action.payload);
44
+ // }
43
45
 
44
- if (action.type === "accept/setAccept") {
45
- storage.setItem("accept", action.payload);
46
- }
47
46
 
48
47
  if (action.type === "server/setServer") {
49
48
  storage.setItem("server", action.payload);
@@ -15,7 +15,7 @@ var _themeCommon = require("@docusaurus/theme-common");
15
15
 
16
16
  var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
17
17
 
18
- var _clsx = _interopRequireDefault(require("clsx"));
18
+ var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
19
19
 
20
20
  var _reactRedux = require("react-redux");
21
21
 
@@ -41,9 +41,7 @@ const {
41
41
  DocProvider
42
42
  } = require("@docusaurus/theme-common/internal");
43
43
 
44
- let ApiDemoPanel = _ => <div style={{
45
- marginTop: "3.5em"
46
- }} />;
44
+ let ApiDemoPanel = _ => <div />;
47
45
 
48
46
  if (_ExecutionEnvironment.default.canUseDOM) {
49
47
  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -66,9 +64,18 @@ function ApiItem(props) {
66
64
  } = (0, _useDocusaurusContext.default)();
67
65
  const themeConfig = siteConfig.themeConfig;
68
66
  const options = themeConfig.api;
67
+ const isBrowser = (0, _useIsBrowser.default)(); // Define store2
69
68
 
70
- const ApiDocContent = () => {
71
- var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _window2, _window3, _ref;
69
+ let store2 = {};
70
+ const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options); // Init store for SSR
71
+
72
+ if (!isBrowser) {
73
+ store2 = (0, _store.createStoreWithoutState)({}, [persistanceMiddleware]);
74
+ } // Init store for CSR to hydrate components
75
+
76
+
77
+ if (isBrowser) {
78
+ var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _ref;
72
79
 
73
80
  const acceptArray = Array.from(new Set(Object.values((_api$responses = api === null || api === void 0 ? void 0 : api.responses) !== null && _api$responses !== void 0 ? _api$responses : {}).map(response => {
74
81
  var _response$content;
@@ -93,19 +100,19 @@ function ApiItem(props) {
93
100
  security: api === null || api === void 0 ? void 0 : api.security,
94
101
  securitySchemes: api === null || api === void 0 ? void 0 : api.securitySchemes,
95
102
  options
96
- });
97
- const acceptValue = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("accept");
98
- const contentTypeValue = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.sessionStorage.getItem("contentType");
99
- const server = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.sessionStorage.getItem("server");
103
+ }); // TODO: determine way to rehydrate without flashing
104
+ // const acceptValue = window?.sessionStorage.getItem("accept");
105
+ // const contentTypeValue = window?.sessionStorage.getItem("contentType");
106
+
107
+ const server = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("server");
100
108
  const serverObject = (_ref = JSON.parse(server)) !== null && _ref !== void 0 ? _ref : {};
101
- const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
102
- const store2 = (0, _store.createStoreWithState)({
109
+ store2 = (0, _store.createStoreWithState)({
103
110
  accept: {
104
- value: acceptValue || acceptArray[0],
111
+ value: acceptArray[0],
105
112
  options: acceptArray
106
113
  },
107
114
  contentType: {
108
- value: contentTypeValue || contentTypeArray[0],
115
+ value: contentTypeArray[0],
109
116
  options: contentTypeArray
110
117
  },
111
118
  server: {
@@ -121,29 +128,27 @@ function ApiItem(props) {
121
128
  params,
122
129
  auth
123
130
  }, [persistanceMiddleware]);
124
- return <_reactRedux.Provider store={store2}>
125
- <div className="row">
126
- <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
127
- <MDXComponent />
128
- </div>
129
- {api && <div className="col col--5">
130
- <ApiDemoPanel item={api} infoPath={infoPath} />
131
- </div>}
132
- </div>
133
- </_reactRedux.Provider>;
134
- };
131
+ }
135
132
 
136
133
  if (api) {
137
- // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
138
134
  return <DocProvider content={props.content}>
139
135
  <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
140
136
  <_Metadata.default />
141
137
  <_Layout.default>
142
- {<_BrowserOnly.default fallback={<div />}>
143
- {() => {
144
- return <ApiDocContent />;
145
- }}
146
- </_BrowserOnly.default>}
138
+ <_reactRedux.Provider store={store2}>
139
+ <div className="row">
140
+ <div className="col col--7">
141
+ <MDXComponent />
142
+ </div>
143
+ <div className="col col--5">
144
+ <_BrowserOnly.default fallback={<div>Loading...</div>}>
145
+ {() => {
146
+ return <ApiDemoPanel item={api} infoPath={infoPath} />;
147
+ }}
148
+ </_BrowserOnly.default>
149
+ </div>
150
+ </div>
151
+ </_reactRedux.Provider>
147
152
  </_Layout.default>
148
153
  </_themeCommon.HtmlClassNameProvider>
149
154
  </DocProvider>;
@@ -155,7 +160,7 @@ function ApiItem(props) {
155
160
  <_Metadata.default />
156
161
  <_Layout.default>
157
162
  <div className="row">
158
- <div className={(0, _clsx.default)("col col--12")}>
163
+ <div className="col col--12">
159
164
  <MDXComponent />
160
165
  </div>
161
166
  </div>
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.createStoreWithState = void 0;
6
+ exports.createStoreWithoutState = exports.createStoreWithState = void 0;
7
7
 
8
8
  var _toolkit = require("@reduxjs/toolkit");
9
9
 
@@ -45,4 +45,12 @@ const createStoreWithState = (preloadedState, middlewares) => (0, _toolkit.confi
45
45
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
46
46
  });
47
47
 
48
- exports.createStoreWithState = createStoreWithState;
48
+ exports.createStoreWithState = createStoreWithState;
49
+
50
+ const createStoreWithoutState = (preloadedState, middlewares) => (0, _toolkit.configureStore)({
51
+ reducer: rootReducer,
52
+ preloadedState,
53
+ middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
54
+ });
55
+
56
+ exports.createStoreWithoutState = createStoreWithoutState;
@@ -29,15 +29,13 @@ export function createPersistanceMiddleware(options) {
29
29
  state.auth.selected
30
30
  );
31
31
  }
32
- }
33
-
34
- if (action.type === "contentType/setContentType") {
35
- storage.setItem("contentType", action.payload);
36
- }
37
-
38
- if (action.type === "accept/setAccept") {
39
- storage.setItem("accept", action.payload);
40
- }
32
+ } // TODO: determine way to rehydrate without flashing
33
+ // if (action.type === "contentType/setContentType") {
34
+ // storage.setItem("contentType", action.payload);
35
+ // }
36
+ // if (action.type === "accept/setAccept") {
37
+ // storage.setItem("accept", action.payload);
38
+ // }
41
39
 
42
40
  if (action.type === "server/setServer") {
43
41
  storage.setItem("server", action.payload);
@@ -9,23 +9,17 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
9
9
  import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
10
10
  import { HtmlClassNameProvider } from "@docusaurus/theme-common";
11
11
  import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
12
- import clsx from "clsx";
12
+ import useIsBrowser from "@docusaurus/useIsBrowser";
13
13
  import { Provider } from "react-redux";
14
14
  import { createAuth } from "../ApiDemoPanel/Authorization/slice";
15
15
  import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
16
16
  import DocItemLayout from "./Layout";
17
17
  import DocItemMetadata from "./Metadata";
18
- import { createStoreWithState } from "./store";
18
+ import { createStoreWithoutState, createStoreWithState } from "./store";
19
19
 
20
20
  const { DocProvider } = require("@docusaurus/theme-common/internal");
21
21
 
22
- let ApiDemoPanel = (_) => (
23
- <div
24
- style={{
25
- marginTop: "3.5em",
26
- }}
27
- />
28
- );
22
+ let ApiDemoPanel = (_) => <div />;
29
23
 
30
24
  if (ExecutionEnvironment.canUseDOM) {
31
25
  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -40,8 +34,16 @@ export default function ApiItem(props) {
40
34
  const { siteConfig } = useDocusaurusContext();
41
35
  const themeConfig = siteConfig.themeConfig;
42
36
  const options = themeConfig.api;
37
+ const isBrowser = useIsBrowser(); // Define store2
43
38
 
44
- const ApiDocContent = () => {
39
+ let store2 = {};
40
+ const persistanceMiddleware = createPersistanceMiddleware(options); // Init store for SSR
41
+
42
+ if (!isBrowser) {
43
+ store2 = createStoreWithoutState({}, [persistanceMiddleware]);
44
+ } // Init store for CSR to hydrate components
45
+
46
+ if (isBrowser) {
45
47
  const acceptArray = Array.from(
46
48
  new Set(
47
49
  Object.values(api?.responses ?? {})
@@ -67,20 +69,20 @@ export default function ApiItem(props) {
67
69
  security: api?.security,
68
70
  securitySchemes: api?.securitySchemes,
69
71
  options,
70
- });
71
- const acceptValue = window?.sessionStorage.getItem("accept");
72
- const contentTypeValue = window?.sessionStorage.getItem("contentType");
72
+ }); // TODO: determine way to rehydrate without flashing
73
+ // const acceptValue = window?.sessionStorage.getItem("accept");
74
+ // const contentTypeValue = window?.sessionStorage.getItem("contentType");
75
+
73
76
  const server = window?.sessionStorage.getItem("server");
74
77
  const serverObject = JSON.parse(server) ?? {};
75
- const persistanceMiddleware = createPersistanceMiddleware(options);
76
- const store2 = createStoreWithState(
78
+ store2 = createStoreWithState(
77
79
  {
78
80
  accept: {
79
- value: acceptValue || acceptArray[0],
81
+ value: acceptArray[0],
80
82
  options: acceptArray,
81
83
  },
82
84
  contentType: {
83
- value: contentTypeValue || contentTypeArray[0],
85
+ value: contentTypeArray[0],
84
86
  options: contentTypeArray,
85
87
  },
86
88
  server: {
@@ -98,36 +100,28 @@ export default function ApiItem(props) {
98
100
  },
99
101
  [persistanceMiddleware]
100
102
  );
101
- return (
102
- <Provider store={store2}>
103
- <div className="row">
104
- <div className={clsx("col", api ? "col--7" : "col--12")}>
105
- <MDXComponent />
106
- </div>
107
- {api && (
108
- <div className="col col--5">
109
- <ApiDemoPanel item={api} infoPath={infoPath} />
110
- </div>
111
- )}
112
- </div>
113
- </Provider>
114
- );
115
- };
103
+ }
116
104
 
117
105
  if (api) {
118
- // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
119
106
  return (
120
107
  <DocProvider content={props.content}>
121
108
  <HtmlClassNameProvider className={docHtmlClassName}>
122
109
  <DocItemMetadata />
123
110
  <DocItemLayout>
124
- {
125
- <BrowserOnly fallback={<div />}>
126
- {() => {
127
- return <ApiDocContent />;
128
- }}
129
- </BrowserOnly>
130
- }
111
+ <Provider store={store2}>
112
+ <div className="row">
113
+ <div className="col col--7">
114
+ <MDXComponent />
115
+ </div>
116
+ <div className="col col--5">
117
+ <BrowserOnly fallback={<div>Loading...</div>}>
118
+ {() => {
119
+ return <ApiDemoPanel item={api} infoPath={infoPath} />;
120
+ }}
121
+ </BrowserOnly>
122
+ </div>
123
+ </div>
124
+ </Provider>
131
125
  </DocItemLayout>
132
126
  </HtmlClassNameProvider>
133
127
  </DocProvider>
@@ -140,7 +134,7 @@ export default function ApiItem(props) {
140
134
  <DocItemMetadata />
141
135
  <DocItemLayout>
142
136
  <div className="row">
143
- <div className={clsx("col col--12")}>
137
+ <div className="col col--12">
144
138
  <MDXComponent />
145
139
  </div>
146
140
  </div>
@@ -28,3 +28,10 @@ export const createStoreWithState = (preloadedState, middlewares) =>
28
28
  middleware: (getDefaultMiddleware) =>
29
29
  getDefaultMiddleware().concat(...middlewares),
30
30
  });
31
+ export const createStoreWithoutState = (preloadedState, middlewares) =>
32
+ configureStore({
33
+ reducer: rootReducer,
34
+ preloadedState,
35
+ middleware: (getDefaultMiddleware) =>
36
+ getDefaultMiddleware().concat(...middlewares),
37
+ });
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": "1.4.0",
4
+ "version": "1.4.1",
5
5
  "license": "MIT",
6
6
  "keywords": [
7
7
  "openapi",
@@ -51,7 +51,7 @@
51
51
  "buffer": "^6.0.3",
52
52
  "clsx": "^1.1.1",
53
53
  "crypto-js": "^4.1.1",
54
- "docusaurus-plugin-openapi-docs": "^1.4.0",
54
+ "docusaurus-plugin-openapi-docs": "^1.4.1",
55
55
  "file-saver": "^2.0.5",
56
56
  "immer": "^9.0.7",
57
57
  "lodash": "^4.17.20",
@@ -73,5 +73,5 @@
73
73
  "engines": {
74
74
  "node": ">=14"
75
75
  },
76
- "gitHead": "74c5c52e4aa493eb4943d4899c60669f8722e089"
76
+ "gitHead": "ddfa49093f75f628536b8d9e25f88eb9e541667c"
77
77
  }
@@ -40,13 +40,14 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
40
40
  }
41
41
  }
42
42
 
43
- if (action.type === "contentType/setContentType") {
44
- storage.setItem("contentType", action.payload);
45
- }
43
+ // TODO: determine way to rehydrate without flashing
44
+ // if (action.type === "contentType/setContentType") {
45
+ // storage.setItem("contentType", action.payload);
46
+ // }
46
47
 
47
- if (action.type === "accept/setAccept") {
48
- storage.setItem("accept", action.payload);
49
- }
48
+ // if (action.type === "accept/setAccept") {
49
+ // storage.setItem("accept", action.payload);
50
+ // }
50
51
 
51
52
  if (action.type === "server/setServer") {
52
53
  storage.setItem("server", action.payload);
@@ -11,8 +11,8 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
11
11
  import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
12
12
  import { HtmlClassNameProvider } from "@docusaurus/theme-common";
13
13
  import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
14
+ import useIsBrowser from "@docusaurus/useIsBrowser";
14
15
  import type { Props } from "@theme/DocItem";
15
- import clsx from "clsx";
16
16
  import { ServerObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
17
17
  import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/types";
18
18
  import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
@@ -24,13 +24,11 @@ import { createAuth } from "../ApiDemoPanel/Authorization/slice";
24
24
  import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
25
25
  import DocItemLayout from "./Layout";
26
26
  import DocItemMetadata from "./Metadata";
27
- import { createStoreWithState } from "./store";
27
+ import { createStoreWithoutState, createStoreWithState } from "./store";
28
28
 
29
29
  const { DocProvider } = require("@docusaurus/theme-common/internal");
30
30
 
31
- let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
32
- <div style={{ marginTop: "3.5em" }} />
33
- );
31
+ let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
34
32
 
35
33
  if (ExecutionEnvironment.canUseDOM) {
36
34
  ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -49,8 +47,19 @@ export default function ApiItem(props: Props): JSX.Element {
49
47
  const { siteConfig } = useDocusaurusContext();
50
48
  const themeConfig = siteConfig.themeConfig as ThemeConfig;
51
49
  const options = themeConfig.api;
50
+ const isBrowser = useIsBrowser();
52
51
 
53
- const ApiDocContent = () => {
52
+ // Define store2
53
+ let store2: any = {};
54
+ const persistanceMiddleware = createPersistanceMiddleware(options);
55
+
56
+ // Init store for SSR
57
+ if (!isBrowser) {
58
+ store2 = createStoreWithoutState({}, [persistanceMiddleware]);
59
+ }
60
+
61
+ // Init store for CSR to hydrate components
62
+ if (isBrowser) {
54
63
  const acceptArray = Array.from(
55
64
  new Set(
56
65
  Object.values(api?.responses ?? {})
@@ -79,20 +88,20 @@ export default function ApiItem(props: Props): JSX.Element {
79
88
  securitySchemes: api?.securitySchemes,
80
89
  options,
81
90
  });
82
- const acceptValue = window?.sessionStorage.getItem("accept");
83
- const contentTypeValue = window?.sessionStorage.getItem("contentType");
91
+ // TODO: determine way to rehydrate without flashing
92
+ // const acceptValue = window?.sessionStorage.getItem("accept");
93
+ // const contentTypeValue = window?.sessionStorage.getItem("contentType");
84
94
  const server = window?.sessionStorage.getItem("server");
85
95
  const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
86
96
 
87
- const persistanceMiddleware = createPersistanceMiddleware(options);
88
- const store2 = createStoreWithState(
97
+ store2 = createStoreWithState(
89
98
  {
90
99
  accept: {
91
- value: acceptValue || acceptArray[0],
100
+ value: acceptArray[0],
92
101
  options: acceptArray,
93
102
  },
94
103
  contentType: {
95
- value: contentTypeValue || contentTypeArray[0],
104
+ value: contentTypeArray[0],
96
105
  options: contentTypeArray,
97
106
  },
98
107
  server: {
@@ -106,42 +115,34 @@ export default function ApiItem(props: Props): JSX.Element {
106
115
  },
107
116
  [persistanceMiddleware]
108
117
  );
109
-
110
- return (
111
- <Provider store={store2}>
112
- <div className="row">
113
- <div className={clsx("col", api ? "col--7" : "col--12")}>
114
- <MDXComponent />
115
- </div>
116
- {api && (
117
- <div className="col col--5">
118
- <ApiDemoPanel item={api} infoPath={infoPath} />
119
- </div>
120
- )}
121
- </div>
122
- </Provider>
123
- );
124
- };
118
+ }
125
119
 
126
120
  if (api) {
127
- // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
128
121
  return (
129
122
  <DocProvider content={props.content}>
130
123
  <HtmlClassNameProvider className={docHtmlClassName}>
131
124
  <DocItemMetadata />
132
125
  <DocItemLayout>
133
- {
134
- <BrowserOnly fallback={<div />}>
135
- {() => {
136
- return <ApiDocContent />;
137
- }}
138
- </BrowserOnly>
139
- }
126
+ <Provider store={store2}>
127
+ <div className="row">
128
+ <div className="col col--7">
129
+ <MDXComponent />
130
+ </div>
131
+ <div className="col col--5">
132
+ <BrowserOnly fallback={<div>Loading...</div>}>
133
+ {() => {
134
+ return <ApiDemoPanel item={api} infoPath={infoPath} />;
135
+ }}
136
+ </BrowserOnly>
137
+ </div>
138
+ </div>
139
+ </Provider>
140
140
  </DocItemLayout>
141
141
  </HtmlClassNameProvider>
142
142
  </DocProvider>
143
143
  );
144
144
  }
145
+
145
146
  // Non-API docs
146
147
  return (
147
148
  <DocProvider content={props.content}>
@@ -149,7 +150,7 @@ export default function ApiItem(props: Props): JSX.Element {
149
150
  <DocItemMetadata />
150
151
  <DocItemLayout>
151
152
  <div className="row">
152
- <div className={clsx("col col--12")}>
153
+ <div className="col col--12">
153
154
  <MDXComponent />
154
155
  </div>
155
156
  </div>
@@ -38,4 +38,15 @@ export const createStoreWithState = (
38
38
  getDefaultMiddleware().concat(...middlewares),
39
39
  });
40
40
 
41
+ export const createStoreWithoutState = (
42
+ preloadedState: {},
43
+ middlewares: any[]
44
+ ) =>
45
+ configureStore({
46
+ reducer: rootReducer,
47
+ preloadedState,
48
+ middleware: (getDefaultMiddleware) =>
49
+ getDefaultMiddleware().concat(...middlewares),
50
+ });
51
+
41
52
  export type AppDispatch = ReturnType<typeof createStoreWithState>["dispatch"];