Middleware 3rd pass

Author: drwpow

docs/.vitepress/theme/style.css

@@ -113,14 +113,6 @@ code {
   font-variant-ligatures: none;
 }
 
-/**
- * Base styles
- * -------------------------------------------------------------------------- */
-pre,
-code {
-  font-variant-ligatures: none;
-}
-
 /**
  * Component: Button
  * -------------------------------------------------------------------------- */

docs/6.x/advanced.md

@@ -102,15 +102,13 @@ type FilterKeys<Obj, Matchers> = {
 type PathResponses<T> = T extends { responses: any } ? T["responses"] : unknown;
 type OperationContent<T> = T extends { content: any } ? T["content"] : unknown;
 type MediaType = `${string}/${string}`;
-type MockedResponse<T, Status extends keyof T = keyof T> = FilterKeys<
-  OperationContent<T[Status]>,
-  MediaType
-> extends never
-  ? { status: Status; body?: never }
-  : {
-      status: Status;
-      body: FilterKeys<OperationContent<T[Status]>, MediaType>;
-    };
+type MockedResponse<T, Status extends keyof T = keyof T> =
+  FilterKeys<OperationContent<T[Status]>, MediaType> extends never
+    ? { status: Status; body?: never }
+    : {
+        status: Status;
+        body: FilterKeys<OperationContent<T[Status]>, MediaType>;
+      };
 
 /**
  * Mock fetch() calls and type against OpenAPI schema

docs/cli.md

@@ -121,7 +121,7 @@ export interface paths {
 Which means your type lookups also have to match the exact URL:
 
 ```ts
-import type{ paths } from "./api/v1";
+import type { paths } from "./api/v1";
 
 const url = `/user/${id}`;
 type UserResponses = paths["/user/{user_id}"]["responses"];

docs/examples.md

@@ -150,15 +150,13 @@ type FilterKeys<Obj, Matchers> = {
 type PathResponses<T> = T extends { responses: any } ? T["responses"] : unknown;
 type OperationContent<T> = T extends { content: any } ? T["content"] : unknown;
 type MediaType = `${string}/${string}`;
-type MockedResponse<T, Status extends keyof T = keyof T> = FilterKeys<
-  OperationContent<T[Status]>,
-  MediaType
-> extends never
-  ? { status: Status; body?: never }
-  : {
-      status: Status;
-      body: FilterKeys<OperationContent<T[Status]>, MediaType>;
-    };
+type MockedResponse<T, Status extends keyof T = keyof T> =
+  FilterKeys<OperationContent<T[Status]>, MediaType> extends never
+    ? { status: Status; body?: never }
+    : {
+        status: Status;
+        body: FilterKeys<OperationContent<T[Status]>, MediaType>;
+      };
 
 /**
  * Mock fetch() calls and type against OpenAPI schema

docs/openapi-fetch/api.md

@@ -26,7 +26,7 @@ createClient<paths>(options);
 The following options apply to all request methods (`.GET()`, `.POST()`, etc.)
 
 ```ts
-client.get("/my-url", options);
+client.GET("/my-url", options);
 ```
 
 | Name              | Type                                                              | Description                                                                                                                                                                                                                       |
@@ -124,7 +124,7 @@ const client = createClient({
 Similar to [querySerializer](#queryserializer), bodySerializer allows you to customize how the requestBody is serialized if you don’t want the default [JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) behavior. You probably only need this when using `multipart/form-data`:
 
 ```ts
-const { data, error } = await PUT("/submit", {
+const { data, error } = await client.PUT("/submit", {
   body: {
     name: "",
     query: { version: 2 },
@@ -157,31 +157,27 @@ openapi-fetch supports path serialization as [outlined in the 3.1 spec](https://
 Middleware is an object with `onRequest()` and `onResponse()` callbacks that can observe and modify requests and responses.
 
 ```ts
-function myMiddleware(): Middleware {
-  return {
-    async onRequest(req, options) {
-      // set "foo" header
-      req.headers.set("foo", "bar");
-      return req;
-    },
-    async onResponse(res, options) {
-      const { body, ...resOptions } = res;
-      // change status of response
-      return new Response(body, { ...resOptions, status: 200 });
-    },
-  };
-}
-
-createClient({
-  middleware: [myMiddleware()],
-});
-```
-
-::: tip
+import createClient from "openapi-fetch";
+import type { paths } from "./api/v1";
+
+const myMiddleware: Middleware = {
+  async onRequest(req, options) {
+    // set "foo" header
+    req.headers.set("foo", "bar");
+    return req;
+  },
+  async onResponse(res, options) {
+    const { body, ...resOptions } = res;
+    // change status of response
+    return new Response(body, { ...resOptions, status: 200 });
+  },
+};
 
-Middleware can be a simple object. But wrapping in a function like the examples show lets you optionally create multiple instances of the same logic to handle different scenarios if needed.
+const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
 
-:::
+// register middleware
+client.use(myMiddleware);
+```
 
 ### onRequest
 
@@ -221,3 +217,34 @@ And it expects either:
 
 - **If modifying the response:** A [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)
 - **If not modifying:** `undefined` (void)
+
+### Skipping
+
+If you want to skip the middleware under certain conditions, just `return` as early as possible:
+
+```ts
+onRequest(req) {
+  if (req.schemaPath !== "/projects/{project_id}") {
+    return undefined;
+  }
+  // …
+}
+```
+
+This will leave the request/response unmodified, and pass things off to the next middleware handler (if any). There’s no internal callback or observer library needed.
+
+### Ejecting middleware
+
+To remove middleware, call `client.eject(middleware)`:
+
+```ts{9}
+const myMiddleware = {
+  // …
+};
+
+// register middleware
+client.use(myMiddleware);
+
+// remove middleware
+client.eject(myMiddleware);
+```

docs/openapi-fetch/examples.md

@@ -8,7 +8,7 @@ Example code of using openapi-fetch with other frameworks and libraries.
 
 ## React + React Query
 
-[React Query](https://tanstack.com/query/latest) is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching and request deduping across async React components without too much client weight in return. And its type inference preserves openapi-fetch types perfectly with minimal setup.
+[React Query](https://tanstack.com/query/latest) is a perfect wrapper for openapi-fetch in React. At only 13 kB, it provides clientside caching without too much client weight in return. And its stellar type inference preserves openapi-fetch types perfectly with minimal setup.
 
 [View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query)
 

docs/openapi-fetch/index.md

@@ -20,18 +20,18 @@ The syntax is inspired by popular libraries like react-query or Apollo client, b
 import createClient from "openapi-fetch";
 import type { paths } from "./api/v1"; // generated by openapi-typescript
 
-const { GET, PUT } = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
+const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
 
 const {
   data, // only present if 2XX response
   error, // only present if 4XX or 5XX response
-} = await GET("/blogposts/{post_id}", {
+} = await client.GET("/blogposts/{post_id}", {
   params: {
     path: { post_id: "123" },
   },
 });
 
-await PUT("/blogposts", {
+await client.PUT("/blogposts", {
   body: {
     title: "My New Post",
   },
@@ -104,16 +104,16 @@ The best part about using openapi-fetch over oldschool codegen is no documentati
 import createClient from "openapi-fetch";
 import type { paths } from "./api/v1";
 
-const { GET, PUT } = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
+const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });
 
-const { data, error } = await GET("/blogposts/{post_id}", {
+const { data, error } = await client.GET("/blogposts/{post_id}", {
   params: {
     path: { post_id: "my-post" },
     query: { version: 2 },
   },
 });
 
-const { data, error } = await PUT("/blogposts", {
+const { data, error } = await client.PUT("/blogposts", {
   body: {
     title: "New Post",
     body: "<p>New post body</p>",
@@ -152,7 +152,7 @@ The `POST()` request required a `body` object that provided all necessary [reque
 All methods return an object with **data**, **error**, and **response**.
 
 ```ts
-const { data, error, response } = await GET("/url");
+const { data, error, response } = await client.GET("/url");
 ```
 
 | Object     | Response                                                                                                                    |