feat: replace postman codegen with httpsnippet

Author: sserrata

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

@@ -53,8 +53,9 @@
     "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",
     "prism-react-renderer": "^2.4.1",
     "process": "^0.11.10",
     "react-hook-form": "^7.59.0",

packages/docusaurus-theme-openapi-docs/src/postman-code-generators.d.ts

@@ -5,15 +5,16 @@
  * 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 { 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 from "httpsnippet-lite";
 import cloneDeep from "lodash/cloneDeep";
-import codegen from "postman-code-generators";
 import * as sdk from "postman-collection";
 
 import { CodeSample, Language } from "./code-snippets-types";
@@ -150,43 +151,29 @@ function CodeSnippets({
       setCodeSampleCodeText(getCodeSampleSourceFromLanguage(language));
     }
 
-    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) {
+    async function generateSnippet() {
+      if (!language) {
+        setCodeText("");
+        return;
+      }
       const langSource = mergedLangs.filter(
         (lang) => lang.language === language.language
       );
-
-      // 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(
+      const mergedLanguage = language.options
+        ? language
+        : { ...langSource[0], ...language };
+      const collection = new sdk.Collection({
+        item: [{ name: "request", request: cleanedPostmanRequest }],
+      });
+      const [harRequest] = await postman2har(collection.toJSON());
+      const snippet = new HTTPSnippet(harRequest).convert(
         mergedLanguage.language,
         mergedLanguage.variant,
-        cleanedPostmanRequest,
-        mergedLanguage.options,
-        (error: any, snippet: string) => {
-          if (error) {
-            return;
-          }
-          setCodeText(snippet);
-        }
+        mergedLanguage.options
       );
-    } else {
-      setCodeText("");
+      setCodeText(typeof snippet === "string" ? snippet : "");
     }
+    generateSnippet();
   }, [
     accept,
     body,
@@ -203,19 +190,25 @@ function CodeSnippets({
   ]);
   // 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);
-        }
-      );
+    if (selectedVariant && selectedVariant !== language?.variant && language) {
+      (async () => {
+        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 }],
+        });
+        const [harRequest] = await postman2har(collection.toJSON());
+        const snippet = new HTTPSnippet(harRequest).convert(
+          mergedLanguage.language,
+          selectedVariant,
+          mergedLanguage.options
+        );
+        setCodeText(typeof snippet === "string" ? snippet : "");
+      })();
     }
   });
 

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

@@ -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;