blumenjs 0.1.0

package/dist/templates/app/shared/DefaultDocument.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+// HMR: In development, load the client bundle from Webpack Dev Server
+// so the HMR runtime + React Fast Refresh are active.
+const isDev = process.env.NODE_ENV === "development";
+const BUNDLE_SRC = isDev
+    ? "http://localhost:3100/static/js/bundle.js"
+    : "/static/js/bundle.js";
+
+export function DefaultDocument({ children, initialProps }: any) {
+    const css = `
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.6; color: #e2e8f0; background: #1a1025; }
+        #root { min-height: 100vh; }
+        .about-page, .documentation-page { max-width: 800px; margin: 0 auto; padding: 2rem; color: #333; }
+        .about-page .page-content, .documentation-page .page-content { color: #333; }
+        .about-page .info-card, .documentation-page .info-card { background: white; color: #333; }
+        .about-page .page-header, .documentation-page .page-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+        .home-page { min-height: 100vh; background: linear-gradient(180deg, #1a111d 0%, #2d1b4e 100%); padding: 0; display: flex; flex-direction: column; }
+        .hero { text-align: center; padding: 4rem 2rem 3rem; }
+        .logo { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
+        .logo h1 { font-size: 3rem; font-weight: 700; background: linear-gradient(135deg, #a855f7 0%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .version { margin-left: 0.75rem; padding: 0.25rem 0.5rem; background: rgba(168, 85, 247, 0.15); color: #c084fc; border-radius: 4px; font-size: 0.875rem; font-weight: 500; border: 1px solid rgba(168, 85, 247, 0.3); }
+        .tagline { color: #94a3b8; font-size: 1.25rem; line-height: 1.7; max-width: 600px; margin: 0 auto; }
+        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; padding: 0 2rem 3rem; }
+        .feature-card-large { grid-column: span 2; }
+        .feature-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 1.5rem; text-decoration: none; transition: all 0.2s ease; display: flex; flex-direction: column; }
+        .feature-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(168, 85, 247, 0.4); transform: translateY(-2px); }
+        .card-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 10px; color: #a855f7; margin-bottom: 1.25rem; transition: all 0.2s ease; }
+        .feature-card:hover .card-icon { background: rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.4); transform: scale(1.05); }
+        .feature-card h3 { color: #f1f5f9; font-size: 1.125rem; margin-bottom: 0.5rem; font-weight: 600; }
+        .feature-card p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem; flex-grow: 1; }
+        .card-code { background: rgba(0, 0, 0, 0.3); color: #c084fc; padding: 0.5rem 0.75rem; border-radius: 6px; font-family: "SF Mono", Monaco, monospace; font-size: 0.8rem; border: 1px solid rgba(168, 85, 247, 0.3); }
+        .home-footer { text-align: center; padding: 2rem; border-top: 1px solid rgba(168, 85, 247, 0.15); margin-top: auto; }
+        .footer-nav { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1rem; }
+        .footer-link { color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
+        .footer-link:hover { color: #c084fc; }
+        .footer-copy { color: #c084fc; font-size: 0.8rem; }
+        .page-header { text-align: center; margin-bottom: 2rem; padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; }
+        .page-content { display: flex; flex-direction: column; gap: 1.5rem; }
+        .info-card { background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
+        .info-card h2 { color: #667eea; margin-bottom: 1rem; font-size: 1.3rem; }
+        .page-nav { margin-top: 2rem; text-align: center; }
+        .nav-link { display: inline-block; padding: 0.75rem 1.5rem; background: #667eea; color: white; text-decoration: none; border-radius: 4px; transition: background 0.2s; }
+        .nav-link:hover { background: #5a6fd6; }
+        .server-info { text-align: center; color: #666; margin-top: 1rem; }
+        .not-found { text-align: center; padding: 4rem 2rem; }
+        .not-found h1 { color: #667eea; font-size: 2rem; }
+        .page-transition { will-change: opacity; }
+        .page-transition-active { opacity: 1; transition: opacity 200ms ease-in; }
+        .page-transition-exit { opacity: 0; transition: opacity 150ms ease-out; }
+    `;
+
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="UTF-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+                <meta name="description" content="SSR Go + React - Minimal Production-Quality SSR Engine" />
+                <title>SSR Go + React</title>
+                <style dangerouslySetInnerHTML={{ __html: css }} />
+            </head>
+            <body>
+                <div id="root">{children}</div>
+                <script
+                    id="ssr-props"
+                    type="application/json"
+                    dangerouslySetInnerHTML={{
+                        __html: JSON.stringify(initialProps).replace(/</g, '\\u003c')
+                    }}
+                />
+                <script src={BUNDLE_SRC} defer></script>
+            </body>
+        </html>
+    );
+}

package/dist/templates/app/shared/Link.tsx

@@ -0,0 +1,73 @@
+/**
+ * Blumen <Link> Component
+ *
+ * Drop-in replacement for <a> that enables SPA navigation.
+ * External links, new-tab links, and modified clicks (ctrl/cmd)
+ * are passed through to the browser as normal.
+ *
+ * During SSR (no RouterProvider), renders a plain <a> tag.
+ *
+ * @example
+ * <Link href="/about" className="nav-link">About</Link>
+ */
+
+import React, { useContext } from "react";
+
+// Import the context directly to do a safe check without throwing
+// We need the raw context object, not the hook
+import { RouterContextRef, useRouter } from "./RouterContext";
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+	/** The destination path */
+	href: string;
+}
+
+function isExternal(href: string): boolean {
+	return /^https?:\/\//.test(href) || href.startsWith("mailto:") || href.startsWith("tel:");
+}
+
+function isModifiedClick(e: React.MouseEvent): boolean {
+	return e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+}
+
+export function Link({ href, children, onClick, target, ...rest }: LinkProps) {
+	// Safe check: if we're in SSR (no provider), just render a plain <a>
+	const ctx = useContext(RouterContextRef);
+
+	if (!ctx) {
+		// SSR fallback — no router available
+		return (
+			<a href={href} target={target} {...rest}>
+				{children}
+			</a>
+		);
+	}
+
+	const { navigate } = ctx;
+
+	const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+		// Let the caller's onClick run first
+		if (onClick) onClick(e);
+		if (e.defaultPrevented) return;
+
+		// Pass through to browser for:
+		//   - External links
+		//   - New-tab targets
+		//   - Modified clicks (ctrl+click, cmd+click, etc.)
+		if (isExternal(href) || target === "_blank" || isModifiedClick(e)) {
+			return;
+		}
+
+		// SPA navigation
+		e.preventDefault();
+		navigate(href);
+	};
+
+	return (
+		<a href={href} onClick={handleClick} target={target} {...rest}>
+			{children}
+		</a>
+	);
+}
+
+export default Link;

package/dist/templates/app/shared/RouterContext.tsx

@@ -0,0 +1,176 @@
+/**
+ * Blumen Client-Side Router
+ *
+ * Provides SPA navigation without full page reloads.
+ * On the first load, SSR content is hydrated normally.
+ * Subsequent navigations swap React components client-side
+ * using the History API and the generated route map.
+ */
+
+import React, {
+	createContext,
+	useContext,
+	useState,
+	useCallback,
+	useEffect,
+	useRef,
+} from "react";
+import { matchRoute, type RouteDef } from "./router";
+
+// ── Context types ──────────────────────────────────────────────
+
+interface RouterContextValue {
+	/** Current URL pathname */
+	path: string;
+	/** Extracted dynamic params for the current route (e.g. { id: "42" }) */
+	params: Record<string, string>;
+	/** Programmatic navigation */
+	navigate: (to: string) => void;
+}
+
+const RouterContext = createContext<RouterContextValue | null>(null);
+
+// Exported for Link.tsx to do safe SSR checks without throwing
+export { RouterContext as RouterContextRef };
+
+/**
+ * Hook for page components to access the router.
+ *
+ * @example
+ * const { path, params, navigate } = useRouter();
+ */
+export function useRouter(): RouterContextValue {
+	const ctx = useContext(RouterContext);
+	if (!ctx) {
+		throw new Error("useRouter must be used inside <RouterProvider>");
+	}
+	return ctx;
+}
+
+// ── Provider props ─────────────────────────────────────────────
+
+interface RouterProviderProps {
+	/** The auto-generated route definitions */
+	routes: RouteDef[];
+	/** The App wrapper component */
+	App: React.ComponentType<any>;
+	/** The NotFound component for unmatched routes */
+	notFoundComponent: React.ComponentType<any>;
+	/** Initial SSR props passed from the server */
+	initialProps?: Record<string, any>;
+	children?: never; // Provider renders its own tree
+}
+
+// ── Provider ───────────────────────────────────────────────────
+
+export function RouterProvider({
+	routes,
+	App,
+	notFoundComponent: NotFound,
+	initialProps = {},
+}: RouterProviderProps) {
+	const [path, setPath] = useState<string>(
+		() => window.location.pathname,
+	);
+	const [transitioning, setTransitioning] = useState(false);
+	const [dynamicProps, setDynamicProps] = useState<Record<string, any>>({});
+
+	// Track whether we're on the very first render (SSR hydration).
+	// On the first render we re-use the server-provided props.
+	const isFirstRender = useRef(true);
+
+	// ── Route matching ──────────────────────────────────────────
+	const match = matchRoute(path, routes);
+	const PageComponent = match ? match.component : NotFound;
+	const params = match ? match.params : {};
+
+	// Build props for the page component
+	const pageProps = isFirstRender.current
+		? { ...initialProps, params: { ...(initialProps.params || {}), ...params } }
+		: {
+				...dynamicProps,
+				path,
+				params,
+				query: {},
+				timestamp: Date.now(),
+				serverRendered: false,
+			};
+
+	// After the first render we stop using the SSR props
+	useEffect(() => {
+		isFirstRender.current = false;
+	}, []);
+
+	// ── Navigation function ─────────────────────────────────────
+	const navigate = useCallback(
+		(to: string) => {
+			if (to === path) return; // no-op for same path
+
+			// Animate out → change route → animate in
+			setTransitioning(true);
+
+			// Fetch dynamic data from Go server
+			const fetchPromise = fetch(to, {
+				headers: { "X-Blumen-Data": "1" }
+			}).then(res => res.ok ? res.json() : {}).catch(err => {
+				console.error("Failed to fetch route data", err);
+				return {};
+			});
+
+			// Allow the exit transition to play (150ms)
+			const delayPromise = new Promise(resolve => setTimeout(resolve, 150));
+
+			Promise.all([fetchPromise, delayPromise]).then(([newData]) => {
+				setDynamicProps(newData);
+				window.history.pushState(null, "", to);
+				setPath(to);
+				window.scrollTo(0, 0);
+
+				// Small delay for the enter transition
+				requestAnimationFrame(() => {
+					setTransitioning(false);
+				});
+			});
+		},
+		[path],
+	);
+
+	// ── Back / Forward button support ───────────────────────────
+	useEffect(() => {
+		const onPopState = () => {
+			setTransitioning(true);
+			const to = window.location.pathname;
+
+			const fetchPromise = fetch(to, {
+				headers: { "X-Blumen-Data": "1" }
+			}).then(res => res.ok ? res.json() : {}).catch(() => ({}));
+			
+			const delayPromise = new Promise(resolve => setTimeout(resolve, 150));
+
+			Promise.all([fetchPromise, delayPromise]).then(([newData]) => {
+				setDynamicProps(newData);
+				setPath(to);
+				
+				requestAnimationFrame(() => {
+					setTransitioning(false);
+				});
+			});
+		};
+
+		window.addEventListener("popstate", onPopState);
+		return () => window.removeEventListener("popstate", onPopState);
+	}, []);
+
+	// ── Render ──────────────────────────────────────────────────
+	const contextValue: RouterContextValue = { path, params, navigate };
+
+	return (
+		<RouterContext.Provider value={contextValue}>
+			<div
+				className={`page-transition ${transitioning ? "page-transition-exit" : "page-transition-active"}`}
+			>
+				<App Component={PageComponent} pageProps={pageProps} />
+			</div>
+		</RouterContext.Provider>
+	);
+}

package/dist/templates/app/shared/router.ts

@@ -0,0 +1,23 @@
+export interface RouteDef {
+	path: string;
+	pattern: RegExp;
+	keys: string[];
+	component: React.ComponentType<any>;
+}
+
+export function matchRoute(path: string, routes: RouteDef[]) {
+	// Strip trailing slash for matching (unless it's exactly "/")
+	const normalizedPath = path.endsWith("/") && path !== "/" ? path.slice(0, -1) : path;
+
+	for (const route of routes) {
+		const match = normalizedPath.match(route.pattern);
+		if (match) {
+			const params: Record<string, string> = {};
+			route.keys.forEach((key: string, index: number) => {
+				params[key] = match[index + 1];
+			});
+			return { component: route.component, params };
+		}
+	}
+	return null;
+}

package/dist/templates/go-server/main.go

@@ -0,0 +1,175 @@
+package main
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"log"
+	"net"
+	"net/http"
+	"time"
+)
+
+const (
+	nodeSSRURL = "http://localhost:4000/render"
+)
+
+// SSRResponse from Node service
+type SSRResponse struct {
+	HTML  string                 `json:"html"`
+	Props map[string]interface{} `json:"props"`
+}
+
+// SSRRequest to Node service
+type SSRRequest struct {
+	Path   string                 `json:"path"`
+	Query  map[string][]string    `json:"query"`
+	Params map[string]interface{} `json:"params"`
+	Data   map[string]interface{} `json:"data,omitempty"`
+}
+
+var httpClient = &http.Client{
+	Timeout: 10 * time.Second,
+}
+
+func main() {
+	mux := http.NewServeMux()
+
+	// Static files are served directly — must be registered first
+	mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
+
+	// Specific routes with Go loaders for data fetching
+	mux.HandleFunc("/dashboard/settings", PageHandler(func(r *http.Request) (map[string]interface{}, error) {
+		return map[string]interface{}{
+			"serverMessage": "Welcome to the settings. This data was securely fetched from Go at " + time.Now().Format(time.RFC1123),
+			"stats":         map[string]int{"users": 150, "sales": 4200},
+		}, nil
+	}))
+
+	mux.HandleFunc("/users/{id}", PageHandler(func(r *http.Request) (map[string]interface{}, error) {
+		id := r.PathValue("id")
+		return map[string]interface{}{
+			"userId":      id,
+			"userProfile": "Profile data for user " + id + " fetched from Go db",
+		}, nil
+	}))
+
+	// Catch-all: forward every other request to the Node SSR server.
+	// This decouples Go from knowing about specific React page paths.
+	mux.HandleFunc("/", PageHandler(nil))
+
+	startPort := 3000
+	var listener net.Listener
+	var err error
+
+	for {
+		addr := fmt.Sprintf(":%d", startPort)
+		listener, err = net.Listen("tcp", addr)
+		if err == nil {
+			break
+		}
+		log.Printf("Port %d is in use, trying %d...", startPort, startPort+1)
+		startPort++
+	}
+
+	log.Printf("Go server starting on http://localhost:%d", startPort)
+	if err := http.Serve(listener, mux); err != nil {
+		log.Fatalf("Server error: %v", err)
+	}
+}
+
+type DataLoader func(r *http.Request) (map[string]interface{}, error)
+
+func PageHandler(loader DataLoader) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+			return
+		}
+
+		var props map[string]interface{}
+		var err error
+		if loader != nil {
+			props, err = loader(r)
+			if err != nil {
+				log.Printf("Loader error: %v", err)
+				http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+				return
+			}
+		}
+
+		// If this is a SPA data fetch request, return JSON props
+		if r.Header.Get("X-Blumen-Data") == "1" || r.URL.Query().Get("_data") == "1" {
+			w.Header().Set("Content-Type", "application/json")
+			if props == nil {
+				props = make(map[string]interface{})
+			}
+			json.NewEncoder(w).Encode(props)
+			return
+		}
+
+		handleRouteWithProps(w, r, props)
+	}
+}
+
+func handleRouteWithProps(w http.ResponseWriter, r *http.Request, props map[string]interface{}) {
+	// Prepare SSR request
+	ssrReq := SSRRequest{
+		Path:  r.URL.Path,
+		Query: r.URL.Query(),
+		Params: map[string]interface{}{
+			"url":     r.URL.String(),
+			"headers": r.Header,
+		},
+		Data: props,
+	}
+
+	// Call Node SSR service
+	ssrResp, err := callNodeSSR(ssrReq)
+	if err != nil {
+		log.Printf("SSR error: %v", err)
+		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
+		return
+	}
+
+
+
+	// Security headers
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	w.Header().Set("X-Content-Type-Options", "nosniff")
+	w.Header().Set("X-Frame-Options", "DENY")
+	w.Header().Set("Referrer-Policy", "strict-origin-when-cross-origin")
+
+	w.WriteHeader(http.StatusOK)
+	w.Write([]byte(ssrResp.HTML))
+}
+
+func callNodeSSR(req SSRRequest) (*SSRResponse, error) {
+	reqBody, err := json.Marshal(req)
+	if err != nil {
+		return nil, fmt.Errorf("marshal request: %w", err)
+	}
+
+	resp, err := httpClient.Post(
+		nodeSSRURL,
+		"application/json",
+		bytes.NewReader(reqBody),
+	)
+	if err != nil {
+		return nil, fmt.Errorf("http post: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("node ssr returned %d", resp.StatusCode)
+	}
+
+	var ssrResp SSRResponse
+	if err := json.NewDecoder(resp.Body).Decode(&ssrResp); err != nil {
+		return nil, fmt.Errorf("decode response: %w", err)
+	}
+
+	return &ssrResp, nil
+}
+
+

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

@@ -0,0 +1,141 @@
+import * as http from "http";
+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 { matchRoute } from "../app/shared/router";
+import NotFoundPage from "../app/pages/NotFound";
+
+const NotFound = NotFoundPage;
+
+interface SSRRequest {
+	path: string;
+	query: Record<string, string[]>;
+	params: Record<string, any>;
+	data?: Record<string, any>;
+}
+
+interface SSRResponse {
+	html: string;
+	props: Record<string, any>;
+}
+
+const PORT = process.env.PORT || 4000;
+
+const server = http.createServer(async (req, res) => {
+	// CORS and security headers
+	res.setHeader("Content-Type", "application/json");
+	res.setHeader("Access-Control-Allow-Origin", "*");
+	res.setHeader("Access-Control-Allow-Methods", "POST");
+	res.setHeader("X-Content-Type-Options", "nosniff");
+
+	if (req.method === "OPTIONS") {
+		res.writeHead(200);
+		res.end();
+		return;
+	}
+
+	if (req.method !== "POST" || req.url !== "/render") {
+		res.writeHead(404);
+		res.end(JSON.stringify({ error: "Not Found" }));
+		return;
+	}
+
+	try {
+		// Parse request body
+		const body = await readBody(req);
+		const ssrReq: SSRRequest = JSON.parse(body);
+
+		// Match route
+		const match = matchRoute(ssrReq.path, routes);
+
+		if (!match) {
+			// Render 404 page
+			const props = {
+				path: ssrReq.path,
+				status: 404,
+				serverRendered: true,
+			};
+			const element = React.createElement(NotFound, props);
+			const html = renderToString(element);
+
+			res.writeHead(200);
+			res.end(JSON.stringify({ html, props }));
+			return;
+		}
+
+		// Prepare props for the page
+		const props = {
+			...(ssrReq.data || {}),
+			path: ssrReq.path,
+			query: ssrReq.query,
+			params: { ...ssrReq.params, ...match.params },
+			timestamp: Date.now(),
+			serverRendered: true,
+		};
+
+		// Render React to HTML
+		const appElement = React.createElement(App, {
+			Component: match.component,
+			pageProps: props,
+		});
+
+		const documentElement = React.createElement(Document, {
+			initialProps: props,
+			children: appElement,
+		});
+
+		const html = "<!doctype html>\n" + renderToString(documentElement);
+
+		const ssrResp: SSRResponse = {
+			html,
+			props,
+		};
+
+		res.writeHead(200);
+		res.end(JSON.stringify(ssrResp));
+	} catch (error) {
+		console.error("SSR Error:", error);
+		res.writeHead(500);
+		res.end(
+			JSON.stringify({
+				error: "Internal Server Error",
+				message:
+					process.env.NODE_ENV === "development" ? String(error) : undefined,
+			}),
+		);
+	}
+});
+
+function readBody(req: http.IncomingMessage): Promise<string> {
+	return new Promise((resolve, reject) => {
+		let body = "";
+		req.on("data", (chunk) => {
+			body += chunk.toString();
+		});
+		req.on("end", () => {
+			resolve(body);
+		});
+		req.on("error", reject);
+	});
+}
+
+server.listen(PORT, () => {
+	console.log(`Node SSR server running on http://localhost:${PORT}`);
+});
+
+// Handle graceful shutdown
+process.on("SIGTERM", () => {
+	console.log("SIGTERM received, shutting down...");
+	server.close(() => {
+		process.exit(0);
+	});
+});
+
+process.on("SIGINT", () => {
+	console.log("SIGINT received, shutting down...");
+	server.close(() => {
+		process.exit(0);
+	});
+});