feat(kit): add base

Author: yzuyr

apps/docs/app/index.ts

@@ -1,6 +1,5 @@
-import { WaveKitResponse } from "@wavekit/kit";
+import { type WaveKitHandler, WaveKitResponse } from "@wavekit/kit";
 import { wave } from "@wavekit/wave";
-import type { BunRequest } from "bun";
 import dedent from "dedent";
 import { createHighlighter } from "shiki";
 import { Layout } from "../src/components/layout";
@@ -9,7 +8,7 @@ const waveKitServerCode = dedent`
 	// src/index.ts
 	import { createWaveKit } from "@wavekit/kit"
 
-	createWaveKit().then((routes) => {
+	createWaveKit().then(({ routes }) => {
 		console.log("Serving on http://localhost:3000")
 		Bun.serve({ port: 3000, routes })
 	})
@@ -57,25 +56,45 @@ const waveKitWaveCode = dedent`
 
 const waveKitKitCode = dedent`
 	// src/index.ts
-	import { createWaveKit, ssgRender } from "@wavekit/kit"
+	import { createWaveKit, ssgRender, type WaveKitHooks } from "@wavekit/kit";
+	import { findUserByToken } from "./src/auth";
+
+	const hooks: WaveKitHooks = {
+		async beforeHandler(c) {
+			const bearerToken = c.req.headers.get("Authorization")?.split(" ")?.[1];
+			if (!bearerToken) {
+				return c.json({ error: "Unauthorized" }, 401);
+			}
+			const user = await findUserByToken(bearerToken);
+			if (!user) {
+				return c.json({ error: "Unauthorized" }, 401);
+			}
+			c.set("user", user);
+		},
+	};
 
 	// Option 1: For serving
-	createWaveKit().then((routes) => {
-		console.log("Serving on http://localhost:3000")
-		Bun.serve({ port: 3000, routes })
-	})
+	createWaveKit({ hooks }).then(({ routes }) => {
+		console.log("Serving on http://localhost:3000");
+		Bun.serve({
+			port: 3000,
+			routes,
+			development: process.env.NODE_ENV === "development",
+		});
+	});
 
 	// Option 2: For static generation
 	ssgRender()
 `;
 
-export async function GET(req: BunRequest) {
+export const GET: WaveKitHandler = async (c) => {
 	const highlighter = await createHighlighter({
 		themes: ["github-dark"],
 		langs: ["typescript"],
 	});
 	return WaveKitResponse.html(
 		Layout(
+			{ base: c.base },
 			wave
 				.div({ style: "margin-top: 6rem;" }, (heroDiv) => {
 					heroDiv
@@ -86,7 +105,8 @@ export async function GET(req: BunRequest) {
 							ul.li("Next.js style routing")
 								.li("Zero extra dependencies")
 								.li("Lightweight templating engine")
-								.li("Works flawlessly with HTMX and Alpine.js");
+								.li("Works flawlessly with HTMX and Alpine.js")
+								.li("API inspired by Hono, router works as in Next.js");
 						});
 				})
 				.div({ style: "margin-top: 6rem;" }, (gettingStartedDiv) => {
@@ -146,4 +166,4 @@ export async function GET(req: BunRequest) {
 				}),
 		),
 	);
-}
+};

apps/docs/src/components/layout.ts

@@ -2,7 +2,7 @@ import { type Child, wave } from "@wavekit/wave";
 import { Footer } from "./footer";
 import { Navbar } from "./navbar";
 
-export function Layout(slot: Child) {
+export function Layout({ base }: { base: string }, slot: Child) {
 	return wave.html({ lang: "en" }, (html) => {
 		html
 			.head((head) => {
@@ -20,7 +20,7 @@ export function Layout(slot: Child) {
 			})
 			.body((body) => {
 				body.main({ class: "container" }, [
-					Navbar(),
+					Navbar({ base }),
 					slot.toString(),
 					Footer(),
 				]);

apps/docs/src/components/navbar.ts

@@ -13,10 +13,10 @@ const NavItem = ({
 	return wave.li((li) => li.a({ href, target, rel }, label));
 };
 
-export const Navbar = () =>
+export const Navbar = ({ base }: { base: string }) =>
 	wave.nav((nav) => {
 		nav.ul([Logo]).ul([
-			NavItem({ href: "/wavekit/docs", label: "Docs" }),
+			NavItem({ href: `${base}/docs`, label: "Docs" }),
 			NavItem({
 				href: "https://github.com/getgrinta/wavekit",
 				label: "GitHub",

apps/docs/src/index.ts

@@ -1,10 +1,10 @@
 import { createWaveKit, ssgRender } from "@wavekit/kit";
 
 if (process.env.NODE_ENV === "development") {
-	createWaveKit().then((routes) => {
+	createWaveKit({ base: "/wavekit" }).then(({ routes }) => {
 		console.log("Serving on http://localhost:3000");
 		Bun.serve({ port: 3000, routes });
 	});
 } else {
-	ssgRender();
+	ssgRender({ base: "/wavekit" });
 }

apps/docs/typedoc.json

@@ -5,5 +5,5 @@
 		"../../packages/kit/src/index.ts",
 		"../../packages/wave/src/index.ts"
 	],
-	"out": "build/docs"
+	"out": "build/wavekit/docs"
 }

packages/kit/README.md

@@ -1,3 +1,33 @@
 # @wavekit/kit
 
 The server side of WaveKit.
+
+## Usage
+
+```ts
+import { createWaveKit, type WaveKitHooks } from "@wavekit/kit";
+import { findUserByToken } from "./src/auth";
+
+const hooks: WaveKitHooks = {
+	async beforeHandler(c) {
+		const bearerToken = c.req.headers.get("Authorization")?.split(" ")?.[1];
+		if (!bearerToken) {
+			return c.json({ error: "Unauthorized" }, 401);
+		}
+        const user = await findUserByToken(bearerToken);
+        if (!user) {
+            return c.json({ error: "Unauthorized" }, 401);
+        }
+        c.set("user", user);
+	},
+};
+
+createWaveKit({ hooks }).then(({ routes }) => {
+	console.log("Serving on http://localhost:3000");
+	Bun.serve({
+		port: 3000,
+		routes,
+		development: process.env.NODE_ENV === "development",
+	});
+});
+```

packages/kit/src/index.ts

@@ -8,4 +8,5 @@ export type {
 	CreateWaveKitProps,
 	WaveKitHandler,
 	WaveKitContext,
+	WaveKitHooks,
 } from "./server";

packages/kit/src/server.spec.ts

@@ -1,19 +1,10 @@
 import { expect, it } from "bun:test";
 import path from "node:path";
-import { buildRoutes, createWaveKit } from "./server";
+import { createWaveKit } from "./server";
 
 const TEST_DIR = path.join(__dirname, "..", "test", "app");
 
-const FAKE_ROUTES = {
-	"/html.test": path.join(TEST_DIR, "html.test.ts"),
-};
-
-it("should prepare routes", async () => {
-	const routes = await buildRoutes({ routes: FAKE_ROUTES });
-	expect(routes["/html.test"]).toHaveProperty("GET");
-});
-
 it("should create wavekit config", async () => {
-	const routes = await createWaveKit({ routesDir: TEST_DIR });
+	const { routes } = await createWaveKit({ routesDir: TEST_DIR });
 	expect(routes["/html.test"]).toHaveProperty("GET");
 });

packages/kit/src/server.ts

@@ -17,23 +17,44 @@ export type WaveKitContext = {
 	json: typeof WaveKitResponse.json;
 	redirect: typeof WaveKitResponse.redirect;
 	store: Map<string, unknown>;
+	base: string;
 };
 
 export type WaveKitHandler = (
 	c: WaveKitContext,
-) => Response | Promise<Response>;
+) => WaveKitResponse | Promise<WaveKitResponse>;
 
-type BuildRoutesProps = {
-	routes: Record<string, string>;
+export type WaveKit = {
+	routes: Record<string, RouterTypes.RouteHandlerObject<string>>;
+	store: Map<string, unknown>;
+};
+
+export type WaveKitHooks = {
+	beforeHandler?: (
+		c: WaveKitContext,
+	) => Promise<WaveKitContext | WaveKitResponse>;
+	afterHandler?: (response: WaveKitResponse) => Promise<WaveKitResponse>;
+};
+
+export type CreateWaveKitProps = {
+	base?: string | undefined;
+	routesDir?: string | undefined;
+	hooks?: WaveKitHooks;
 };
 
-export async function buildRoutes({
-	routes,
-}: BuildRoutesProps): Promise<
-	Record<string, RouterTypes.RouteHandlerObject<string>>
-> {
+export async function createWaveKit({
+	base,
+	routesDir,
+	hooks,
+}: CreateWaveKitProps = {}): Promise<WaveKit> {
+	const safeBase = (base ?? "/") === "/" ? "" : (base ?? "");
+	const router = new Bun.FileSystemRouter({
+		style: "nextjs",
+		dir: routesDir ?? defaultRoutesDir,
+		assetPrefix: "_public",
+	});
 	const contextStore = new Map();
-	const rawRoutes = Object.entries(routes);
+	const rawRoutes = Object.entries(router.routes);
 	const routesWithHandlers = rawRoutes.map(async ([path, handlerPath]) => {
 		const handler = (await import(
 			handlerPath
@@ -44,43 +65,51 @@ export async function buildRoutes({
 				method as RouterTypes.HTTPMethod
 			] as unknown as WaveKitHandler;
 			if (!methodHandler) return;
-			contextHandler[method as RouterTypes.HTTPMethod] = (
+			contextHandler[method as RouterTypes.HTTPMethod] = async (
 				req: BunRequest,
 				server: Server,
 			) => {
 				const res = new WaveKitResponse();
-				const context = {
+				let context = {
 					req,
 					res,
 					html: WaveKitResponse.html,
 					json: WaveKitResponse.json,
 					redirect: WaveKitResponse.redirect,
 					store: contextStore,
+					base: safeBase,
 				};
-				return methodHandler(context);
+				let beforeHandlerResult: WaveKitResponse | WaveKitContext;
+				if (hooks?.beforeHandler) {
+					beforeHandlerResult = await hooks.beforeHandler(context);
+					if (beforeHandlerResult instanceof Response)
+						return beforeHandlerResult;
+					context = beforeHandlerResult as WaveKitContext;
+				}
+				let result: WaveKitResponse = new WaveKitResponse();
+				result = await methodHandler(context);
+				if (
+					hooks?.afterHandler &&
+					result &&
+					result instanceof WaveKitResponse
+				) {
+					result = await hooks.afterHandler(result);
+				}
+				return result;
 			};
 		}
-		return [path, contextHandler];
+		return [safeBase + path, contextHandler];
 	});
-	return Object.fromEntries(
+	const filteredRoutes = Object.fromEntries(
 		(await Promise.all(routesWithHandlers)).filter(Boolean) as [
 			string,
 			RouterTypes.RouteHandlerObject<string>,
 		][],
 	);
-}
-
-export type CreateWaveKitProps = {
-	routesDir?: string | undefined;
-};
-
-export async function createWaveKit({ routesDir }: CreateWaveKitProps = {}) {
-	const router = new Bun.FileSystemRouter({
-		style: "nextjs",
-		dir: routesDir ?? defaultRoutesDir,
-		assetPrefix: "_public",
-	});
-	return buildRoutes({ routes: router.routes });
+	return {
+		routes: filteredRoutes,
+		store: contextStore,
+	};
 }
 
 function sanitizeRoutePath(routePath: string) {
@@ -89,13 +118,19 @@ function sanitizeRoutePath(routePath: string) {
 }
 
 export type SsgRenderProps = {
+	base?: string | undefined;
 	routesDir?: string | undefined;
 	outDir?: string | undefined;
 };
 
-export async function ssgRender({ routesDir, outDir }: SsgRenderProps = {}) {
-	const routes = await createWaveKit({ routesDir });
+export async function ssgRender({
+	base,
+	routesDir,
+	outDir,
+}: SsgRenderProps = {}) {
+	const { routes } = await createWaveKit({ base, routesDir });
 	const server = Bun.serve({
+		port: 3000,
 		routes,
 	});
 	let renderedRoutes = 0;

packages/kit/test/server.ts

@@ -1,8 +1,22 @@
 import path from "node:path";
-import { createWaveKit } from "../src";
+import { type WaveKitHooks, createWaveKit } from "../src";
 
-createWaveKit({ routesDir: path.join(process.cwd(), "test", "app") }).then(
-	(routes) => {
-		Bun.serve({ routes });
+const hooksEnabled = false;
+
+const hooks: WaveKitHooks = {
+	async beforeHandler(c) {
+		if (hooksEnabled) {
+			// Explicitly return a Response
+			return c.json({ hooks: "work" });
+		}
+		// Explicitly return the context
+		return c;
 	},
-);
+};
+
+createWaveKit({
+	routesDir: path.join(process.cwd(), "test", "app"),
+	hooks,
+}).then(({ routes }) => {
+	Bun.serve({ routes });
+});