blumenjs 0.1.7 → 0.2.0

package/dist/templates/node-ssr/server.ts

@@ -3,7 +3,7 @@ import { renderToString } from "react-dom/server";
 import React from "react";
 
 // Auto-generated route map (run `npm run routes` to regenerate)
-import { routes, App, Document } from "./generated-routes";
+import { routes, App, Document, serverPropsMap } from "./generated-routes";
 import { matchRoute } from "../app/shared/router";
 import NotFoundPage from "../app/pages/NotFound";
 
@@ -21,6 +21,19 @@ interface SSRResponse {
 	props: Record<string, any>;
 }
 
+interface DataRequest {
+	path: string;
+	query: Record<string, string[]>;
+	params: Record<string, any>;
+	headers?: Record<string, string>;
+}
+
+interface DataResponse {
+	props: Record<string, any>;
+	hasServerProps: boolean;
+	revalidate: number; // TTL in seconds; 0 = no caching
+}
+
 const PORT = process.env.PORT || 4000;
 
 const server = http.createServer(async (req, res) => {
@@ -36,12 +49,97 @@ const server = http.createServer(async (req, res) => {
 		return;
 	}
 
-	if (req.method !== "POST" || req.url !== "/render") {
+	if (req.method !== "POST") {
 		res.writeHead(404);
 		res.end(JSON.stringify({ error: "Not Found" }));
 		return;
 	}
 
+	// Route to the correct handler
+	if (req.url === "/data") {
+		return handleData(req, res);
+	} else if (req.url === "/render") {
+		return handleRender(req, res);
+	} else {
+		res.writeHead(404);
+		res.end(JSON.stringify({ error: "Not Found" }));
+	}
+});
+
+/**
+ * POST /data - Execute getServerProps for a matched route.
+ *
+ * Called by the Go server before /render to fetch TypeScript-defined
+ * server data. If the page doesn't export getServerProps, returns
+ * { hasServerProps: false } and Go skips the data merge.
+ */
+async function handleData(req: http.IncomingMessage, res: http.ServerResponse) {
+	try {
+		const body = await readBody(req);
+		const dataReq: DataRequest = JSON.parse(body);
+
+		// Match the route to find the page
+		const match = matchRoute(dataReq.path, routes);
+
+		if (!match) {
+			res.writeHead(200);
+			res.end(JSON.stringify({ props: {}, hasServerProps: false }));
+			return;
+		}
+
+		// Find the route definition to look up in serverPropsMap
+		const routeDef = routes.find(r => r.component === match.component);
+		const getServerProps = routeDef ? serverPropsMap[routeDef.path] : undefined;
+
+		if (!getServerProps) {
+			// This page doesn't export getServerProps
+			res.writeHead(200);
+			res.end(JSON.stringify({ props: {}, hasServerProps: false }));
+			return;
+		}
+
+		// Build the BlumenContext
+		const ctx = {
+			params: { ...(dataReq.params || {}), ...match.params },
+			query: dataReq.query || {},
+			path: dataReq.path,
+			headers: dataReq.headers || {},
+		};
+
+		// Run getServerProps
+		const result = await getServerProps(ctx);
+
+		const dataResp: DataResponse = {
+			props: result?.props || {},
+			hasServerProps: true,
+			revalidate: result?.revalidate || 0,
+		};
+
+		res.writeHead(200);
+		res.end(JSON.stringify(dataResp));
+	} catch (error) {
+		console.error("getServerProps Error:", error);
+		res.writeHead(500);
+		res.end(
+			JSON.stringify({
+				error: "getServerProps failed",
+				message:
+					process.env.NODE_ENV === "development" ? String(error) : undefined,
+			}),
+		);
+	}
+}
+
+/**
+ * POST /render - Render the matched page to HTML.
+ *
+ * This is the existing SSR endpoint. It receives props (possibly
+ * enriched by /data) and renders the React component tree to HTML.
+ */
+async function handleRender(
+	req: http.IncomingMessage,
+	res: http.ServerResponse,
+) {
 	try {
 		// Parse request body
 		const body = await readBody(req);
@@ -57,7 +155,11 @@ const server = http.createServer(async (req, res) => {
 				status: 404,
 				serverRendered: true,
 			};
-			const element = React.createElement(NotFound, props);
+			const element = React.createElement(
+				"div",
+				{ className: "page-transition page-transition-active" },
+				React.createElement(NotFound, props),
+			);
 			const html = renderToString(element);
 
 			res.writeHead(200);
@@ -76,10 +178,16 @@ const server = http.createServer(async (req, res) => {
 		};
 
 		// Render React to HTML
-		const appElement = React.createElement(App, {
-			Component: match.component,
-			pageProps: props,
-		});
+		// Wrap in the same page-transition div that the client-side
+		// RouterProvider renders, so hydration trees match exactly.
+		const appElement = React.createElement(
+			"div",
+			{ className: "page-transition page-transition-active" },
+			React.createElement(App, {
+				Component: match.component,
+				pageProps: props,
+			}),
+		);
 
 		const documentElement = React.createElement(Document, {
 			initialProps: props,
@@ -106,7 +214,7 @@ const server = http.createServer(async (req, res) => {
 			}),
 		);
 	}
-});
+}
 
 function readBody(req: http.IncomingMessage): Promise<string> {
 	return new Promise((resolve, reject) => {
@@ -123,6 +231,10 @@ function readBody(req: http.IncomingMessage): Promise<string> {
 
 server.listen(PORT, () => {
 	console.log(`Node SSR server running on http://localhost:${PORT}`);
+	const gspCount = Object.keys(serverPropsMap).length;
+	if (gspCount > 0) {
+		console.log(`  ${gspCount} page(s) with getServerProps detected`);
+	}
 });
 
 // Handle graceful shutdown

package/dist/templates/scripts/generate-routes.ts

@@ -40,6 +40,8 @@ interface RouteEntry {
 	patternStr: string;
 	/** Extracted parameter keys */
 	keys: string[];
+	/** Whether this page exports a getServerProps function */
+	hasGetServerProps: boolean;
 }
 
 function scanDir(dir: string, baseDir: string = dir): RouteEntry[] {
@@ -87,12 +89,17 @@ function scanDir(dir: string, baseDir: string = dir): RouteEntry[] {
 				patternStr = `^${patternStr}$`;
 			}
 
+			// Check if the page exports getServerProps
+			const fileContent = fs.readFileSync(fullPath, "utf-8");
+			const hasGetServerProps = /export\s+(async\s+)?function\s+getServerProps/.test(fileContent);
+
 			results.push({
 				route: routePath,
 				componentId,
 				importPath: relPath.replace(".tsx", "").replace(/\\/g, "/"),
 				patternStr,
-				keys
+				keys,
+				hasGetServerProps
 			});
 		}
 	}
@@ -139,6 +146,18 @@ function generateRouteFile(
 			`import ${r.componentId} from "${importPathPrefix}/${r.importPath}";`,
 	);
 
+	// For SSR: import getServerProps from pages that export it
+	const gspImports: string[] = [];
+	const gspRoutes = routes.filter(r => r.hasGetServerProps);
+	if (isServer && gspRoutes.length > 0) {
+		for (const r of gspRoutes) {
+			const gspId = "gsp_" + r.componentId.replace("Page_", "");
+			gspImports.push(
+				`import { getServerProps as ${gspId} } from "${importPathPrefix}/${r.importPath}";`,
+			);
+		}
+	}
+
 	const hasApp = fs.existsSync(path.join(PAGES_DIR, "_app.tsx"));
 	const hasDoc = fs.existsSync(path.join(PAGES_DIR, "_document.tsx"));
 
@@ -163,6 +182,25 @@ function generateRouteFile(
 \t}`;
 	});
 
+	// Generate serverPropsMap for SSR routes
+	let serverPropsMapStr = "";
+	if (isServer && gspRoutes.length > 0) {
+		const entries = gspRoutes.map(r => {
+			const gspId = "gsp_" + r.componentId.replace("Page_", "");
+			return `\t"${r.route}": ${gspId},`;
+		});
+		serverPropsMapStr = [
+			"",
+			"// Map of routes that export getServerProps",
+			"// Used by the SSR server to run data fetching before rendering",
+			"export const serverPropsMap: Record<string, Function> = {",
+			...entries,
+			"};",
+		].join("\n");
+	} else if (isServer) {
+		serverPropsMapStr = "\nexport const serverPropsMap: Record<string, Function> = {};";
+	}
+
 	const map = [
 		"",
 		"export interface RouteDef {",
@@ -178,10 +216,11 @@ function generateRouteFile(
 		"",
 		appImport,
 		docImport,
+		serverPropsMapStr,
 		"",
 	];
 
-	return [...header, ...imports, ...map].join("\n");
+	return [...header, ...imports, ...gspImports, ...map].join("\n");
 }
 
 function main() {
@@ -197,7 +236,8 @@ function main() {
 
 	console.log(`   Found ${routes.length} route(s):`);
 	for (const r of routes) {
-		console.log(`     ${r.route.padEnd(25)} → ${r.importPath}.tsx`);
+		const gspTag = r.hasGetServerProps ? " [getServerProps]" : "";
+		console.log(`     ${r.route.padEnd(25)} → ${r.importPath}.tsx${gspTag}`);
 	}
 
 	// Generate SSR routes (node-ssr/ → ../app/pages)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "blumenjs",
-	"version": "0.1.7",
+	"version": "0.2.0",
 	"description": "The React framework powered by Go. Lightning-fast SSR with the DX you deserve.",
 	"type": "module",
 	"bin": {
@@ -26,9 +26,9 @@
 		"dev:legacy": "npm run routes && concurrently \"npm run dev:client\" \"npm run dev:ssr\" \"npm run dev:go\"",
 		"dev:client": "webpack serve --mode development",
 		"dev:ssr": "NODE_ENV=development tsx watch node-ssr/server.ts",
-		"dev:go": "go run go-server/main.go",
+		"dev:go": "go run go-server/main.go go-server/image.go go-server/cache.go",
 		"build:client": "webpack --mode production",
-		"build:ssr": "esbuild node-ssr/server.ts --bundle --platform=node --format=esm --outfile=dist/ssr-server.js --external:react --external:react-dom",
+		"build:ssr": "esbuild node-ssr/server.ts --bundle --platform=node --format=esm --outfile=dist/ssr-server.js --packages=external",
 		"clean": "rm -rf dist static/js/bundle.js"
 	},
 	"keywords": [
@@ -64,12 +64,16 @@
 		"@types/react-dom": "^18.2.0",
 		"babel-loader": "^10.1.1",
 		"concurrently": "^8.2.2",
+		"css-loader": "^7.1.4",
 		"esbuild": "^0.19.0",
+		"mini-css-extract-plugin": "^2.10.2",
 		"react-refresh": "^0.18.0",
+		"style-loader": "^4.0.0",
 		"ts-loader": "^9.5.1",
 		"tsx": "^4.6.0",
 		"typescript": "^5.3.0",
 		"webpack": "^5.89.0",
+		"webpack-bundle-analyzer": "^5.3.0",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^5.2.3"
 	},