bun-router 0.7.4-experimental.0 → 0.7.4-experimental.12

package/.eslintrc.json

@@ -29,6 +29,7 @@
         "semi": [
             "error",
             "always"
-        ]
+        ],
+        "no-control-regex": "off"
     }
 }

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';
 
@@ -77,3 +81,4 @@ router.get('/', ctx => ctx.render(Home('Hello World')))
 router.serve();
 ```
 
+

package/examples/basic.ts

@@ -1,13 +1,13 @@
 import { Router, http } from '..';
 
-const router = Router();
+const router = Router(3000, {enableFileLogging: false});
 
 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,8 @@
+import { Router, http } from '../../';
+
+const router = Router();
+
+router.add('/', 'GET', () => http.ok());
+router.static('/page', './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/static.ts

@@ -3,4 +3,5 @@ import { Router } from '..';
 const r = Router(3001);
 
 r.static('/', './examples/pages');
+
 r.serve();

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/examples/tsx/components/user.tsx

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

package/examples/tsx/index.ts

@@ -0,0 +1,20 @@
+import { Router, http } from '../../';
+import { User } from './components/user';
+
+const router = Router();
+
+router.get('/', () => {
+	return http.ok();
+});
+
+
+router.get('/u/:username', async ctx => {
+	const username = ctx.params.get('username');
+
+	if (!username) return http.message(400, 'invalid username');
+
+	return http.render(User(username));
+});
+
+router.serve();
+

package/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/router/router';
 export * from './lib/fs/fsys';
 export * from './lib/logger/logger';
+export * from './lib/router/router.d';

package/lib/fs/filetree.ts

@@ -0,0 +1,75 @@
+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 = (filepath: string) => {
+		const pathParts = filepath.split(path.sep);
+		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 = filepath;
+		current.extension = path.extname(filepath);
+	};
+
+	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 = (filepath: string): string | undefined => {
+		let current = root;
+		const pathParts = filepath.split(path.sep);
+		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,29 +1,39 @@
-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);
+	}
 }
 
-function ext(path: string): string {
-    return path.split('.').pop() || '';
+// resolve module paths relative to the current working directory
+function resolveModulePath(module: string) {
+	return path.join(process.cwd(), module);
 }
 
+function exists(filepath: string): boolean {
+	try {
+		fs.access(filepath);
+		return true;
+	} catch (err) {
+		return false;
+	}
+}
 
-export { readDir, ext }
+export { readDir, resolveModulePath, exists };

package/lib/http/http.ts

@@ -1,6 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { httpStatusCodes } from './status';
+import { ReactNode } from 'react';
+import { renderToReadableStream } from 'react-dom/server';
 
+// http is a collection of functions that return a Response
+// object with the appropriate status code and content type
+// e.g. http.ok() returns a 200 response
 const http = {
 	ok: async (msg?: string): Promise<Response> => {
 		return Promise.resolve(new Response(msg ?? httpStatusCodes[200], {
@@ -43,6 +48,14 @@ const http = {
 			headers: { 'Content-Type': contentType}
 		}));
 	},
+	render: async (component: ReactNode): Promise<Response> => {
+		const stream = await renderToReadableStream(component);
+		return new Response(stream, { 
+			status: 200, 
+			statusText: httpStatusCodes[200], 
+			headers: {'Content-Type': 'text/html; charset=utf-8'}
+		});
+	},
 	noContent: async (): Promise<Response> => Promise.resolve(new Response('no content', {
 		status: 204,
 		statusText: 'no content',

package/lib/http/status.ts

@@ -1,66 +1,66 @@
 const httpStatusCodes: { [key: number]: string } = {
-    100: 'Continue',
-    101: 'Switching Protocols',
-    102: 'Processing',
-    103: 'Early Hints',
-    200: 'OK',
-    201: 'Created',
-    202: 'Accepted',
-    203: 'Non-Authoritative Information',
-    204: 'No Content',
-    205: 'Reset Content',
-    206: 'Partial Content',
-    207: 'Multi-Status',
-    208: 'Already Reported',
-    226: 'IM Used',
-    300: 'Multiple Choices',
-    301: 'Moved Permanently',
-    302: 'Found',
-    303: 'See Other',
-    304: 'Not Modified',
-    305: 'Use Proxy',
-    307: 'Temporary Redirect',
-    308: 'Permanent Redirect',
-    400: 'Bad Request',
-    401: 'Unauthorized',
-    402: 'Payment Required',
-    403: 'Forbidden',
-    404: 'Not Found',
-    405: 'Method Not Allowed',
-    406: 'Not Acceptable',
-    407: 'Proxy Authentication Required',
-    408: 'Request Timeout',
-    409: 'Conflict',
-    410: 'Gone',
-    411: 'Length Required',
-    412: 'Precondition Failed',
-    413: 'Payload Too Large',
-    414: 'URI Too Long',
-    415: 'Unsupported Media Type',
-    416: 'Range Not Satisfiable',
-    417: 'Expectation Failed',
-    418: "I'm a Teapot",
-    421: 'Misdirected Request',
-    422: 'Unprocessable Entity',
-    423: 'Locked',
-    424: 'Failed Dependency',
-    425: 'Too Early',
-    426: 'Upgrade Required',
-    428: 'Precondition Required',
-    429: 'Too Many Requests',
-    431: 'Request Header Fields Too Large',
-    451: 'Unavailable For Legal Reasons',
-    500: 'Internal Server Error',
-    501: 'Not Implemented',
-    502: 'Bad Gateway',
-    503: 'Service Unavailable',
-    504: 'Gateway Timeout',
-    505: 'HTTP Version Not Supported',
-    506: 'Variant Also Negotiates',
-    507: 'Insufficient Storage',
-    508: 'Loop Detected',
-    510: 'Not Extended',
-    511: 'Network Authentication Required',
-  };
+	100: 'Continue',
+	101: 'Switching Protocols',
+	102: 'Processing',
+	103: 'Early Hints',
+	200: 'OK',
+	201: 'Created',
+	202: 'Accepted',
+	203: 'Non-Authoritative Information',
+	204: 'No Content',
+	205: 'Reset Content',
+	206: 'Partial Content',
+	207: 'Multi-Status',
+	208: 'Already Reported',
+	226: 'IM Used',
+	300: 'Multiple Choices',
+	301: 'Moved Permanently',
+	302: 'Found',
+	303: 'See Other',
+	304: 'Not Modified',
+	305: 'Use Proxy',
+	307: 'Temporary Redirect',
+	308: 'Permanent Redirect',
+	400: 'Bad Request',
+	401: 'Unauthorized',
+	402: 'Payment Required',
+	403: 'Forbidden',
+	404: 'Not Found',
+	405: 'Method Not Allowed',
+	406: 'Not Acceptable',
+	407: 'Proxy Authentication Required',
+	408: 'Request Timeout',
+	409: 'Conflict',
+	410: 'Gone',
+	411: 'Length Required',
+	412: 'Precondition Failed',
+	413: 'Payload Too Large',
+	414: 'URI Too Long',
+	415: 'Unsupported Media Type',
+	416: 'Range Not Satisfiable',
+	417: 'Expectation Failed',
+	418: 'I\'m a Teapot',
+	421: 'Misdirected Request',
+	422: 'Unprocessable Entity',
+	423: 'Locked',
+	424: 'Failed Dependency',
+	425: 'Too Early',
+	426: 'Upgrade Required',
+	428: 'Precondition Required',
+	429: 'Too Many Requests',
+	431: 'Request Header Fields Too Large',
+	451: 'Unavailable For Legal Reasons',
+	500: 'Internal Server Error',
+	501: 'Not Implemented',
+	502: 'Bad Gateway',
+	503: 'Service Unavailable',
+	504: 'Gateway Timeout',
+	505: 'HTTP Version Not Supported',
+	506: 'Variant Also Negotiates',
+	507: 'Insufficient Storage',
+	508: 'Loop Detected',
+	510: 'Not Extended',
+	511: 'Network Authentication Required',
+};
 
-  export { httpStatusCodes }
+export { httpStatusCodes };

package/lib/logger/color.ts

@@ -1,36 +1,36 @@
 const Colors: Record<string,string> = {
-    reset: "\x1b[0m",
+	reset: '\x1b[0m',
   
-    // foreground
-    black: "\x1b[30m",
-    red: "\x1b[31m",
-    green: "\x1b[32m",
-    yellow: "\x1b[33m",
-    blue: "\x1b[34m",
-    magenta: "\x1b[35m",
-    cyan: "\x1b[36m",
-    white: "\x1b[37m",
+	// foreground
+	black: '\x1b[30m',
+	red: '\x1b[31m',
+	green: '\x1b[32m',
+	yellow: '\x1b[33m',
+	blue: '\x1b[34m',
+	magenta: '\x1b[35m',
+	cyan: '\x1b[36m',
+	white: '\x1b[37m',
   
-    // background
-    bgBlack: "\x1b[40m",
-    bgRed: "\x1b[41m",
-    bgGreen: "\x1b[42m",
-    bgYellow: "\x1b[43m",
-    bgBlue: "\x1b[44m",
-    bgMagenta: "\x1b[45m",
-    bgCyan: "\x1b[46m",
-    bgWhite: "\x1b[47m",
-  } as const;
+	// background
+	bgBlack: '\x1b[40m',
+	bgRed: '\x1b[41m',
+	bgGreen: '\x1b[42m',
+	bgYellow: '\x1b[43m',
+	bgBlue: '\x1b[44m',
+	bgMagenta: '\x1b[45m',
+	bgCyan: '\x1b[46m',
+	bgWhite: '\x1b[47m',
+} as const;
 
   
 
 function color(foreground: string, background: string, message: string) {
-  const _foreground = Colors[foreground];
-  const _background = Colors[background];
-  const reset = Colors.reset;
-  return `${_foreground}${_background}${message}${reset}`;
+	const _foreground = Colors[foreground];
+	const _background = Colors[background];
+	const reset = Colors.reset;
+	return `${_foreground}${_background}${message}${reset}`;
 }
 
 
   
-export { color }
+export { color };

package/lib/logger/logger.d.ts

@@ -5,4 +5,4 @@ type BunLogger = {
     message: (message: string) => void,
 }
 
-export { BunLogger }
+export { BunLogger };

package/lib/logger/logger.ts

@@ -1,5 +1,4 @@
 import { color } from './color';
-import { BunLogger } from './logger.d';
 
 
 const TITLE = `
@@ -9,8 +8,24 @@ _                          _
 |___|___|_|_|  |_| |___|___|_| |___|_|  
                                                                                     
 `;
-const VERSION = '0.7.4-experimental';
-const Logger = (): BunLogger => {
+const VERSION = '0.7.4-experimental.12';
+const Logger = (enableFileLogging: boolean) => {
+	const file = Bun.file('bun-router.log');
+	const writer = enableFileLogging ? file.writer() : null;
+
+	function stripAnsi(str: string) {
+		const ansiRegex = /\u001B\[(?:[0-9]{1,3}(?:;[0-9]{1,3})*)?[m|K]/g;
+		return str.replace(ansiRegex, '');
+	}
+
+	async function write(message: string) {
+		await Bun.write(Bun.stdout, message);
+		if (writer) {
+			writer.write(stripAnsi(message));
+			writer.flush();
+		}
+	}
+
 	return {
 		info: async (statusCode: number, routePath: string, method: string, message?: string) => {
 			const { stamp } = timestamp((new Date(Date.now())));
@@ -19,7 +34,7 @@ const Logger = (): BunLogger => {
 
 			message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? ' ->' : ' <-'} ${method} ${ message ?? ''}\n`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 
 		},
 		error: async (statusCode: number, routePath: string, method: string, error: Error) => {
@@ -29,7 +44,7 @@ const Logger = (): BunLogger => {
 
 			const message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? ' -> ' : ' <-'} ${error.message}\n`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 		},
 		warn: async (message: string) => {
 			const { stamp } = timestamp((new Date(Date.now())));
@@ -38,7 +53,7 @@ const Logger = (): BunLogger => {
 
 			message = `${source} : ${messageColor}\n`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 		},
 		message: async (message: string) => {
 			const { stamp } = timestamp((new Date(Date.now())));
@@ -47,8 +62,9 @@ const Logger = (): BunLogger => {
 
 			message = `${source}: ${messageColor}\n`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 		},
+
 	};
 };
 

package/lib/router/context.ts

@@ -5,9 +5,10 @@ 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);
+// createContext creates a context object
+async function createContext(path: string, route: Route, request: Request, enableFileLogging: boolean): Promise<Context> {
 	const query = new URLSearchParams(path);
+	const params = extractParams(path, route);
 	const formData = isMultiPartForm(request.headers) ? await request.formData() : new FormData();
 
 	return Promise.resolve({
@@ -15,22 +16,25 @@ async function createContext(path: string, route: Route, request: Request): Prom
 		request,
 		query,
 		formData,
-		logger: Logger(),
+		logger: Logger(enableFileLogging),
 		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> {
+// extractParams extracts the parameters from the path
+// and returns a map of key/value pairs
+// e.g. /users/:id => /users/123 => { id: 123 }
+function extractParams(pattern: string, route: Route): Map<string, string> {
 	const params: Map<string, string> = new Map();
-	const pathSegments = path.split('/');
+	const pathSegments = pattern.split('/');
 	const routeSegments = route.path.split('/');
 
 	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 key = routeSegments[i].slice(1);
 			const value = pathSegments[i];
 			params.set(key, value);
 		}
@@ -39,17 +43,19 @@ function extractParams(path: string, route: Route): Map<string, string> {
 	return params;
 }
 
+// getContentType returns the content type from the headers
 function getContentType(headers: Headers): string {
 	const contentType = headers.get('Content-Type');
-	if (!contentType) return '';
-	return contentType;
+	return contentType ?? '';
 }
 
+// isMultiPartForm returns true if the content type is multipart/form-data
 function isMultiPartForm(headers: Headers): boolean {
 	const contentType = getContentType(headers);
 	return contentType.includes('multipart/form-data');
 }
 
+// renderStream renders the component to a readable stream
 async function renderStream(children: ReactNode) {
 	const stream = await renderToReadableStream(children);
 	return new Response(stream, { headers: { 'Content-Type': 'text/html' } });

package/lib/router/{tree.ts → routeTree.ts}

@@ -1,7 +1,6 @@
 import { HttpHandler, Route } from './router.d';
 import { http } from '../http/http';
 import { createContext } from './context';
-import { splitPath } from '../util/strings';
 
 const createRoute = (path: string, method: string, handler: HttpHandler): Route => {
 	const route: Route = {
@@ -19,8 +18,9 @@ const createRoute = (path: string, method: string, handler: HttpHandler): Route
 const RouteTree = () => {
 	const root = createRoute('', 'GET', () => http.notFound());
 
-	const addRoute = (path: string, method: string, handler: HttpHandler) => {
-		const pathParts = splitPath(path);
+	function addRoute (pattern: string, method: string, handler: HttpHandler){
+		console.log(pattern);
+		const pathParts = pattern.split('/');
 		let current = root;
 
 		for (let i = 0; i < pathParts.length; i++) {
@@ -36,11 +36,11 @@ const RouteTree = () => {
 
 		current.handler = handler;
 		current.isLast = true;
-		current.path = path;
-	};
+		current.path = pattern;
+	}
 
-	function findRoute(path: string): Route | undefined {
-		const pathParts = splitPath(path);
+	function findRoute(pathname: string): Route | undefined {
+		const pathParts = pathname.split('/');
 		let current = root;
 		for (let i = 0; i < pathParts.length; i++) {
 			const part = pathParts[i];
@@ -55,8 +55,32 @@ const RouteTree = () => {
 		return current;
 	}
 
-	return { addRoute, findRoute };
+	function size() {
+		let count = 0;
+		function traverse(route: Route) {
+			count++;
+			for (const child of route.children.values()) {
+				traverse(child);
+			}
+		}
+		traverse(root);
+		return count;
+	}
+
+	function list() {
+		const routes: Route[] = [];
+		function traverse(route: Route) {
+			routes.push(route);
+			for (const child of route.children.values()) {
+				traverse(child);
+			}
+		}
+		traverse(root);
+		return routes;
+	}
+
+	return { addRoute, findRoute, size, list };
 
 };
 
-export { RouteTree, createContext as createContext };
+export { RouteTree, createContext };

package/lib/router/router.d.ts

@@ -35,7 +35,8 @@ type Context = {
 type HttpHandler = (ctx: Context) => Response | Promise<Response>
 
 type Options = {
-    db: string,
+    db: string;
+    enableFileLogging: boolean;
 }
 
 type RouterOptions<Options> = ServeOptions

package/lib/router/router.ts

@@ -1,96 +1,129 @@
 import path from 'path';
 import { Database } from 'bun:sqlite';
-import { Route, BunRouter, RouterOptions, Options, HttpHandler } from './router.d';
+import { Route, BunRouter, RouterOptions, Options } from './router.d';
 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 './routeTree';
 import { createContext } from './context';
 
-
 const Router: BunRouter = (port?: number | string, options?: RouterOptions<Options>) => {
 	const { addRoute, findRoute } = RouteTree();
-	const logger = Logger();
-
+	const logger = Logger(options?.enableFileLogging ?? false);
+
+	// load a component from the root directory relative to the cwd
+	async function loadComponent(root: string, name: string) {
+		const module = await import(path.join(process.cwd(), root, name));
+		return module.default;
+	}
+
+	// extract the path, extension, and base name from a file path
+	function extractPathExtBase(pattern: string, pathname: string) {
+		const extension = path.extname(pathname);
+		let base = encodeURIComponent(path.basename(pathname));
+
+		if (extension === '.html' || extension === '.tsx') base = base.replace(extension, '');
+
+		let patternPath = [pattern, base].join('/');
+
+		if (base === 'index') patternPath = pattern;
+		
+		return { patternPath, extension, base };
+	}
+
+	// check if a file exists
+	async function exists(fp: string) {
+		const f = Bun.file(fp);
+		return await f.exists();
+	}
+	
 	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); },
+		get: (pattern, callback) => { 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
+		// add static routes to the router tree
+		// .tsx and .html are rendered as components, or pages
+		// all other file extensions are served as files
+		// the root directory is traversed recursively
 		static: async (pattern: string, root: string) => {
+			if (!exists(root)) return console.error(`Directory not found: ${root}`);
 			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 { patternPath, extension, base } = extractPathExtBase(pattern, fp);
 				const route: Route = {
 					children: new Map(),
-					dynamicPath: '',
+					dynamicPath: pattern,
 					isLast: true,
-					path: patternPath,
+					path: patternPath.startsWith('//') ? patternPath.slice(1) : patternPath, // remove the leading '/' if it exists
 					method: 'GET',
-					handler: async () => await http.file(200, pure),
+					handler: async () => {
+						if (extension === '.tsx') {
+							const component = await loadComponent(root, base);
+							return await http.render(component());
+						} else {
+							return await http.file(200, fp);
+						}
+					},
 				};
 
 				addRoute(route.path, 'GET', route.handler);
 			});
+			
 		},
-		// start the server
+		// start listening for requests
 		serve: () => {
 			startMessage(port ?? 3000);
-			const opts: Options = { db: ':memory:' };
+			const opts: Options = { db: ':memory:', enableFileLogging: false };
 
 			Bun.serve({
 				port: port ?? 3000,
 				...options,
 				async fetch(req) {
 					const url = new URL(req.url);
-					const path = url.pathname;
+					const pathname = url.pathname;
 
 					// set the database
 					if (options) {
 						const o = options as Options;
 						opts.db = o.db;
+						opts.enableFileLogging = o.enableFileLogging;
 					}
 
-					const route = findRoute(path);
+					const route = findRoute(pathname);
 
-					// if the route exists, execute the handler
+					// if the route exists, call 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);
+						// create a context for the handler
+						const context = await createContext(pathname, route, req, opts.enableFileLogging);
 						context.db = new Database(opts.db);
 
+						// call the handler
 						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
+					// 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());
-
+				},
+				// if an error occurs, return a 500 response
+				error(error) {
+					return new Response(`<pre>${error}\n${error.stack}</pre>`, {
+						headers: { 'Content-Type': 'text/html' },
+					});
 				}
 			});
 		},

package/package.json

@@ -3,19 +3,22 @@
   "module": "index.ts",
   "type": "module",
   "devDependencies": {
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
     "@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"
+    "eslint-plugin-react": "^7.33.2"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
-  "version": "0.7.4-experimental.0",
+  "version": "0.7.4-experimental.12",
   "dependencies": {
-    "eslint-plugin-react-hooks": "^4.6.0"
-  }
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "types": "./lib/router.d.ts"
 }

package/tests/router.test.ts

@@ -1,35 +1,36 @@
 import { describe, test, expect } from 'bun:test';
 
 describe('Router', () => {
-    test('Serve', async () => {
-        const proc = Bun.spawn(['./tests/serve.test.sh'], {
-            onExit: (_proc, _exitCode, _signalCode , error) => {
-                if (error) console.error(error);     
-            },
-        });
+	test('Serve', async () => {
+		const proc = Bun.spawn(['./tests/serve.test.sh'], {
+			onExit: (_proc, _exitCode, _signalCode , error) => {
+				if (error) console.error(error);     
+			},
+		});
     
-        const text = await new Response(proc.stdout).text();
+		const text = await new Response(proc.stdout).text();
         
-        const hasFailed = text.includes('Failed');
+		const hasFailed = text.includes('Failed');
 
-        if (hasFailed) console.log(text);
+		if (hasFailed) console.log(text);
 
-        expect(hasFailed).toBe(false);
+		expect(hasFailed).toBe(false);
 
-        proc.kill(0);
-    })
+		proc.kill(0);
+	});
 
-    test('Static', async() => {
-        const proc = Bun.spawn(['./tests/static.test.sh']);
+	test('Static', async() => {
+		const proc = Bun.spawn(['./tests/static.test.sh']);
         
-        const text = await new Response(proc.stdout).text();
+		const text = await new Response(proc.stdout).text();
 
-        const hasFailed = text.includes('Failed');
-        if (hasFailed) console.log(text);
+		const hasFailed = text.includes('Failed');
+		if (hasFailed) console.log(text);
 
-        expect(hasFailed).toBe(false);
+		expect(hasFailed).toBe(false);
 
-        proc.kill(0);
-    });
+		proc.kill(0);
+	});
 });
 
+

package/tsconfig.json

@@ -17,6 +17,9 @@
     "noEmit": true,
     "types": [
       "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();
-});
-

package/lib/util/strings.ts

@@ -1,3 +0,0 @@
-const splitPath = (path: string): string[] => path.split('/').filter(Boolean);
-
-export { splitPath }