feat(app): Integrate express-templates-reload for dynamic template reloading

Author: wajeht

package-lock.json

@@ -93,6 +93,7 @@
 		"@typescript-eslint/eslint-plugin": "^7.16.1",
 		"@typescript-eslint/parser": "^7.18.0",
 		"@vitest/coverage-v8": "^2.1.5",
+		"@wajeht/express-templates-reload": "^1.0.1",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
 		"husky": "^9.1.7",

package.json

@@ -9,12 +9,12 @@ import {
 import ejs from 'ejs';
 import cors from 'cors';
 import express from 'express';
-import { reload } from './utils';
 import flash from 'connect-flash';
 import { router } from './router';
 import { appConfig } from './config';
 import compression from 'compression';
 import expressLayouts from 'express-ejs-layouts';
+import { expressTemplatesReload as reload } from '@wajeht/express-templates-reload';
 
 const app = express();
 
@@ -52,7 +52,12 @@ app.use(expressLayouts);
 
 app.use(appLocalStateMiddleware);
 
-reload({ app, watch: [{ path: './src/views', extensions: ['.html'] }] });
+if (appConfig.env === 'development') {
+	reload({
+		app,
+		watch: [{ path: './public/style.css' }, { path: './src/views', extensions: ['.html'] }],
+	});
+}
 
 app.use(router);
 

src/app.ts

@@ -6,17 +6,16 @@ import path from 'node:path';
 import jwt from 'jsonwebtoken';
 import dayjsModule from 'dayjs';
 import { Redis } from 'ioredis';
+import { Request } from 'express';
 import { logger } from './logger';
 import fsp from 'node:fs/promises';
-import fs from 'node:fs';
 import utc from 'dayjs/plugin/utc';
 import nodemailer from 'nodemailer';
 import { db, redis } from './db/db';
 import { Queue, Worker, Job } from 'bullmq';
 import timezone from 'dayjs/plugin/timezone';
 import { appConfig, emailConfig, oauthConfig, sessionConfig } from './config';
 import { GithubUserEmail, GitHubOauthToken, ApiKeyPayload, User } from './types';
-import { Application, Request, Response, NextFunction } from 'express';
 
 export function dayjs(date: string | Date = new Date()) {
 	dayjsModule.extend(utc);
@@ -285,78 +284,3 @@ export const modifyUserSessionById = async (
 	logger.error('No session found for user ID:', userId);
 	return null;
 };
-
-export function reload({
-	app,
-	watch,
-	options = {},
-}: {
-	app: Application;
-	watch: { path: string; extensions: string[] }[];
-	options?: { pollInterval?: number; quiet?: boolean };
-}): void {
-	if (appConfig.env !== 'development') return;
-
-	const pollInterval = options.pollInterval || 50;
-	const quiet = options.quiet || false;
-	let changeDetected = false;
-	const lastContents = new Map<string, string>();
-
-	watch.forEach(({ path: dir, extensions }) => {
-		const extensionsSet = new Set(extensions);
-		fs.watch(dir, { recursive: true }, (_: fs.WatchEventType, filename: string | null) => {
-			if (filename && extensionsSet.has(filename.slice(filename.lastIndexOf('.')))) {
-				try {
-					const fullPath = path.join(dir, filename);
-					const content = fs.readFileSync(fullPath, 'utf8');
-
-					if (content !== lastContents.get(fullPath)) {
-						lastContents.set(fullPath, content);
-
-						if (!quiet) logger.info('[reload] File changed: %s', filename);
-						changeDetected = true;
-					}
-				} catch {
-					if (!quiet) logger.debug('[reload] Error reading file: %s', filename);
-				}
-			}
-		});
-	});
-
-	app.get('/wait-for-reload', (req: Request, res: Response) => {
-		const timer = setInterval(() => {
-			if (changeDetected) {
-				changeDetected = false;
-				clearInterval(timer);
-				res.send();
-			}
-		}, pollInterval);
-
-		req.on('close', () => clearInterval(timer));
-	});
-
-	const clientScript = `
-	<script>
-			(async function poll() {
-					try {
-							await fetch('/wait-for-reload');
-							location.reload();
-					} catch {
-							location.reload();
-					}
-			})();
-	</script>\n\t`;
-
-	app.use((req: Request, res: Response, next: NextFunction) => {
-		const originalSend = res.send.bind(res);
-
-		res.send = function (body: any): Response {
-			if (typeof body === 'string' && body.includes('</head>')) {
-				body = body.replace('</head>', clientScript + '</head>');
-			}
-			return originalSend(body);
-		};
-
-		next();
-	});
-}