bun-router 0.7.3 → 0.7.4-experimental.2

package/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "warn",
+            "tab"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

package/README.md

@@ -29,6 +29,10 @@ router.serve();
 ```
 
 ##### Static
+Read a directory and serve it's contents. `.tsx` and `.html` files are rendered by default, everything else is served, including the extension. 
+
+Ex: `/assets/gopher.png` would serve a `.png` image. `/home` would be `.tsx` or `.html` depending on extension.
+
 ```ts
 import { Router } from 'bun-router';
 
@@ -53,4 +57,28 @@ router.post('/register', ctx => {
 
 ```
 
+##### JSX
+```tsx
+// ./pages/home.tsx
+export default const Home = (title: string) => {
+    return (
+        <main>
+            <h1>{ title }</h1>
+        </main>
+    );
+};
+```
+
+```ts
+// ./index.ts
+import { Router } from 'bun-router';
+import Home from './pages/home';
+
+const router = Router();
+
+router.get('/', ctx => ctx.render(Home('Hello World')))
+
+router.serve();
+```
+
 

package/examples/basic.ts

@@ -5,9 +5,9 @@ const router = Router();
 router.add('/', 'GET', () => http.json(200, 'ok'));
 
 router.add('/user/:name', 'GET', (ctx) => {
-    const name = ctx.params.get('name');
-    if (!name) return http.json(500, 'no name');
-    return http.json(200, name);
+	const name = ctx.params.get('name');
+	if (!name) return http.json(500, 'no name');
+	return http.json(200, name);
 });
 
 router.serve();

package/examples/dynamic.ts

@@ -4,16 +4,16 @@ import { Context } from '../lib/router/router.d';
 const home = () => new Response('Welcome Home', { status: 200 });
 
 const subreddit = (ctx: Context) => {
-    const sub = ctx.params.get('subreddit');
-    if (!sub) return http.json(400, { error: 'no subreddit provided' });
-    return http.json(200, { subreddit: sub });
-}
+	const sub = ctx.params.get('subreddit');
+	if (!sub) return http.json(400, { error: 'no subreddit provided' });
+	return http.json(200, { subreddit: sub });
+};
 
 const user = (ctx: Context) => {
-    const user = ctx.params.get('user');
-    if (!user) return http.json(400, { error: 'no user provided' });
-    return http.json(200, { user: user });
-}
+	const user = ctx.params.get('user');
+	if (!user) return http.json(400, { error: 'no user provided' });
+	return http.json(200, { user: user });
+};
 
 const r = Router();
 

package/examples/logger.ts

@@ -3,9 +3,9 @@ import { Router, http } from '..';
 const r = Router();
 
 r.get('/', ctx => {
-    ctx.logger.debug('hello from home');
+	ctx.logger.debug('hello from home');
     
-    return http.ok();
+	return http.ok();
 });
 
 r.serve();

package/examples/ssr/index.ts

@@ -0,0 +1,7 @@
+import { Router } from '../../';
+
+const router = Router();
+
+router.static('/', './examples/ssr/pages');
+
+router.serve();

package/examples/ssr/pages/foo.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Foo() {
+	return (
+		<h1>Foo </h1>
+	);
+}

package/examples/ssr/pages/home.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Home() {
+	return (
+		<h1>Hello World</h1>
+	);
+}

package/examples/todo.ts

@@ -1,45 +1,45 @@
 import { Router, http } from '..';
 
 const Todo = () => {
-    const list: Record<string, string> = {};
+	const list: Record<string, string> = {};
 
-    return {
-        add: (key: string, value: string) => { list[key] = value },
-        get: (key: string) => list[key],
-        remove: (key: string) => { delete list[key] },
-        size: () => Object.entries(list).length,
-        export: () => list,
-    }
-}
+	return {
+		add: (key: string, value: string) => { list[key] = value; },
+		get: (key: string) => list[key],
+		remove: (key: string) => { delete list[key]; },
+		size: () => Object.entries(list).length,
+		export: () => list,
+	};
+};
 
 const todo = Todo();
 
 const r = Router();
 
 r.add('/api/new', 'POST', ctx => {
-    const query = new URL(ctx.request.url).searchParams;
-    const key = query.get('key');
-    const content = query.get('content');
+	const query = new URL(ctx.request.url).searchParams;
+	const key = query.get('key');
+	const content = query.get('content');
 
-    if (!key || !content) return http.message(400, 'invalid query params');
-    ctx.logger.message(`Adding ${key} with ${content}`);
-    todo.add(key, content);
+	if (!key || !content) return http.message(400, 'invalid query params');
+	ctx.logger.message(`Adding ${key} with ${content}`);
+	todo.add(key, content);
 
-    return ctx.json(200, { message: 'ok' });
+	return ctx.json(200, { message: 'ok' });
 });
 
 r.add('/api/todo/:key', 'GET', ctx => {
-    const key = ctx.params.get('key');
-    if (!key) return http.message(400, 'invalid params');
+	const key = ctx.params.get('key');
+	if (!key) return http.message(400, 'invalid params');
 
-    const content = todo.get(key);
-    if (!content) return http.notFound();
+	const content = todo.get(key);
+	if (!content) return http.notFound();
 
-    return ctx.json(200, {key: key, content: content});
+	return ctx.json(200, {key: key, content: content});
 });
 
 r.add('/api/get/all', 'GET', ctx => {
-    return ctx.json(200, todo.export());
+	return ctx.json(200, todo.export());
 });
 
 r.serve();

package/lib/fs/filetree.ts

@@ -0,0 +1,76 @@
+import { splitFilePath } from '../fs/fsys';
+import path from 'node:path';
+
+type File = {
+    name: string;
+    path: string;
+    extension: string;
+    children: Map<string, File>;
+    isLast: boolean;
+};
+
+function createFile(name: string): File {
+	return {
+		name,
+		path: '',
+		extension: '',
+		children: new Map(),
+		isLast: false,
+	};
+}
+
+const FileTree = (dir: string) => {
+	const root = createFile(dir);
+
+	const addFile = (_path: string) => {
+		const pathParts = splitFilePath(_path);
+		let current = root;
+
+		for (let i = 0; i < pathParts.length; i++) {
+			const part = pathParts[i];
+			if (!current.children.has(part)) {
+				current.children.set(part, createFile(part));
+			}
+			current = current.children.get(part)!;
+		}
+
+		current.isLast = true;
+		current.path = _path;
+		current.extension = path.extname(_path);
+	};
+
+	const getFilesByExtension = (extension: string): string[] => {
+		let current = root;
+		const files: string[] = [];
+
+		for (const [name, file] of current.children) {
+			if (file.extension === extension) {
+				files.push(file.path);
+			}
+			current = current.children.get(name)!;
+		}
+
+		return files;
+	};
+
+	const getFileByName = (path: string): string | undefined => {
+		let current = root;
+		const pathParts = splitFilePath(path);
+		for (let i = 0; i < pathParts.length; i++) {
+			const part = pathParts[i];
+			if (current.children.has(part)) {
+				current = current.children.get(part)!;
+			} else {
+				return;
+			}
+		}
+
+		if (!current.isLast) return;
+
+		return current.path;
+	};
+    
+	return { addFile, getFilesByExtension, getFileByName };
+};
+
+export { FileTree };

package/lib/fs/fsys.ts

@@ -1,25 +1,36 @@
-import { BunFile } from "bun";
+import { BunFile } from 'bun';
 import fs from 'node:fs/promises';
 import path from 'path';
 
 // check if the file path is a directory
 const isDir = async (fp: string): Promise<boolean> => (await fs.lstat(fp)).isDirectory();
 
+// recursively read a directory and call a handler function on each file
 async function readDir(dirpath: string, handler: (filepath: string, entry: BunFile) => void) {
-    const files = await fs.readdir(dirpath);
+	const files = await fs.readdir(dirpath);
 
-    for (const file of files) {
-        const bunFile = Bun.file(file);
+	for (const file of files) {
+		const bunFile = Bun.file(file);
 
-        if (typeof bunFile.name === 'undefined') return
+		if (typeof bunFile.name === 'undefined') return;
 
-        const fp = path.join(dirpath, bunFile.name);
-        const isdir = await isDir(fp);
+		const fp = path.join(dirpath, bunFile.name);
+		const isdir = await isDir(fp);
 
-        if (isdir) await readDir(fp, handler);
-        else handler(fp, bunFile);
-    }
+		if (isdir) await readDir(fp, handler);
+		else handler(fp, bunFile);
+	}
+}
+
+// get the extension of a file (unnecessary)
+function ext(p: string): string {
+	return path.extname(p);
+}
+
+// split a file path into an array of strings (unnecessary)
+function splitFilePath(p: string): string[] {
+	return p.split(path.sep);
 }
 
 
-export { readDir }
+export { readDir, ext, splitFilePath };

package/lib/http/http.ts

@@ -1,77 +1,84 @@
-import { httpStatusCodes } from "./status";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { httpStatusCodes } from './status';
+import { ReactNode } from 'react';
+import { renderToReadableStream } from 'react-dom/server';
 
 const http = {
-    ok: async (msg?: string): Promise<Response> => {
-        return Promise.resolve(new Response(msg ?? httpStatusCodes[200], {
-            status: 200,
-            statusText: httpStatusCodes[200],
-        }));
-    },
-    json: async (statusCode: number, data: any): Promise<Response> => {
-        const jsonString = JSON.stringify(data);
-        return Promise.resolve(new Response(jsonString, {
-            status: statusCode,
-            statusText: httpStatusCodes[statusCode],
-            headers: {'Content-Type': 'application/json'},
-        }));
-    },
-    html: async (statusCode: number, content: string): Promise<Response> => {
-        return Promise.resolve(new Response(content, {
-            status: statusCode,
-            statusText: httpStatusCodes[statusCode],
-            headers: {'Content-Type': 'text/html; charset=utf-8'}
-        }));
-    },
-    file: async (statusCode: number, fp: string): Promise<Response> => {
-        const file = Bun.file(fp);
-        const exists = await file.exists();
+	ok: async (msg?: string): Promise<Response> => {
+		return Promise.resolve(new Response(msg ?? httpStatusCodes[200], {
+			status: 200,
+			statusText: httpStatusCodes[200],
+		}));
+	},
+	json: async (statusCode: number, data: any): Promise<Response> => {
+		const jsonString = JSON.stringify(data);
+		return Promise.resolve(new Response(jsonString, {
+			status: statusCode,
+			statusText: httpStatusCodes[statusCode],
+			headers: {'Content-Type': 'application/json'},
+		}));
+	},
+	html: async (statusCode: number, content: string): Promise<Response> => {
+		return Promise.resolve(new Response(content, {
+			status: statusCode,
+			statusText: httpStatusCodes[statusCode],
+			headers: {'Content-Type': 'text/html; charset=utf-8'}
+		}));
+	},
+	file: async (statusCode: number, fp: string): Promise<Response> => {
+		const file = Bun.file(fp);
+		const exists = await file.exists();
     
-        if (!exists) return http.notFound(`File not found: ${fp}`);
+		if (!exists) return http.notFound(`File not found: ${fp}`);
     
-        const content = await file.arrayBuffer();
-        if (!content) return http.noContent();
+		const content = await file.arrayBuffer();
+		if (!content) return http.noContent();
     
-        let contentType = 'text/html; charset=utf-9';
+		let contentType = 'text/html; charset=utf-9';
     
-        if (file.type.includes('image'))
-            contentType = file.type + '; charset=utf-8';
+		if (file.type.includes('image'))
+			contentType = file.type + '; charset=utf-8';
     
-        return Promise.resolve(new Response(content, {
-            status: statusCode,
-            statusText: httpStatusCodes[statusCode],
-            headers: { 'Content-Type': contentType}
-        }));
-    },
-    noContent: async (): Promise<Response> => Promise.resolve(new Response('no content', {
-        status: 204,
-        statusText: 'no content',
-    })),
-    notFound: async(msg?: string): Promise<Response> => {
-        const response = new Response(msg ?? 'not found', {
-            status: 404,
-            statusText: httpStatusCodes[404],
-            headers: {'Content-Type': 'text/html'},
-        });
+		return Promise.resolve(new Response(content, {
+			status: statusCode,
+			statusText: httpStatusCodes[statusCode],
+			headers: { 'Content-Type': contentType}
+		}));
+	},
+	render: async (component: ReactNode): Promise<Response> => {
+		const stream = await renderToReadableStream(component);
+		return new Response(stream, { status: 200, statusText: httpStatusCodes[200]});
+	},
+	noContent: async (): Promise<Response> => Promise.resolve(new Response('no content', {
+		status: 204,
+		statusText: 'no content',
+	})),
+	notFound: async(msg?: string): Promise<Response> => {
+		const response = new Response(msg ?? 'not found', {
+			status: 404,
+			statusText: httpStatusCodes[404],
+			headers: {'Content-Type': 'text/html'},
+		});
     
-        return Promise.resolve(response);
-    },
-    methodNotAllowed: async (msg?: string): Promise<Response> => {
-        const response = new Response(msg ?? 'method not allowed', {
-            status: 405,
-            statusText: httpStatusCodes[405],
-            headers: {'Content-Type': 'text/html'},
-        });
+		return Promise.resolve(response);
+	},
+	methodNotAllowed: async (msg?: string): Promise<Response> => {
+		const response = new Response(msg ?? 'method not allowed', {
+			status: 405,
+			statusText: httpStatusCodes[405],
+			headers: {'Content-Type': 'text/html'},
+		});
     
-        return Promise.resolve(response);
-    },
-    message:  async (status: number, msg?: string): Promise<Response> => {
-        const response = new Response(msg ?? '?', {
-            status: status,
-            statusText: httpStatusCodes[status],
-            headers: {'Content-Type': 'text/html; charset-utf-8'},
-        });
-        return Promise.resolve(response)
-    },
-}
+		return Promise.resolve(response);
+	},
+	message:  async (status: number, msg?: string): Promise<Response> => {
+		const response = new Response(msg ?? '?', {
+			status: status,
+			statusText: httpStatusCodes[status],
+			headers: {'Content-Type': 'text/html; charset-utf-8'},
+		});
+		return Promise.resolve(response);
+	},
+};
 
-export { http }
+export { http };

package/lib/logger/logger.ts

@@ -8,87 +8,87 @@ _                          _
 | . | | |   |  |  _| . | | |  _| -_|  _|
 |___|___|_|_|  |_| |___|___|_| |___|_|  
                                                                                     
-`
-const VERSION = '0.7.1';
+`;
+const VERSION = '0.7.4-experimental';
 const Logger = (): BunLogger => {
-    return {
-        info: async (statusCode: number, routePath: string, method: string, message?: string) => {
-            const { stamp } = timestamp((new Date(Date.now())));
-            const source = color('green', 'bgBlack', `[bun-router ${stamp}]`);
-            const rp = color('white', 'bgBlack', routePath);
+	return {
+		info: async (statusCode: number, routePath: string, method: string, message?: string) => {
+			const { stamp } = timestamp((new Date(Date.now())));
+			const source = color('green', 'bgBlack', `[bun-router ${stamp}]`);
+			const rp = color('white', 'bgBlack', routePath);
 
-            message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? '->' : '<-'} ${method}${ message ?? ''}\n`
+			message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? ' ->' : ' <-'} ${method} ${ message ?? ''}\n`;
 
-            await Bun.write(Bun.stdout, message);
+			await Bun.write(Bun.stdout, message);
 
-        },
-        error: async (statusCode: number, routePath: string, method: string, error: Error) => {
-            const { stamp } = timestamp((new Date(Date.now())));
-            const source = color('black', 'bgRed', `[error ${stamp}]`);
-            const rp = color('white', 'bgBlack', routePath);
+		},
+		error: async (statusCode: number, routePath: string, method: string, error: Error) => {
+			const { stamp } = timestamp((new Date(Date.now())));
+			const source = color('black', 'bgRed', `[error ${stamp}]`);
+			const rp = color('white', 'bgBlack', routePath);
 
-            const message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? '->' : '<-'} ${error.message}\n`
+			const message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? ' -> ' : ' <-'} ${error.message}\n`;
 
-            await Bun.write(Bun.stdout, message);
-        },
-        warn: async (message: string) => {
-            const { stamp } = timestamp((new Date(Date.now())));
-            const source = color('black', 'bgYellow', `[warning ${stamp}]`);
-            const messageColor = color('yellow', 'bgBlack', message);
+			await Bun.write(Bun.stdout, message);
+		},
+		warn: async (message: string) => {
+			const { stamp } = timestamp((new Date(Date.now())));
+			const source = color('black', 'bgYellow', `[warning ${stamp}]`);
+			const messageColor = color('yellow', 'bgBlack', message);
 
-            message = `${source} : ${messageColor}\n`;
+			message = `${source} : ${messageColor}\n`;
 
-            await Bun.write(Bun.stdout, message);
-        },
-        message: async (message: string) => {
-            const { stamp } = timestamp((new Date(Date.now())));
-            const source = color('black', 'bgCyan', `[message ${stamp}]`);
-            const messageColor = color('yellow', 'bgBlack', message);
+			await Bun.write(Bun.stdout, message);
+		},
+		message: async (message: string) => {
+			const { stamp } = timestamp((new Date(Date.now())));
+			const source = color('black', 'bgCyan', `[message ${stamp}]`);
+			const messageColor = color('yellow', 'bgBlack', message);
 
-            message = `${source}: ${messageColor}\n`;
+			message = `${source}: ${messageColor}\n`;
 
-            await Bun.write(Bun.stdout, message);
-        },
-    }
-}
+			await Bun.write(Bun.stdout, message);
+		},
+	};
+};
 
 function timestamp(date: Date) {
-    const month = pad(date.getMonth());
-    const day = pad(date.getDate());
-    const hour = pad(date.getHours());
-    const minute = pad(date.getMinutes());
-    const seconds = pad(date.getSeconds());
-    const stamp = `${hour}:${minute}:${seconds}`;
-
-    return {month, day, hour, minute, stamp};
+	const month = pad(date.getMonth());
+	const day = pad(date.getDate());
+	const hour = pad(date.getHours());
+	const minute = pad(date.getMinutes());
+	const seconds = pad(date.getSeconds());
+	const stamp = `${hour}:${minute}:${seconds}`;
+
+	return {month, day, hour, minute, stamp};
 }
 
 function setColor(n: number, text?: string){
-    const s = ` [${String(n)}${text ?? ''}] `;
+	const s = ` [${String(n)}${text ?? ''}] `;
 
-    if (n < 100) return color('black', 'bgYellow', s);
-    else if (n >= 100 && n < 200) return color('black', 'bgCyan', s);
-    else if (n >= 200 && n < 300) return color('black', 'bgGreen', s);
-    else if (n >= 300 && n < 400) return color('black', 'bgRed', s);
-    else if (n >= 400 && n < 500) return color('black', 'bgRed', s);
-    else if (n >= 500) return color('white', 'bgRed', s);
+	if (n < 100) return color('black', 'bgYellow', s);
+	else if (n >= 100 && n < 200) return color('black', 'bgCyan', s);
+	else if (n >= 200 && n < 300) return color('black', 'bgGreen', s);
+	else if (n >= 300 && n < 400) return color('black', 'bgRed', s);
+	else if (n >= 400 && n < 500) return color('black', 'bgRed', s);
+	else if (n >= 500) return color('white', 'bgRed', s);
 
-    return color('white', 'bgBlack', `[${s}]`).trim();
+	return color('white', 'bgBlack', `[${s}]`).trim();
 }
 
 function startMessage(port: number | string) {
-    const { stamp } = timestamp((new Date(Date.now())));
-    const source = color('green', 'bgBlack', `[bun-router ${stamp}]`)
-    const portColor = color('green', 'bgBlack', String(port));
-    const msg = `${source}: Starting Server on :${portColor}\n`;
-    const version = color('red', 'bgBlack', `v${VERSION}\n`);
-
-    Bun.write(Bun.stdout, TITLE + '\n' + version);
-    Bun.write(Bun.stdout, msg);
+	const { stamp } = timestamp((new Date(Date.now())));
+	const source = color('green', 'bgBlack', `[bun-router ${stamp}]`);
+	const portColor = color('green', 'bgBlack', String(port));
+	const msg = `${source}: Starting Server on :${portColor}\n`;
+	const version = color('red', 'bgBlack', `v${VERSION}\n`);
+
+	Bun.write(Bun.stdout, TITLE + '\n' + version);
+	Bun.write(Bun.stdout, msg);
 }
 
 function pad(n: number) {
-    return String(n).padStart(2, '0');
+	return String(n).padStart(2, '0');
 }
 
-export { Logger, startMessage }
+export { Logger, startMessage };

package/lib/resolver/resolveTSX.ts

@@ -0,0 +1,28 @@
+import { FileTree } from '../fs/filetree';
+import { readDir } from '../fs/fsys';
+import { ComponentType } from 'react';
+
+async function createFileTree(root: string) {
+	const tree = FileTree(root);
+
+	await readDir(root, (fp) => {
+		tree.addFile(fp);
+	});
+
+	return tree;
+}
+
+async function resolveModules(root: string) {
+	const tree = await createFileTree(root);
+	const files = tree.getFilesByExtension('.tsx');
+	const modules: ComponentType[] = [];
+
+	for (const file of files) {
+		const module = await import(file) as ComponentType;
+		modules.push(module);
+	}
+
+	return modules;
+}
+
+export { resolveModules };

package/lib/router/context.ts

@@ -1,51 +1,58 @@
-import { Route, Context } from "./router.d";
-import { Logger } from "../..";
-import { http } from "./router";
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { Route, Context } from './router.d';
+import { renderToReadableStream } from 'react-dom/server';
+import { Logger } from '../logger/logger';
+import { http } from './router';
+import { ReactNode } from 'react';
 
 async function createContext(path: string, route: Route, request: Request): Promise<Context> {
-    const params = extractParams(path, route);
-    const query = new URLSearchParams(path);
-    const formData = isMultiPartForm(request.headers) ? await request.formData() : new FormData();
-
-    return Promise.resolve({
-        params,
-        request,
-        query,
-        formData,
-        logger: Logger(),
-        json: (statusCode: number, data: any) => http.json(statusCode, data),
-    });
+	const params = extractParams(path, route);
+	const query = new URLSearchParams(path);
+	const formData = isMultiPartForm(request.headers) ? await request.formData() : new FormData();
+
+	return Promise.resolve({
+		params,
+		request,
+		query,
+		formData,
+		logger: Logger(),
+		json: (statusCode: number, data: any) => http.json(statusCode, data),
+		render: async (component: ReactNode) => await renderStream(component),
+	});
 }
 
 function extractParams(path: string, route: Route): Map<string, string> {
-    const params: Map<string, string> = new Map();
-    const pathSegments = path.split('/');
-    const routeSegments = route.path.split('/');
+	const params: Map<string, string> = new Map();
+	const pathSegments = path.split('/');
+	const routeSegments = route.path.split('/');
 
-    if (pathSegments.length !== routeSegments.length) return params;
+	if (pathSegments.length !== routeSegments.length) return params;
 
-    for (let i = 0; i < pathSegments.length; i++) {
-        if (routeSegments[i][0] === ':') {
-            const key = routeSegments[i].replace(':', '');
-            const value = pathSegments[i];
-            params.set(key, value);
-        }
-    }
+	for (let i = 0; i < pathSegments.length; i++) {
+		if (routeSegments[i][0] === ':') {
+			const key = routeSegments[i].replace(':', '');
+			const value = pathSegments[i];
+			params.set(key, value);
+		}
+	}
 
-    return params;
+	return params;
 }
 
 function getContentType(headers: Headers): string {
-    const contentType = headers.get('Content-Type');
-    if (!contentType) return '';
-    return contentType;
+	const contentType = headers.get('Content-Type');
+	if (!contentType) return '';
+	return contentType;
 }
 
 function isMultiPartForm(headers: Headers): boolean {
-    const contentType = getContentType(headers);
-    return contentType.includes('multipart/form-data');
+	const contentType = getContentType(headers);
+	return contentType.includes('multipart/form-data');
 }
 
+async function renderStream(children: ReactNode) {
+	const stream = await renderToReadableStream(children);
+	return new Response(stream, { headers: { 'Content-Type': 'text/html' } });
+}
 
-
-export { createContext }
+export { createContext };

package/lib/router/router.d.ts

@@ -1,4 +1,5 @@
-import { TLSOptions, TLSWebSocketServeOptions, WebSocketServeOptions, ServeOptions, TLSServeOptions } from 'bun';
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+import { TLSWebSocketServeOptions, WebSocketServeOptions, ServeOptions, TLSServeOptions } from 'bun';
 import { Logger } from '../logger/logger';
 import { Database } from 'bun:sqlite';
 
@@ -20,7 +21,6 @@ type Route = {
     handler: HttpHandler;
     isLast: boolean;
 }
-
 type Context = {
     db?: Database;
     formData: FormData | Promise<FormData>;
@@ -29,6 +29,7 @@ type Context = {
     params: Map<string, string>;
     query: URLSearchParams;
     request: Request;
+    render: (component: React.ReactNode) => Response | Promise<Response>;
 };
 
 type HttpHandler = (ctx: Context) => Response | Promise<Response>
@@ -43,4 +44,4 @@ type RouterOptions<Options> = ServeOptions
 | TLSWebSocketServeOptions<Options>
 | undefined
 
-export { Context , Route, BunRouter, RouterOptions, Options, HttpHandler }
+export { Context , Route, BunRouter, RouterOptions, Options, HttpHandler };

package/lib/router/router.ts

@@ -5,96 +5,111 @@ import { httpStatusCodes } from '../http/status';
 import { readDir } from '../fs/fsys';
 import { Logger, startMessage } from '../logger/logger';
 import { http } from '../http/http';
-import {RouteTree } from './tree';
+import { RouteTree } from './tree';
 import { createContext } from './context';
 
-
 const Router: BunRouter = (port?: number | string, options?: RouterOptions<Options>) => {
-    const { addRoute, findRoute } = RouteTree();
-    const logger = Logger();
-
-    return {
-        // add a route to the router tree 
-        add: (pattern, method, callback) => { addRoute(pattern, method, callback) },
-        get: (pattern: string, callback: HttpHandler) => { addRoute(pattern, 'GET', callback) },
-        post: (pattern, callback) => { addRoute(pattern, 'POST', callback) },
-        put: (pattern, callback) => { addRoute(pattern, 'PUT', callback)},
-        delete: (pattern, callback) => { addRoute(pattern, 'DELETE', callback) },
+	const { addRoute, findRoute } = RouteTree();
+	const logger = Logger();
+
+	async function loadComponent(name: string) {
+		const module = await import(name);
+		return module.default;
+	}
+
+	return {
+		// add a route to the router tree 
+		add: (pattern, method, callback) => { addRoute(pattern, method, callback); },
+		get: (pattern: string, callback: HttpHandler) => { addRoute(pattern, 'GET', callback); },
+		post: (pattern, callback) => { addRoute(pattern, 'POST', callback); },
+		put: (pattern, callback) => { addRoute(pattern, 'PUT', callback);},
+		delete: (pattern, callback) => { addRoute(pattern, 'DELETE', callback); },
         
-        // add a static route to the router tree
-        static: async (pattern: string, root: string) => {
-            await readDir(root, async (fp, _) => {
-                const pure = path.join('.', fp);
-                const ext = path.extname(pure);
-
-                let base = path.basename(pure);
-
-                if (ext === '.html') base = base.replace(ext, '');
-
-                if (pattern[0] !== '/') pattern = '/' + pattern;
-
-                let patternPath = pattern + base;
-
-                if (base === 'index') patternPath = pattern;
-
-                const route: Route = {
-                    children: new Map(),
-                    dynamicPath: '',
-                    isLast: true,
-                    path: patternPath,
-                    method: 'GET',
-                    handler: async () => await http.file(200, pure),
-                };
-
-                addRoute(route.path, 'GET', route.handler);
-            });
-        },
-        // start the server
-        serve: () => {
-            startMessage(port ?? 3000);
-            let opts: Options = { db: ':memory:' };
-
-            Bun.serve({
-                port: port ?? 3000,
-                ...options,
-                async fetch(req) {
-                    const url = new URL(req.url);
-                    let path = url.pathname;
-
-                    // set the database
-                    if (options) {
-                        let o = options as Options;
-                        opts.db = o.db;
-                    }
-
-                    const route = findRoute(path);
-
-                    // if the route exists, execute the handler
-                    if (route) {
-                        if (route.method !== req.method) {
-                            logger.info(405, url.pathname, req.method, httpStatusCodes[405]);
-                            return Promise.resolve(http.methodNotAllowed());
-                        }
-
-                        const context = await createContext(path, route, req);
-                        context.db = new Database(opts.db);
-
-                        const response = await route.handler(context);
-
-                        logger.info(response.status, url.pathname, req.method, httpStatusCodes[response.status]);
-                        return Promise.resolve(response);
-                    } 
-
-                    // if no route is found, return 404
-                    const response = await http.notFound();
+		// add static routes to the router tree
+		// .tsx and .html are rendered as components
+		// all other file extensions are served as files
+		// the root directory is traversed recursively
+		static: async (pattern: string, root: string) => {
+			await readDir(root, async (fp) => {
+				const pure = path.join('.', fp);
+				const ext = path.extname(pure);
+
+				let base = path.basename(pure);
+
+				//FIXME: this can be improved
+				if (ext === '.html') base = base.replace(ext, '');
+				if (ext === '.tsx') base = base.replace(ext, '');
+
+				if (pattern[0] !== '/') pattern = '/' + pattern;
+
+				let patternPath = pattern + base;
+
+				if (base === 'index') patternPath = pattern;
+
+				const route: Route = {
+					children: new Map(),
+					dynamicPath: '',
+					isLast: true,
+					path: patternPath,
+					method: 'GET',
+					handler: async () => {
+						if (ext === '.tsx') {
+							const component = await loadComponent(path.join(root, patternPath));
+							return await http.render(component());
+						} else {
+							return await http.file(200, pure);
+						}
+					},
+				};
+
+				addRoute(route.path, 'GET', route.handler);
+			});
+		},
+		// start the server
+		serve: () => {
+			startMessage(port ?? 3000);
+			const opts: Options = { db: ':memory:' };
+
+			Bun.serve({
+				port: port ?? 3000,
+				...options,
+				async fetch(req) {
+					const url = new URL(req.url);
+					const path = url.pathname;
+
+					// set the database
+					if (options) {
+						const o = options as Options;
+						opts.db = o.db;
+					}
+
+					const route = findRoute(path);
+
+					// if the route exists, execute the handler
+					if (route) {
+						if (route.method !== req.method) {
+							logger.info(405, url.pathname, req.method, httpStatusCodes[405]);
+							return Promise.resolve(http.methodNotAllowed());
+						}
+
+						const context = await createContext(path, route, req);
+						context.db = new Database(opts.db);
+
+						const response = await route.handler(context);
+
+						logger.info(response.status, url.pathname, req.method, httpStatusCodes[response.status]);
+						return Promise.resolve(response);
+					} 
+
+					// if no route is found, return 404
+					const response = await http.notFound();
                         
-                    logger.info(response.status, url.pathname, req.method, httpStatusCodes[response.status]);
-                    return Promise.resolve(http.notFound());
-
-                }
-            });
-        },
-    }
-}
-
-export { Router, http }
+					logger.info(response.status, url.pathname, req.method, httpStatusCodes[response.status]);
+					return Promise.resolve(http.notFound());
+				}
+			});
+		},
+	};
+};
+
+export { Router, http };

package/lib/router/tree.ts

@@ -1,63 +1,62 @@
-import { HttpHandler, Route } from "./router.d";
-import { http } from "../http/http";
+import { HttpHandler, Route } from './router.d';
+import { http } from '../http/http';
 import { createContext } from './context';
-
-const splitPath = (s: string): string[] => s.split('/').filter(x => x !== '');
+import { splitPath } from '../util/strings';
 
 const createRoute = (path: string, method: string, handler: HttpHandler): Route => {
-    const route: Route = {
-        children: new Map(),
-        path: path,
-        dynamicPath: '',
-        method: method,
-        handler: handler,
-        isLast: false
-    };
-
-    return route;
+	const route: Route = {
+		children: new Map(),
+		path: path,
+		dynamicPath: '',
+		method: method,
+		handler: handler,
+		isLast: false
+	};
+
+	return route;
 };
 
 const RouteTree = () => {
-    let root = createRoute('', 'GET', () => http.notFound());
-
-    const addRoute = (path: string, method: string, handler: HttpHandler) => {
-        const pathParts = splitPath(path);
-        let current = root;
-
-        for (let i = 0; i < pathParts.length; i++) {
-            const part = pathParts[i];
-            if (part.startsWith(':')) {
-                current.dynamicPath = part;
-            }
-            if (!current.children.has(part)) {
-                current.children.set(part, createRoute(part, method, handler));
-            }
-            current = current.children.get(part)!;
-        }
-
-        current.handler = handler;
-        current.isLast = true;
-        current.path = path;
-    };
-
-    const findRoute = (path: string): Route | undefined => {
-        const pathParts = splitPath(path);
-        let current = root;
-        for (let i = 0; i < pathParts.length; i++) {
-            const part = pathParts[i];
-            if (current.children.has(part)) {
-                current = current.children.get(part)!;
-            } else if (current.dynamicPath) {
-                current = current.children.get(current.dynamicPath)!;
-            } else {
-                return;
-            }
-        }
-        return current;
-    }
-
-    return { addRoute, findRoute }
+	const root = createRoute('', 'GET', () => http.notFound());
+
+	const addRoute = (path: string, method: string, handler: HttpHandler) => {
+		const pathParts = splitPath(path);
+		let current = root;
+
+		for (let i = 0; i < pathParts.length; i++) {
+			const part = pathParts[i];
+			if (part.startsWith(':')) {
+				current.dynamicPath = part;
+			}
+			if (!current.children.has(part)) {
+				current.children.set(part, createRoute(part, method, handler));
+			}
+			current = current.children.get(part)!;
+		}
+
+		current.handler = handler;
+		current.isLast = true;
+		current.path = path;
+	};
+
+	function findRoute(path: string): Route | undefined {
+		const pathParts = splitPath(path);
+		let current = root;
+		for (let i = 0; i < pathParts.length; i++) {
+			const part = pathParts[i];
+			if (current.children.has(part)) {
+				current = current.children.get(part)!;
+			} else if (current.dynamicPath) {
+				current = current.children.get(current.dynamicPath)!;
+			} else {
+				return;
+			}
+		}
+		return current;
+	}
+
+	return { addRoute, findRoute };
 
 };
 
-export { RouteTree, createContext }
+export { RouteTree, createContext };

package/package.json

@@ -3,10 +3,19 @@
   "module": "index.ts",
   "type": "module",
   "devDependencies": {
-    "bun-types": "latest"
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "bun-types": "latest",
+    "eslint": "^8.49.0",
+    "eslint-plugin-react": "^7.33.2",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
-  "version": "0.7.3"
+  "version": "0.7.4-experimental.2",
+  "dependencies": {
+    "eslint-plugin-react-hooks": "^4.6.0"
+  }
 }

package/tsconfig.json

@@ -16,8 +16,10 @@
     "allowJs": true,
     "noEmit": true,
     "types": [
-      "./index.d.ts",
       "bun-types" // add Bun global
-    ]
+    ],
+    "paths": {
+      "examples/*": ["./examples/*"]
+    }
   }
 }

package/examples/db.ts

@@ -1,10 +0,0 @@
-import { Router, http } from '..';
-
-const router = Router(3000, {db: './dbs/test.db'});
-
-router.add('/', 'GET', async (ctx) => {
-    const formData = await ctx.formData;
-    const name = formData?.get('name');
-    return http.ok();
-});
-