docusaurus-theme-openapi-docs 0.0.0-1258 → 0.0.0-1268

package/lib/theme/ApiExplorer/CodeSnippets/index.js

@@ -69,6 +69,7 @@ var __importDefault =
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.languageSet = void 0;
 const react_1 = __importStar(require("react"));
+const theme_common_1 = require("@docusaurus/theme-common");
 const useDocusaurusContext_1 = __importDefault(
   require("@docusaurus/useDocusaurusContext")
 );
@@ -94,6 +95,17 @@ function CodeTab({ children, hidden, className }) {
     children
   );
 }
+/** Align with Docusaurus `<Tabs groupId="code-samples">` persisted tab value. */
+function resolveOuterLanguageFromPersistedTab(persistedTab, langs) {
+  if (langs.length === 1) {
+    return langs[0];
+  }
+  const matched = langs.find((lang) => lang.language === persistedTab);
+  if (matched) {
+    return matched;
+  }
+  return langs[0];
+}
 function CodeSnippets({
   postman,
   codeSamples,
@@ -170,35 +182,44 @@ function CodeSnippets({
   // Can override languageSet, change order of langs, override options and variants
   const userDefinedLanguageSet =
     siteConfig?.themeConfig?.languageTabs ?? exports.languageSet;
-  // Filter languageSet by user-defined langs
-  const filteredLanguageSet = exports.languageSet.filter((ls) => {
-    return userDefinedLanguageSet?.some((lang) => {
-      return lang.language === ls.language;
+  const mergedLangs = (0, react_1.useMemo)(() => {
+    const filteredLanguageSet = exports.languageSet.filter((ls) => {
+      return userDefinedLanguageSet?.some((lang) => {
+        return lang.language === ls.language;
+      });
     });
-  });
-  // Merge user-defined langs into languageSet
-  const mergedLangs = (0, languages_1.mergeCodeSampleLanguage)(
-    (0, languages_1.mergeArraysbyLanguage)(
-      userDefinedLanguageSet,
-      filteredLanguageSet
-    ),
-    codeSamples
+    return (0, languages_1.mergeCodeSampleLanguage)(
+      (0, languages_1.mergeArraysbyLanguage)(
+        userDefinedLanguageSet,
+        filteredLanguageSet
+      ),
+      codeSamples
+    );
+  }, [userDefinedLanguageSet, codeSamples]);
+  const [persistedOuterTab] = (0, theme_common_1.useStorageSlot)(
+    "docusaurus.tab.code-samples"
   );
-  // Read defaultLang from localStorage
-  const defaultLang = mergedLangs.filter(
-    (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+  const initialOuterLanguage = (0, react_1.useMemo)(
+    () => resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs),
+    [persistedOuterTab, mergedLangs]
   );
   const [selectedVariant, setSelectedVariant] = (0, react_1.useState)();
   const [selectedSample, setSelectedSample] = (0, react_1.useState)();
-  const [language, setLanguage] = (0, react_1.useState)(() => {
-    // Return first index if only 1 user-defined language exists
-    if (mergedLangs.length === 1) {
-      return mergedLangs[0];
-    }
-    // Fall back to language in localStorage or first user-defined language
-    return defaultLang[0] ?? mergedLangs[0];
-  });
+  const [language, setLanguage] = (0, react_1.useState)(() =>
+    resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs)
+  );
+  (0, react_1.useEffect)(() => {
+    const next = resolveOuterLanguageFromPersistedTab(
+      persistedOuterTab,
+      mergedLangs
+    );
+    setLanguage((prev) => {
+      if (prev?.language !== next.language) {
+        return next;
+      }
+      return mergedLangs.find((l) => l.language === next.language) ?? next;
+    });
+  }, [persistedOuterTab, mergedLangs]);
   const [codeText, setCodeText] = (0, react_1.useState)("");
   const [codeSampleCodeText, setCodeSampleCodeText] = (0, react_1.useState)(
     () => (0, languages_1.getCodeSampleSourceFromLanguage)(language)
@@ -315,7 +336,7 @@ function CodeSnippets({
           setSelectedSample: setSelectedSample,
         },
         languageSet: mergedLangs,
-        defaultValue: defaultLang[0]?.language ?? mergedLangs[0].language,
+        defaultValue: initialOuterLanguage.language,
         lazy: true,
       },
       mergedLangs.map((lang) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-1258",
+  "version": "0.0.0-1268",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -38,7 +38,7 @@
     "@types/postman-collection": "^3.5.11",
     "@types/react-modal": "^3.16.3",
     "concurrently": "^9.2.0",
-    "docusaurus-plugin-openapi-docs": "0.0.0-1258",
+    "docusaurus-plugin-openapi-docs": "0.0.0-1268",
     "docusaurus-plugin-sass": "^0.2.6",
     "eslint-plugin-prettier": "^5.5.1"
   },
@@ -82,5 +82,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "54019febae5105135595ecb0eef0e1a88ec2eeb0"
+  "gitHead": "27848b60d7a6efd00d8a202a554b81152e24408e"
 }

package/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -5,20 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
+import { useStorageSlot } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useResolvedEncoding } from "@theme/ApiExplorer/EncodingSelection/useResolvedEncoding";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
+import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 import cloneDeep from "lodash/cloneDeep";
 import codegen from "postman-code-generators";
 import * as sdk from "postman-collection";
 
-import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
-
 import { CodeSample, Language } from "./code-snippets-types";
 import {
   getCodeSampleSourceFromLanguage,
@@ -44,6 +44,21 @@ function CodeTab({ children, hidden, className }: any): React.JSX.Element {
   );
 }
 
+/** Align with Docusaurus `<Tabs groupId="code-samples">` persisted tab value. */
+function resolveOuterLanguageFromPersistedTab(
+  persistedTab: string | null,
+  langs: Language[]
+): Language {
+  if (langs.length === 1) {
+    return langs[0];
+  }
+  const matched = langs.find((lang) => lang.language === persistedTab);
+  if (matched) {
+    return matched;
+  }
+  return langs[0];
+}
+
 function CodeSnippets({
   postman,
   codeSamples,
@@ -126,34 +141,43 @@ function CodeSnippets({
     (siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
     languageSet;
 
-  // Filter languageSet by user-defined langs
-  const filteredLanguageSet = languageSet.filter((ls) => {
-    return userDefinedLanguageSet?.some((lang) => {
-      return lang.language === ls.language;
+  const mergedLangs = useMemo(() => {
+    const filteredLanguageSet = languageSet.filter((ls) => {
+      return userDefinedLanguageSet?.some((lang) => {
+        return lang.language === ls.language;
+      });
     });
-  });
+    return mergeCodeSampleLanguage(
+      mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
+      codeSamples
+    );
+  }, [userDefinedLanguageSet, codeSamples]);
 
-  // Merge user-defined langs into languageSet
-  const mergedLangs = mergeCodeSampleLanguage(
-    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
-    codeSamples
-  );
+  const [persistedOuterTab] = useStorageSlot("docusaurus.tab.code-samples");
 
-  // Read defaultLang from localStorage
-  const defaultLang: Language[] = mergedLangs.filter(
-    (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+  const initialOuterLanguage = useMemo(
+    () => resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs),
+    [persistedOuterTab, mergedLangs]
   );
+
   const [selectedVariant, setSelectedVariant] = useState<string | undefined>();
   const [selectedSample, setSelectedSample] = useState<string | undefined>();
-  const [language, setLanguage] = useState(() => {
-    // Return first index if only 1 user-defined language exists
-    if (mergedLangs.length === 1) {
-      return mergedLangs[0];
-    }
-    // Fall back to language in localStorage or first user-defined language
-    return defaultLang[0] ?? mergedLangs[0];
-  });
+  const [language, setLanguage] = useState(() =>
+    resolveOuterLanguageFromPersistedTab(persistedOuterTab, mergedLangs)
+  );
+
+  useEffect(() => {
+    const next = resolveOuterLanguageFromPersistedTab(
+      persistedOuterTab,
+      mergedLangs
+    );
+    setLanguage((prev) => {
+      if (prev?.language !== next.language) {
+        return next;
+      }
+      return mergedLangs.find((l) => l.language === next.language) ?? next;
+    });
+  }, [persistedOuterTab, mergedLangs]);
   const [codeText, setCodeText] = useState<string>("");
   const [codeSampleCodeText, setCodeSampleCodeText] = useState<string>(() =>
     getCodeSampleSourceFromLanguage(language)
@@ -273,7 +297,7 @@ function CodeSnippets({
           setSelectedSample: setSelectedSample,
         }}
         languageSet={mergedLangs}
-        defaultValue={defaultLang[0]?.language ?? mergedLangs[0].language}
+        defaultValue={initialOuterLanguage.language}
         lazy
       >
         {mergedLangs.map((lang) => {