feat: improve dev routes rendering (#160)

Co-authored-by: MarioCadenas <MarioCadenas@users.noreply.github.com>

Author: MarioCadenas

packages/appkit/package.json

@@ -64,6 +64,7 @@
     "express": "^4.22.0",
     "obug": "^2.1.1",
     "pg": "^8.18.0",
+    "picocolors": "^1.1.1",
     "semver": "^7.7.3",
     "shared": "workspace:*",
     "vite": "npm:rolldown-vite@7.1.14",

packages/appkit/src/plugins/server/index.ts

@@ -12,7 +12,7 @@ import { serverManifest } from "./manifest";
 import { RemoteTunnelController } from "./remote-tunnel/remote-tunnel-controller";
 import { StaticServer } from "./static-server";
 import type { ServerConfig } from "./types";
-import { getRoutes, type PluginEndpoints } from "./utils";
+import { getRoutes, type PluginEndpoints, printRoutes } from "./utils";
 import { ViteDevServer } from "./vite-dev-server";
 
 dotenv.config({ path: path.resolve(process.cwd(), "./.env") });
@@ -124,7 +124,7 @@ export class ServerPlugin extends Plugin {
 
     if (process.env.NODE_ENV === "development") {
       const allRoutes = getRoutes(this.serverApplication._router.stack);
-      console.dir(allRoutes, { depth: null });
+      printRoutes(allRoutes);
     }
     return this.serverApplication;
   }

packages/appkit/src/plugins/server/tests/server.test.ts

@@ -156,6 +156,7 @@ vi.mock("node:fs", async (importOriginal) => {
 
 vi.mock("../utils", () => ({
   getRoutes: vi.fn().mockReturnValue([]),
+  printRoutes: vi.fn(),
 }));
 
 import fs from "node:fs";

packages/appkit/src/plugins/server/utils.ts

@@ -2,6 +2,7 @@ import crypto from "node:crypto";
 import fs from "node:fs";
 import type http from "node:http";
 import path from "node:path";
+import pc from "picocolors";
 
 export function parseCookies(
   req: http.IncomingMessage,
@@ -72,6 +73,50 @@ export function getRoutes(stack: unknown[], basePath = "") {
   return routes;
 }
 
+const METHOD_COLORS: Record<string, (s: string) => string> = {
+  GET: pc.green,
+  POST: pc.blue,
+  PUT: pc.yellow,
+  PATCH: pc.yellow,
+  DELETE: pc.red,
+  HEAD: pc.magenta,
+  OPTIONS: pc.magenta,
+};
+
+export function printRoutes(
+  routes: Array<{ path: string; methods: string[] }>,
+) {
+  if (routes.length === 0) return;
+
+  const rows = routes
+    .flatMap((r) => r.methods.map((m) => ({ method: m, path: r.path })))
+    .sort(
+      (a, b) =>
+        a.method.localeCompare(b.method) || a.path.localeCompare(b.path),
+    );
+
+  const maxMethodLen = Math.max(...rows.map((r) => r.method.length));
+  const separator = pc.dim("─".repeat(50));
+
+  const colorizeParams = (p: string) =>
+    p.replace(/(:[a-zA-Z_]\w*)/g, (match) => pc.cyan(match));
+
+  console.log("");
+  console.log(
+    `  ${pc.bold("Registered Routes")} ${pc.dim(`(${rows.length})`)}`,
+  );
+  console.log(`  ${separator}`);
+
+  for (const { method, path } of rows) {
+    const colorize = METHOD_COLORS[method] || pc.white;
+    const methodStr = colorize(pc.bold(method.padEnd(maxMethodLen)));
+    console.log(`  ${methodStr}  ${colorizeParams(path)}`);
+  }
+
+  console.log(`  ${separator}`);
+  console.log("");
+}
+
 export function getQueries(configFolder: string) {
   const queriesFolder = path.join(configFolder, "queries");