bun-router 0.7.3 → 0.7.4-experimental.0

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

@@ -53,4 +53,27 @@ 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/lib/fs/fsys.ts

@@ -21,5 +21,9 @@ async function readDir(dirpath: string, handler: (filepath: string, entry: BunFi
     }
 }
 
+function ext(path: string): string {
+    return path.split('.').pop() || '';
+}
+
 
-export { readDir }
+export { readDir, ext }

package/lib/http/http.ts

@@ -1,77 +1,78 @@
-import { httpStatusCodes } from "./status";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { httpStatusCodes } from './status';
 
 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}
+		}));
+	},
+	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/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,96 @@ 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();
+
+	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 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);
+			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());
+					logger.info(response.status, url.pathname, req.method, httpStatusCodes[response.status]);
+					return Promise.resolve(http.notFound());
 
-                }
-            });
-        },
-    }
-}
+				}
+			});
+		},
+	};
+};
 
-export { Router, http }
+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 as 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.0",
+  "dependencies": {
+    "eslint-plugin-react-hooks": "^4.6.0"
+  }
 }

package/tsconfig.json

@@ -16,7 +16,6 @@
     "allowJs": true,
     "noEmit": true,
     "types": [
-      "./index.d.ts",
       "bun-types" // add Bun global
     ]
   }