thunderous-server 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -22,7 +22,8 @@ var index_exports = {};
 __export(index_exports, {
   escapeHtml: () => escapeHtml,
   getMeta: () => getMeta,
-  raw: () => raw
+  raw: () => raw,
+  setMeta: () => setMeta
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -40,6 +41,9 @@ var metaState = {
   name: "",
   filename: ""
 };
+var setMeta = (meta) => {
+  Object.assign(metaState, meta);
+};
 var getMeta = () => {
   return Object.freeze({
     ...metaState,
@@ -66,5 +70,6 @@ var raw = (str) => new RawHtml(str);
 0 && (module.exports = {
   escapeHtml,
   getMeta,
-  raw
+  raw,
+  setMeta
 });

package/dist/index.d.cts

@@ -69,6 +69,8 @@ type Meta = {
      */
     filename: string;
 };
+/** Set metadata context for the current page being rendered. */
+declare const setMeta: (meta: Partial<Meta>) => void;
 /** Get metadata about the current page being rendered. */
 declare const getMeta: () => Meta;
 
@@ -86,4 +88,4 @@ declare class RawHtml {
  */
 declare const raw: (str: string) => RawHtml;
 
-export { escapeHtml, getMeta, raw };
+export { escapeHtml, getMeta, raw, setMeta };

package/dist/index.d.ts

@@ -69,6 +69,8 @@ type Meta = {
      */
     filename: string;
 };
+/** Set metadata context for the current page being rendered. */
+declare const setMeta: (meta: Partial<Meta>) => void;
 /** Get metadata about the current page being rendered. */
 declare const getMeta: () => Meta;
 
@@ -86,4 +88,4 @@ declare class RawHtml {
  */
 declare const raw: (str: string) => RawHtml;
 
-export { escapeHtml, getMeta, raw };
+export { escapeHtml, getMeta, raw, setMeta };

package/dist/index.js

@@ -12,6 +12,9 @@ var metaState = {
   name: "",
   filename: ""
 };
+var setMeta = (meta) => {
+  Object.assign(metaState, meta);
+};
 var getMeta = () => {
   return Object.freeze({
     ...metaState,
@@ -37,5 +40,6 @@ var raw = (str) => new RawHtml(str);
 export {
   escapeHtml,
   getMeta,
-  raw
+  raw,
+  setMeta
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thunderous-server",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "A simple server to enhance Thunderous components with SSR.",
   "license": "MIT",
   "author": "Jonathan DeWitt <jon.dewitt@thunder.solutions>",
@@ -24,9 +24,6 @@
     "@eslint/js": "^9.38.0",
     "@eslint/json": "^0.13.2",
     "@total-typescript/ts-reset": "^0.6.1",
-    "@types/connect-livereload": "^0.6.3",
-    "@types/express": "^5.0.3",
-    "@types/livereload": "^0.9.5",
     "@types/node": "^24.9.1",
     "@types/resolve": "^1.20.6",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
@@ -40,16 +37,13 @@
   },
   "dependencies": {
     "chalk": "^5.6.2",
-    "connect-livereload": "^0.6.1",
     "emoji-space-shim": "^0.1.7",
     "es-module-lexer": "^1.7.0",
-    "express": "^5.1.0",
-    "livereload": "^0.10.3",
     "node-emoji": "^2.2.0",
-    "nodemon": "^3.1.14",
     "resolve": "^1.22.11",
     "resolve.exports": "^2.0.3",
-    "string-width": "^8.2.0"
+    "string-width": "^8.2.0",
+    "vite": "^6.3.5"
   },
   "peerDependencies": {
     "thunderous": ">=2.4.2"

package/src/cli.ts

@@ -1,45 +1,31 @@
 import { build } from './build';
-import nodemon from 'nodemon';
-import { readFileSync } from 'fs';
-import { config } from './config';
-import { relative, resolve } from 'path';
-import chalk from 'chalk';
 
 const args = process.argv.slice(2);
 
 if (args[0] === 'dev') {
-	try {
-		const ignoreFile = readFileSync('.gitignore', 'utf-8');
-		const ignores = ignoreFile.split('\n').filter((line) => line.trim() !== '' && !line.startsWith('#'));
-
-		// Set up nodemon for auto-restart on server changes
-		if (process.env.NODE_ENV !== 'production') {
-			nodemon({
-				script: resolve(`${import.meta.dirname}/dev.ts`),
-				ignore: ignores,
-				watch: [config.baseDir],
-				exec: 'tsx',
-			});
-
-			nodemon
-				.on('start', () => {
-					// console.log('App has started');
-				})
-				.on('quit', () => {
-					console.log(chalk.green('\nServer shut down successfully.\n'));
-					process.exit();
-				})
-				.on('restart', (files) => {
-					const filesList = (files ?? ['(none)']).map(
-						(file) => `  • ${chalk.cyan.underline(relative(config.configDir ?? process.cwd(), file))}\n`,
-					);
-					console.log('\nUpdates detected:\n', filesList.join(''));
-				});
+	// Parse port from command line arguments
+	process.env.PORT = process.env.PORT ?? '3000';
+	args.forEach((arg, i) => {
+		if (arg.startsWith('--port')) {
+			let port: string | undefined;
+			if (arg.includes('=')) {
+				port = arg.split('=')[1];
+			} else {
+				port = args[i + 1];
+			}
+			if (port !== '' && port !== undefined) {
+				process.env.PORT = port;
+			}
 		}
-	} catch (error) {
-		console.error('\x1b[31mFailed to start server:\x1b[0m', error);
-		process.exit(1);
-	}
+	});
+
+	// Vite handles HMR, port finding, and file watching
+	import('./dev')
+		.then(({ dev }) => dev())
+		.catch((error) => {
+			console.error('\x1b[31mFailed to start server:\x1b[0m', error);
+			process.exit(1);
+		});
 } else if (args[0] === 'build') {
 	try {
 		build();

package/src/dev.ts

@@ -1,140 +1,17 @@
-import express from 'express';
-import { existsSync, readdirSync, readFileSync, statSync, mkdtempSync } from 'fs';
-import { join, relative, resolve } from 'path';
-import { tmpdir } from 'os';
-import { ModuleKind, ScriptTarget, transpileModule, ImportsNotUsedAsValues } from 'typescript';
-import { bootstrapThunderous, generateStaticTemplate, generateImportMap, injectImportMap } from './generate';
+import { createServer } from 'vite';
+import { resolve } from 'path';
 import { config } from './config';
-import livereload from 'livereload';
-import connectLiveReload from 'connect-livereload';
-
-/**
- * Find all `.html` files in the given directory and set up Express routes to serve them.
- *
- * Composes `processServerScripts` to handle server-side logic and templating in the HTML files.
- */
-const bootstrapRoutes = (dir: string, app: express.Express, vendorDir: string) => {
-	const dirPath = resolve(dir);
-	const files = readdirSync(dirPath);
-
-	for (const file of files) {
-		const filePath = join(dirPath, file);
-		if (file.endsWith('.html') && !file.startsWith('_')) {
-			const basePath = relative(config.baseDir, dirPath);
-			const path = `/${basePath}${file === 'index.html' ? '' : `/${file.replace('.html', '')}`}`;
-			console.log(`\x1b[90mFound path: ${path}\x1b[0m`);
-
-			app.get(path, (_, res) => {
-				console.log(`\x1b[90mServing file: ${basePath}/${file}\x1b[0m`);
-
-				// Process the HTML file and extract client entry files
-				const result = generateStaticTemplate(filePath);
-				let markup = result.markup;
-
-				// Generate import map if there are client entry files
-				if (result.clientEntryFiles.length > 0) {
-					const importMapJson = generateImportMap(result.clientEntryFiles, vendorDir);
-					markup = injectImportMap(markup, importMapJson);
-				}
-
-				// Clean up temporary files
-				result.cleanup();
-
-				res.send(markup);
-			});
-		}
-		if (statSync(filePath).isDirectory()) {
-			bootstrapRoutes(filePath, app, vendorDir);
-		}
-	}
-};
-
-export const dev = () => {
-	console.log('\n\x1b[36m\x1b[1m⚡⚡ Starting development server... ⚡⚡\x1b[0m\x1b[0m\n');
-
-	const PORT = process.env.PORT ?? 3000;
-
-	// Set up simple express server
-	const app = express();
-
-	// Set up live reload to watch for changes
-	const liveReloadServer = livereload.createServer();
-	liveReloadServer.watch(`${process.cwd()}/${config.baseDir}`);
-	app.use(connectLiveReload());
-	app.use((_, res, next) => {
-		const originalSend = res.send;
-
-		// Inject live reload script into HTML responses
-		res.send = function (body) {
-			if (typeof body === 'string' && body.includes('</body>')) {
-				const liveReloadScript = '<script src="http://localhost:35729/livereload.js"></script>';
-				body = body.replace('</body>', `${liveReloadScript}</body>`);
-			}
-			return originalSend.call(this, body);
-		};
-		next();
+import { thunderousPlugin } from './vite-plugin';
+
+export const dev = async () => {
+	const server = await createServer({
+		root: resolve(config.baseDir),
+		plugins: [thunderousPlugin()],
+		server: {
+			port: Number(process.env.PORT ?? '3000'),
+		},
 	});
 
-	// Create a temporary directory for vendorized modules in dev mode
-	const vendorDir = mkdtempSync(join(tmpdir(), 'thunderous-vendor-'));
-	console.log(`\x1b[90mUsing temporary vendor directory: ${vendorDir}\x1b[0m`);
-
-	bootstrapThunderous();
-	bootstrapRoutes(`./${config.baseDir}`, app, vendorDir);
-
-	// Serve .js requests by transpiling the corresponding .ts source on-the-fly
-	app.use((req, res, next) => {
-		if (!req.path.endsWith('.js')) return next();
-		const tsPath = join(config.baseDir, req.path.replace(/\.js$/, '.ts'));
-		const tsxPath = join(config.baseDir, req.path.replace(/\.js$/, '.tsx'));
-		const srcPath = existsSync(tsPath) ? tsPath : existsSync(tsxPath) ? tsxPath : null;
-		if (srcPath === null) return next();
-		const source = readFileSync(srcPath, 'utf-8');
-		const { outputText } = transpileModule(source, {
-			compilerOptions: {
-				module: ModuleKind.ESNext,
-				target: ScriptTarget.ES2020,
-				sourceMap: false,
-				importsNotUsedAsValues: ImportsNotUsedAsValues.Remove,
-				verbatimModuleSyntax: true,
-				isolatedModules: true,
-			},
-			fileName: srcPath,
-			reportDiagnostics: false,
-		});
-		res.type('application/javascript').send(outputText);
-	});
-
-	// Serve static assets from the base directory
-	app.use(express.static(config.baseDir));
-
-	// Serve vendorized modules
-	app.use('/vendor', express.static(join(vendorDir, 'vendor')));
-
-	const server = app.listen(PORT, () => {
-		console.log(`\n\x1b[38;2;100;149;237mServer is running on http://localhost:${PORT}\x1b[0m\n`);
-	});
-
-	// Close everything when server is closed
-	server.once('close', () => {
-		liveReloadServer.close();
-		server.closeAllConnections?.();
-		console.log('\x1b[32m\nAll connections closed successfully.\x1b[0m\n\n');
-	});
-
-	// Handle graceful shutdown when user cancels the process
-	process.once('SIGINT', () => {
-		console.log('\n\x1b[90mShutting down gracefully...\x1b[0m');
-		server.close((error) => {
-			if (error === undefined) {
-				process.exitCode = 0;
-			} else {
-				console.error('Error closing server:', error);
-				process.exitCode = 1;
-			}
-		});
-	});
+	await server.listen();
+	server.printUrls();
 };
-
-// start directly, since this file is targeted directly by nodemon
-dev();

package/src/generate.ts

@@ -2,7 +2,7 @@ import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, wri
 import { join, relative, resolve } from 'path';
 import { createRequire } from 'node:module';
 import { html } from 'thunderous';
-import { setMeta as setMeta, type Breadcrumb } from './meta';
+import { type Breadcrumb } from './meta';
 import { basename, dirname, extname } from 'node:path';
 import { config } from './config';
 import { ModuleKind, ScriptTarget, transpileModule, ImportsNotUsedAsValues } from 'typescript';
@@ -51,7 +51,7 @@ export const bootstrapThunderous = () => {
 			innerHTML.replace(/\s+/gm, ' ').replace(/ >/g, '>'),
 			renderState.markup,
 		);
-		console.log(`\x1b[90mInserted template for <${tagName}> into markup.\x1b[0m`);
+		console.log(`\x1b[90m  |--- Inserted SSR template for <${tagName}> into markup.\x1b[0m`);
 	});
 };
 
@@ -90,7 +90,7 @@ export const processFiles = (args: ProcessFilesArgs) => {
 };
 
 type ScriptKind = 'expr' | 'server' | 'isomorphic' | 'module';
-type ParsedScript = { kind: ScriptKind; content: string; href?: string | undefined; start: number; end: number };
+type ParsedScript = { kind: ScriptKind; content: string; src?: string | undefined; start: number; end: number };
 type ParsedLayout = { href: string; start: number; end: number };
 
 // ── Cached resolved paths (computed once at module load) ──
@@ -150,9 +150,9 @@ const extractTags = (markup: string) => {
 			else if (/\bisomorphic\b/.test(attrs)) kind = 'isomorphic';
 			else if (/\btype\s*=\s*"module"/.test(attrs)) kind = 'module';
 
-			let href: string | undefined;
-			const hrefMatch = /\bhref\s*=\s*"([^"]*)"/.exec(attrs);
-			if (hrefMatch) href = hrefMatch[1];
+			let src: string | undefined;
+			const srcMatch = /\bsrc\s*=\s*"([^"]*)"/.exec(attrs);
+			if (srcMatch) src = srcMatch[1];
 
 			let endPos = -1;
 			let j = tagClose + 1;
@@ -172,7 +172,7 @@ const extractTags = (markup: string) => {
 
 			if (kind !== null) {
 				const content = markup.slice(tagClose + 1, markup.lastIndexOf('</', endPos - 1)).trim();
-				scripts.push({ kind, content, href, start: i, end: endPos });
+				scripts.push({ kind, content, src, start: i, end: endPos });
 			}
 			i = endPos;
 			continue;
@@ -212,38 +212,44 @@ const extractTags = (markup: string) => {
  * ```
  */
 export const generateStaticTemplate = (filePath: string) => {
+	const configDir = config.configDir ?? process.cwd();
+	console.log(`Building: ${relative(configDir, filePath)}`);
 	renderState.markup = readFileSync(filePath, 'utf-8');
 	renderState.insertedTags.clear();
 
 	const name = basename(filePath, extname(filePath));
 
+	// quick local utility to convert kebab/camel/snake case to title case
+	const toTitleFormat = (str: string) =>
+		str
+			.replace(/[-_]|(?<=[a-z])(?=[A-Z])/g, ' ')
+			.replace(/(?:\b|^)\w/g, (m) => m.toUpperCase())
+			.trim();
+
 	// Set metadata context for the current page before server scripts run
 	const relativePath = relative(resolvedBaseDir, filePath);
 	const parentDir = dirname(relativePath).replace(/^\./, '');
 	const pathname = `/${parentDir}${name === 'index' ? '' : `/${name}`}`;
 	const titleWord = name === 'index' ? (pathname.split('/').pop() ?? '') : name;
-	const title = titleWord
-		.split(/[-_]/)
-		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(' ');
+	const title = toTitleFormat(titleWord);
 	const path = pathname.split('/').filter((segment) => segment !== '');
-	let crumbPathname = '/';
 	const breadcrumbs: Breadcrumb[] = [
 		{
 			// always add the home page
-			name: config.name,
-			pathname: crumbPathname,
+			name: toTitleFormat(config.name),
+			pathname: '/',
 		},
 	];
 	// add each segment of the path as a breadcrumb
+	let crumbPathname = '';
 	for (const segment of path) {
 		crumbPathname += `/${segment}`;
 		breadcrumbs.push({
-			name: segment,
+			name: toTitleFormat(segment),
 			pathname: crumbPathname,
 		});
 	}
-	setMeta({
+	outRequire('thunderous-server').setMeta({
 		config,
 		pathname,
 		title,
@@ -276,7 +282,9 @@ export const generateStaticTemplate = (filePath: string) => {
 		}
 		renderState.markup =
 			layoutContent.slice(0, slotIndex) + renderState.markup + layoutContent.slice(slotIndex + slotTag.length);
-		console.log(`\x1b[90mApplied layout: ${layout.href}\x1b[0m`);
+
+		const absLayoutPath = resolve(dirname(filePath), layout.href);
+		console.log(`\x1b[90m  | Applied layout: ${relative(configDir, absLayoutPath)}\x1b[0m`);
 	}
 	// ── Extract and process scripts ──
 	const { scripts } = extractTags(renderState.markup);
@@ -286,7 +294,7 @@ export const generateStaticTemplate = (filePath: string) => {
 	const tempFilesToCleanup: string[] = [];
 
 	// Map from scriptKey → replacement text (built during processing, applied later)
-	const scriptKey = (s: ParsedScript) => `${s.kind}|${s.href ?? ''}|${s.content}`;
+	const scriptKey = (s: ParsedScript) => `${s.kind}|${s.src ?? ''}|${s.content}`;
 	const replacementMap = new Map<string, string>();
 
 	mkdirSync(resolvedOutDir, { recursive: true });
@@ -295,17 +303,21 @@ export const generateStaticTemplate = (filePath: string) => {
 	for (const script of scripts) {
 		const key = scriptKey(script);
 
-		// ── Resolve content: from href file or inline ──
+		// ── Resolve content: from src file or inline ──
 		let content = script.content;
-		let hrefAbsPath: string | undefined;
-		if (script.href) {
-			hrefAbsPath = resolve(fileDir, script.href);
-			if (!existsSync(hrefAbsPath)) {
-				console.warn(`\x1b[33mWarning: Script href file not found: ${hrefAbsPath}\x1b[0m`);
+		let srcAbsPath: string | undefined;
+		if (script.src) {
+			if (script.src.startsWith('/')) {
+				srcAbsPath = resolve(resolvedBaseDir, script.src.slice(1));
+			} else {
+				srcAbsPath = resolve(fileDir, script.src);
+			}
+			if (!existsSync(srcAbsPath)) {
+				console.warn(`\x1b[33mWarning: Script src file not found: ${srcAbsPath}\x1b[0m`);
 				continue;
 			}
 			if (script.kind === 'expr') {
-				content = readFileSync(hrefAbsPath, 'utf-8').trim();
+				content = readFileSync(srcAbsPath, 'utf-8').trim();
 			}
 		}
 
@@ -318,10 +330,10 @@ export const generateStaticTemplate = (filePath: string) => {
 		// ── Server/isomorphic: execute server-side to collect exported values ──
 		if (script.kind === 'server' || script.kind === 'isomorphic') {
 			let module: Record<string, unknown>;
-			if (hrefAbsPath) {
+			if (srcAbsPath) {
 				// href: require the file directly from source
-				delete outRequire.cache[outRequire.resolve(hrefAbsPath)];
-				module = outRequire(hrefAbsPath);
+				delete outRequire.cache[outRequire.resolve(srcAbsPath)];
+				module = outRequire(srcAbsPath);
 			} else {
 				// inline: write temp .ts into baseDir so relative imports resolve correctly
 				const tsScriptFile = join(resolvedBaseDir, `${name}-${scriptIndex}.tmp.ts`);
@@ -341,12 +353,12 @@ export const generateStaticTemplate = (filePath: string) => {
 		if (script.kind === 'server') {
 			// Server scripts are fully discarded from client output
 			replacementMap.set(key, '');
-		} else if (hrefAbsPath) {
+		} else if (srcAbsPath) {
 			// href isomorphic/module: output a <script src> pointing to the .js file
-			const jsSrc = script.href!.replace(/\.tsx?$/, '.js');
+			const jsSrc = script.src!.replace(/\.tsx?$/, '.js');
 			replacementMap.set(key, `<script type="module" src="${jsSrc}"></script>`);
 			// Resolve the outDir .js path for vendorization
-			const hrefRelPath = relative(resolvedBaseDir, hrefAbsPath);
+			const hrefRelPath = relative(resolvedBaseDir, srcAbsPath);
 			const hrefOutJsPath = join(resolvedOutDir, hrefRelPath).replace(/\.tsx?$/, '.js');
 			clientEntryFiles.push(resolve(hrefOutJsPath));
 		} else {
@@ -370,6 +382,16 @@ export const generateStaticTemplate = (filePath: string) => {
 		scriptIndex++;
 	}
 
+	// ── Pick up any new scripts added by template insertion (e.g. expr inside components) ──
+	const { scripts: postInsertScripts } = extractTags(renderState.markup);
+	for (const script of postInsertScripts) {
+		const key = scriptKey(script);
+		if (replacementMap.has(key)) continue;
+		if (script.kind === 'expr') {
+			replacementMap.set(key, '__expr__');
+		}
+	}
+
 	// ── Re-parse and apply all replacements in one reverse pass ──
 	const { scripts: freshScripts } = extractTags(renderState.markup);
 	for (let i = freshScripts.length - 1; i >= 0; i--) {
@@ -383,8 +405,8 @@ export const generateStaticTemplate = (filePath: string) => {
 		if (replacement === '__expr__') {
 			// Evaluate expr: content may come from href file
 			let content = script.content;
-			if (script.href) {
-				const hrefPath = resolve(fileDir, script.href);
+			if (script.src) {
+				const hrefPath = resolve(fileDir, script.src);
 				content = readFileSync(hrefPath, 'utf-8').trim();
 			}
 			const expression = content.replace(/;$/, '');
@@ -401,7 +423,38 @@ export const generateStaticTemplate = (filePath: string) => {
 		}
 		renderState.markup = renderState.markup.slice(0, script.start) + text + renderState.markup.slice(script.end);
 	}
+	// ── Evaluate expr: attributes ──
+	renderState.markup = renderState.markup.replace(
+		/(<[a-zA-Z][\w-]*\b)((?:\s+[^>]*?)?)(\s*\/?>)/g,
+		(_match, openTag: string, attrs: string, close: string) => {
+			if (!attrs.includes('expr:')) return _match;
+			const result = attrs.replace(
+				/\s+expr:([a-zA-Z][\w-]*)=(["'])([\s\S]*?)\2/g,
+				(_attrMatch: string, attrName: string, _quote: string, expression: string) => {
+					try {
+						// eslint-disable-next-line @typescript-eslint/no-implied-eval
+						const value = Function(
+							'html',
+							'escapeHtml',
+							'raw',
+							...Object.keys(safeValues),
+							`'use strict'; return (${expression});`,
+						)(html, escapeHtml, raw, ...Object.values(safeValues));
+						if (value == null || value === false || value === '') return '';
+						if (value === true) return ` ${attrName}`;
+						return ` ${attrName}="${escapeHtml(String(value))}"`;
+					} catch (e) {
+						console.warn(`\x1b[33mWarning: Failed to evaluate expr:${attrName}="${expression}":\x1b[0m`, e);
+						return '';
+					}
+				},
+			);
+			return openTag + result + close;
+		},
+	);
+
 	renderState.markup = renderState.markup.trim();
+	console.log('');
 
 	// Return the final rendered markup, client entry files, and cleanup function
 	return {

package/src/index.ts

@@ -1,2 +1,2 @@
-export { getMeta } from './meta';
+export { getMeta, setMeta } from './meta';
 export { escapeHtml, raw } from './utilities';

package/src/vendorize.ts

@@ -38,12 +38,19 @@ export function processNodeModules(entryFiles: string[], outputDir?: string) {
 		} else {
 			const tsFile = file.replace(/\.js$/, '.ts');
 			const tsxFile = file.replace(/\.js$/, '.tsx');
+			const srcFile = file.replace(`/${config.outDir}/`, `/${config.baseDir}/`);
+			const srcTsFile = srcFile.replace(/\.js$/, '.ts');
+			const srcTsxFile = srcFile.replace(/\.js$/, '.tsx');
 			if (existsSync(tsFile)) {
 				code = transpileTsFast(readFileSync(tsFile, 'utf8'), tsFile);
 			} else if (existsSync(tsxFile)) {
 				code = transpileTsFast(readFileSync(tsxFile, 'utf8'), tsxFile);
+			} else if (existsSync(srcTsFile)) {
+				code = transpileTsFast(readFileSync(srcTsFile, 'utf8'), srcTsFile);
+			} else if (existsSync(srcTsxFile)) {
+				code = transpileTsFast(readFileSync(srcTsxFile, 'utf8'), srcTsxFile);
 			} else {
-				throw new Error(`Cannot find module: ${file} (also tried .ts/.tsx)`);
+				throw new Error(`Cannot find module: ${file} (also tried .ts/.tsx and ${config.baseDir}/ equivalents)`);
 			}
 		}
 		const [imports] = parse(code);

package/src/vite-plugin.ts

@@ -0,0 +1,202 @@
+import type { Plugin, ViteDevServer, Connect } from 'vite';
+import type { ServerResponse } from 'http';
+import { createRequire } from 'module';
+import { existsSync, readdirSync, statSync } from 'fs';
+import { dirname, join, relative, resolve } from 'path';
+import { bootstrapThunderous, generateStaticTemplate } from './generate';
+import { config } from './config';
+
+/**
+ * Resolve a URL pathname to an HTML file in the base directory.
+ * Maps routes like `/about` → `src/about/index.html`, `/about/contact` → `src/about/contact.html`.
+ */
+const resolveHtmlPath = (url: string, root: string): string | null => {
+	const pathname = url.split('?')[0]?.split('#')[0] ?? '/';
+
+	// Files starting with _ are excluded (layouts, partials, etc.)
+	const lastSegment = pathname.split('/').pop() ?? '';
+	if (lastSegment.startsWith('_')) return null;
+
+	// Try: /about → src/about/index.html
+	const indexPath = join(root, pathname, 'index.html');
+	if (existsSync(indexPath)) return indexPath;
+
+	// Try: /about/contact → src/about/contact.html
+	const directPath = join(root, pathname + '.html');
+	if (existsSync(directPath)) return directPath;
+
+	return null;
+};
+
+/**
+ * Walk baseDir and collect all routable HTML files (excluding _layout, _partials, etc.).
+ * Returns an array of { filePath, urlPath } objects.
+ */
+const collectHtmlPages = (root: string): Array<{ filePath: string; urlPath: string }> => {
+	const pages: Array<{ filePath: string; urlPath: string }> = [];
+	const walk = (dir: string) => {
+		for (const entry of readdirSync(dir)) {
+			const full = join(dir, entry);
+			if (statSync(full).isDirectory()) {
+				walk(full);
+			} else if (entry.endsWith('.html') && !entry.startsWith('_')) {
+				const rel = relative(root, dirname(full));
+				const urlPath = `/${rel}${entry === 'index.html' ? '' : `/${entry.replace('.html', '')}`}`;
+				pages.push({ filePath: full, urlPath });
+			}
+		}
+	};
+	walk(root);
+	return pages;
+};
+
+/**
+ * Vite plugin for Thunderous server-side rendering.
+ *
+ * Handles:
+ * - HTML page requests routed through `generateStaticTemplate`
+ * - `.js` → `.ts`/`.tsx` resolution for isomorphic script src attributes
+ * - Pre-renders all pages on file change BEFORE triggering browser reload
+ */
+export const thunderousPlugin = (): Plugin => {
+	const root = resolve(config.baseDir);
+	const outRequire = createRequire(resolve(config.baseDir));
+
+	// Pre-rendered SSR markup cache: urlPath → markup
+	const pageCache = new Map<string, string>();
+
+	const invalidateRequireCache = () => {
+		for (const key of Object.keys(outRequire.cache)) {
+			if (key.startsWith(root)) {
+				delete outRequire.cache[key];
+			}
+		}
+	};
+
+	/** Pre-render every routable page so SSR markup is ready before reload. */
+	const renderAllPages = () => {
+		pageCache.clear();
+		for (const { filePath, urlPath } of collectHtmlPages(root)) {
+			try {
+				const result = generateStaticTemplate(filePath);
+				pageCache.set(urlPath, result.markup);
+				result.cleanup();
+			} catch (error) {
+				console.error(`\x1b[31mError pre-rendering ${urlPath}:\x1b[0m`, error);
+			}
+		}
+	};
+
+	const virtualId = 'virtual:thunderous-hmr-client';
+	const resolvedVirtualId = '\0' + virtualId;
+
+	return {
+		name: 'thunderous',
+
+		// resolveId(id) {
+		// 	if (id === virtualId) return resolvedVirtualId;
+		// 	return id;
+		// },
+
+		// load(id) {
+		// 	if (id === resolvedVirtualId) {
+		// 		return `
+		// 			if (import.meta.hot) {
+		// 				import.meta.hot.on('thunderous:reload', () => {
+		// 					location.reload();
+		// 				})
+		// 			}
+		// 		`;
+		// 	}
+		// 	return '';
+		// },
+
+		// transformIndexHtml(html) {
+		// 	return {
+		// 		html,
+		// 		tags: [
+		// 			{
+		// 				tag: 'script',
+		// 				attrs: { type: 'module' },
+		// 				children: `import "virtual:thunderous-hmr-client"`,
+		// 				injectTo: 'head',
+		// 			},
+		// 		],
+		// 	};
+		// },
+
+		configureServer(server: ViteDevServer) {
+			bootstrapThunderous();
+
+			// Initial pre-render so the first request is served from cache.
+			renderAllPages();
+
+			// On any file change in baseDir: bust cache → re-render all pages → reload.
+			// All three steps are synchronous, so the pre-render logs appear before the reload.
+			const onFileChange = (file: string) => {
+				if (!file.startsWith(root)) return;
+				invalidateRequireCache();
+				renderAllPages();
+				server.ws.send({ type: 'full-reload' });
+			};
+			server.watcher.on('change', onFileChange);
+			server.watcher.on('add', onFileChange);
+
+			// Rewrite .js requests to .ts/.tsx when the .js file doesn't exist
+			// (generateStaticTemplate outputs .js src paths but source files are .ts)
+			server.middlewares.use((req: Connect.IncomingMessage, _res: unknown, next: Connect.NextFunction) => {
+				if (!req.url?.endsWith('.js')) return next();
+				const cleanUrl = req.url.split('?')[0] ?? '';
+				const jsPath = join(root, cleanUrl);
+				if (existsSync(jsPath)) return next();
+				const tsPath = join(root, cleanUrl.replace(/\.js$/, '.ts'));
+				const tsxPath = join(root, cleanUrl.replace(/\.js$/, '.tsx'));
+				if (existsSync(tsPath)) {
+					req.url = req.url.replace(/\.js$/, '.ts');
+				} else if (existsSync(tsxPath)) {
+					req.url = req.url.replace(/\.js$/, '.tsx');
+				}
+				next();
+			});
+
+			// Serve pre-rendered HTML pages, applying Vite's transforms at serve time.
+			return () => {
+				server.middlewares.use(
+					async (req: Connect.IncomingMessage, res: ServerResponse, next: Connect.NextFunction) => {
+						const url = req.originalUrl ?? req.url;
+						if (!url) return next();
+
+						const urlPath = url.split('?')[0]?.split('#')[0] ?? '/';
+
+						// Try cache first, fall back to on-demand render
+						let markup = pageCache.get(urlPath);
+						if (!markup) {
+							const htmlPath = resolveHtmlPath(url, root);
+							if (!htmlPath) return next();
+							try {
+								const result = generateStaticTemplate(htmlPath);
+								markup = result.markup;
+								result.cleanup();
+							} catch (error) {
+								console.error(`\x1b[31mError processing ${htmlPath}:\x1b[0m`, error);
+								return next(error);
+							}
+						}
+
+						try {
+							// Let Vite inject its HMR client and process module scripts
+							markup = await server.transformIndexHtml(url, markup);
+
+							res.statusCode = 200;
+							res.setHeader('Content-Type', 'text/html');
+							res.end(markup);
+						} catch (error) {
+							console.error(`\x1b[31mError transforming HTML for ${url}:\x1b[0m`, error);
+							next(error);
+						}
+					},
+				);
+			};
+		},
+	};
+};