update doc

Author: mpppk

pkgs/docs/docs/02_getting-started.md

@@ -4,26 +4,26 @@ sidebar_position: 2
 
 # Getting Started
 
-Let's assume you have a npm project with code like this that __fetch__ from GitHub:
+Let's assume you have a npm project with code like this that **fetch** from GitHub:
 
 ```typescript
 const GITHUB_API_ORIGIN = "https://api.github.com";
 const url = `/repos/mpppk/typed-api-spec/topics?page=1`;
 const response = await fetch(`${GITHUB_API_ORIGIN}${url}`);
 if (!response.ok) {
   // response.json() returns any
-  const { message } = await response.json()
+  const { message } = await response.json();
   return console.error(message);
 }
 // response.json() returns any
-const { names } = await response.json()
+const { names } = await response.json();
 console.log(names); // => ["api-spec", "fetch", "typescript"]
 ```
 
 ## Installation
 
 ```bash
-npm install @mpppk/typed-api-spec
+npm install @notainc/typed-api-spec
 ```
 
 ## Define API Spec
@@ -34,8 +34,8 @@ type Spec = DefineApiEndpoints<{
     get: {
       query: { page?: string };
       responses: {
-        200: { body: { names: string[] }; };
-        400: { body: { message: string; }; };
+        200: { body: { names: string[] } };
+        400: { body: { message: string } };
       };
     };
   };
@@ -45,7 +45,7 @@ type Spec = DefineApiEndpoints<{
 ## Add types to fetch function
 
 ```typescript
-import { fetchT } from "@mpppk/typed-api-spec";
+import { fetchT } from "@notainc/typed-api-spec";
 const fetch = fetch as FetchT<typeof GITHUB_API_ORIGIN, Spec>;
 ```
 
@@ -58,15 +58,15 @@ const fetchT = fetch as FetchT<typeof GITHUB_API_ORIGIN, Spec>;
 const response = await fetchT(`${GITHUB_API_ORIGIN}${url}`);
 if (!response.ok) {
   // response.json() is typed as { message: string } because response is not ok
-  const { message } = await response.json()
+  const { message } = await response.json();
   return console.error(message);
 }
 // response.json() is typed as { names: string[] } because response is ok
-const { names } = await response.json()
+const { names } = await response.json();
 console.log(names); // => ["api-spec", "fetch", "typescript"]
 ```
 
-Notice that only few (highlighted) lines have been changed from original, but now the __fetch__ is type-safe.
+Notice that only few (highlighted) lines have been changed from original, but now the **fetch** is type-safe.
 
 ## Playground
 

pkgs/docs/docs/03_api-specification.md

@@ -24,13 +24,14 @@ type Spec = DefineApiEndpoints<{
     // Method
     get: {
       // Spec
-      responses: { 200: { body: { userNames: string[] }; }; };
+      responses: { 200: { body: { userNames: string[] } } };
     };
   };
 }>;
 ```
 
 the above code defines:
+
 - Path: `/users`
 - Method: `get`
 - Spec: `{ responses: { 200: { body: { userNames: string[] }; }; }; }`
@@ -43,13 +44,12 @@ Path is the path of the API endpoint.
 It can contain path parameters like `:id`.
 
 ```typescript
-
 type Spec = DefineApiEndpoints<{
   // Path has path parameter `:id`
   "/users/:id": {
     get: {
       params: { id: string };
-      responses: { 200: { body: { user: { id: string; name: string }; }; }; };
+      responses: { 200: { body: { user: { id: string; name: string } } } };
     };
   };
 }>;
@@ -59,6 +59,7 @@ type Spec = DefineApiEndpoints<{
 
 Method is the HTTP method of the API endpoint.
 It can be one of the following:
+
 - `get`
 - `post`
 - `put`
@@ -70,33 +71,36 @@ It can be one of the following:
 ```typescript
 type Spec = DefineApiEndpoints<{
   "/users": {
-    get: { responses: { 200: { body: { userNames: string[] }; }; }; };
-    post: { responses: { 200: { body: { userName: string }; }; }; };
+    get: { responses: { 200: { body: { userNames: string[] } } } };
+    post: { responses: { 200: { body: { userName: string } } } };
   };
 }>;
 ```
 
 ### Spec
 
 Spec has the following properties:
+
 - `params`: The path parameters of the request.
 - `query`: The query parameters of the request.
 - `headers`: The headers of the request.
 - `body`: The body of the request.
 - `responses`: The response schema of the request.
   - `body`: The body of the response.
   - `headers`: The headers of the response.
-  
+
 ```typescript
 type Spec = DefineApiEndpoints<{
   "/users/:id": {
     get: {
       params: { id: string };
       query: { page?: string };
       headers: { "x-api-key": string };
-      responses: { 200: {
-        headers: {"content-type": "application/json"};
-        body: { userNames: string[] }; };
+      responses: {
+        200: {
+          headers: { "content-type": "application/json" };
+          body: { userNames: string[] };
+        };
       };
     };
   };
@@ -110,7 +114,7 @@ For example, you can use zod to define the schema of the request and response.
 
 ```typescript
 import { z } from "zod";
-import { ZodApiEndpoints } from "./index";
+import { ApiEndpointsSchema } from "@notainc/typed-api-spec/core";
 
 const Spec = {
   "/users/:id": {
@@ -122,11 +126,11 @@ const Spec = {
         200: {
           headers: { "content-type": z.literal("application/json") },
           body: { userNames: z.array(z.string()) },
-        }
+        },
       },
     },
   },
-} satisfies ZodApiEndpoints
+} satisfies ApiEndpointsSchema;
 ```
 
 For more information, see the [Validation](/docs/category/validation) page.
@@ -141,9 +145,9 @@ If you write wrong API specification, DefineApiEndpoints will throw a type error
 ```typescript
 type Spec = DefineApiEndpoints<{
   "/users": {
-    get: { responses: { 200: { body: { userNames: string[] }; }; }; };
+    get: { responses: { 200: { body: { userNames: string[] } } } };
   };
 }>;
 ```
 
-TODO: Add StackBlitz demo
+TODO: Add StackBlitz demo

pkgs/docs/docs/04_client/overview.md

@@ -12,10 +12,10 @@ zero-fetch just add type information to native fetch, and does not add any runti
 Type information is erased during compilation, so it does not affect the runtime behavior.
 As a result, it does not increase bundle size and does not have any runtime dependencies.
 
-````typescript
+```typescript
 // fetchT is just native fetch, so it does not have any additional runtime dependencies
 const fetchT = fetch as FetchT<"", Spec>;
-````
+```
 
 :::
 
@@ -29,7 +29,7 @@ zero-fetch provides type information for the response data based on the API spec
 type Spec = DefineApiEndpoints<{
   "/users": {
     get: {
-      responses: { 200: { body: { names: string[] }; }; };
+      responses: { 200: { body: { names: string[] } } };
     };
   };
 }>;
@@ -42,18 +42,18 @@ const data = await res.json(); // data is { userNames: string[] }
 If the response have multiple status codes, response type is union of each status code type.
 
 ```typescript
-type Headers = { headers: { 'Content-Type': 'application/json' } };
+type Headers = { headers: { "Content-Type": "application/json" } };
 type Spec = DefineApiEndpoints<{
   "/users": {
     get: {
       responses: {
-        200: { body: { names: string[] }; } & Headers;
-        201: { body: { ok: boolean }; } & Headers;
-        400: { body: { message: string; }; } & Headers;
-        500: { body: { internalError: string; }; } & Headers;
+        200: { body: { names: string[] } } & Headers;
+        201: { body: { ok: boolean } } & Headers;
+        400: { body: { message: string } } & Headers;
+        500: { body: { internalError: string } } & Headers;
       };
     };
-  }
+  };
 }>;
 
 const fetchT = fetch as FetchT<"", Spec>;
@@ -62,12 +62,12 @@ if (!res.ok) {
   // If res.ok is false, status code is 400 or 500
   // So res.json() returns { message: string } | { internalError: string }
   const data = await res.json();
-  
+
   // Response headers are also type-checked. Content-Type is always 'application/json'
-  const contentType: 'application/json' = res.headers.get('Content-Type');
+  const contentType: "application/json" = res.headers.get("Content-Type");
   // and, hasContentType is inferred as true, not boolean
-  const hasContentType: true = res.headers.has('Content-Type');
-  
+  const hasContentType: true = res.headers.has("Content-Type");
+
   return console.error(data);
 }
 // If res.ok is true, status code is 200 or 201
@@ -83,26 +83,24 @@ It means that you can not `append`, `set` or `delete` operation after the respon
 This is a limitation of the type system, not a runtime change. If you need mutable operations, you can cast types.
 
 ```typescript
-const immutableHeaders = res.headers
+const immutableHeaders = res.headers;
 const mutableHeaders = res.headers as Headers;
 ```
 
 :::
 
-
 ### Path & Path parameters
 
 zero-fetch accepts only the path that is defined in the API specification.
 Path parameters are also supported as `:paramName` in the path.
 
 ```typescript
-
 type Spec = DefineApiEndpoints<{
   "/users": {
-    get: { responses: { 200: { body: { names: string[] }; }; }; };
+    get: { responses: { 200: { body: { names: string[] } } } };
   };
   "/users/:id": {
-      get: { responses: { 200: { body: { name: string }; }; }; };
+    get: { responses: { 200: { body: { name: string } } } };
   };
 }>;
 const fetchT = fetch as FetchT<"", Spec>;
@@ -122,7 +120,7 @@ type Spec = DefineApiEndpoints<{
   "/users": {
     get: {
       query: { page: string };
-      responses: { 200: { body: { names: string[] }; }; };
+      responses: { 200: { body: { names: string[] } } };
     };
   };
 }>;
@@ -142,7 +140,7 @@ type Spec = DefineApiEndpoints<{
   "/users": {
     get: {
       headers: { "x-api-key": string };
-      responses: { 200: { body: { names: string[] }; }; };
+      responses: { 200: { body: { names: string[] } } };
     };
   };
 }>;
@@ -158,19 +156,22 @@ zero-fetch accepts only the body that is defined in the API specification.
 Please note that when converting an object to a string, you must use the `JSONT` type provided by typed-api-spec.
 
 ```typescript
-import { JSONT } from "@mpppk/typed-api-spec/json";
+import { JSONT } from "@notainc/typed-api-spec/json";
 type Spec = DefineApiEndpoints<{
   "/users": {
     post: {
       body: { name: string };
-      responses: { 200: { body: { id: string }; }; };
+      responses: { 200: { body: { id: string } } };
     };
   };
 }>;
 const fetchT = fetch as FetchT<"", Spec>;
 const JSONT = JSON as JSONT;
 
-await fetchT("/users", { method: "POST", body: JSONT.stringify({ name: "name" }) }); // OK
+await fetchT("/users", {
+  method: "POST",
+  body: JSONT.stringify({ name: "name" }),
+}); // OK
 await fetchT("/users", { method: "POST", body: JSONT.stringify({ name: 1 }) }); // Error: Type TypedString<{ userName: number; }> is not assignable to type TypedString<{ userName: string; }>
 ```
 
@@ -181,7 +182,6 @@ We hope to address this issue in the future, but for now, you must provide an em
 
 :::
 
-
 ## API
 
 ### FetchT
@@ -199,10 +199,11 @@ JSONT is a type that adds type information to native JSON.
 If you want to check body parameter type, you need to use JSONT.stringify to convert object to string.
 
 ```typescript
-import { JSONT } from "@mpppk/typed-api-spec/json";
+import { JSONT } from "@notainc/typed-api-spec/json";
 const JSONT = JSON as JSONT;
 // body parameter type will be checked by using JSONT.stringify
-await fetchT("/users", { method: "POST", body: JSONT.stringify({ name: "name" }) });
+await fetchT("/users", {
+  method: "POST",
+  body: JSONT.stringify({ name: "name" }),
+});
 ```
-
-