feat: support route definition through zod

Author: ddadaal

.changeset/fresh-actors-vanish.md

@@ -0,0 +1,7 @@
+---
+"example": minor
+"@ddadaal/next-typed-api-routes-cli": minor
+"@ddadaal/next-typed-api-routes-runtime": minor
+---
+
+Support route definition through zod

example/jest.config.mjs

@@ -0,0 +1,21 @@
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+
+  testEnvironment: "./tests/testEnv.ts",
+  setupFilesAfterEnv: ["<rootDir>/tests/jest.setup.js"],
+
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

example/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
     "@ddadaal/next-typed-api-routes-runtime": "workspace:*",
@@ -18,6 +19,11 @@
     "@ddadaal/next-typed-api-routes-cli": "workspace:*",
     "@next/bundle-analyzer": "^12.0.4",
     "@types/react": "18.0.12",
-    "@babel/core": ">=7.0.0 <8.0.0"
+    "@babel/core": ">=7.0.0 <8.0.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "whatwg-fetch": "3.6.2"
   }
 }

example/src/apis/api.ts

@@ -1,9 +1,11 @@
 /* eslint-disable max-len */
 
-import { fromApi } from "@ddadaal/next-typed-api-routes-runtime/lib/client";
+import { fromApi, 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 { ZodRouteSchema } from "src/pages/api/zodRoute/[test]";
+
 
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
@@ -12,4 +14,5 @@ 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")),
+  zodRoute: fromZodRoute<typeof ZodRouteSchema>("POST", join(basePath, "/api/zodRoute/[test]")),
 };

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

@@ -0,0 +1,15 @@
+import { z, zodRoute, zodRouteSchema } from "@ddadaal/next-typed-api-routes-runtime";
+
+export const ZodRouteSchema = zodRouteSchema({
+  method: "POST",
+  body: z.object({ info: z.string() }),
+  query: z.object({ test: z.string() }),
+  responses: {
+    200: z.object({ hello: z.string() }),
+    404: z.object({ error: z.string() }),
+  },
+});
+
+export default zodRoute(ZodRouteSchema, async (req) => {
+  return { 200: { hello: `${req.body.info} + ${req.query.test}` } };
+});

example/tests/apis.test.ts

@@ -0,0 +1,7 @@
+import { api } from "../src/apis/api";
+
+it("should call zodRoute", async () => {
+  const resp = await api.zodRoute({ body: { info: "test" }, query: { test: "123" } });
+
+  expect(resp.hello).toBe("test 123");
+});

example/tests/jest.setup.js

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom/extend-expect';
+
+

example/tests/testEnv.ts

@@ -0,0 +1,15 @@
+import JSDOMEnvironment from "jest-environment-jsdom";
+
+// eslint-disable-next-line max-len
+// https://github.com/facebook/jest/blob/v29.4.3/website/versioned_docs/version-29.4/Configuration.md#testenvironment-string
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(...args: ConstructorParameters<typeof JSDOMEnvironment>) {
+    super(...args);
+
+    // FIXME https://github.com/jsdom/jsdom/issues/1724
+    this.global.fetch = fetch;
+    this.global.Headers = Headers;
+    this.global.Request = Request;
+    this.global.Response = Response;
+  }
+}

package.json

@@ -11,17 +11,17 @@
     "@types/eslint": "8.4.2",
     "@types/jest": "28.1.1",
     "@types/node": "17.0.40",
-    "@typescript-eslint/eslint-plugin": "5.27.0",
-    "@typescript-eslint/parser": "5.27.0",
-    "eslint": "8.17.0",
-    "@ddadaal/eslint-config": "1.5.0",
+    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/parser": "5.59.7",
+    "eslint": "8.41.0",
+    "@ddadaal/eslint-config": "1.9.0",
     "eslint-plugin-react": "7.30.0",
     "rimraf": "^3.0.2",
     "standard-version": "^9.3.2",
-    "typescript": "4.7.3",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-import-resolver-typescript": "2.7.1",
+    "typescript": "5.0.4",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-import-resolver-typescript": "3.5.5",
     "@changesets/changelog-git": "0.1.11",
     "jest": "28.1.0",
     "ts-jest": "28.0.4",

packages/cli/src/generateClients.ts

@@ -21,9 +21,12 @@ interface Import {
   relativePath: string;
 }
 
+export type ApiType = "zod" | "ajv";
+
 interface Endpoint {
-  schemaName: string;
-  interfaceName: string;
+  functionName: string;
+  importName: string;
+  type: ApiType;
   method: string;
   url: string;
 }
@@ -50,49 +53,86 @@ async function getApiObject(
           ts.ScriptTarget.Latest,
         );
 
-        // find the interface with name ending with "Schema"
-        const interfaceStatement = sourceFile.statements.find((x) =>
-          ts.isInterfaceDeclaration(x)
-          && x.name.text.endsWith("Schema") && x.name.text.length > "Schema".length);
+        let found: { typeName: string; method: string; apiType: ApiType } | undefined = undefined;
+
+        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])
+            ) {
+              const schema = declaration.initializer.arguments[0];
+
+              for (const property of schema.properties) {
+
+                if (ts.isPropertyAssignment(property) &&
+                  property.name && ts.isIdentifier(property.name)
+                  && property.name.escapedText === "method"
+                  && ts.isStringLiteral(property.initializer)
+                ) {
+                  found = {
+                    apiType: "zod",
+                    typeName: declaration.name.text,
+                    method: property.initializer.text,
+                  };
+
+                  break;
+                }
+              }
+            }
+          }
 
-        if (!interfaceStatement) {
-          continue;
-        }
+          if (found) {
+            break;
+          }
 
-        const interfaceDeclaration = interfaceStatement as ts.InterfaceDeclaration;
 
-        const interfaceName = interfaceDeclaration.name.text;
+          if (ts.isInterfaceDeclaration(statement)
+              && statement.name.text.endsWith("Schema") && statement.name.text.length > "Schema".length) {
 
-        // Get method from method property
-        let methodName: string | undefined = undefined;
-        for (const s of interfaceDeclaration.members) {
-          if (ts.isPropertySignature(s) &&
-              ts.isIdentifier(s.name) && s.name.text === "method" &&
-              s.type && ts.isLiteralTypeNode(s.type) && ts.isStringLiteral(s.type.literal)
-          ) {
-            methodName = s.type.literal.text;
-            break;
-          }
-        }
+            const interfaceName = statement.name.text;
 
-        if (!methodName) {
-          continue;
+            // Get method from method property
+            for (const s of statement.members) {
+              if (ts.isPropertySignature(s) &&
+                    ts.isIdentifier(s.name) && s.name.text === "method" &&
+                    s.type && ts.isLiteralTypeNode(s.type) && ts.isStringLiteral(s.type.literal)
+              ) {
+
+                found = {
+                  typeName: interfaceName,
+                  method: s.type.literal.text,
+                  apiType: "ajv",
+                };
+
+                break;
+              }
+            }
+
+          }
         }
 
+        if (!found) { continue; }
         // Get URL from file path
         imports.push({
-          interfaceName,
+          interfaceName: found.typeName,
           relativePath: relativePath + "/" + filename,
         });
 
         // LoginSchema -> login
-        const schemaName = interfaceName[0].toLocaleLowerCase()
-        + interfaceName.substr(1, interfaceName.length - "Schema".length - 1);
+        const functionName = found.typeName[0].toLocaleLowerCase()
+        + found.typeName.substring(1, found.typeName.length - "Schema".length);
 
         endpoints.push({
-          method: methodName,
-          schemaName,
-          interfaceName,
+          method: found.method,
+          importName: found.typeName,
+          functionName,
+          type: found.apiType,
           url: "/api/" + relativePath + (filename === "index" ? "" : ("/" + filename)),
         });
       }
@@ -139,13 +179,26 @@ export async function generateClients({
 export const ${apiObjectName} = {
 ${endpoints.map((e) =>
     // eslint-disable-next-line max-len
-    `  ${e.schemaName}: fromApi<${e.interfaceName}>("${e.method}", join(basePath, "${e.url}")),`,
+    `  ${e.functionName}: ${e.type === "ajv"
+      ? `fromApi<${e.importName}>`
+      : `fromZodRoute<typeof ${e.importName}>`
+    }("${e.method}", join(basePath, "${e.url}")),`,
   ).join(EOL)}
 };
   `;
 
+  const importsFromRootPackage: string[] = [];
+
+  if (endpoints.find((x) => x.type === "ajv")) {
+    importsFromRootPackage.push("fromApi");
+  }
+
+  if (endpoints.find((x) => x.type === "zod")) {
+    importsFromRootPackage.push("fromZodRoute");
+  }
+
   const fetchApiImportDeclaration = `
-import { fromApi } from "${fetchImport}";
+import { ${importsFromRootPackage.join(", ")} } from "${fetchImport}";
 import { join } from "path";
 `;