feat: add typebox route

Author: ddadaal

.changeset/famous-dolphins-report.md

@@ -0,0 +1,6 @@
+---
+"@ddadaal/next-typed-api-routes-runtime": minor
+"@ddadaal/next-typed-api-routes-cli": minor
+---
+
+add support for typebox route

example/src/apis/api.ts

@@ -1,9 +1,10 @@
 /* eslint-disable max-len */
 
-import { fromApi, fromZodRoute } from "@ddadaal/next-typed-api-routes-runtime/lib/client";
+import { fromApi, fromTypeboxRoute, fromZodRoute } from "@ddadaal/next-typed-api-routes-runtime/lib/client";
 import { join } from "path";
 import type { LoginSchema } from "src/pages/api/login/[username]";
 import type { RegisterSchema } from "src/pages/api/register/index";
+import type { TypeboxRouteSchema } from "src/pages/api/typeboxRoute/[test]";
 import type { ZodRouteSchema } from "src/pages/api/zodRoute/[test]";
 
 
@@ -14,5 +15,7 @@ const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
 export const api = {
   login: fromApi<LoginSchema>("GET", join(basePath, "/api/login/[username]")),
   register: fromApi<RegisterSchema>("POST", join(basePath, "/api/register")),
+  typeboxRoute: fromTypeboxRoute<typeof TypeboxRouteSchema>("POST", join(basePath, "/api/typeboxRoute/[test]")),
   zodRoute: fromZodRoute<typeof ZodRouteSchema>("POST", join(basePath, "/api/zodRoute/[test]")),
 };
+  

example/src/pages/api/typeboxRoute/[test].ts

@@ -0,0 +1,20 @@
+import { Type, typeboxRoute, typeboxRouteSchema } from "@ddadaal/next-typed-api-routes-runtime";
+
+export const TypeboxRouteSchema = typeboxRouteSchema({
+  method: "POST",
+  body: Type.Object({ error: Type.Boolean() }),
+  query: Type.Object({ test: Type.String() }),
+  responses: {
+    200: Type.Object({ hello: Type.String() }),
+    404: Type.Object({ error: Type.String() }),
+  },
+});
+
+export default typeboxRoute(TypeboxRouteSchema, async (req) => {
+  
+  if (req.body.error) {
+    return { 404: { error: "123" } };
+  } else {
+    return { 200: { hello: `${req.query.test}` } };
+  }
+});

example/src/pages/api/zodRoute/[test].ts

@@ -12,7 +12,7 @@ export const ZodRouteSchema = zodRouteSchema({
 
 export default zodRoute(ZodRouteSchema, async (req) => {
   if (req.body.error) {
-    return { 404: { error: "error" }};
+    return { 404: { error: "123" } };
   } else {
     return { 200: { hello: `${req.query.test}` } };
   }

example/src/pages/index.tsx

@@ -23,6 +23,27 @@ export const ZodRouteTestDiv = () => {
   );
 };
 
+export const TypeboxRouteTestDiv = () => {
+
+  const [resp, setResp] = useState("");
+
+  return (
+    <div id="typeboxRoute">
+      <button id="button" onClick={() => {
+        api.typeboxRoute({ body: { error: false }, query: { test: "123" } })
+          .then((resp) => {
+            setResp(resp.hello);
+          });
+      }}>
+        Call TypeboxRoute
+      </button>
+      <p id="p">
+        {resp}
+      </p>
+    </div>
+  );
+};
+
 export const AjvRouteTestDiv = () => {
 
   const [username, setUsername] = useState("");
@@ -81,10 +102,12 @@ const Home: NextPage = () => {
       <div>
         <AjvRouteTestDiv />
       </div>
-
       <div>
         <ZodRouteTestDiv />
       </div>
+      <div>
+        <TypeboxRouteTestDiv />
+      </div>
     </div>
   );
 };

example/tests/apis.test.ts

@@ -30,6 +30,34 @@ test("should call zodRoute from browser", async ({ page }) => {
   expect(await text?.innerText()).toBe("123");
 });
 
+test("should call typeboxRoute", async () => {
+  const resp = await api.typeboxRoute({ body: { error: false }, query: { test: "123" } });
+
+  expect(resp.hello).toBe("123");
+});
+
+test("typeboxRoute should handler error", async () => {
+  const error = await api.typeboxRoute({ body: { error: true }, query: { test: "123" } })
+    .httpError(404, (err) => {
+      expect(err.error).toBe("error");
+      return err;
+    })
+    .then(() => undefined)
+    .catch((e) => e);
+
+  expect(error).toBeDefined();
+});
+
+test("should call typeboxRoute from browser", async ({ page }) => {
+  await page.goto("http://localhost:3000");
+
+  await page.click("#typeboxRoute button");
+
+  const text = await page.$("#typeboxRoute p");
+
+  expect(await text?.innerText()).toBe("123");
+});
+
 test("should call register", async () => {
   const resp = await api.register({ body: { username: "123", password: "123" } });
 

packages/cli/src/generateClients.ts

@@ -21,7 +21,13 @@ interface Import {
   relativePath: string;
 }
 
-export type ApiType = "zod" | "ajv";
+export const ApiTypes = {
+  zod: { libImport: "fromZodRoute", typeFormat: (typeName: string) => `typeof ${typeName}` },
+  typebox: { libImport: "fromTypeboxRoute", typeFormat: (typeName: string) => `typeof ${typeName}` },
+  ajv: { libImport: "fromApi", typeFormat: (typeName: string) => typeName },
+};
+
+export type ApiType = keyof typeof ApiTypes;
 
 interface Endpoint {
   functionName: string;
@@ -57,15 +63,19 @@ async function getApiObject(
 
         for (const statement of sourceFile.statements) {
 
-          // if there is a object that ends with Schema, consider it as a zod schema
           if (ts.isVariableStatement(statement)) {
             const declaration = statement.declarationList.declarations[0];
 
             if (ts.isIdentifier(declaration.name)
               && declaration.name.text.endsWith("Schema") && declaration.name.text.length > "Schema".length
               && declaration.initializer && ts.isCallExpression(declaration.initializer)
-                && ts.isObjectLiteralExpression(declaration.initializer.arguments[0])
+              && ts.isIdentifier(declaration.initializer.expression)
+              && ts.isObjectLiteralExpression(declaration.initializer.arguments[0])
             ) {
+
+              const schemaFunction = declaration.initializer.expression.text;
+
+              // zodRouteSchema or typeboxRouteSchema
               const schema = declaration.initializer.arguments[0];
 
               for (const property of schema.properties) {
@@ -76,7 +86,7 @@ async function getApiObject(
                   && ts.isStringLiteral(property.initializer)
                 ) {
                   found = {
-                    apiType: "zod",
+                    apiType: schemaFunction === "zodRouteSchema" ? "zod" : "typebox",
                     typeName: declaration.name.text,
                     method: property.initializer.text,
                   };
@@ -177,28 +187,25 @@ export async function generateClients({
   // use string instead of ts factories to easily style the code and reduce complexity
   const apiObjDeclaration = `
 export const ${apiObjectName} = {
-${endpoints.map((e) =>
-    // eslint-disable-next-line max-len
-    `  ${e.functionName}: ${e.type === "ajv"
-      ? `fromApi<${e.importName}>`
-      : `fromZodRoute<typeof ${e.importName}>`
-    }("${e.method}", join(basePath, "${e.url}")),`,
+${endpoints.map((e) => {
+
+    const { libImport, typeFormat } = ApiTypes[e.type];
+    return (
+      ` ${e.functionName}: ${libImport}<${typeFormat(e.importName)}>("${e.method}", join(basePath, "${e.url}")),`
+    );
+  },
   ).join(EOL)}
 };
   `;
 
-  const importsFromRootPackage: string[] = [];
-
-  if (endpoints.find((x) => x.type === "ajv")) {
-    importsFromRootPackage.push("fromApi");
-  }
+  const importsFromRootPackage = new Set<string>();
 
-  if (endpoints.find((x) => x.type === "zod")) {
-    importsFromRootPackage.push("fromZodRoute");
+  for (const endpoint of endpoints) {
+    importsFromRootPackage.add(ApiTypes[endpoint.type].libImport);
   }
 
   const fetchApiImportDeclaration = `
-import { ${importsFromRootPackage.join(", ")} } from "${fetchImport}";
+import { ${Array.from(importsFromRootPackage.values()).join(", ")} } from "${fetchImport}";
 import { join } from "path";
 `;
 

packages/runtime/package.json

@@ -33,7 +33,8 @@
     "ajv-formats-draft2019": "1.6.1",
     "fast-json-stringify": "5.7.0",
     "tslib": "2.5.2",
-    "zod": "3.21.4"
+    "zod": "3.21.4",
+    "@sinclair/typebox": "0.28.13"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "25.0.0",

packages/runtime/src/fetch/fetch.ts

@@ -1,3 +1,4 @@
+import { TypeboxRouteSchema, TypeboxRouteSchemaToSchema } from "../route";
 import { ZodRouteSchema, ZodRouteSchemaToSchema } from "../route/zodRoute";
 import type {
   Querystring, RequestArgs,
@@ -242,3 +243,8 @@ export function fromApi<TSchema extends AnySchema>(method: HttpMethod, url: stri
 export function fromZodRoute<TSchema extends ZodRouteSchema>(method: HttpMethod, url: string) {
   return fromApi<ZodRouteSchemaToSchema<TSchema>>(method, url);
 }
+
+export function fromTypeboxRoute<TSchema extends TypeboxRouteSchema>(method: HttpMethod, url: string) {
+  return fromApi<TypeboxRouteSchemaToSchema<TSchema>>(method, url);
+}
+

packages/runtime/src/route/ajv.ts

@@ -0,0 +1,18 @@
+import Ajv, { Options } from "ajv";
+import addFormats from "ajv-formats";
+import addDraft2019Format from "ajv-formats-draft2019";
+
+export const ajvOptions: Options = { useDefaults: true, allowUnionTypes: true, coerceTypes: "array" };
+
+export const createAjv = () => {
+  // add shared models
+  const ajv = new Ajv(ajvOptions);
+
+  // add formats support
+  addFormats(ajv);
+  addDraft2019Format(ajv);
+
+  return ajv;
+};
+
+