docusaurus-theme-openapi-docs 0.0.0-733 → 0.0.0-735

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

@@ -56,6 +56,12 @@ var __importDefault =
   };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.languageSet = void 0;
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
 const react_1 = __importStar(require("react"));
 const useDocusaurusContext_1 = __importDefault(
   require("@docusaurus/useDocusaurusContext")
@@ -68,7 +74,6 @@ const buildPostmanRequest_1 = __importDefault(
 );
 const CodeTabs_1 = __importDefault(require("@theme/ApiExplorer/CodeTabs"));
 const hooks_1 = require("@theme/ApiItem/hooks");
-const merge_1 = __importDefault(require("lodash/merge"));
 const postman_code_generators_1 = __importDefault(
   require("postman-code-generators")
 );
@@ -193,7 +198,6 @@ function CodeTab({ children, hidden, className }) {
   );
 }
 function CodeSnippets({ postman, codeSamples }) {
-  // TODO: match theme for vscode.
   const { siteConfig } = (0, useDocusaurusContext_1.default)();
   const contentType = (0, hooks_1.useTypedSelector)(
     (state) => state.contentType.value
@@ -216,20 +220,22 @@ function CodeSnippets({ postman, codeSamples }) {
   const auth = (0, hooks_1.useTypedSelector)((state) => state.auth);
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...(siteConfig?.themeConfig?.languageTabs ?? exports.languageSet),
-  ];
+  const userDefinedLanguageSet = siteConfig?.themeConfig?.languageTabs;
   // Filter languageSet by user-defined langs
   const filteredLanguageSet = exports.languageSet.filter((ls) => {
-    return langs.some((lang) => {
+    return userDefinedLanguageSet?.some((lang) => {
       return lang.language === ls.language;
     });
   });
   // Merge user-defined langs into languageSet
   const mergedLangs = (0, languages_1.mergeCodeSampleLanguage)(
-    (0, merge_1.default)(filteredLanguageSet, langs),
+    (0, languages_1.mergeArraysbyLanguage)(
+      userDefinedLanguageSet,
+      filteredLanguageSet
+    ),
     codeSamples
   );
+  console.log("merged", mergedLangs);
   // Read defaultLang from localStorage
   const defaultLang = mergedLangs.filter(
     (lang) =>

package/lib/theme/ApiExplorer/CodeSnippets/languages.d.ts

@@ -1,3 +1,4 @@
 import { CodeSample, Language } from "./code-snippets-types";
 export declare function mergeCodeSampleLanguage(languages: Language[], codeSamples: CodeSample[]): Language[];
+export declare const mergeArraysbyLanguage: (arr1: any, arr2: any) => any[];
 export declare function getCodeSampleSourceFromLanguage(language: Language): string;

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

@@ -5,9 +5,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod };
+  };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCodeSampleSourceFromLanguage = exports.mergeCodeSampleLanguage =
-  void 0;
+exports.getCodeSampleSourceFromLanguage =
+  exports.mergeArraysbyLanguage =
+  exports.mergeCodeSampleLanguage =
+    void 0;
+const find_1 = __importDefault(require("lodash/find"));
+const isArray_1 = __importDefault(require("lodash/isArray"));
+const mergeWith_1 = __importDefault(require("lodash/mergeWith"));
+const unionBy_1 = __importDefault(require("lodash/unionBy"));
 function mergeCodeSampleLanguage(languages, codeSamples) {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
@@ -31,6 +42,22 @@ function mergeCodeSampleLanguage(languages, codeSamples) {
   });
 }
 exports.mergeCodeSampleLanguage = mergeCodeSampleLanguage;
+const mergeArraysbyLanguage = (arr1, arr2) => {
+  const mergedArray = (0, unionBy_1.default)(arr1, arr2, "language");
+  return mergedArray.map((item) => {
+    const matchingItems = [
+      (0, find_1.default)(arr1, ["language", item["language"]]),
+      (0, find_1.default)(arr2, ["language", item["language"]]),
+    ];
+    return (0, mergeWith_1.default)({}, ...matchingItems, (objValue) => {
+      if ((0, isArray_1.default)(objValue)) {
+        return objValue;
+      }
+      return undefined;
+    });
+  });
+};
+exports.mergeArraysbyLanguage = mergeArraysbyLanguage;
 function getCodeSampleSourceFromLanguage(language) {
   if (
     language &&

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "docusaurus-theme-openapi-docs",
   "description": "OpenAPI theme for Docusaurus.",
-  "version": "0.0.0-733",
+  "version": "0.0.0-735",
   "license": "MIT",
   "keywords": [
     "openapi",
@@ -41,7 +41,7 @@
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.1.0",
     "crypto-js": "^4.1.1",
-    "docusaurus-plugin-openapi-docs": "0.0.0-733",
+    "docusaurus-plugin-openapi-docs": "0.0.0-735",
     "docusaurus-plugin-sass": "^0.2.3",
     "file-saver": "^2.0.5",
     "lodash": "^4.17.20",
@@ -68,5 +68,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "df9ca2a519f0b1ad22acc12dfe2b085ac4797b1d"
+  "gitHead": "0aacbd3243e7d31d391ed5b15216f54b142c9fa2"
 }

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

@@ -5,6 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+/* ============================================================================
+ * Copyright (c) Palo Alto Networks
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * ========================================================================== */
+
 import React, { useState, useEffect } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -12,13 +19,13 @@ import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
-import merge from "lodash/merge";
 import codegen from "postman-code-generators";
 import sdk from "postman-collection";
 
 import { CodeSample, Language } from "./code-snippets-types";
 import {
   getCodeSampleSourceFromLanguage,
+  mergeArraysbyLanguage,
   mergeCodeSampleLanguage,
 } from "./languages";
 
@@ -149,8 +156,6 @@ function CodeTab({ children, hidden, className }: any): JSX.Element {
 }
 
 function CodeSnippets({ postman, codeSamples }: Props) {
-  // TODO: match theme for vscode.
-
   const { siteConfig } = useDocusaurusContext();
 
   const contentType = useTypedSelector((state: any) => state.contentType.value);
@@ -167,28 +172,29 @@ function CodeSnippets({ postman, codeSamples }: Props) {
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const langs = [
-    ...((siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
-      languageSet),
-  ];
+  const userDefinedLanguageSet = siteConfig?.themeConfig?.languageTabs as
+    | Language[]
+    | undefined;
 
   // Filter languageSet by user-defined langs
   const filteredLanguageSet = languageSet.filter((ls) => {
-    return langs.some((lang) => {
+    return userDefinedLanguageSet?.some((lang) => {
       return lang.language === ls.language;
     });
   });
 
   // Merge user-defined langs into languageSet
   const mergedLangs = mergeCodeSampleLanguage(
-    merge(filteredLanguageSet, langs),
-    codeSamples
+    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
+    codeSamples,
   );
 
+  console.log("merged", mergedLangs);
+
   // Read defaultLang from localStorage
   const defaultLang: Language[] = mergedLangs.filter(
     (lang) =>
-      lang.language === localStorage.getItem("docusaurus.tab.code-samples")
+      lang.language === localStorage.getItem("docusaurus.tab.code-samples"),
   );
   const [selectedVariant, setSelectedVariant] = useState<string | undefined>();
   const [selectedSample, setSelectedSample] = useState<string | undefined>();
@@ -232,11 +238,11 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     } else if (language && !language.options) {
       const langSource = mergedLangs.filter(
-        (lang) => lang.language === language.language
+        (lang) => lang.language === language.language,
       );
 
       // Merges user-defined language with default languageSet
@@ -265,7 +271,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     } else {
       setCodeText("");
@@ -308,7 +314,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
             return;
           }
           setCodeText(snippet);
-        }
+        },
       );
     }
   });
@@ -323,7 +329,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
       selectedSample !== language.sample
     ) {
       const sampleIndex = language.samples.findIndex(
-        (smp) => smp === selectedSample
+        (smp) => smp === selectedSample,
       );
       setCodeSampleCodeText(language.samplesSources[sampleIndex]);
     }

package/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -5,21 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import find from "lodash/find";
+import isArray from "lodash/isArray";
+import mergeWith from "lodash/mergeWith";
+import unionBy from "lodash/unionBy";
+
 import { CodeSample, Language } from "./code-snippets-types";
 
 export function mergeCodeSampleLanguage(
   languages: Language[],
-  codeSamples: CodeSample[]
+  codeSamples: CodeSample[],
 ): Language[] {
   return languages.map((language) => {
     const languageCodeSamples = codeSamples.filter(
-      ({ lang }) => lang === language.codeSampleLanguage
+      ({ lang }) => lang === language.codeSampleLanguage,
     );
 
     if (languageCodeSamples.length) {
       const samples = languageCodeSamples.map(({ lang }) => lang);
       const samplesLabels = languageCodeSamples.map(
-        ({ label, lang }) => label || lang
+        ({ label, lang }) => label || lang,
       );
       const samplesSources = languageCodeSamples.map(({ source }) => source);
 
@@ -36,6 +41,23 @@ export function mergeCodeSampleLanguage(
   });
 }
 
+export const mergeArraysbyLanguage = (arr1: any, arr2: any) => {
+  const mergedArray = unionBy(arr1, arr2, "language");
+
+  return mergedArray.map((item: any) => {
+    const matchingItems = [
+      find(arr1, ["language", item["language"]]),
+      find(arr2, ["language", item["language"]]),
+    ];
+    return mergeWith({}, ...matchingItems, (objValue: any) => {
+      if (isArray(objValue)) {
+        return objValue;
+      }
+      return undefined;
+    });
+  });
+};
+
 export function getCodeSampleSourceFromLanguage(language: Language) {
   if (
     language &&
@@ -44,7 +66,7 @@ export function getCodeSampleSourceFromLanguage(language: Language) {
     language.samplesSources
   ) {
     const sampleIndex = language.samples.findIndex(
-      (smp) => smp === language.sample
+      (smp) => smp === language.sample,
     );
     return language.samplesSources[sampleIndex];
   }