feat: replace postman codegen with httpsnippet

packages/docusaurus-theme-openapi-docs/package.json

@@ -53,8 +53,11 @@
     "file-saver": "^2.0.5",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
-    "postman-code-generators": "^2.0.0",
     "postman-collection": "^5.0.2",
+    "httpsnippet-lite": "^3.0.5",
+    "@har-sdk/postman": "^2.4.7",
+    "@har-sdk/core": "^1.5.0",
+    "path-browserify": "^1.0.1",
     "prism-react-renderer": "^2.4.1",
     "process": "^0.11.10",
     "react-hook-form": "^7.59.0",

packages/docusaurus-theme-openapi-docs/src/index.ts

@@ -42,6 +42,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
           resolve: {
             fallback: {
               buffer: require.resolve("buffer/"),
+              path: require.resolve("path-browserify"),
             },
           },
           plugins: [
@@ -71,6 +72,7 @@ export default function docusaurusThemeOpenAPI(): Plugin<void> {
         resolve: {
           fallback: {
             buffer: require.resolve("buffer/"),
+            path: require.resolve("path-browserify"),
           },
         },
         plugins: [

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/code-snippets-types.ts

@@ -40,6 +40,7 @@ export interface Language {
   language: string;
   codeSampleLanguage: CodeSampleLanguage;
   logoClass: string;
+  label?: string;
   variant: string;
   variants: string[];
   options?: { [key: string]: boolean };

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

@@ -5,16 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { Postman } from "@har-sdk/core";
+import { postman2har } from "@har-sdk/postman";
 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 { HTTPSnippet, TargetId } from "httpsnippet-lite";
 import cloneDeep from "lodash/cloneDeep";
-import codegen from "postman-code-generators";
 import * as sdk from "postman-collection";
+import type { Param } from "@theme/ApiExplorer/ParamOptions/slice";
 
 import { CodeSample, Language } from "./code-snippets-types";
 import {
@@ -108,20 +111,43 @@ function CodeSnippets({
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
-  const userDefinedLanguageSet =
-    (siteConfig?.themeConfig?.languageTabs as Language[] | undefined) ??
-    languageSet;
+  const languageAliases: Record<
+    string,
+    { language: string; variant?: string }
+  > = {
+    curl: { language: "shell", variant: "curl" },
+    nodejs: { language: "node" },
+  };
+
+  const userDefinedLanguageSet = (
+    siteConfig?.themeConfig?.languageTabs as Language[] | undefined
+  )
+    ?.map((lang) => {
+      const alias = languageAliases[lang.language];
+      if (alias) {
+        return {
+          ...lang,
+          ...alias,
+          label: lang.label ?? lang.language,
+        };
+      }
+      return lang;
+    })
+    .filter((lang) => languageSet.some((ls) => ls.language === lang.language));
+
+  const finalLanguageSet =
+    userDefinedLanguageSet && userDefinedLanguageSet.length
+      ? userDefinedLanguageSet
+      : languageSet;
 
   // Filter languageSet by user-defined langs
-  const filteredLanguageSet = languageSet.filter((ls) => {
-    return userDefinedLanguageSet?.some((lang) => {
-      return lang.language === ls.language;
-    });
-  });
+  const filteredLanguageSet = languageSet.filter((ls) =>
+    finalLanguageSet.some((lang) => lang.language === ls.language)
+  );
 
   // Merge user-defined langs into languageSet
   const mergedLangs = mergeCodeSampleLanguage(
-    mergeArraysbyLanguage(userDefinedLanguageSet, filteredLanguageSet),
+    mergeArraysbyLanguage(finalLanguageSet, filteredLanguageSet),
     codeSamples
   );
 
@@ -130,8 +156,6 @@ function CodeSnippets({
     (lang) =>
       lang.language === localStorage.getItem("docusaurus.tab.code-samples")
   );
-  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) {
@@ -140,6 +164,12 @@ function CodeSnippets({
     // Fall back to language in localStorage or first user-defined language
     return defaultLang[0] ?? mergedLangs[0];
   });
+  const [selectedVariant, setSelectedVariant] = useState<string | undefined>(
+    language.variant
+  );
+  const [selectedSample, setSelectedSample] = useState<string | undefined>(
+    language.sample
+  );
   const [codeText, setCodeText] = useState<string>("");
   const [codeSampleCodeText, setCodeSampleCodeText] = useState<
     string | (() => string)
@@ -149,44 +179,51 @@ function CodeSnippets({
     if (language && !!language.sample) {
       setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language));
     }
+  }, [language, selectedSample]);
 
-    if (language && !!language.options) {
-      codegen.convert(
-        language.language,
-        language.variant,
-        cleanedPostmanRequest,
-        language.options,
-        (error: any, snippet: string) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
-      );
-    } else if (language && !language.options) {
+  useEffect(() => {
+    async function generateSnippet() {
+      if (!language) {
+        setCodeText("");
+        return;
+      }
       const langSource = mergedLangs.filter(
         (lang) => lang.language === language.language
       );
+      const mergedLanguage = language.options
+        ? language
+        : { ...langSource[0], ...language };
+      const collection = new sdk.Collection({
+        item: [{ name: "request", request: cleanedPostmanRequest }],
+      });
 
-      // Merges user-defined language with default languageSet
-      // This allows users to define only the minimal properties necessary in languageTabs
-      // User-defined properties should override languageSet properties
-      const mergedLanguage = { ...langSource[0], ...language };
-      codegen.convert(
-        mergedLanguage.language,
-        mergedLanguage.variant,
-        cleanedPostmanRequest,
-        mergedLanguage.options,
-        (error: any, snippet: string) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
+      const environment = Object.fromEntries(
+        pathParams.map((param: Param) => [
+          param.name,
+          Array.isArray(param.value)
+            ? param.value[0]
+            : (param.value ?? `<${param.name}>`),
+        ])
+      );
+
+      const [harRequest] = await postman2har(
+        {
+          ...collection.toJSON(),
+          info: {
+            schema:
+              "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+          },
+        } as Postman.Document,
+        { environment }
+      );
+      const snippet = await new HTTPSnippet(harRequest).convert(
+        mergedLanguage.language as TargetId,
+        selectedVariant ?? mergedLanguage.variant,
+        mergedLanguage.options
       );
-    } else {
-      setCodeText("");
+      setCodeText(typeof snippet === "string" ? snippet : "");
     }
+    generateSnippet();
   }, [
     accept,
     body,
@@ -200,41 +237,8 @@ function CodeSnippets({
     server,
     cleanedPostmanRequest,
     mergedLangs,
+    selectedVariant,
   ]);
-  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
-  useEffect(function onSelectedVariantUpdate() {
-    if (selectedVariant && selectedVariant !== language?.variant) {
-      codegen.convert(
-        language.language,
-        selectedVariant,
-        cleanedPostmanRequest,
-        language.options,
-        (error: any, snippet: string) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
-      );
-    }
-  });
-
-  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(function onSelectedSampleUpdate() {
-    if (
-      language &&
-      language.samples &&
-      language.samplesSources &&
-      selectedSample &&
-      selectedSample !== language.sample
-    ) {
-      const sampleIndex = language.samples.findIndex(
-        (smp) => smp === selectedSample
-      );
-      setCodeSampleCodeText(language.samplesSources[sampleIndex]);
-    }
-  });
 
   if (language === undefined) {
     return null;
@@ -258,7 +262,7 @@ function CodeSnippets({
           return (
             <CodeTab
               value={lang.language}
-              label={lang.language}
+              label={lang.label ?? lang.language}
               key={lang.language}
               attributes={{
                 className: `openapi-tabs__code-item--${lang.logoClass}`,
@@ -274,7 +278,7 @@ function CodeSnippets({
                   }}
                   includeSample={true}
                   currentLanguage={lang.language}
-                  defaultValue={selectedSample}
+                  defaultValue={selectedSample ?? language.sample}
                   languageSet={mergedLangs}
                   lazy
                 >
@@ -315,7 +319,7 @@ function CodeSnippets({
                 }}
                 includeVariant={true}
                 currentLanguage={lang.language}
-                defaultValue={selectedVariant}
+                defaultValue={selectedVariant ?? language.variant}
                 languageSet={mergedLangs}
                 lazy
               >

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/languages.ts

@@ -5,12 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import { availableTargets } from "httpsnippet-lite";
 import find from "lodash/find";
 import mergeWith from "lodash/mergeWith";
 import unionBy from "lodash/unionBy";
-import codegen from "postman-code-generators";
 
-import { CodeSample, Language } from "./code-snippets-types";
+import {
+  CodeSample,
+  Language,
+  CodeSampleLanguage,
+} from "./code-snippets-types";
 
 export function mergeCodeSampleLanguage(
   languages: Language[],
@@ -73,23 +77,42 @@ export function getCodeSampleSourceFromLanguage(language: Language) {
 
 export function generateLanguageSet() {
   const languageSet: Language[] = [];
-  codegen.getLanguageList().forEach((language: any) => {
-    const variants: any = [];
-    language.variants.forEach((variant: any) => {
-      variants.push(variant.key);
-    });
+  const languageMap: Record<string, CodeSampleLanguage> = {
+    c: "C",
+    csharp: "C#",
+    go: "Go",
+    java: "Java",
+    javascript: "JavaScript",
+    kotlin: "Kotlin",
+    node: "JavaScript",
+    objc: "Objective-C",
+    ocaml: "OCaml",
+    php: "PHP",
+    powershell: "PowerShell",
+    python: "Python",
+    r: "R",
+    ruby: "Ruby",
+    rust: "Rust",
+    shell: "Shell",
+    swift: "Swift",
+  };
+  const highlightMap: Record<string, string> = {
+    node: "javascript",
+  };
+  availableTargets().forEach((target) => {
+    const codeSample = languageMap[target.key];
+    if (!codeSample) {
+      return;
+    }
+    const variants = target.clients.map((client: any) => client.key);
     languageSet.push({
-      highlight: language.syntax_mode,
-      language: language.key,
-      codeSampleLanguage: language.label,
-      logoClass: language.key,
-      options: {
-        longFormat: false,
-        followRedirect: true,
-        trimRequestBody: true,
-      },
+      highlight: highlightMap[target.key] ?? target.key,
+      language: target.key,
+      codeSampleLanguage: codeSample,
+      logoClass: target.key,
+      options: {},
       variant: variants[0],
-      variants: variants,
+      variants,
     });
   });
   return languageSet;