bun-router 0.7.4-experimental.8 → 0.8.0

package/.eslintrc.json

@@ -18,6 +18,7 @@
         "react"
     ],
     "rules": {
+        "no-eplicit-any": "off",
         "indent": [
             "warn",
             "tab"
@@ -29,6 +30,7 @@
         "semi": [
             "error",
             "always"
-        ]
+        ],
+        "no-control-regex": "off"
     }
 }

package/examples/basic.ts

@@ -1,6 +1,6 @@
 import { Router, http } from '..';
 
-const router = Router();
+const router = Router(3000, {enableFileLogging: false});
 
 router.add('/', 'GET', () => http.json(200, 'ok'));
 

package/examples/ssr/index.ts

@@ -1,7 +1,8 @@
-import { Router } from '../../';
+import { Router, http } from '../../';
 
 const router = Router();
 
+router.add('/', 'GET', () => http.ok());
 router.static('/page', './examples/ssr/pages');
 
 router.serve();

package/examples/static.ts

@@ -2,6 +2,6 @@ import { Router } from '..';
 
 const r = Router(3001);
 
-r.static('/page', './pages');
+r.static('/', './examples/pages');
 
 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/http/http.ts

@@ -3,6 +3,9 @@ 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], {
@@ -47,7 +50,11 @@ const http = {
 	},
 	render: async (component: ReactNode): Promise<Response> => {
 		const stream = await renderToReadableStream(component);
-		return new Response(stream, { status: 200, statusText: httpStatusCodes[200]});
+		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,

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

@@ -23,12 +23,12 @@ const Colors: Record<string,string> = {
 } as const;
 
   
-
-function color(foreground: string, background: string, message: string) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function color(foreground: string, background: string, ...args: any[]) {
 	const _foreground = Colors[foreground];
 	const _background = Colors[background];
 	const reset = Colors.reset;
-	return `${_foreground}${_background}${message}${reset}`;
+	return `${_foreground}${_background}${args.map(String).join('')}${reset}`;
 }
 
 

package/lib/logger/logger.d.ts

@@ -1,8 +1,9 @@
 type BunLogger = {
-    info: (statusCode: number, routePath: string, method: string, message?: string) => void,
-    error: (statusCode: number, routePath: string, method: string, error: Error) => void,
-    warn: (message: string) => void,
-    message: (message: string) => void,
+    info: (statusCode: number, routePath: string, method: string, ...args: any[]) => void, // eslint-disable-line @typescript-eslint/no-explicit-any
+
+    error: (statusCode: number, routePath: string, method: string, error: Error) => void, // eslint-disable-line @typescript-eslint/no-explicit-any
+    warn: (...args: any[]) => void, // eslint-disable-line @typescript-eslint/no-explicit-any
+    message: (...args: any[]) => void, // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 export { BunLogger };

package/lib/logger/logger.ts

@@ -1,5 +1,4 @@
 import { color } from './color';
-import { BunLogger } from './logger.d';
 
 
 const TITLE = `
@@ -9,17 +8,34 @@ _                          _
 |___|___|_|_|  |_| |___|___|_| |___|_|  
                                                                                     
 `;
-const VERSION = '0.7.4-experimental.8';
-const Logger = (): BunLogger => {
+const VERSION = '0.8.0';
+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) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		info: async (statusCode: number, routePath: string, method: string, ...args: any[]) => {
 			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`;
+			const message = `${source}: ${setColor(statusCode)}: ${rp} ${(method === 'GET') ? ' ->' : ' <-'} ${method} ${args.map(String).join(' ')}\n'}`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 
 		},
 		error: async (statusCode: number, routePath: string, method: string, error: Error) => {
@@ -29,7 +45,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 +54,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 +63,18 @@ const Logger = (): BunLogger => {
 
 			message = `${source}: ${messageColor}\n`;
 
-			await Bun.write(Bun.stdout, message);
+			await write(message);
 		},
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		log: async(args: any[]) => {
+			const { stamp } = timestamp((new Date(Date.now())));
+			const source = color('black', 'bgCyan', `[message ${stamp}]`);
+			const messageColor = color('yellow', 'bgBlack', args);
+
+			const message = `${source}: ${messageColor}\n`;
+
+			await write(message);
+		}
 	};
 };
 

package/lib/router/context.ts

@@ -5,7 +5,8 @@ import { Logger } from '../logger/logger';
 import { http } from './router';
 import { ReactNode } from 'react';
 
-async function createContext(path: string, route: Route, request: Request): Promise<Context> {
+// 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();
@@ -15,12 +16,15 @@ 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),
 	});
 }
 
+// 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 = pattern.split('/');
@@ -39,16 +43,19 @@ function extractParams(pattern: 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');
 	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/routeTree.ts

@@ -18,7 +18,8 @@ const createRoute = (path: string, method: string, handler: HttpHandler): Route
 const RouteTree = () => {
 	const root = createRoute('', 'GET', () => http.notFound());
 
-	const addRoute = (pattern: string, method: string, handler: HttpHandler) => {
+	function addRoute (pattern: string, method: string, handler: HttpHandler){
+		console.log(pattern);
 		const pathParts = pattern.split('/');
 		let current = root;
 
@@ -36,7 +37,7 @@ const RouteTree = () => {
 		current.handler = handler;
 		current.isLast = true;
 		current.path = pattern;
-	};
+	}
 
 	function findRoute(pathname: string): Route | undefined {
 		const pathParts = pathname.split('/');
@@ -54,7 +55,31 @@ 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 };
 
 };
 

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,8 +1,8 @@
 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, exists } from '../fs/fsys';
+import { readDir } from '../fs/fsys';
 import { Logger, startMessage } from '../logger/logger';
 import { http } from '../http/http';
 import { RouteTree } from './routeTree';
@@ -10,16 +10,18 @@ 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;
 	}
 
-	function normalizePath(pattern: string, pathname: string) {
+	// extract the path, extension, and base name from a file path
+	function extractPathExtBase(pattern: string, pathname: string) {
 		const extension = path.extname(pathname);
-		let base = path.basename(pathname);
+		let base = encodeURIComponent(path.basename(pathname));
 
 		if (extension === '.html' || extension === '.tsx') base = base.replace(extension, '');
 
@@ -27,13 +29,19 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 
 		if (base === 'index') patternPath = pattern;
 		
-		return { patternPath, extension, base }
+		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); },
@@ -43,15 +51,14 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 		// all other file extensions are served as files
 		// the root directory is traversed recursively
 		static: async (pattern: string, root: string) => {
-			if (!exists(root)) console.log(`Cannot find directory ${root}`);
+			if (!exists(root)) return console.error(`Directory not found: ${root}`);
 			await readDir(root, async (fp) => {
-				const { patternPath, extension, base } = normalizePath(pattern, fp);
-
+				const { patternPath, extension, base } = extractPathExtBase(pattern, fp);
 				const route: Route = {
 					children: new Map(),
-					dynamicPath: '',
+					dynamicPath: pattern,
 					isLast: true,
-					path: patternPath.slice(1), // remove the leading '/'
+					path: patternPath.startsWith('//') ? patternPath.slice(1) : patternPath, // remove the leading '/' if it exists
 					method: 'GET',
 					handler: async () => {
 						if (extension === '.tsx') {
@@ -65,11 +72,12 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 
 				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,
@@ -82,6 +90,7 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 					if (options) {
 						const o = options as Options;
 						opts.db = o.db;
+						opts.enableFileLogging = o.enableFileLogging;
 					}
 
 					const route = findRoute(pathname);
@@ -93,20 +102,28 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 							return Promise.resolve(http.methodNotAllowed());
 						}
 
-						const context = await createContext(pathname, 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,21 +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.8",
+  "version": "0.8.0",
   "dependencies": {
-    "@types/react": "^18.2.22",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "react": "^18.2.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

@@ -15,10 +15,12 @@
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "noEmit": true,
+    "noImplicitAny": false,
     "types": [
       "bun-types" // add Bun global
     ],
     "paths": {
+      "/examples/*": ["./examples/*"]
     }
   },
 }