feat(kit): add assets

Author: yzuyr

apps/docs/app/index.ts

@@ -99,7 +99,9 @@ export const GET: WaveKitHandler = async (c) => {
 				.div({ style: "margin-top: 6rem;" }, (heroDiv) => {
 					heroDiv
 						.h1("The minimalist Bun web framework.")
-						.p("WaveKit is a tiny framework built on top of Bun HTTP.")
+						.p(
+							"WaveKit is a tiny framework built on top of Bun HTTP. Bleeding edge.",
+						)
 						.h2("Features")
 						.ul((ul) => {
 							ul.li("Next.js style routing")

apps/docs/public/logo.svg

@@ -1,7 +1,14 @@
 import { wave } from "@wavekit/wave";
 
 const Logo = wave.li((li) =>
-	li.a({ href: "/wavekit", style: "font-weight: semibold;" }, "WaveKit"),
+	li.a({ href: "/wavekit", style: "font-weight: semibold;" }, (a) => {
+		a.img({
+			src: "/logo.svg",
+			alt: "Wavekit logo",
+			height: "48",
+			width: "128",
+		});
+	}),
 );
 
 const NavItem = ({

apps/docs/src/components/navbar.ts

@@ -13,7 +13,7 @@
 	"files": ["dist"],
 	"scripts": {
 		"build": "bun run build:types && bun run build:code",
-		"build:code": "bun build src/index.ts --outdir ./dist",
+		"build:code": "bun build src/index.ts --outdir ./dist --target bun",
 		"build:types": "tsc --emitDeclarationOnly",
 		"test": "bun test"
 	},

packages/kit/package.json

@@ -2,9 +2,13 @@ import { expect, it } from "bun:test";
 import path from "node:path";
 import { createWaveKit } from "./server";
 
-const TEST_DIR = path.join(__dirname, "..", "test", "app");
+const TEST_ROUTES_DIR = path.join(__dirname, "..", "test", "app");
+const TEST_PUBLIC_DIR = path.join(__dirname, "..", "test", "public");
 
 it("should create wavekit config", async () => {
-	const { routes } = await createWaveKit({ routesDir: TEST_DIR });
+	const { routes } = await createWaveKit({
+		routesDir: TEST_ROUTES_DIR,
+		publicDir: TEST_PUBLIC_DIR,
+	});
 	expect(routes["/html.test"]).toHaveProperty("GET");
 });

packages/kit/src/server.spec.ts

@@ -1,3 +1,4 @@
+import { readdir } from "node:fs/promises";
 import path from "node:path";
 import type { BunRequest, RouterTypes, Server } from "bun";
 import { WaveKitResponse } from "./response";
@@ -8,6 +9,8 @@ const defaultRoutesDir = isDev
 	? path.join(process.cwd(), "app")
 	: path.join(process.cwd(), "build", "app");
 
+const defaultPublicDir = path.join(process.cwd(), "public");
+
 const defaultOutDir = path.join(process.cwd(), "build");
 
 export type WaveKitContext = {
@@ -36,15 +39,38 @@ export type WaveKitHooks = {
 	afterHandler?: (response: WaveKitResponse) => Promise<WaveKitResponse>;
 };
 
+async function createAssetsHandlers({
+	assetsDir,
+}: { assetsDir: string }): Promise<
+	Record<string, RouterTypes.RouteHandlerObject<string>>
+> {
+	const files = await readdir(assetsDir, { recursive: true });
+	const iterableHandlers = files.map((filePath) => {
+		const file = Bun.file(path.join(assetsDir, filePath));
+		const fileName = `/${path.basename(filePath)}`;
+		const handler = {
+			async GET() {
+				return new WaveKitResponse(file.stream(), {
+					headers: { "Content-Type": file.type },
+				});
+			},
+		};
+		return [fileName, handler];
+	});
+	return Object.fromEntries(iterableHandlers);
+}
+
 export type CreateWaveKitProps = {
 	base?: string | undefined;
 	routesDir?: string | undefined;
+	publicDir?: string | undefined;
 	hooks?: WaveKitHooks;
 };
 
 export async function createWaveKit({
 	base,
 	routesDir,
+	publicDir,
 	hooks,
 }: CreateWaveKitProps = {}): Promise<WaveKit> {
 	const safeBase = (base ?? "/") === "/" ? "" : (base ?? "");
@@ -100,14 +126,20 @@ export async function createWaveKit({
 		}
 		return [safeBase + path, contextHandler];
 	});
+	const assetsHandlers = await createAssetsHandlers({
+		assetsDir: publicDir ?? defaultPublicDir,
+	});
 	const filteredRoutes = Object.fromEntries(
 		(await Promise.all(routesWithHandlers)).filter(Boolean) as [
 			string,
 			RouterTypes.RouteHandlerObject<string>,
 		][],
 	);
 	return {
-		routes: filteredRoutes,
+		routes: {
+			...filteredRoutes,
+			...assetsHandlers,
+		},
 		store: contextStore,
 	};
 }
@@ -120,12 +152,14 @@ function sanitizeRoutePath(routePath: string) {
 export type SsgRenderProps = {
 	base?: string | undefined;
 	routesDir?: string | undefined;
+	publicDir?: string | undefined;
 	outDir?: string | undefined;
 };
 
 export async function ssgRender({
 	base,
 	routesDir,
+	publicDir,
 	outDir,
 }: SsgRenderProps = {}) {
 	const { routes } = await createWaveKit({ base, routesDir });
@@ -148,6 +182,16 @@ export async function ssgRender({
 			}
 		}),
 	);
+	// Copy assets from public directory to build folder
+	const publicFiles = await readdir(publicDir ?? defaultPublicDir, {
+		recursive: true,
+	});
+	for (const file of publicFiles) {
+		const sourcePath = path.join(publicDir ?? defaultPublicDir, file);
+		const destPath = path.join(outDir ?? defaultOutDir, base ?? "", file);
+		await Bun.write(destPath, Bun.file(sourcePath));
+	}
+
 	await server.stop();
 	console.log(
 		`Rendered ${renderedRoutes} route(s) to ${outDir ?? defaultOutDir}`,

packages/kit/src/server.ts

@@ -16,6 +16,7 @@ const hooks: WaveKitHooks = {
 
 createWaveKit({
 	routesDir: path.join(process.cwd(), "test", "app"),
+	publicDir: path.join(process.cwd(), "test", "public"),
 	hooks,
 }).then(({ routes }) => {
 	Bun.serve({ routes });

packages/kit/test/public/logo.svg

@@ -13,7 +13,7 @@
 	"files": ["dist"],
 	"scripts": {
 		"build": "bun run build:types && bun run build:code",
-		"build:code": "bun build src/index.ts --outdir ./dist",
+		"build:code": "bun build src/index.ts --outdir ./dist --target bun",
 		"build:types": "tsc --emitDeclarationOnly",
 		"test": "bun test"
 	},