gofront 1.2.2 → 1.3.0

package/src/codegen/stdlib/io.js

@@ -14,8 +14,7 @@ export const ioMethods = {
 					(writerType?.kind === "pointer" ? writerType.base?.name : null);
 				const w = this.genExpr(writerArg);
 				const s = this.genExpr(expr.args[1]);
-				const isPtr = writerType?.kind === "pointer";
-				const base = isPtr ? `${w}.value` : w;
+				const base = `(${w}?.value ?? ${w})`;
 				if (typeName === "strings.Builder") {
 					return `((b,s) => { b._buf += s; return [s.length, null]; })(${base}, ${s})`;
 				}

package/src/codegen/templ.js

@@ -208,7 +208,7 @@ export const templGenMethods = {
 
 	_genTemplRangeFor(forStmt, templBody, mountParent) {
 		const init = forStmt.init;
-		if (!init?.rhs?.[0] || init.rhs[0].kind !== "RangeExpr") {
+		if (init?.rhs?.[0]?.kind !== "RangeExpr") {
 			// Plain for loop (cond-only or three-clause)
 			const condJs = forStmt.cond ? this.genExpr(forStmt.cond) : "true";
 			this.line(`while (${condJs}) {`);

package/src/dev-server.js

@@ -1,5 +1,5 @@
 // Minimal dev server for gofront --serve watch mode.
-// Serves static files and pushes a reload event via SSE after each build.
+// Serves static files and pushes reload / error / css-update events via SSE.
 
 import { existsSync, readFileSync, statSync } from "node:fs";
 import { createServer } from "node:http";
@@ -19,8 +19,120 @@ export const MIME = {
 	".woff": "font/woff",
 };
 
-// Injected at the bottom of compiled JS in serve mode.
-export const liveReloadClient = `(function(){var es=new EventSource('/_gofront/events');es.addEventListener('reload',function(){location.reload();});})();`;
+// Injected at the bottom of served HTML before </body> in serve mode.
+export const liveReloadClient = `(function() {
+	var retryDelay = 1000;
+	var maxDelay = 16000;
+	var es = null;
+	var overlayId = 'gofront-error-overlay';
+
+	function dismissErrorOverlay() {
+		var overlay = document.getElementById(overlayId);
+		if (overlay) overlay.remove();
+	}
+
+	function showErrorOverlay(data) {
+		var msg = typeof data === 'string' ? data : (data && data.message ? data.message : JSON.stringify(data, null, 2));
+		var overlay = document.getElementById(overlayId);
+		if (!overlay) {
+			overlay = document.createElement('div');
+			overlay.id = overlayId;
+			overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(15,23,42,0.85);backdrop-filter:blur(4px);z-index:999999;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;';
+			(document.body || document.documentElement).appendChild(overlay);
+		}
+		overlay.innerHTML = '<div style="background:#18181b;color:#f43f5e;border:1px solid #e11d48;border-radius:8px;max-width:850px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px rgba(0,0,0,0.7);overflow:hidden;box-sizing:border-box;">'
+			+ '<div style="display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #27272a;background:#27272a;">'
+			+ '<div style="font-weight:600;font-size:14px;color:#fda4af;display:flex;align-items:center;gap:8px;">'
+			+ '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f43f5e;"></span>'
+			+ 'GoFront Compilation Error</div>'
+			+ '<button id="gofront-close-overlay" style="background:transparent;border:none;color:#a1a1aa;cursor:pointer;font-size:18px;line-height:1;padding:4px 8px;border-radius:4px;">✕</button>'
+			+ '</div>'
+			+ '<div style="padding:20px;overflow:auto;">'
+			+ '<pre style="margin:0;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.6;color:#fecdd3;background:#09090b;padding:16px;border-radius:6px;border:1px solid #27272a;font-family:inherit;"></pre>'
+			+ '</div>'
+			+ '</div>';
+		var closeBtn = overlay.querySelector('#gofront-close-overlay');
+		if (closeBtn) closeBtn.onclick = dismissErrorOverlay;
+		var pre = overlay.querySelector('pre');
+		if (pre) pre.textContent = msg;
+	}
+
+	function updateCss(file) {
+		var links = document.querySelectorAll('link[rel="stylesheet"]');
+		var fileName = file ? file.split(/[\\\\/]/).pop() : null;
+		var anyMatched = false;
+		for (var i = 0; i < links.length; i++) {
+			var link = links[i];
+			var rawHref = link.getAttribute('href');
+			if (!rawHref) continue;
+			if (fileName) {
+				var cleanHref = rawHref.split('?')[0].split('#')[0];
+				var base = cleanHref.split(/[\\\\/]/).pop();
+				if (base !== fileName) continue;
+			}
+			anyMatched = true;
+			var url = new URL(link.href, window.location.href);
+			url.searchParams.set('t', Date.now().toString());
+			link.href = url.toString();
+		}
+		if (!anyMatched && !fileName) {
+			for (var j = 0; j < links.length; j++) {
+				var l = links[j];
+				var u = new URL(l.href, window.location.href);
+				u.searchParams.set('t', Date.now().toString());
+				l.href = u.toString();
+			}
+		}
+	}
+
+	function handleBuildError(e) {
+		try {
+			showErrorOverlay(JSON.parse(e.data));
+		} catch (_) {
+			showErrorOverlay(e.data);
+		}
+	}
+
+	function connect() {
+		if (es) {
+			try { es.close(); } catch (_) {}
+		}
+		es = new EventSource('/_gofront/events');
+		es.onopen = function() {
+			retryDelay = 1000;
+		};
+		es.onerror = function() {
+			es.close();
+			setTimeout(function() {
+				retryDelay = Math.min(retryDelay * 2, maxDelay);
+				connect();
+			}, retryDelay);
+		};
+		es.addEventListener('reload', function() {
+			dismissErrorOverlay();
+			location.reload();
+		});
+		es.addEventListener('build-error', handleBuildError);
+		es.addEventListener('css-update', function(e) {
+			try {
+				var data = JSON.parse(e.data);
+				updateCss(data.file);
+			} catch (_) {
+				updateCss();
+			}
+		});
+	}
+
+	connect();
+})();`;
+
+export function injectLiveReload(html) {
+	const script = `<script id="gofront-live-reload">${liveReloadClient}</script>`;
+	if (/<\/body>/i.test(html)) {
+		return html.replace(/<\/body>/i, () => `${script}</body>`);
+	}
+	return `${html}${script}`;
+}
 
 // True when `target` is `root` itself or a path inside it (no `..` escape).
 function isInsideDir(root, target) {
@@ -28,109 +140,184 @@ function isInsideDir(root, target) {
 	return rel !== ".." && !rel.startsWith(`..${sep}`) && !isAbsolute(rel);
 }
 
-export function handleDevRequest(req, res, serveDir, clients = new Set()) {
-	// SSE endpoint — browser connects here to receive reload events
-	if (req.url === "/_gofront/events") {
+function handleSseRequest(req, res, clients) {
+	res.writeHead(200, {
+		"Content-Type": "text/event-stream",
+		"Cache-Control": "no-cache",
+		Connection: "keep-alive",
+	});
+	res.write(": connected\n\n");
+	clients.add(res);
+	req.on?.("close", () => clients.delete(res));
+}
+
+function resolveStaticPath(serveDir, urlPath) {
+	const cleanPath =
+		urlPath === "/" || urlPath === ""
+			? "/index.html"
+			: urlPath.startsWith("/")
+				? urlPath
+				: `/${urlPath}`;
+	const filePath = resolve(serveDir, `.${cleanPath}`);
+	if (!isInsideDir(resolve(serveDir), filePath)) return { forbidden: true };
+
+	if (existsSync(filePath)) {
+		const stat = statSync(filePath);
+		if (stat.isDirectory()) {
+			const dirIndex = join(filePath, "index.html");
+			if (existsSync(dirIndex)) return { filePath: dirIndex };
+			const rootIndex = join(serveDir, "index.html");
+			if (existsSync(rootIndex)) return { filePath: rootIndex };
+			return { notFound: true };
+		}
+		return { filePath };
+	}
+
+	// SPA fallback: clean paths with no file extension fall back to index.html
+	if (!extname(cleanPath)) {
+		const indexPath = join(serveDir, "index.html");
+		if (existsSync(indexPath)) return { filePath: indexPath };
+	}
+
+	return { notFound: true };
+}
+
+function sendStaticFile(res, filePath, shouldInject) {
+	try {
+		const ext = extname(filePath);
+		if (ext === ".html") {
+			const data = readFileSync(filePath, "utf8");
+			const body = shouldInject ? injectLiveReload(data) : data;
+			res.writeHead(200, {
+				"Content-Type": MIME[".html"],
+				"Cache-Control": "no-cache, no-store, must-revalidate",
+			});
+			res.end(body);
+			return;
+		}
+
+		const data = readFileSync(filePath);
 		res.writeHead(200, {
-			"Content-Type": "text/event-stream",
-			"Cache-Control": "no-cache",
-			Connection: "keep-alive",
+			"Content-Type": MIME[ext] ?? "application/octet-stream",
+			"Cache-Control": "no-cache, no-store, must-revalidate",
 		});
-		res.write(": connected\n\n");
-		clients.add(res);
-		req.on?.("close", () => clients.delete(res));
+		res.end(data);
+	} catch {
+		res.writeHead(500, { "Content-Type": "text/plain" });
+		res.end("Server error");
+	}
+}
+
+export function handleDevRequest(
+	req,
+	res,
+	serveDir,
+	clients = new Set(),
+	options = {},
+) {
+	if (req.url === "/_gofront/events") {
+		handleSseRequest(req, res, clients);
 		return;
 	}
 
 	let urlPath = req.url.split("?")[0].split("#")[0];
 	try {
 		urlPath = decodeURIComponent(urlPath);
-	} catch {
-		// Ignore malformed URL encoding and use raw path
-	}
-
-	if (urlPath === "/" || urlPath === "") urlPath = "/index.html";
+	} catch {}
 
-	const filePath = resolve(serveDir, `.${urlPath}`);
-	if (!isInsideDir(resolve(serveDir), filePath)) {
+	const resolved = resolveStaticPath(serveDir, urlPath);
+	if (resolved.forbidden) {
 		res.writeHead(403, { "Content-Type": "text/plain" });
 		res.end("Forbidden");
 		return;
 	}
-
-	if (!existsSync(filePath)) {
-		// SPA fallback: clean paths with no file extension fall back to index.html
-		const ext = extname(urlPath);
-		if (!ext) {
-			const indexPath = join(serveDir, "index.html");
-			if (existsSync(indexPath)) {
-				try {
-					const data = readFileSync(indexPath);
-					res.writeHead(200, { "Content-Type": MIME[".html"] });
-					res.end(data);
-					return;
-				} catch {
-					res.writeHead(500, { "Content-Type": "text/plain" });
-					res.end("Server error");
-					return;
-				}
-			}
-		}
+	if (resolved.notFound) {
 		res.writeHead(404, { "Content-Type": "text/plain" });
 		res.end("Not found");
 		return;
 	}
 
-	try {
-		const stat = statSync(filePath);
-		if (stat.isDirectory()) {
-			const dirIndex = join(filePath, "index.html");
-			if (existsSync(dirIndex)) {
-				const data = readFileSync(dirIndex);
-				res.writeHead(200, { "Content-Type": MIME[".html"] });
-				res.end(data);
-				return;
-			}
-			const rootIndex = join(serveDir, "index.html");
-			if (existsSync(rootIndex)) {
-				const data = readFileSync(rootIndex);
-				res.writeHead(200, { "Content-Type": MIME[".html"] });
-				res.end(data);
-				return;
-			}
-			res.writeHead(404, { "Content-Type": "text/plain" });
-			res.end("Not found");
+	sendStaticFile(res, resolved.filePath, options.injectReload ?? true);
+}
+
+function broadcastToClients(clients, event, payload) {
+	const body = typeof payload === "string" ? payload : JSON.stringify(payload);
+	for (const client of clients) {
+		try {
+			client.write(`event: ${event}\ndata: ${body}\n\n`);
+		} catch {
+			clients.delete(client);
+		}
+	}
+}
+
+function sendPings(clients) {
+	for (const client of clients) {
+		try {
+			client.write(": ping\n\n");
+		} catch {
+			clients.delete(client);
+		}
+	}
+}
+
+function createNotify(clients) {
+	return function notify(arg) {
+		if (arg?.type) {
+			broadcastToClients(clients, arg.type, arg);
 			return;
 		}
+		broadcastToClients(clients, "reload", {});
+	};
+}
 
-		const data = readFileSync(filePath);
-		const mime = MIME[extname(filePath)] ?? "application/octet-stream";
-		res.writeHead(200, { "Content-Type": mime });
-		res.end(data);
-	} catch {
-		res.writeHead(500, { "Content-Type": "text/plain" });
-		res.end("Server error");
+function handleServerError(err, port) {
+	if (err.code === "EADDRINUSE") {
+		console.error(`gofront: port ${port} already in use — try --port <number>`);
+	} else {
+		console.error(`gofront: dev server error: ${err.message}`);
+	}
+	process.exit(1);
+}
+
+function buildErrorPayload(err) {
+	let message = "";
+	let loc = null;
+	if (typeof err === "string") {
+		message = err;
+	} else if (err) {
+		message = err.message || String(err);
+		if (err.loc) {
+			loc = err.loc;
+		} else if (err.line !== undefined || err.file !== undefined) {
+			loc = { line: err.line, col: err.column ?? err.col, file: err.file };
+		}
+	}
+	const payload = { type: "build-error", message };
+	if (loc) payload.loc = loc;
+	return payload;
+}
+
+function closeServer(server, clients, timer) {
+	if (timer) clearInterval(timer);
+	for (const client of clients) {
+		try {
+			client.end();
+		} catch {}
 	}
+	clients.clear();
+	return new Promise((res) => server.close(res));
 }
 
-export function createDevServer(serveDir, port = 3000) {
+export function createDevServer(serveDir, port = 3000, options = {}) {
 	const clients = new Set();
+	const heartbeatMs = options.heartbeatInterval ?? 15000;
 
 	const server = createServer((req, res) => {
-		handleDevRequest(req, res, serveDir, clients);
-	});
-
-	server.on("error", (err) => {
-		if (err.code === "EADDRINUSE") {
-			console.error(
-				`gofront: port ${port} already in use — try --port <number>`,
-			);
-		} else {
-			console.error(`gofront: dev server error: ${err.message}`);
-		}
-		process.exit(1);
+		handleDevRequest(req, res, serveDir, clients, options);
 	});
 
+	server.on("error", (err) => handleServerError(err, port));
 	server.listen(port, () => {
 		const actualPort = server.address()?.port ?? port;
 		if (port !== 0) {
@@ -138,15 +325,24 @@ export function createDevServer(serveDir, port = 3000) {
 		}
 	});
 
-	function notify() {
-		for (const client of clients) {
-			client.write("event: reload\ndata: {}\n\n");
-		}
-	}
+	const heartbeatTimer =
+		heartbeatMs > 0 ? setInterval(() => sendPings(clients), heartbeatMs) : null;
+	heartbeatTimer?.unref?.();
+
+	const notify = createNotify(clients);
 
 	return {
+		broadcast: (event, data) => broadcastToClients(clients, event, data),
 		notify,
+		notifyCss: (file) =>
+			broadcastToClients(clients, "css-update", { type: "css-update", file }),
+		notifyError: (err) =>
+			broadcastToClients(clients, "build-error", buildErrorPayload(err)),
+		notifyBuildError: (err) =>
+			broadcastToClients(clients, "build-error", buildErrorPayload(err)),
+		ping: () => sendPings(clients),
+		clients,
 		server,
-		close: () => new Promise((res) => server.close(res)),
+		close: () => closeServer(server, clients, heartbeatTimer),
 	};
 }

package/src/index.js

@@ -22,16 +22,23 @@ import { mkdirSync, statSync, watch, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { copyAssets } from "./asset-manager.js";
 import {
+	formatBuildSummary,
 	formatPrepSummary,
+	handleBuild,
+	handleCheck,
+	handleDev,
 	handleInit,
 	handlePrep,
 	handleTest,
 	maybeMinify,
+	parseBuildArgs,
+	parseCheckArgs,
+	parseDevArgs,
 	parsePrepArgs,
 	parseTestArgs,
 	runCompile,
 } from "./cli-core.js";
-import { createDevServer, liveReloadClient } from "./dev-server.js";
+import { createDevServer } from "./dev-server.js";
 
 // ── Parse CLI args ───────────────────────────────────────────
 
@@ -47,8 +54,14 @@ if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
 GoFront — a Go-inspired language that compiles to JavaScript
 
 Usage:
+  gofront dev [dir] [options]    Start dev server with live reload (default port 3000)
+  gofront build [dir] [options]  Build production bundle (-o <dir>, --pwa, --minify)
+  gofront check [dir]            Type-check only
+  gofront test [dir] [--dom]     Run unit tests (-v verbose, -run <regex>)
+  gofront prep [dir] [--minify]  Copy static assets and bundle vendor dependencies
+  gofront init [dir]             Scaffold a new GoFront project
   gofront <file.go>              Compile single file and print to stdout
-  gofront <dir>  (or gofront .)    Compile all *.go in directory as one bundle
+  gofront <dir>  (or gofront .)  Compile all *.go in directory as one bundle
   gofront <input> -o out.js      Compile and write to file
   gofront <input> --check        Type-check only
   gofront <input> --watch        Watch for changes and recompile
@@ -60,9 +73,6 @@ Usage:
   gofront <input> --minify --mangle  Minify and mangle identifiers
   gofront <file.go> --ast        Dump AST (debug)
   gofront <file.go> --tokens     Dump tokens (debug)
-  gofront test [dir] [--dom]     Run unit tests (-v verbose, -run <regex>)
-  gofront prep [dir] [--minify]  Copy static assets and bundle vendor dependencies
-  gofront init [dir]             Scaffold a new GoFront project
   gofront --version              Print version
 `.trim(),
 	);
@@ -116,6 +126,58 @@ if (args[0] === "test") {
 	}
 }
 
+// ── check subcommand ──────────────────────────────────────────
+
+if (args[0] === "check") {
+	const { targetDir } = parseCheckArgs(args.slice(1));
+	try {
+		const { elapsedMs } = handleCheck(targetDir);
+		console.error(`gofront: ${targetDir} — OK (${elapsedMs}ms)`);
+		process.exit(0);
+	} catch (e) {
+		console.error(`gofront: ${e.message}`);
+		process.exit(1);
+	}
+}
+
+// ── build subcommand ──────────────────────────────────────────
+
+if (args[0] === "build") {
+	const buildOptions = parseBuildArgs(args.slice(1));
+	try {
+		const result = await handleBuild(buildOptions.targetDir, buildOptions);
+		for (const line of formatBuildSummary(result)) {
+			console.error(`gofront: ${line}`);
+		}
+		process.exit(0);
+	} catch (e) {
+		console.error(`gofront: ${e.message}`);
+		process.exit(1);
+	}
+}
+
+// ── dev subcommand ────────────────────────────────────────────
+
+if (args[0] === "dev") {
+	const devOptions = parseDevArgs(args.slice(1));
+	try {
+		const dev = await handleDev(devOptions.targetDir, devOptions);
+		const port = dev.port ?? devOptions.port ?? 3000;
+		console.error(`gofront: dev server running → http://localhost:${port}`);
+		console.error(`gofront: watching ${dev.srcDir} for changes...`);
+
+		const shutdown = async () => {
+			await dev.close();
+			process.exit(0);
+		};
+		process.on("SIGINT", shutdown);
+		process.on("SIGTERM", shutdown);
+	} catch (e) {
+		console.error(`gofront: ${e.message}`);
+		process.exit(1);
+	}
+}
+
 const inputArg = args[0];
 const outputFlag = args.indexOf("-o");
 const outputFile = outputFlag !== -1 ? args[outputFlag + 1] : null;
@@ -237,20 +299,11 @@ function buildOnce(changedFile = null) {
 	try {
 		const startMs = performance.now();
 		const result = runCompile(inputPath, isDir, { sourceMap, outputFile });
-		let js = maybeMinify(result.js, {
+		const js = maybeMinify(result.js, {
 			minify: minifyOutput,
 			mangle: mangleOutput,
 			sourceMap,
 		});
-		if (serveMode) {
-			// Insert live reload client before the source map comment so it stays last
-			const smIdx = js.lastIndexOf("\n//# sourceMappingURL=");
-			if (smIdx !== -1) {
-				js = `${js.slice(0, smIdx)}\n${liveReloadClient}${js.slice(smIdx)}`;
-			} else {
-				js += `\n${liveReloadClient}`;
-			}
-		}
 		const elapsedMs = (performance.now() - startMs).toFixed(0);
 		const changeNote = changedFile ? ` — ${changedFile} changed` : "";
 		if (outputFile) {
@@ -279,6 +332,7 @@ function buildOnce(changedFile = null) {
 	} catch (e) {
 		console.error(`[${timestamp()}] gofront: ERROR`);
 		for (const line of e.message.split("\n")) console.error(`  ${line}`);
+		devServer?.notifyError?.(e);
 	}
 }
 
@@ -288,10 +342,27 @@ buildOnce();
 // Determine what to watch
 const watchTarget = isDir ? inputPath : dirname(inputPath);
 
+function handleCssWatch(filename) {
+	if (copyAssetsFlag) {
+		try {
+			copyAssets(resolve("."));
+		} catch (e) {
+			console.error(`gofront: asset copy failed: ${e.message}`);
+		}
+	}
+	devServer?.notifyCss?.(filename);
+}
+
 let debounce = null;
+let cssDebounce = null;
 watch(watchTarget, { recursive: true }, (_event, filename) => {
-	if (filename && !filename.endsWith(".go") && !filename.endsWith(".templ"))
+	if (!filename) return;
+	if (filename.endsWith(".css")) {
+		clearTimeout(cssDebounce);
+		cssDebounce = setTimeout(() => handleCssWatch(filename), 50);
 		return;
+	}
+	if (!filename.endsWith(".go") && !filename.endsWith(".templ")) return;
 	clearTimeout(debounce);
 	debounce = setTimeout(() => buildOnce(filename), 80);
 });