progress

Author: Eliav2

demo/express-typed-demo/package.json

@@ -9,12 +9,12 @@
     "@types/express": "^4.17.21",
     "@types/morgan": "^1.9.9",
     "@types/node": "^20.12.7",
+    "axios": "^1.6.8",
     "express": "^4.19.2",
-    "morgan": "^1.10.0",
-    "express-typed": "workspace:*"
+    "express-typed": "workspace:*",
+    "morgan": "^1.10.0"
   },
   "devDependencies": {
     "tsx": "^4.7.2"
   }
-}
-  
+}

demo/express-typed-demo/src/app.ts

@@ -1,7 +1,7 @@
 import {TypedRouter} from "express-typed"
 import express, { Request, Response } from "express";
 import logger from "morgan";
-import typedRouter from "./router";
+import typedRouter from "./routes/index.routes";
 
 // Create Express server
 export const app = express();

demo/express-typed-demo/src/nested-router/route.ts

@@ -0,0 +1,67 @@
+import { GetRouteResponseInfo, TypedRouter, ParseRoutes, GetRouteResponseInfoHelper, HandlerMethods, KeysWithMethod } from "express-typed";
+
+import nestedRouter from "./nested.routes";
+
+const typedRouter = new TypedRouter({
+  // example usage
+  "/": {
+    get: (req, res) => {
+      return res.send("Hello world").status(200);
+    },
+  },
+  "/mutate": {
+    post: (req, res) => {
+      return res.send("Mutated!").status(201);
+    },
+  },
+  "/json": {
+    get: (req, res) => {
+      return res.json({ message: "json" }).status(200);
+    },
+  },
+  "/multiple-methods": {
+    get: (req, res) => {
+      return res.send("get response").status(200);
+    },
+    post: (req, res) => {
+      return res.send("post response").status(201);
+    },
+  },
+  // nested routers also supported
+  "/nested": nestedRouter,
+});
+
+export default typedRouter;
+
+export type AppRoutes = ParseRoutes<typeof typedRouter>;
+//   ^?
+
+//// RouteResolver
+export type RouteResolver<
+  Path extends keyof AppRoutes,
+  Method extends keyof AppRoutes[Path],
+  Info extends keyof GetRouteResponseInfoHelper<AppRoutes, Path, Method> | "body" = "body"
+> = GetRouteResponseInfo<AppRoutes, Path, Method, Info>;
+
+// example usage
+// get the response from the home page
+type HomePageResponse = RouteResolver<"/", "get">;
+//   ^?
+// get specific info from the response (here, the status code)
+type HomePageStatus = RouteResolver<"/", "get", "status">;
+//   ^?
+////
+
+//// RoutesWithMethod
+export type RoutesWithMethod<Method extends HandlerMethods> = {
+  [key in KeysWithMethod<AppRoutes, Method>]: Method extends keyof AppRoutes[key] ? GetRouteResponseInfo<AppRoutes, key, Method> : never;
+};
+
+// usage
+// get all routes that have a "get" method, and their response types
+type GetRoutes = RoutesWithMethod<"get">;
+//   ^?
+// get all routes that have a "post" method, and their response types
+type PostRoutes = RoutesWithMethod<"post">;
+//   ^?
+////

demo/express-typed-demo/src/router.ts

@@ -11,9 +11,10 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.29.2",
+    "axios": "^1.6.8",
+    "express-typed-demo": "workspace:*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "express-typed-demo": "workspace:*"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

demo/express-typed-demo/src/routes/index.routes.ts

@@ -1,38 +1,23 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
 import "./App.css";
-import { useBackendQuery } from "./useBackendQuery.ts";
+import { useAppQuery } from "./queries.ts";
 
-const Comp = () => {
-  const query = useBackendQuery("/json");
+const ReactQueryApp = () => {
+  const query = useAppQuery("/mutate", "post");
   const data = query.data;
+  //    ^?
   console.log("data", data);
-  return <div>{data}</div>;
+
+  return (
+    <>
+      <div>response: {JSON.stringify(data)}</div>;
+    </>
+  );
 };
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
     <>
-      <div>
-        <Comp />
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+      <ReactQueryApp />
     </>
   );
 }

…d-demo/src/nested-router/route.nested.ts …s-typed-demo/src/routes/nested.routes.tsdemo/express-typed-demo/src/nested-router/route.nested.ts renamed to demo/express-typed-demo/src/routes/nested.routes.ts demo/express-typed-demo/src/nested-router/route.nested.ts renamed to demo/express-typed-demo/src/routes/nested.routes.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import axios, { type AxiosStatic } from "axios";
+import type { AppRoutes, RouteResolver, RoutesWithMethod } from "express-typed-demo/src/routes/index.routes";
+
+// an hook to fetch response from server, for any possible method(GET, POST, PUT, DELETE)
+export const useAppQuery = <Path extends keyof AppRoutes, Method extends Extract<keyof AxiosStatic, keyof AppRoutes[Path]>>(
+  path: Path,
+  method: Method
+) => {
+  return useQuery<RouteResolver<Path, Method>>({
+    queryKey: [path],
+    queryFn: async () => {
+      const res = await (axios as any)[method](`/api${path}`);
+      return res.data as RouteResolver<Path, Method>;
+    },
+  });
+};
+
+// an hook to fetch response from server, for GET method
+type GetRoutes = RoutesWithMethod<"get">;
+export const useAppGetQuery = <P extends keyof GetRoutes>(path: P) => {
+  return useQuery<GetRoutes[P]>({
+    queryKey: [path],
+    queryFn: async () => {
+      const res = await axios.get(`/api${path}`);
+      return res.data as GetRoutes[P];
+    },
+  });
+};
+
+// an hook to fetch response from server, for POST method
+type PostRoutes = RoutesWithMethod<"post">;
+export const useAppPostQuery = <P extends keyof PostRoutes>(path: P) => {
+  return useQuery<PostRoutes[P]>({
+    queryKey: [path],
+    queryFn: async () => {
+      const res = await axios.post(`/api${path}`);
+      return res.data as PostRoutes[P];
+    },
+  });
+};