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

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

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

package/examples/dynamic.ts

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

package/examples/logger.ts

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

package/examples/ssr/index.ts

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

package/examples/ssr/pages/foo.tsx

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

package/examples/ssr/pages/home.tsx

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

package/examples/static.ts

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

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

package/lib/fs/fsys.ts

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

package/lib/http/http.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { httpStatusCodes } from './status';
+import { ReactNode } from 'react';
+import { renderToReadableStream } from 'react-dom/server';
 
 const http = {
 	ok: async (msg?: string): Promise<Response> => {
@@ -43,6 +45,10 @@ 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]});
+	},
 	noContent: async (): Promise<Response> => Promise.resolve(new Response('no content', {
 		status: 204,
 		statusText: 'no content',

package/lib/resolver/resolveTSX.ts

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

package/lib/router/router.ts

@@ -8,11 +8,15 @@ import { http } from '../http/http';
 import { RouteTree } from './tree';
 import { createContext } from './context';
 
-
 const Router: BunRouter = (port?: number | string, options?: RouterOptions<Options>) => {
 	const { addRoute, findRoute } = RouteTree();
 	const logger = Logger();
 
+	async function loadComponent(name: string) {
+		const module = await import(name);
+		return module.default;
+	}
+
 	return {
 		// add a route to the router tree 
 		add: (pattern, method, callback) => { addRoute(pattern, method, callback); },
@@ -21,15 +25,19 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 		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
+		// all other file extensions are served as files
+		// the root directory is traversed recursively
 		static: async (pattern: string, root: string) => {
 			await readDir(root, async (fp) => {
-				const pure = path.join('.', fp);
-				const ext = path.extname(pure);
+				const ext = path.extname(fp);
 
-				let base = path.basename(pure);
+				let base = path.basename(fp);
 
+				//FIXME: this can be improved
 				if (ext === '.html') base = base.replace(ext, '');
+				if (ext === '.tsx') base = base.replace(ext, '');
 
 				if (pattern[0] !== '/') pattern = '/' + pattern;
 
@@ -37,13 +45,22 @@ const Router: BunRouter = (port?: number | string, options?: RouterOptions<Optio
 
 				if (base === 'index') patternPath = pattern;
 
+				const purePath = path.join(root, patternPath);
+
 				const route: Route = {
 					children: new Map(),
 					dynamicPath: '',
 					isLast: true,
 					path: patternPath,
 					method: 'GET',
-					handler: async () => await http.file(200, pure),
+					handler: async () => {
+						if (ext === '.tsx') {
+							const component = await loadComponent(purePath.split('.')[0]);
+							return await http.render(component());
+						} else {
+							return await http.file(200, fp);
+						}
+					},
 				};
 
 				addRoute(route.path, 'GET', route.handler);
@@ -90,7 +107,6 @@ 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());
-
 				}
 			});
 		},

package/lib/router/tree.ts

@@ -59,4 +59,4 @@ const RouteTree = () => {
 
 };
 
-export { RouteTree, createContext as createContext };
+export { RouteTree, createContext };

package/package.json

@@ -14,8 +14,10 @@
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
-  "version": "0.7.4-experimental.0",
+  "version": "0.7.4-experimental.3",
   "dependencies": {
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "@types/react": "^18.2.22",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react": "^18.2.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();
-});
-