first commit

README.md

@@ -0,0 +1,3 @@
+# bun frontend template
+
+a simle bun frontend starting point i made and use

config/environment.ts

@@ -0,0 +1,7 @@
+export const environment: Environment = {
+	port: 6600,
+	host: "127.0.0.1",
+	development:
+		process.argv.includes("--dev") ||
+		process.argv.includes("--development"),
+};

eslint.config.js

@@ -0,0 +1,132 @@
+import pluginJs from "@eslint/js";
+import tseslintPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import prettier from "eslint-plugin-prettier";
+import promisePlugin from "eslint-plugin-promise";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import unicorn from "eslint-plugin-unicorn";
+import unusedImports from "eslint-plugin-unused-imports";
+import globals from "globals";
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default [
+	{
+		files: ["**/*.{js,mjs,cjs}"],
+		languageOptions: {
+			globals: globals.node,
+		},
+		...pluginJs.configs.recommended,
+		plugins: {
+			"simple-import-sort": simpleImportSort,
+			"unused-imports": unusedImports,
+			promise: promisePlugin,
+			prettier: prettier,
+			unicorn: unicorn,
+		},
+		rules: {
+			"eol-last": ["error", "always"],
+			"no-multiple-empty-lines": ["error", { max: 1, maxEOF: 1 }],
+			"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+			"simple-import-sort/imports": "error",
+			"simple-import-sort/exports": "error",
+			"unused-imports/no-unused-imports": "error",
+			"unused-imports/no-unused-vars": [
+				"warn",
+				{
+					vars: "all",
+					varsIgnorePattern: "^_",
+					args: "after-used",
+					argsIgnorePattern: "^_",
+				},
+			],
+			"promise/always-return": "error",
+			"promise/no-return-wrap": "error",
+			"promise/param-names": "error",
+			"promise/catch-or-return": "error",
+			"promise/no-nesting": "warn",
+			"promise/no-promise-in-callback": "warn",
+			"promise/no-callback-in-promise": "warn",
+			"prettier/prettier": [
+				"error",
+				{
+					useTabs: true,
+					tabWidth: 4,
+				},
+			],
+			indent: ["error", "tab", { SwitchCase: 1 }],
+			"unicorn/filename-case": [
+				"error",
+				{
+					case: "camelCase",
+				},
+			],
+		},
+	},
+	{
+		files: ["**/*.{ts,tsx}"],
+		languageOptions: {
+			parser: tsParser,
+			globals: globals.node,
+		},
+		plugins: {
+			"@typescript-eslint": tseslintPlugin,
+			"simple-import-sort": simpleImportSort,
+			"unused-imports": unusedImports,
+			promise: promisePlugin,
+			prettier: prettier,
+			unicorn: unicorn,
+		},
+		rules: {
+			...tseslintPlugin.configs.recommended.rules,
+			quotes: ["error", "double"],
+			"eol-last": ["error", "always"],
+			"no-multiple-empty-lines": ["error", { max: 1, maxEOF: 1 }],
+			"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
+			"simple-import-sort/imports": "error",
+			"simple-import-sort/exports": "error",
+			"unused-imports/no-unused-imports": "error",
+			"unused-imports/no-unused-vars": [
+				"warn",
+				{
+					vars: "all",
+					varsIgnorePattern: "^_",
+					args: "after-used",
+					argsIgnorePattern: "^_",
+				},
+			],
+			"promise/always-return": "error",
+			"promise/no-return-wrap": "error",
+			"promise/param-names": "error",
+			"promise/catch-or-return": "error",
+			"promise/no-nesting": "warn",
+			"promise/no-promise-in-callback": "warn",
+			"promise/no-callback-in-promise": "warn",
+			"prettier/prettier": [
+				"error",
+				{
+					useTabs: true,
+					tabWidth: 4,
+				},
+			],
+			indent: ["error", "tab", { SwitchCase: 1 }],
+			"unicorn/filename-case": [
+				"error",
+				{
+					case: "camelCase",
+				},
+			],
+			"@typescript-eslint/explicit-function-return-type": ["error"],
+			"@typescript-eslint/explicit-module-boundary-types": ["error"],
+			"@typescript-eslint/typedef": [
+				"error",
+				{
+					arrowParameter: true,
+					variableDeclaration: true,
+					propertyDeclaration: true,
+					memberVariableDeclaration: true,
+					parameter: true,
+				},
+			],
+		},
+	},
+];

package.json

@@ -0,0 +1,33 @@
+{
+	"name": "bun_frontend_template",
+	"module": "src/index.ts",
+	"type": "module",
+	"scripts": {
+		"start": "bun run src/index.ts",
+		"dev": "bun run --watch src/index.ts --dev",
+		"lint": "eslint",
+		"lint:fix": "bun lint --fix",
+		"cleanup": "rm -rf logs node_modules bun.lockdb"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.17.0",
+		"@types/bun": "^1.1.14",
+		"@types/ejs": "^3.1.5",
+		"@typescript-eslint/eslint-plugin": "^8.18.1",
+		"@typescript-eslint/parser": "^8.18.1",
+		"eslint": "^9.17.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-promise": "^7.2.1",
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-unicorn": "^56.0.1",
+		"eslint-plugin-unused-imports": "^4.1.4",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2"
+	},
+	"peerDependencies": {
+		"typescript": "^5.7.2"
+	},
+	"dependencies": {
+		"ejs": "^3.1.10"
+	}
+}

src/helpers/char.ts

@@ -0,0 +1,6 @@
+export function timestampToReadable(timestamp?: number): string {
+	const date: Date =
+		timestamp && !isNaN(timestamp) ? new Date(timestamp) : new Date();
+	if (isNaN(date.getTime())) return "Invalid Date";
+	return date.toISOString().replace("T", " ").replace("Z", "");
+}

src/helpers/ejs.ts

@@ -0,0 +1,26 @@
+import { renderFile } from "ejs";
+import { join } from "path";
+
+export async function renderEjsTemplate(
+	viewName: string | string[],
+	data: EjsTemplateData,
+	headers?: Record<string, string | number | boolean>,
+): Promise<Response> {
+	let templatePath: string;
+
+	if (Array.isArray(viewName)) {
+		templatePath = join(__dirname, "..", "views", ...viewName);
+	} else {
+		templatePath = join(__dirname, "..", "views", `${viewName}`);
+	}
+
+	if (!templatePath.endsWith(".ejs")) {
+		templatePath += ".ejs";
+	}
+
+	const html: string = await renderFile(templatePath, data);
+
+	return new Response(html, {
+		headers: { "Content-Type": "text/html", ...headers },
+	});
+}

src/helpers/logger.ts

@@ -0,0 +1,175 @@
+import { environment } from "@config/environment";
+import type { Stats } from "fs";
+import {
+	createWriteStream,
+	existsSync,
+	mkdirSync,
+	statSync,
+	WriteStream,
+} from "fs";
+import { EOL } from "os";
+import { basename, join } from "path";
+
+import { timestampToReadable } from "./char";
+
+class Logger {
+	private static instance: Logger;
+	private static log: string = join(__dirname, "../../logs");
+
+	public static getInstance(): Logger {
+		if (!Logger.instance) {
+			Logger.instance = new Logger();
+		}
+
+		return Logger.instance;
+	}
+
+	private writeToLog(logMessage: string): void {
+		if (environment.development) return;
+
+		const date: Date = new Date();
+		const logDir: string = Logger.log;
+		const logFile: string = join(
+			logDir,
+			`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}.log`,
+		);
+
+		if (!existsSync(logDir)) {
+			mkdirSync(logDir, { recursive: true });
+		}
+
+		let addSeparator: boolean = false;
+
+		if (existsSync(logFile)) {
+			const fileStats: Stats = statSync(logFile);
+			if (fileStats.size > 0) {
+				const lastModified: Date = new Date(fileStats.mtime);
+				if (
+					lastModified.getFullYear() === date.getFullYear() &&
+					lastModified.getMonth() === date.getMonth() &&
+					lastModified.getDate() === date.getDate() &&
+					lastModified.getHours() !== date.getHours()
+				) {
+					addSeparator = true;
+				}
+			}
+		}
+
+		const stream: WriteStream = createWriteStream(logFile, { flags: "a" });
+
+		if (addSeparator) {
+			stream.write(`${EOL}${date.toISOString()}${EOL}`);
+		}
+
+		stream.write(`${logMessage}${EOL}`);
+		stream.close();
+	}
+
+	private extractFileName(stack: string): string {
+		const stackLines: string[] = stack.split("\n");
+		let callerFile: string = "";
+
+		for (let i: number = 2; i < stackLines.length; i++) {
+			const line: string = stackLines[i].trim();
+			if (line && !line.includes("Logger.") && line.includes("(")) {
+				callerFile = line.split("(")[1]?.split(")")[0] || "";
+				break;
+			}
+		}
+
+		return basename(callerFile);
+	}
+
+	private getCallerInfo(stack: unknown): {
+		filename: string;
+		timestamp: string;
+	} {
+		const filename: string =
+			typeof stack === "string" ? this.extractFileName(stack) : "unknown";
+
+		const readableTimestamp: string = timestampToReadable();
+
+		return { filename, timestamp: readableTimestamp };
+	}
+
+	public info(message: string | string[], breakLine: boolean = false): void {
+		const stack: string = new Error().stack || "";
+		const { filename, timestamp } = this.getCallerInfo(stack);
+
+		const joinedMessage: string = Array.isArray(message)
+			? message.join(" ")
+			: message;
+
+		const logMessageParts: ILogMessageParts = {
+			readableTimestamp: { value: timestamp, color: "90" },
+			level: { value: "[INFO]", color: "32" },
+			filename: { value: `(${filename})`, color: "36" },
+			message: { value: joinedMessage, color: "0" },
+		};
+
+		this.writeToLog(`${timestamp} [INFO] (${filename}) ${joinedMessage}`);
+		this.writeConsoleMessageColored(logMessageParts, breakLine);
+	}
+
+	public warn(message: string | string[], breakLine: boolean = false): void {
+		const stack: string = new Error().stack || "";
+		const { filename, timestamp } = this.getCallerInfo(stack);
+
+		const joinedMessage: string = Array.isArray(message)
+			? message.join(" ")
+			: message;
+
+		const logMessageParts: ILogMessageParts = {
+			readableTimestamp: { value: timestamp, color: "90" },
+			level: { value: "[WARN]", color: "33" },
+			filename: { value: `(${filename})`, color: "36" },
+			message: { value: joinedMessage, color: "0" },
+		};
+
+		this.writeToLog(`${timestamp} [WARN] (${filename}) ${joinedMessage}`);
+		this.writeConsoleMessageColored(logMessageParts, breakLine);
+	}
+
+	public error(
+		message: string | string[] | Error | Error[],
+		breakLine: boolean = false,
+	): void {
+		const stack: string = new Error().stack || "";
+		const { filename, timestamp } = this.getCallerInfo(stack);
+
+		const messages: (string | Error)[] = Array.isArray(message)
+			? message
+			: [message];
+		const joinedMessage: string = messages
+			.map((msg: string | Error): string =>
+				typeof msg === "string" ? msg : msg.message,
+			)
+			.join(" ");
+
+		const logMessageParts: ILogMessageParts = {
+			readableTimestamp: { value: timestamp, color: "90" },
+			level: { value: "[ERROR]", color: "31" },
+			filename: { value: `(${filename})`, color: "36" },
+			message: { value: joinedMessage, color: "0" },
+		};
+
+		this.writeToLog(`${timestamp} [ERROR] (${filename}) ${joinedMessage}`);
+		this.writeConsoleMessageColored(logMessageParts, breakLine);
+	}
+
+	private writeConsoleMessageColored(
+		logMessageParts: ILogMessageParts,
+		breakLine: boolean = false,
+	): void {
+		const logMessage: string = Object.keys(logMessageParts)
+			.map((key: string) => {
+				const part: ILogMessagePart = logMessageParts[key];
+				return `\x1b[${part.color}m${part.value}\x1b[0m`;
+			})
+			.join(" ");
+		console.log(logMessage + (breakLine ? EOL : ""));
+	}
+}
+
+const logger: Logger = Logger.getInstance();
+export { logger };

src/index.ts

@@ -0,0 +1,17 @@
+import { logger } from "@helpers/logger";
+
+import { serverHandler } from "./server";
+
+async function main(): Promise<void> {
+	try {
+		serverHandler.initialize();
+	} catch (error) {
+		throw error;
+	}
+}
+
+main().catch((error: Error) => {
+	logger.error("Error initializing the server:");
+	logger.error(error as Error);
+	process.exit(1);
+});

src/routes/index.ts

@@ -0,0 +1,17 @@
+import { renderEjsTemplate } from "@helpers/ejs";
+
+const routeDef: RouteDef = {
+	method: "GET",
+	accepts: "*/*",
+	returns: "text/html",
+};
+
+async function handler(): Promise<Response> {
+	const ejsTemplateData: EjsTemplateData = {
+		title: "Hello, World!",
+	};
+
+	return await renderEjsTemplate("index", ejsTemplateData);
+}
+
+export { handler, routeDef };

src/server.ts

@@ -0,0 +1,196 @@
+import { environment } from "@config/environment";
+import { logger } from "@helpers/logger";
+import {
+	type BunFile,
+	FileSystemRouter,
+	type MatchedRoute,
+	type Serve,
+} from "bun";
+
+class ServerHandler {
+	private router: FileSystemRouter;
+
+	constructor(
+		private port: number,
+		private host: string,
+	) {
+		this.router = new FileSystemRouter({
+			style: "nextjs",
+			dir: "./src/routes",
+			origin: `http://${this.host}:${this.port}`,
+		});
+	}
+
+	public initialize(): void {
+		const server: Serve = Bun.serve({
+			port: this.port,
+			hostname: this.host,
+			fetch: this.handleRequest.bind(this),
+		});
+
+		logger.info(
+			`Server running at http://${server.hostname}:${server.port}`,
+			true,
+		);
+
+		this.logRoutes();
+	}
+
+	private logRoutes(): void {
+		logger.info("Available routes:");
+
+		const sortedRoutes: [string, string][] = Object.entries(
+			this.router.routes,
+		).sort(([pathA]: [string, string], [pathB]: [string, string]) =>
+			pathA.localeCompare(pathB),
+		);
+
+		for (const [path, filePath] of sortedRoutes) {
+			logger.info(`Route: ${path}, File: ${filePath}`);
+		}
+	}
+
+	private async serveStaticFile(pathname: string): Promise<Response> {
+		try {
+			// eslint-disable-next-line prettier/prettier
+			let filePath: string = pathname === "/favicon.ico" ? new URL("../public/assets/favicon.ico", import.meta.url,).pathname: new URL(`..${pathname}`, import.meta.url).pathname;
+
+			const file: BunFile = Bun.file(filePath);
+
+			if (await file.exists()) {
+				const fileContent: ArrayBuffer = await file.arrayBuffer();
+				const contentType: string =
+					file.type || "application/octet-stream";
+
+				return new Response(fileContent, {
+					headers: { "Content-Type": contentType },
+				});
+			} else {
+				logger.warn(`File not found: ${filePath}`);
+				return new Response("Not Found", { status: 404 });
+			}
+		} catch (error) {
+			logger.error(`Error serving static file: ${pathname}`);
+			logger.error(error as Error);
+			return new Response("Internal Server Error", { status: 500 });
+		}
+	}
+
+	private async handleRequest(
+		request: Request,
+		server: BunServer,
+	): Promise<Response> {
+		const pathname: string = new URL(request.url).pathname;
+		if (pathname.startsWith("/public") || pathname === "/favicon.ico") {
+			return await this.serveStaticFile(pathname);
+		}
+
+		const match: MatchedRoute | null = this.router.match(request);
+		let requestBody: unknown = {};
+		let response: Response;
+
+		if (match) {
+			const { filePath, params, query } = match;
+
+			try {
+				const routeModule: RouteModule = await import(filePath);
+				const contentType: string | null =
+					request.headers.get("Content-Type");
+				const actualContentType: string | null = contentType
+					? contentType.split(";")[0].trim()
+					: null;
+
+				if (
+					routeModule.routeDef.needsBody === "json" &&
+					actualContentType === "application/json"
+				) {
+					try {
+						requestBody = await request.json();
+					} catch {
+						requestBody = {};
+					}
+				} else if (
+					routeModule.routeDef.needsBody === "multipart" &&
+					actualContentType === "multipart/form-data"
+				) {
+					try {
+						requestBody = await request.formData();
+					} catch {
+						requestBody = {};
+					}
+				}
+
+				if (routeModule.routeDef.method !== request.method) {
+					response = Response.json(
+						{
+							success: false,
+							code: 405,
+							error: `Method ${request.method} Not Allowed`,
+						},
+						{ status: 405 },
+					);
+				} else {
+					const expectedContentType: string | null =
+						routeModule.routeDef.accepts;
+
+					const matchesAccepts: boolean =
+						expectedContentType === "*/*" ||
+						actualContentType === expectedContentType;
+
+					if (!matchesAccepts) {
+						response = Response.json(
+							{
+								success: false,
+								code: 406,
+								error: `Content-Type ${contentType} Not Acceptable`,
+							},
+							{ status: 406 },
+						);
+					} else {
+						response = await routeModule.handler(
+							request,
+							server,
+							requestBody,
+							query,
+							params,
+						);
+
+						response.headers.set(
+							"Content-Type",
+							routeModule.routeDef.returns,
+						);
+					}
+				}
+			} catch (error: unknown) {
+				logger.error(`Error handling route ${request.url}:`);
+				logger.error(error as Error);
+
+				response = Response.json(
+					{
+						success: false,
+						code: 500,
+						error: "Internal Server Error",
+					},
+					{ status: 500 },
+				);
+			}
+		} else {
+			response = Response.json(
+				{
+					success: false,
+					code: 404,
+					error: "Not Found",
+				},
+				{ status: 404 },
+			);
+		}
+
+		return response;
+	}
+}
+const serverHandler: ServerHandler = new ServerHandler(
+	environment.port,
+	environment.host,
+);
+
+export { serverHandler };

src/views/index.ejs

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+</head>
+<body>
+	<h1> hello </h1>
+</body>
+</html>

tsconfig.json

@@ -0,0 +1,51 @@
+{
+	"compilerOptions": {
+		"baseUrl": "./",
+		"paths": {
+			"@/*": [
+				"src/*"
+			],
+			"@config/*": [
+				"config/*"
+			],
+			"@types/*": [
+				"types/*"
+			],
+			"@helpers/*": [
+				"src/helpers/*"
+			]
+		},
+		"typeRoots": [
+			"./src/types",
+			"./node_modules/@types"
+		],
+		// Enable latest features
+		"lib": [
+			"ESNext",
+			"DOM"
+		],
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleDetection": "force",
+		"jsx": "react-jsx",
+		"allowJs": true,
+		// Bundler mode
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"verbatimModuleSyntax": true,
+		"noEmit": true,
+		// Best practices
+		"strict": true,
+		"skipLibCheck": true,
+		"noFallthroughCasesInSwitch": true,
+		// Some stricter flags (disabled by default)
+		"noUnusedLocals": false,
+		"noUnusedParameters": false,
+		"noPropertyAccessFromIndexSignature": false,
+	},
+	"include": [
+		"src",
+		"types",
+		"config"
+	],
+}

types/bun.d.ts

@@ -0,0 +1,5 @@
+import type { Server } from "bun";
+
+declare global {
+	type BunServer = Server;
+}

types/config.d.ts

@@ -0,0 +1,5 @@
+type Environment = {
+	port: number;
+	host: string;
+	development: boolean;
+};

types/ejs.d.ts

@@ -0,0 +1,3 @@
+interface EjsTemplateData {
+	[key: string]: string | number | boolean | object | undefined | null;
+}

types/logger.d.ts

@@ -0,0 +1,9 @@
+type ILogMessagePart = { value: string; color: string };
+
+type ILogMessageParts = {
+	level: ILogMessagePart;
+	filename: ILogMessagePart;
+	readableTimestamp: ILogMessagePart;
+	message: ILogMessagePart;
+	[key: string]: ILogMessagePart;
+};

types/routes.d.ts

@@ -0,0 +1,20 @@
+type RouteDef = {
+	method: string;
+	accepts: string | null;
+	returns: string;
+	needsBody?: "multipart" | "json";
+};
+
+type Query = Record<string, string>;
+type Params = Record<string, string>;
+
+type RouteModule = {
+	handler: (
+		request: Request,
+		server: BunServer,
+		requestBody: unknown,
+		query: Query,
+		params: Params,
+	) => Promise<Response> | Response;
+	routeDef: RouteDef;
+};