bun-router 0.7.3 → 0.7.4-experimental.11

package/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+    "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"
+        ],
+        "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';
 
@@ -53,4 +57,28 @@ 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/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/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,25 +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);
+	}
 }
 
+// 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 }
+export { readDir, resolveModulePath, exists };

package/lib/http/http.ts

@@ -1,77 +1,91 @@
-import { httpStatusCodes } from "./status";
+/* 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], {
-            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}
+		}));
+	},
+	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',
+	})),
+	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 };