Add benchmarks for openapi-fetch (#1299)

openapi-ts · Aug 17, 2023 · 067350b · 067350b
1 parent ad894a5
commit 067350b
Show file tree

Hide file tree

Showing 11 changed files with 467 additions and 88 deletions.
diff --git a/docs/src/content/docs/openapi-fetch/index.md b/docs/src/content/docs/openapi-fetch/index.md
@@ -7,11 +7,13 @@ description: Get Started with openapi-fetch
 
 openapi-fetch applies your OpenAPI types to the native fetch API via TypeScript. Weighs **2 kb** and has virtually zero runtime. Works with React, Vue, Svelte, or vanilla JS.
 
-| Library                        | Size (min) |
-| :----------------------------- | ---------: |
-| **openapi-fetch**              |     `2 kB` |
-| **openapi-typescript-fetch**   |     `4 kB` |
-| **openapi-typescript-codegen** |   `345 kB` |
+| Library                    | Size (min) | GET performance           |
+| :------------------------- | ---------: | :------------------------ |
+| openapi-fetch              |     `2 kB` | `151k` ops/s (fastest)    |
+| openapi-typescript-fetch   |     `4 kB` | `99k` ope/s (1.4× slower) |
+| axios                      |    `32 kB` | `90k` ops/s (1.6× slower) |
+| superagent                 |    `55 kB` | `42k` ops/s (3× slower)   |
+| openapi-typescript-codegen |   `367 kB` | `71k` ops/s (2× slower)   |
 
 The syntax is inspired by popular libraries like react-query or Apollo client, but without all the bells and whistles and in a 2 kb package.
 

diff --git a/packages/openapi-fetch/.eslintignore b/packages/openapi-fetch/.eslintignore
@@ -0,0 +1 @@
+test/openapi-typescript-codegen.min.js
diff --git a/packages/openapi-fetch/README.md b/packages/openapi-fetch/README.md
@@ -2,11 +2,13 @@
 
 openapi-fetch applies your OpenAPI types to the native fetch API via TypeScript. Weighs **2 kB** and has virtually zero runtime. Works with React, Vue, Svelte, or vanilla JS.
 
-| Library                        | Size (min) |
-| :----------------------------- | ---------: |
-| **openapi-fetch**              |     `2 kB` |
-| **openapi-typescript-fetch**   |     `4 kB` |
-| **openapi-typescript-codegen** |   `345 kB` |
+| Library                    | Size (min) | GET performance           |
+| :------------------------- | ---------: | :------------------------ |
+| openapi-fetch              |     `2 kB` | `151k` ops/s (fastest)    |
+| openapi-typescript-fetch   |     `4 kB` | `99k` ope/s (1.4× slower) |
+| axios                      |    `32 kB` | `90k` ops/s (1.6× slower) |
+| superagent                 |    `55 kB` | `42k` ops/s (3× slower)   |
+| openapi-typescript-codegen |   `367 kB` | `71k` ops/s (2× slower)   |
 
 The syntax is inspired by popular libraries like react-query or Apollo client, but without all the bells and whistles and in a 2 kB package.
 

diff --git a/packages/openapi-fetch/package.json b/packages/openapi-fetch/package.json
@@ -58,10 +58,14 @@
     "version": "pnpm run prepare && pnpm run build"
   },
   "devDependencies": {
+    "axios": "^1.4.0",
     "del-cli": "^5.0.0",
-    "esbuild": "^0.19.0",
+    "esbuild": "^0.19.2",
     "nanostores": "^0.9.3",
-    "openapi-typescript": "^6.4.2",
+    "openapi-typescript": "^6.5.0",
+    "openapi-typescript-codegen": "^0.25.0",
+    "openapi-typescript-fetch": "^1.1.3",
+    "superagent": "^8.1.2",
     "typescript": "^5.1.6",
     "vitest": "^0.34.1",
     "vitest-fetch-mock": "^0.2.2"

diff --git a/packages/openapi-fetch/test/index.bench.js b/packages/openapi-fetch/test/index.bench.js
@@ -0,0 +1,97 @@
+import axios from "axios";
+import { Fetcher } from "openapi-typescript-fetch";
+import superagent from "superagent";
+import { afterAll, bench, describe, vi } from "vitest";
+import createFetchMock from "vitest-fetch-mock";
+import * as openapiTSCodegen from "./openapi-typescript-codegen.min.js";
+import createClient from "../dist/index.js";
+
+const BASE_URL = "https://api.test.local";
+
+const fetchMocker = createFetchMock(vi);
+
+fetchMocker.enableMocks();
+fetchMocker.mockResponse("{}");
+afterAll(() => {
+  fetchMocker.resetMocks();
+});
+
+describe("setup", () => {
+  bench("openapi-fetch", async () => {
+    createClient();
+  });
+
+  bench("openapi-typescript-fetch", async () => {
+    const fetcher = Fetcher.for();
+    fetcher.path("/pet/findByStatus").method("get").create();
+  });
+
+  // axios: N/A
+
+  // superagent: N/A
+});
+
+describe("get (only URL)", () => {
+  let openapiFetch = createClient({ baseUrl: BASE_URL });
+  let openapiTSFetch = Fetcher.for();
+  openapiTSFetch.configure({
+    init: { baseUrl: BASE_URL },
+  });
+
+  bench("openapi-fetch", async () => {
+    await openapiFetch.GET("/url");
+  });
+
+  bench("openapi-typescript-fetch", async () => {
+    await openapiTSFetch.path("/url").method("get").create()();
+  });
+
+  bench("openapi-typescript-codegen", async () => {
+    await openapiTSCodegen.PullsService.pullsGet();
+  });
+
+  bench("axios", async () => {
+    await axios.get("/url", {
+      async adapter() {
+        return "{}";
+      },
+    });
+  });
+
+  bench("superagent", async () => {
+    await superagent.get("/url").end();
+  });
+});
+
+describe("get (headers)", () => {
+  let openapiFetch = createClient({ baseUrl: BASE_URL, headers: { "x-base-header": 123 } });
+  let openapiTSFetch = Fetcher.for();
+  openapiTSFetch.configure({
+    init: { baseUrl: BASE_URL, headers: { "x-base-header": 123 } },
+  });
+
+  bench("openapi-fetch", async () => {
+    await openapiFetch.GET("/url", { headers: { "x-header-1": 123, "x-header-2": 456 } });
+  });
+
+  bench("openapi-typescript-fetch", async () => {
+    await openapiTSFetch.path("/url").method("get").create()(null, { headers: { "x-header-1": 123, "x-header-2": 456 } });
+  });
+
+  bench("openapi-typescript-codegen", async () => {
+    await openapiTSCodegen.PullsService.pullsGet();
+  });
+
+  bench("axios", async () => {
+    await axios.get(`${BASE_URL}/url`, {
+      headers: { "x-header-1": 123, "x-header-2": 456 },
+      async adapter() {
+        return "{}";
+      },
+    });
+  });
+
+  bench("superagent", async () => {
+    await superagent.get(`${BASE_URL}/url`).set("x-header-1", 123).set("x-header-2", 456).end();
+  });
+});
diff --git a/packages/openapi-fetch/test/openapi-typescript-codegen.min.js b/packages/openapi-fetch/test/openapi-typescript-codegen.min.js
diff --git a/packages/openapi-fetch/test/v1.d.ts b/packages/openapi-fetch/test/v1.d.ts
@@ -351,6 +351,11 @@ export interface components {
         "application/json": components["schemas"]["StringArray"];
       };
     };
+    Tag: {
+      content: {
+        "application/json": string;
+      };
+    };
     User: {
       content: {
         "application/json": components["schemas"]["User"];

diff --git a/packages/openapi-fetch/test/v1.yaml b/packages/openapi-fetch/test/v1.yaml
@@ -1,4 +1,4 @@
-openapi: 3.1
+openapi: 3.1.0
 info:
   title: Test Specification
   version: '1.0'
@@ -480,6 +480,12 @@ components:
         application/json:
           schema:
             $ref: '#/components/schemas/StringArray'
+    Tag:
+      content:
+        application/json:
+          schema:
+            type:
+              string
     User:
       content:
         application/json:

diff --git a/packages/openapi-fetch/tsconfig.json b/packages/openapi-fetch/tsconfig.json
@@ -12,6 +12,6 @@
     "target": "ESNext",
     "types": ["vitest/globals"]
   },
-  "include": ["src"],
+  "include": ["src", "test"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/openapi-typescript/package.json b/packages/openapi-typescript/package.json
@@ -71,7 +71,7 @@
     "@types/node": "^20.4.9",
     "degit": "^2.8.4",
     "del-cli": "^5.0.0",
-    "esbuild": "^0.19.0",
+    "esbuild": "^0.19.2",
     "execa": "^7.2.0",
     "vite": "^4.4.9",
     "vite-node": "^0.34.1",