docusaurus-theme-openapi-docs 1.4.0 → 1.4.2

package/lib/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -35,15 +35,14 @@ function createPersistanceMiddleware(options) {
       if (state.auth.selected) {
         storage.setItem((0, _storageUtils.hashArray)(Object.keys(state.auth.options)), state.auth.selected);
       }
-    }
-
-    if (action.type === "contentType/setContentType") {
-      storage.setItem("contentType", action.payload);
-    }
+    } // TODO: determine way to rehydrate without flashing
+    // if (action.type === "contentType/setContentType") {
+    //   storage.setItem("contentType", action.payload);
+    // }
+    // if (action.type === "accept/setAccept") {
+    //   storage.setItem("accept", action.payload);
+    // }
 
-    if (action.type === "accept/setAccept") {
-      storage.setItem("accept", action.payload);
-    }
 
     if (action.type === "server/setServer") {
       storage.setItem("server", action.payload);

package/lib/theme/ApiItem/index.js

@@ -15,7 +15,7 @@ var _themeCommon = require("@docusaurus/theme-common");
 
 var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _useIsBrowser = _interopRequireDefault(require("@docusaurus/useIsBrowser"));
 
 var _reactRedux = require("react-redux");
 
@@ -41,9 +41,7 @@ const {
   DocProvider
 } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = _ => <div style={{
-  marginTop: "3.5em"
-}} />;
+let ApiDemoPanel = _ => <div />;
 
 if (_ExecutionEnvironment.default.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -66,9 +64,18 @@ function ApiItem(props) {
   } = (0, _useDocusaurusContext.default)();
   const themeConfig = siteConfig.themeConfig;
   const options = themeConfig.api;
+  const isBrowser = (0, _useIsBrowser.default)(); // Define store2
 
-  const ApiDocContent = () => {
-    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _window2, _window3, _ref;
+  let store2 = {};
+  const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options); // Init store for SSR
+
+  if (!isBrowser) {
+    store2 = (0, _store.createStoreWithoutState)({}, [persistanceMiddleware]);
+  } // Init store for CSR to hydrate components
+
+
+  if (isBrowser) {
+    var _api$responses, _api$requestBody$cont, _api$requestBody, _api$servers, _api$parameters, _window, _ref;
 
     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 => {
       var _response$content;
@@ -93,19 +100,19 @@ function ApiItem(props) {
       security: api === null || api === void 0 ? void 0 : api.security,
       securitySchemes: api === null || api === void 0 ? void 0 : api.securitySchemes,
       options
-    });
-    const acceptValue = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("accept");
-    const contentTypeValue = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.sessionStorage.getItem("contentType");
-    const server = (_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.sessionStorage.getItem("server");
+    }); // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
+
+    const server = (_window = window) === null || _window === void 0 ? void 0 : _window.sessionStorage.getItem("server");
     const serverObject = (_ref = JSON.parse(server)) !== null && _ref !== void 0 ? _ref : {};
-    const persistanceMiddleware = (0, _persistanceMiddleware.createPersistanceMiddleware)(options);
-    const store2 = (0, _store.createStoreWithState)({
+    store2 = (0, _store.createStoreWithState)({
       accept: {
-        value: acceptValue || acceptArray[0],
+        value: acceptArray[0],
         options: acceptArray
       },
       contentType: {
-        value: contentTypeValue || contentTypeArray[0],
+        value: contentTypeArray[0],
         options: contentTypeArray
       },
       server: {
@@ -121,29 +128,27 @@ function ApiItem(props) {
       params,
       auth
     }, [persistanceMiddleware]);
-    return <_reactRedux.Provider store={store2}>
-        <div className="row">
-          <div className={(0, _clsx.default)("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>}
-        </div>
-      </_reactRedux.Provider>;
-  };
+  }
 
   if (api) {
-    // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
     return <DocProvider content={props.content}>
         <_themeCommon.HtmlClassNameProvider className={docHtmlClassName}>
           <_Metadata.default />
           <_Layout.default>
-            {<_BrowserOnly.default fallback={<div />}>
-                {() => {
-              return <ApiDocContent />;
-            }}
-              </_BrowserOnly.default>}
+            <_reactRedux.Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <_BrowserOnly.default fallback={<div>Loading...</div>}>
+                    {() => {
+                    return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                  }}
+                  </_BrowserOnly.default>
+                </div>
+              </div>
+            </_reactRedux.Provider>
           </_Layout.default>
         </_themeCommon.HtmlClassNameProvider>
       </DocProvider>;
@@ -155,7 +160,7 @@ function ApiItem(props) {
         <_Metadata.default />
         <_Layout.default>
           <div className="row">
-            <div className={(0, _clsx.default)("col col--12")}>
+            <div className="col col--12">
               <MDXComponent />
             </div>
           </div>

package/lib/theme/ApiItem/store.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createStoreWithState = void 0;
+exports.createStoreWithoutState = exports.createStoreWithState = void 0;
 
 var _toolkit = require("@reduxjs/toolkit");
 
@@ -45,4 +45,12 @@ const createStoreWithState = (preloadedState, middlewares) => (0, _toolkit.confi
   middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
 });
 
-exports.createStoreWithState = createStoreWithState;
+exports.createStoreWithState = createStoreWithState;
+
+const createStoreWithoutState = (preloadedState, middlewares) => (0, _toolkit.configureStore)({
+  reducer: rootReducer,
+  preloadedState,
+  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(...middlewares)
+});
+
+exports.createStoreWithoutState = createStoreWithoutState;

package/lib/theme/SchemaTabs/index.js

@@ -147,12 +147,21 @@ function SchemaTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {

package/lib-next/theme/ApiDemoPanel/persistanceMiddleware.js

@@ -29,15 +29,13 @@ export function createPersistanceMiddleware(options) {
           state.auth.selected
         );
       }
-    }
-
-    if (action.type === "contentType/setContentType") {
-      storage.setItem("contentType", action.payload);
-    }
-
-    if (action.type === "accept/setAccept") {
-      storage.setItem("accept", action.payload);
-    }
+    } // TODO: determine way to rehydrate without flashing
+    // if (action.type === "contentType/setContentType") {
+    //   storage.setItem("contentType", action.payload);
+    // }
+    // if (action.type === "accept/setAccept") {
+    //   storage.setItem("accept", action.payload);
+    // }
 
     if (action.type === "server/setServer") {
       storage.setItem("server", action.payload);

package/lib-next/theme/ApiItem/index.js

@@ -9,23 +9,17 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import clsx from "clsx";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import { Provider } from "react-redux";
 import { createAuth } from "../ApiDemoPanel/Authorization/slice";
 import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
-import { createStoreWithState } from "./store";
+import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_) => (
-  <div
-    style={{
-      marginTop: "3.5em",
-    }}
-  />
-);
+let ApiDemoPanel = (_) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -40,8 +34,16 @@ export default function ApiItem(props) {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig;
   const options = themeConfig.api;
+  const isBrowser = useIsBrowser(); // Define store2
 
-  const ApiDocContent = () => {
+  let store2 = {};
+  const persistanceMiddleware = createPersistanceMiddleware(options); // Init store for SSR
+
+  if (!isBrowser) {
+    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+  } // Init store for CSR to hydrate components
+
+  if (isBrowser) {
     const acceptArray = Array.from(
       new Set(
         Object.values(api?.responses ?? {})
@@ -67,20 +69,20 @@ export default function ApiItem(props) {
       security: api?.security,
       securitySchemes: api?.securitySchemes,
       options,
-    });
-    const acceptValue = window?.sessionStorage.getItem("accept");
-    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    }); // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
+
     const server = window?.sessionStorage.getItem("server");
     const serverObject = JSON.parse(server) ?? {};
-    const persistanceMiddleware = createPersistanceMiddleware(options);
-    const store2 = createStoreWithState(
+    store2 = createStoreWithState(
       {
         accept: {
-          value: acceptValue || acceptArray[0],
+          value: acceptArray[0],
           options: acceptArray,
         },
         contentType: {
-          value: contentTypeValue || contentTypeArray[0],
+          value: contentTypeArray[0],
           options: contentTypeArray,
         },
         server: {
@@ -98,36 +100,28 @@ export default function ApiItem(props) {
       },
       [persistanceMiddleware]
     );
-    return (
-      <Provider store={store2}>
-        <div className="row">
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && (
-            <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>
-          )}
-        </div>
-      </Provider>
-    );
-  };
+  }
 
   if (api) {
-    // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
     return (
       <DocProvider content={props.content}>
         <HtmlClassNameProvider className={docHtmlClassName}>
           <DocItemMetadata />
           <DocItemLayout>
-            {
-              <BrowserOnly fallback={<div />}>
-                {() => {
-                  return <ApiDocContent />;
-                }}
-              </BrowserOnly>
-            }
+            <Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <BrowserOnly fallback={<div>Loading...</div>}>
+                    {() => {
+                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                    }}
+                  </BrowserOnly>
+                </div>
+              </div>
+            </Provider>
           </DocItemLayout>
         </HtmlClassNameProvider>
       </DocProvider>
@@ -140,7 +134,7 @@ export default function ApiItem(props) {
         <DocItemMetadata />
         <DocItemLayout>
           <div className="row">
-            <div className={clsx("col col--12")}>
+            <div className="col col--12">
               <MDXComponent />
             </div>
           </div>

package/lib-next/theme/ApiItem/store.js

@@ -28,3 +28,10 @@ export const createStoreWithState = (preloadedState, middlewares) =>
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware().concat(...middlewares),
   });
+export const createStoreWithoutState = (preloadedState, middlewares) =>
+  configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(...middlewares),
+  });

package/lib-next/theme/SchemaTabs/index.js

@@ -147,12 +147,21 @@ function SchemaTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -51,7 +51,7 @@
     "buffer": "^6.0.3",
     "clsx": "^1.1.1",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "^1.4.0",
+    "docusaurus-plugin-openapi-docs": "^1.4.2",
     "file-saver": "^2.0.5",
     "immer": "^9.0.7",
     "lodash": "^4.17.20",
@@ -73,5 +73,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "74c5c52e4aa493eb4943d4899c60669f8722e089"
+  "gitHead": "e5337f7fecf3b082c0781f798a479b2a63237432"
 }

package/src/theme/ApiDemoPanel/persistanceMiddleware.ts

@@ -40,13 +40,14 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
         }
       }
 
-      if (action.type === "contentType/setContentType") {
-        storage.setItem("contentType", action.payload);
-      }
+      // TODO: determine way to rehydrate without flashing
+      // if (action.type === "contentType/setContentType") {
+      //   storage.setItem("contentType", action.payload);
+      // }
 
-      if (action.type === "accept/setAccept") {
-        storage.setItem("accept", action.payload);
-      }
+      // if (action.type === "accept/setAccept") {
+      //   storage.setItem("accept", action.payload);
+      // }
 
       if (action.type === "server/setServer") {
         storage.setItem("server", action.payload);

package/src/theme/ApiItem/index.tsx

@@ -11,8 +11,8 @@ import BrowserOnly from "@docusaurus/BrowserOnly";
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import type { Props } from "@theme/DocItem";
-import clsx from "clsx";
 import { ServerObject } from "docusaurus-plugin-openapi-docs/lib/openapi/types";
 import type { ApiItem as ApiItemType } from "docusaurus-plugin-openapi-docs/lib/types";
 import { ParameterObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
@@ -24,13 +24,11 @@ import { createAuth } from "../ApiDemoPanel/Authorization/slice";
 import { createPersistanceMiddleware } from "../ApiDemoPanel/persistanceMiddleware";
 import DocItemLayout from "./Layout";
 import DocItemMetadata from "./Metadata";
-import { createStoreWithState } from "./store";
+import { createStoreWithoutState, createStoreWithState } from "./store";
 
 const { DocProvider } = require("@docusaurus/theme-common/internal");
 
-let ApiDemoPanel = (_: { item: any; infoPath: any }) => (
-  <div style={{ marginTop: "3.5em" }} />
-);
+let ApiDemoPanel = (_: { item: any; infoPath: any }) => <div />;
 
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
@@ -49,8 +47,19 @@ export default function ApiItem(props: Props): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   const themeConfig = siteConfig.themeConfig as ThemeConfig;
   const options = themeConfig.api;
+  const isBrowser = useIsBrowser();
 
-  const ApiDocContent = () => {
+  // Define store2
+  let store2: any = {};
+  const persistanceMiddleware = createPersistanceMiddleware(options);
+
+  // Init store for SSR
+  if (!isBrowser) {
+    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+  }
+
+  // Init store for CSR to hydrate components
+  if (isBrowser) {
     const acceptArray = Array.from(
       new Set(
         Object.values(api?.responses ?? {})
@@ -79,20 +88,20 @@ export default function ApiItem(props: Props): JSX.Element {
       securitySchemes: api?.securitySchemes,
       options,
     });
-    const acceptValue = window?.sessionStorage.getItem("accept");
-    const contentTypeValue = window?.sessionStorage.getItem("contentType");
+    // TODO: determine way to rehydrate without flashing
+    // const acceptValue = window?.sessionStorage.getItem("accept");
+    // const contentTypeValue = window?.sessionStorage.getItem("contentType");
     const server = window?.sessionStorage.getItem("server");
     const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
 
-    const persistanceMiddleware = createPersistanceMiddleware(options);
-    const store2 = createStoreWithState(
+    store2 = createStoreWithState(
       {
         accept: {
-          value: acceptValue || acceptArray[0],
+          value: acceptArray[0],
           options: acceptArray,
         },
         contentType: {
-          value: contentTypeValue || contentTypeArray[0],
+          value: contentTypeArray[0],
           options: contentTypeArray,
         },
         server: {
@@ -106,42 +115,34 @@ export default function ApiItem(props: Props): JSX.Element {
       },
       [persistanceMiddleware]
     );
-
-    return (
-      <Provider store={store2}>
-        <div className="row">
-          <div className={clsx("col", api ? "col--7" : "col--12")}>
-            <MDXComponent />
-          </div>
-          {api && (
-            <div className="col col--5">
-              <ApiDemoPanel item={api} infoPath={infoPath} />
-            </div>
-          )}
-        </div>
-      </Provider>
-    );
-  };
+  }
 
   if (api) {
-    // TODO: determine if there's a way to SSR and hydrate ApiItem/ApiDemoPanel
     return (
       <DocProvider content={props.content}>
         <HtmlClassNameProvider className={docHtmlClassName}>
           <DocItemMetadata />
           <DocItemLayout>
-            {
-              <BrowserOnly fallback={<div />}>
-                {() => {
-                  return <ApiDocContent />;
-                }}
-              </BrowserOnly>
-            }
+            <Provider store={store2}>
+              <div className="row">
+                <div className="col col--7">
+                  <MDXComponent />
+                </div>
+                <div className="col col--5">
+                  <BrowserOnly fallback={<div>Loading...</div>}>
+                    {() => {
+                      return <ApiDemoPanel item={api} infoPath={infoPath} />;
+                    }}
+                  </BrowserOnly>
+                </div>
+              </div>
+            </Provider>
           </DocItemLayout>
         </HtmlClassNameProvider>
       </DocProvider>
     );
   }
+
   // Non-API docs
   return (
     <DocProvider content={props.content}>
@@ -149,7 +150,7 @@ export default function ApiItem(props: Props): JSX.Element {
         <DocItemMetadata />
         <DocItemLayout>
           <div className="row">
-            <div className={clsx("col col--12")}>
+            <div className="col col--12">
               <MDXComponent />
             </div>
           </div>

package/src/theme/ApiItem/store.ts

@@ -38,4 +38,15 @@ export const createStoreWithState = (
       getDefaultMiddleware().concat(...middlewares),
   });
 
+export const createStoreWithoutState = (
+  preloadedState: {},
+  middlewares: any[]
+) =>
+  configureStore({
+    reducer: rootReducer,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(...middlewares),
+  });
+
 export type AppDispatch = ReturnType<typeof createStoreWithState>["dispatch"];

package/src/theme/SchemaTabs/index.js

@@ -147,12 +147,21 @@ function SchemaTabsComponent(props) {
   const [showTabArrows, setShowTabArrows] = useState(false);
 
   useEffect(() => {
-    const tabOffsetWidth = tabItemListContainerRef.current.offsetWidth;
-    const tabScrollWidth = tabItemListContainerRef.current.scrollWidth;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.target.offsetWidth < entry.target.scrollWidth) {
+          setShowTabArrows(true);
+        } else {
+          setShowTabArrows(false);
+        }
+      }
+    });
 
-    if (tabOffsetWidth < tabScrollWidth) {
-      setShowTabArrows(true);
-    }
+    resizeObserver.observe(tabItemListContainerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
 
   const handleRightClick = () => {