bun-router 0.7.4-experimental.9 → 0.8.1

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 '..';
+import { Router, http } from '../index';
 
-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/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/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.9';
-const Logger = (): BunLogger => {
+const VERSION = '0.8.1';
+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

@@ -19,6 +19,7 @@ const RouteTree = () => {
 	const root = createRoute('', 'GET', () => http.notFound());
 
 	function addRoute (pattern: string, method: string, handler: HttpHandler){
+		console.log(pattern);
 		const pathParts = pattern.split('/');
 		let current = root;
 

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,6 +1,6 @@
 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';
@@ -9,14 +9,16 @@ import { RouteTree } from './routeTree';
 import { createContext } from './context';
 
 const Router: BunRouter = (port?: number | string, options?: RouterOptions<Options>) => {
-	const { addRoute, findRoute, list } = RouteTree();
-	const logger = Logger();
+	const { addRoute, findRoute } = RouteTree();
+	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));
@@ -30,6 +32,7 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 		return { patternPath, extension, base };
 	}
 
+	// check if a file exists
 	async function exists(fp: string) {
 		const f = Bun.file(fp);
 		return await f.exists();
@@ -38,7 +41,7 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 	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); },
@@ -51,10 +54,9 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 			if (!exists(root)) return console.error(`Directory not found: ${root}`);
 			await readDir(root, async (fp) => {
 				const { patternPath, extension, base } = extractPathExtBase(pattern, fp);
-
 				const route: Route = {
 					children: new Map(),
-					dynamicPath: '',
+					dynamicPath: pattern,
 					isLast: true,
 					path: patternPath.startsWith('//') ? patternPath.slice(1) : patternPath, // remove the leading '/' if it exists
 					method: 'GET',
@@ -70,14 +72,12 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 
 				addRoute(route.path, 'GET', route.handler);
 			});
-
-			console.log(list());
 			
 		},
-		// 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,
@@ -90,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);
@@ -101,9 +102,11 @@ 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]);
@@ -116,6 +119,7 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 					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.9",
+  "version": "0.8.1",
   "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/tsconfig.json

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