@nitronjs/framework 0.1.0

package/lib/View/Manager.js

@@ -0,0 +1,544 @@
+import { existsSync, readFileSync, readdirSync, statSync } from "fs";
+import path from "path";
+import { pathToFileURL } from "url";
+import { randomBytes } from "crypto";
+import { AsyncLocalStorage } from "node:async_hooks";
+import { PassThrough } from "stream";
+import React from "react";
+import { renderToPipeableStream } from "react-dom/server";
+import Log from "../Logging/Manager.js";
+import Route from "../Route/Manager.js";
+import Paths from "../Core/Paths.js";
+
+const CTX = Symbol.for("__nitron_view_context__");
+const MARK = Symbol.for("__nitron_client_component__");
+const Context = new AsyncLocalStorage();
+globalThis[CTX] ??= Context;
+
+const ESC_MAP = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+    "`": "&#96;"
+};
+
+const UNSAFE_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+
+function escapeHtml(str) {
+    if (!str) return "";
+    return String(str).replace(/[&<>"'`]/g, char => ESC_MAP[char]);
+}
+
+class View {
+    static #root = Paths.project;
+    static #userViews = Paths.buildViews;
+    static #frameworkViews = Paths.buildFrameworkViews;
+    static #manifestPath = path.join(Paths.project, "build/manifest.json");
+    static #manifest = null;
+    static #routesCache = null;
+    static #manifestMtime = null;
+    static #isDev = process.env.APP_DEV === "true";
+
+    static setup(server) {
+        server.decorateReply("view", async function(name, params = {}) {
+            const entry = View.#getEntry("user", name);
+            if (!entry) {
+                const error = new Error(`View "${name}" not found`);
+                error.statusCode = 404;
+                throw error;
+            }
+
+            const csrf = this.request.session?.getCsrfToken?.();
+            const fastifyRequest = this.request;
+            
+            try {
+                const { html, nonce, meta, props } = await View.#render(
+                    View.#userViews,
+                    name,
+                    params,
+                    csrf,
+                    fastifyRequest
+                );
+
+                View.#setSecurityHeaders(this, nonce);
+
+                return this
+                    .code(200)
+                    .type("text/html")
+                    .send(View.#buildPage(entry, html, nonce, csrf, meta, props));
+            } catch (error) {
+                error.statusCode = error.statusCode || 500;
+                throw error;
+            }
+        });
+
+        server.setNotFoundHandler((req, res) => {
+            Log.warn("HTTP 404", {
+                method: req.method,
+                url: req.url,
+                ip: req.ip
+            });
+            return View.#renderError(res, 404, "errors/404", {
+                title: "404 - Not Found"
+            });
+        });
+
+        server.setErrorHandler((err, req, res) => {
+            const statusCode = err.statusCode || 500;
+            Log.error("HTTP Error", {
+                error: err.message,
+                stack: err.stack,
+                statusCode,
+                url: req.url
+            });
+            return View.#renderError(res, statusCode, "errors/500", {
+                title: "500 - Server Error",
+                message: View.#isDev ? err.message : "An unexpected error occurred"
+            });
+        });
+    }
+
+    static #getEntry(namespace, name) {
+        const key = `${namespace}:${name.toLowerCase().replace(/\\/g, "/")}`;
+        return this.#loadManifest()[key] || null;
+    }
+
+    static #loadManifest() {
+        if (!existsSync(this.#manifestPath)) {
+            throw new Error("Build manifest missing");
+        }
+
+        if (this.#isDev && this.#manifest) {
+            try {
+                const mtime = statSync(this.#manifestPath).mtimeMs;
+                if (mtime !== this.#manifestMtime) {
+                    this.#manifest = null;
+                }
+            } catch {}
+        }
+
+        if (!this.#manifest) {
+            this.#manifest = JSON.parse(readFileSync(this.#manifestPath, "utf8"));
+            this.#manifestMtime = statSync(this.#manifestPath).mtimeMs;
+        }
+
+        return this.#manifest;
+    }
+
+    static async #render(baseDir, name, params, csrf = "", fastifyRequest = null) {
+        if (!name || typeof name !== "string") {
+            throw new Error("Invalid view name");
+        }
+
+        const viewPath = path.join(baseDir, name + ".js");
+        const resolvedPath = path.resolve(viewPath);
+        const resolvedBase = path.resolve(baseDir);
+
+        if (!resolvedPath.startsWith(resolvedBase + path.sep)) {
+            throw new Error("Invalid view path");
+        }
+
+        if (!existsSync(viewPath)) {
+            throw new Error(`View not found: ${name}`);
+        }
+
+        const mod = await import(pathToFileURL(viewPath).href + `?t=${Date.now()}`);
+        if (!mod.default) {
+            throw new Error("View must have a default export");
+        }
+
+        const nonce = randomBytes(16).toString("hex");
+        const ctx = {
+            nonce,
+            csrf,
+            props: {},
+            request: fastifyRequest ? {
+                params: fastifyRequest.params || {},
+                query: fastifyRequest.query || {},
+                url: fastifyRequest.url || '',
+                method: fastifyRequest.method || 'GET',
+                headers: fastifyRequest.headers || {}
+            } : null
+        };
+        let html = "";
+        let collectedProps = {};
+
+        try {
+            const Component = mod.default;
+            let element;
+
+            if (Component[MARK]) {
+                ctx.props[":R0:"] = this.#sanitizeProps(params);
+                element = React.createElement(
+                    "div",
+                    {
+                        "data-cid": ":R0:",
+                        "data-island": Component.displayName || Component.name || "Anonymous"
+                    },
+                    React.createElement(Component, params)
+                );
+            } else {
+                element = React.createElement(Component, params);
+            }
+
+            html = await Context.run(ctx, () => this.#renderToHtml(element));
+            collectedProps = ctx.props;
+        } catch (error) {
+            const componentName = mod.default?.displayName || mod.default?.name || "Unknown";
+            const errorDetails = this.#parseReactError(error);
+
+            Log.error("Render Error", {
+                view: name,
+                component: componentName,
+                error: error.message,
+                cause: errorDetails.cause,
+                location: errorDetails.location,
+                stack: error.stack
+            });
+
+            error.statusCode = error.statusCode || 500;
+            throw error;
+        }
+
+        return {
+            html,
+            nonce,
+            meta: mod.Meta ?? null,
+            props: collectedProps
+        };
+    }
+
+    static #parseReactError(error) {
+        const result = {
+            cause: null,
+            location: null
+        };
+
+        const stack = error.stack || "";
+
+        const undefinedMatch = error.message.match(/Cannot read propert(?:y|ies) of (undefined|null)(?: \(reading ['"](.+)['"]\))?/);
+        if (undefinedMatch) {
+            result.cause = undefinedMatch[2] 
+                ? `Tried to access "${undefinedMatch[2]}" on ${undefinedMatch[1]}`
+                : `Accessed property on ${undefinedMatch[1]}`;
+        }
+
+        const notFunctionMatch = error.message.match(/(.+) is not a function/);
+        if (notFunctionMatch) {
+            result.cause = `"${notFunctionMatch[1]}" is not callable`;
+        }
+
+        const notDefinedMatch = error.message.match(/(.+) is not defined/);
+        if (notDefinedMatch) {
+            result.cause = `Variable "${notDefinedMatch[1]}" does not exist`;
+        }
+
+        const componentMatch = stack.match(/at (\w+) \(.*?resources[/\\]views[/\\](.+?\.tsx)(?::(\d+):(\d+))?\)/);
+        if (componentMatch) {
+            result.location = {
+                component: componentMatch[1],
+                file: componentMatch[2].replace(/\\/g, "/"),
+                line: componentMatch[3] || "?",
+                column: componentMatch[4] || "?"
+            };
+        }
+
+        return result;
+    }
+
+    static #sanitizeProps(obj, seen = new WeakSet()) {
+        if (obj == null) {
+            return obj;
+        }
+
+        const type = typeof obj;
+
+        if (type === "function" || type === "symbol") {
+            return undefined;
+        }
+
+        if (type === "bigint") {
+            return obj.toString();
+        }
+
+        if (type !== "object") {
+            return obj;
+        }
+
+        if (seen.has(obj)) {
+            return undefined;
+        }
+        seen.add(obj);
+
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.#sanitizeProps(item, seen) ?? null);
+        }
+
+        if (obj instanceof Date) {
+            return obj.toISOString();
+        }
+
+        if (obj._attributes && typeof obj._attributes === "object") {
+            return this.#sanitizeProps(obj._attributes, seen);
+        }
+
+        if (typeof obj.toJSON === "function") {
+            return this.#sanitizeProps(obj.toJSON(), seen);
+        }
+
+        const proto = Object.getPrototypeOf(obj);
+        if (proto !== Object.prototype && proto !== null) {
+            return undefined;
+        }
+
+        const result = {};
+        for (const key of Object.keys(obj)) {
+            if (UNSAFE_KEYS.has(key)) {
+                continue;
+            }
+            const value = this.#sanitizeProps(obj[key], seen);
+            if (value !== undefined) {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
+
+    static #renderToHtml(element) {
+        return new Promise((resolve, reject) => {
+            const chunks = [];
+            const stream = new PassThrough();
+            let done = false;
+            let renderError = null;
+
+            const finish = (result) => {
+                if (!done) {
+                    done = true;
+                    clearTimeout(timer);
+                    
+                    if (renderError) {
+                        reject(renderError);
+                    } else {
+                        resolve(result);
+                    }
+                }
+            };
+
+            const timeout = this.#isDev ? 10000 : 3000;
+            const timer = setTimeout(() => {
+                const error = new Error("Render timeout - component took too long to render");
+                error.statusCode = 500;
+                renderError = error;
+                finish(null);
+            }, timeout);
+
+            stream.on("data", chunk => chunks.push(chunk));
+            stream.on("end", () => finish(Buffer.concat(chunks).toString("utf-8")));
+            stream.on("error", (error) => {
+                renderError = error;
+                finish(null);
+            });
+
+            try {
+                const { pipe } = renderToPipeableStream(element, {
+                    onShellReady() {
+                        pipe(stream);
+                    },
+                    onError: (error) => {
+                        renderError = error;
+                        finish(null);
+                    }
+                });
+            } catch (error) {
+                renderError = error;
+                finish(null);
+            }
+        });
+    }
+
+    static async #renderError(res, statusCode, viewName, params) {
+        try {
+            const entry = this.#getEntry("framework", viewName);
+            const { html, nonce, meta, props } = await this.#render(
+                this.#frameworkViews,
+                viewName,
+                params,
+                ""
+            );
+
+            this.#setSecurityHeaders(res, nonce);
+
+            return res
+                .code(statusCode)
+                .type("text/html")
+                .send(this.#buildPage(entry, html, nonce, "", meta, props));
+        } catch (error) {
+            Log.error(`Failed to render ${viewName}`, { error: error.message });
+            const message = statusCode === 404 ? "Not Found" : "Internal Server Error";
+            return res.code(statusCode).send(message);
+        }
+    }
+
+    static #buildPage(entry, html, nonce, csrf = "", meta = null, props = {}) {
+        let processedMeta = meta || {};
+
+        if (meta?.title && typeof meta.title === "object") {
+            processedMeta = {
+                ...meta,
+                title: meta.title.default || "NitronJS"
+            };
+        }
+
+        const cssFiles = (entry?.css || []).map(href => `/storage${href}`);
+
+        return this.#generateHtml({
+            html,
+            meta: processedMeta,
+            css: cssFiles,
+            hydrationScript: entry?.hydrationScript,
+            nonce,
+            csrf,
+            props
+        });
+    }
+
+    static #getUsedRoutes(script) {
+        if (!script) {
+            return [];
+        }
+
+        if (this.#isDev) {
+            this.#routesCache = new Map();
+            this.#scanBundles();
+        } else if (!this.#routesCache) {
+            this.#routesCache = new Map();
+            this.#scanBundles();
+        }
+
+        return this.#routesCache.get(script) || [];
+    }
+
+    static #scanBundles() {
+        const jsDir = path.join(this.#root, "storage/app/public/js");
+
+        if (!existsSync(jsDir)) {
+            return;
+        }
+
+        const scan = (dir) => {
+            for (const entry of readdirSync(dir, { withFileTypes: true })) {
+                const fullPath = path.join(dir, entry.name);
+
+                if (entry.isDirectory()) {
+                    scan(fullPath);
+                    continue;
+                }
+
+                if (!entry.name.endsWith(".js") || entry.name === "vendor.js") {
+                    continue;
+                }
+
+                const content = readFileSync(fullPath, "utf8");
+                const matches = [...content.matchAll(/routes\["([^"]+)"\]/g)];
+                const routes = matches.map(match => match[1]);
+                const relativePath = "/js/" + path.relative(jsDir, fullPath).replace(/\\/g, "/");
+
+                this.#routesCache.set(relativePath, [...new Set(routes)]);
+            }
+        };
+
+        scan(jsDir);
+    }
+
+    static #generateHtml({ html, meta, css, hydrationScript, nonce, csrf, props }) {
+        const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+
+        let runtimeScript = "";
+        if (hydrationScript) {
+            const allRoutes = Route.getClientManifest();
+            const usedRouteNames = this.#getUsedRoutes(hydrationScript);
+            const routes = {};
+
+            for (const routeName of usedRouteNames) {
+                if (allRoutes[routeName]) {
+                    routes[routeName] = allRoutes[routeName];
+                }
+            }
+
+            const propsJson = JSON.stringify(props || {})
+                .replace(/</g, "\\u003c")
+                .replace(/>/g, "\\u003e");
+
+            const runtimeData = JSON.stringify({
+                csrf: csrf || "",
+                routes
+            });
+
+            runtimeScript = `<script${nonceAttr}>window.__NITRON_RUNTIME__=${runtimeData};window.__NITRON_PROPS__=${propsJson};</script>`;
+        }
+
+        const vendorScript = hydrationScript
+            ? `<script src="/storage/js/vendor.js"${nonceAttr}></script>`
+            : "";
+
+        const hydrateScript = hydrationScript
+            ? `<script type="module" src="/storage${hydrationScript}"${nonceAttr}></script>`
+            : "";
+
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+${this.#generateHead(meta, css)}
+</head>
+<body>
+<div id="app">${html}</div>
+${runtimeScript}${vendorScript}${hydrateScript}
+</body>
+</html>`;
+    }
+
+    static #generateHead(meta = {}, css = []) {
+        const parts = [
+            '<meta charset="UTF-8">',
+            '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+            `<title>${escapeHtml(meta.title || "NitronJS")}</title>`
+        ];
+
+        if (meta.description) {
+            parts.push(`<meta name="description" content="${escapeHtml(meta.description)}">`);
+        }
+
+        for (const href of css) {
+            parts.push(`<link rel="stylesheet" href="${escapeHtml(href)}">`);
+        }
+
+        return parts.join("\n");
+    }
+
+    static #setSecurityHeaders(res, nonce) {
+        const connectSrc = this.#isDev ? "'self' ws: wss:" : "'self'";
+
+        const csp = [
+            "default-src 'self'",
+            `script-src 'self' 'nonce-${nonce}'`,
+            "style-src 'self' 'unsafe-inline'",
+            "img-src 'self' data: blob:",
+            "font-src 'self'",
+            `connect-src ${connectSrc}`,
+            "frame-ancestors 'self'",
+            "base-uri 'self'",
+            "form-action 'self'"
+        ].join("; ");
+
+        res.header("Content-Security-Policy", csp);
+        res.header("X-Content-Type-Options", "nosniff");
+        res.header("X-Frame-Options", "DENY");
+        res.header("X-XSS-Protection", "0");
+        res.header("Referrer-Policy", "strict-origin-when-cross-origin");
+        res.header("Permissions-Policy", "geolocation=(), microphone=(), camera=()");
+    }
+}
+
+export default View;