vite example with validation

example-projects/vite/src/github/client.ts

@@ -0,0 +1,18 @@
+import type FetchT from "@notainc/typed-api-spec/fetch";
+import type { Spec } from "./spec.ts";
+export const GITHUB_API_ORIGIN = "https://api.github.com";
+
+let fetchGitHub = fetch as FetchT<typeof GITHUB_API_ORIGIN, Spec>;
+if (import.meta.env.DEV) {
+  const { withValidation } = await import("@notainc/typed-api-spec/fetch");
+  const { ZodSpec } = await import("./spec.ts");
+  const { newZodValidator } = await import("@notainc/typed-api-spec");
+  const v = newZodValidator(ZodSpec);
+  fetchGitHub = withValidation(
+    fetch,
+    ZodSpec,
+    v.req,
+    v.res,
+  ) as typeof fetchGitHub;
+}
+export default fetchGitHub;

example-projects/vite/src/github/spec.ts

@@ -0,0 +1,23 @@
+import { ZodApiEndpoints } from "@notainc/typed-api-spec";
+import z from "zod";
+import { ToApiEndpoints } from "@notainc/typed-api-spec/zod";
+
+// See https://docs.github.com/ja/rest/repos/repos?apiVersion=2022-11-28#get-all-repository-topics
+export const ZodSpec = {
+  "/repos/:owner/:repo/topics": {
+    get: {
+      responses: {
+        200: { body: z.object({ names: z.string().array() }) },
+        400: {
+          body: z.object({
+            message: z.string(),
+            errors: z.string(),
+            documentation_url: z.string(),
+            status: z.number(),
+          }),
+        },
+      },
+    },
+  },
+} satisfies ZodApiEndpoints;
+export type Spec = ToApiEndpoints<typeof ZodSpec>;

example-projects/vite/src/main.ts

@@ -1,11 +1,9 @@
 import "./style.css";
+import fetchGitHub, { GITHUB_API_ORIGIN } from "./github/client.ts";
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
     <h1>typed-api-spec + Vite</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
     <div class="card">
       <button id="fetch" type="button">Fetch from GitHub</button>
     </div>
@@ -15,15 +13,17 @@ document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   </div>
 `;
 
-const GITHUB_API_ORIGIN = "https://api.github.com";
-const GITHUB_REPOSITORY = "nota/typed-api-spec";
-const endpoint = `${GITHUB_API_ORIGIN}/repos/${GITHUB_REPOSITORY}/topics`;
+const endpoint = `${GITHUB_API_ORIGIN}/repos/nota/typed-api-spec/topics`;
 
 const fetchButton = document.querySelector<HTMLButtonElement>("#fetch")!;
 const result = document.querySelector<HTMLParagraphElement>("#result")!;
 const request = async () => {
   result.innerHTML = "Loading...";
-  const response = await fetch(endpoint);
+  const response = await fetchGitHub(endpoint, {});
+  if (!response.ok) {
+    result.innerHTML = `Error: ${response.status} ${response.statusText}`;
+    return;
+  }
   const { names } = await response.json();
   result.innerHTML = `Result: ${names.join(", ")}`;
 };

pkgs/typed-api-spec/src/fetch/validation.ts

@@ -160,7 +160,6 @@ export const withValidation = <
       headers: headersToRecord(res1.headers ?? {}),
     });
     handleResponseError(runResponseSpecValidator(responseValidator));
-    // // TODO: レスポンスをvalidate
     return res;
   };
   return ftc as Fetch;