cleanup ts config

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -5,20 +5,27 @@
  * 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";
 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]);
     }

packages/docusaurus-theme-openapi-docs/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];
   }