@chidchanun/bcp 0.1.0

package/packages/server/src/static-dev-server.ts

@@ -0,0 +1,854 @@
+import * as http from "node:http";
+import * as net from "node:net";
+import path from "node:path";
+
+import {
+    createDevServer,
+    type DevServerOptions,
+} from "./index.js";
+
+import {
+    applyDevDocumentMetadata,
+} from "./dev-document-metadata.js";
+
+import {
+    resolveNavigationPayload,
+    sendNavigationError,
+    sendNavigationPayload,
+} from "./navigation-payload.js";
+
+import {
+    readPublicAsset,
+    type StaticAsset,
+} from "./static-assets.js";
+
+export function createStaticDevServer(
+    options: DevServerOptions = {}
+) {
+    const port =
+        options.port ?? 3000;
+
+    const hostname =
+        options.hostname ??
+        "localhost";
+
+    const rootDirectory =
+        path.resolve(
+            options.rootDirectory ??
+            process.cwd()
+        );
+
+    let internalPort = 0;
+
+    let frameworkServer:
+        ReturnType<typeof createDevServer> | null =
+        null;
+
+    let proxyServer:
+        http.Server | null =
+        null;
+
+    let started = false;
+
+    async function start() {
+        if (started) {
+            return;
+        }
+
+        internalPort =
+            await findFreePort();
+
+        frameworkServer =
+            createDevServer({
+                ...options,
+                rootDirectory,
+                hostname:
+                    "127.0.0.1",
+                port:
+                    internalPort,
+            });
+
+        await frameworkServer.start();
+
+        proxyServer =
+            http.createServer(
+                async (
+                    req,
+                    res
+                ) => {
+                    const startedAt =
+                        performance.now();
+
+                    try {
+                        const requestUrl =
+                            new URL(
+                                req.url ?? "/",
+                                `http://${req.headers.host ?? `${hostname}:${port}`}`
+                            );
+
+                        const pathname =
+                            requestUrl.pathname;
+
+                        if (
+                            pathname ===
+                            "/_bcp/navigation"
+                        ) {
+                            await handleNavigationRequest(
+                                req,
+                                res,
+                                requestUrl,
+                                rootDirectory,
+                                startedAt
+                            );
+
+                            return;
+                        }
+
+                        if (
+                            isFrameworkPath(
+                                pathname
+                            )
+                        ) {
+                            proxyRequest(
+                                req,
+                                res
+                            );
+
+                            return;
+                        }
+
+                        const asset =
+                            await readPublicAsset(
+                                rootDirectory,
+                                pathname
+                            );
+
+                        if (!asset) {
+                            proxyRequest(
+                                req,
+                                res,
+                                pathname
+                            );
+
+                            return;
+                        }
+
+                        sendStaticAsset(
+                            req,
+                            res,
+                            asset
+                        );
+
+                        logRequest(
+                            req,
+                            pathname,
+                            res,
+                            startedAt
+                        );
+                    } catch (error) {
+                        console.error(
+                            "[public] request failed:",
+                            error
+                        );
+
+                        if (
+                            !res.headersSent
+                        ) {
+                            res.writeHead(
+                                500,
+                                {
+                                    "Content-Type":
+                                        "text/plain; charset=utf-8",
+                                    "Cache-Control":
+                                        "no-store",
+                                }
+                            );
+
+                            res.end(
+                                "Internal Server Error"
+                            );
+                        } else {
+                            res.destroy();
+                        }
+                    }
+                }
+            );
+
+        proxyServer.keepAliveTimeout =
+            65_000;
+
+        proxyServer.headersTimeout =
+            66_000;
+
+        try {
+            await listen(
+                proxyServer,
+                port,
+                hostname
+            );
+        } catch (error) {
+            await frameworkServer.stop();
+
+            frameworkServer = null;
+            proxyServer = null;
+
+            throw error;
+        }
+
+        started = true;
+
+        console.log("");
+        console.log(
+            "BCP Framework"
+        );
+        console.log(
+            `Local: http://${hostname}:${port}`
+        );
+        console.log(
+            `Public: ${path.join(rootDirectory, "public")}`
+        );
+        console.log("");
+    }
+
+    async function stop() {
+        if (proxyServer) {
+            await closeServer(
+                proxyServer
+            );
+
+            proxyServer = null;
+        }
+
+        if (frameworkServer) {
+            await frameworkServer.stop();
+
+            frameworkServer = null;
+        }
+
+        started = false;
+    }
+
+    function proxyRequest(
+        req: http.IncomingMessage,
+        res: http.ServerResponse,
+        metadataPathname?: string
+    ) {
+        const upstream =
+            http.request({
+                hostname:
+                    "127.0.0.1",
+                port:
+                    internalPort,
+                method:
+                    req.method ??
+                    "GET",
+                path:
+                    req.url ??
+                    "/",
+                headers: {
+                    ...req.headers,
+                    host:
+                        req.headers.host ??
+                        `${hostname}:${port}`,
+                    "x-forwarded-host":
+                        req.headers.host ??
+                        `${hostname}:${port}`,
+                },
+            });
+
+        upstream.on(
+            "response",
+            (upstreamResponse) => {
+                if (
+                    metadataPathname &&
+                    shouldTransformHtml(
+                        req,
+                        upstreamResponse
+                    )
+                ) {
+                    void sendHtmlWithMetadata(
+                        res,
+                        upstreamResponse,
+                        rootDirectory,
+                        metadataPathname
+                    );
+
+                    return;
+                }
+
+                writeUpstreamHead(
+                    res,
+                    upstreamResponse
+                );
+
+                upstreamResponse.pipe(
+                    res
+                );
+            }
+        );
+
+        upstream.on(
+            "error",
+            (error) => {
+                console.error(
+                    "[proxy] request failed:",
+                    error
+                );
+
+                if (
+                    res.headersSent
+                ) {
+                    res.destroy(
+                        error
+                    );
+
+                    return;
+                }
+
+                res.writeHead(
+                    502,
+                    {
+                        "Content-Type":
+                            "text/plain; charset=utf-8",
+                        "Cache-Control":
+                            "no-store",
+                    }
+                );
+
+                res.end(
+                    "Bad Gateway"
+                );
+            }
+        );
+
+        req.pipe(
+            upstream
+        );
+    }
+
+    return {
+        start,
+        stop,
+    };
+}
+
+function shouldTransformHtml(
+    req: http.IncomingMessage,
+    response: http.IncomingMessage
+): boolean {
+    if (
+        (req.method ?? "GET").toUpperCase() !==
+        "GET"
+    ) {
+        return false;
+    }
+
+    if (
+        response.statusCode !==
+        200
+    ) {
+        return false;
+    }
+
+    const contentType =
+        response.headers[
+            "content-type"
+        ];
+
+    const value =
+        Array.isArray(
+            contentType
+        )
+            ? contentType[0]
+            : contentType;
+
+    return (
+        typeof value === "string" &&
+        /^text\/html\b/i.test(
+            value
+        )
+    );
+}
+
+async function sendHtmlWithMetadata(
+    res: http.ServerResponse,
+    upstreamResponse: http.IncomingMessage,
+    rootDirectory: string,
+    pathname: string
+): Promise<void> {
+    try {
+        const chunks:
+            Buffer[] = [];
+
+        for await (
+            const chunk
+            of upstreamResponse
+        ) {
+            chunks.push(
+                Buffer.isBuffer(
+                    chunk
+                )
+                    ? chunk
+                    : Buffer.from(
+                        chunk
+                    )
+            );
+        }
+
+        const originalHtml =
+            Buffer.concat(
+                chunks
+            ).toString(
+                "utf8"
+            );
+
+        const payload =
+            await resolveNavigationPayload(
+                rootDirectory,
+                pathname
+            );
+
+        const html =
+            payload
+                ? applyDevDocumentMetadata(
+                    originalHtml,
+                    payload.metadata
+                )
+                : originalHtml;
+
+        const headers:
+            http.OutgoingHttpHeaders = {
+                ...upstreamResponse.headers,
+            };
+
+        delete headers[
+            "content-length"
+        ];
+        delete headers[
+            "transfer-encoding"
+        ];
+
+        headers[
+            "content-length"
+        ] =
+            Buffer.byteLength(
+                html
+            );
+
+        writeUpstreamHead(
+            res,
+            upstreamResponse,
+            headers
+        );
+
+        res.end(
+            html
+        );
+    } catch (error) {
+        console.error(
+            "[dev-metadata] initial SSR metadata failed:",
+            error
+        );
+
+        if (
+            res.headersSent
+        ) {
+            res.destroy();
+            return;
+        }
+
+        res.writeHead(
+            500,
+            {
+                "Content-Type":
+                    "text/plain; charset=utf-8",
+                "Cache-Control":
+                    "no-store",
+            }
+        );
+
+        res.end(
+            "Internal Server Error"
+        );
+    }
+}
+
+function writeUpstreamHead(
+    res: http.ServerResponse,
+    upstreamResponse: http.IncomingMessage,
+    headers:
+        http.OutgoingHttpHeaders =
+        upstreamResponse.headers
+): void {
+    const statusCode =
+        upstreamResponse.statusCode ??
+        502;
+
+    if (
+        upstreamResponse.statusMessage
+    ) {
+        res.writeHead(
+            statusCode,
+            upstreamResponse.statusMessage,
+            headers
+        );
+
+        return;
+    }
+
+    res.writeHead(
+        statusCode,
+        headers
+    );
+}
+
+async function handleNavigationRequest(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    requestUrl: URL,
+    rootDirectory: string,
+    startedAt: number
+): Promise<void> {
+    if (
+        req.method !== "GET"
+    ) {
+        sendNavigationError(
+            res,
+            405,
+            "Method Not Allowed"
+        );
+
+        logRequest(
+            req,
+            requestUrl.pathname,
+            res,
+            startedAt
+        );
+
+        return;
+    }
+
+    const targetPath =
+        requestUrl.searchParams.get(
+            "url"
+        );
+
+    if (!targetPath) {
+        sendNavigationError(
+            res,
+            400,
+            "Missing navigation target."
+        );
+
+        logRequest(
+            req,
+            requestUrl.pathname,
+            res,
+            startedAt
+        );
+
+        return;
+    }
+
+    let target: URL;
+
+    try {
+        target =
+            new URL(
+                targetPath,
+                requestUrl.origin
+            );
+    } catch {
+        sendNavigationError(
+            res,
+            400,
+            "Invalid navigation target."
+        );
+
+        logRequest(
+            req,
+            requestUrl.pathname,
+            res,
+            startedAt
+        );
+
+        return;
+    }
+
+    if (
+        target.origin !==
+        requestUrl.origin
+    ) {
+        sendNavigationError(
+            res,
+            400,
+            "Cross-origin navigation is not allowed."
+        );
+
+        logRequest(
+            req,
+            requestUrl.pathname,
+            res,
+            startedAt
+        );
+
+        return;
+    }
+
+    const payload =
+        await resolveNavigationPayload(
+            rootDirectory,
+            target.pathname
+        );
+
+    if (!payload) {
+        sendNavigationError(
+            res,
+            404,
+            "Route not found."
+        );
+
+        logRequest(
+            req,
+            requestUrl.pathname,
+            res,
+            startedAt
+        );
+
+        return;
+    }
+
+    sendNavigationPayload(
+        res,
+        payload
+    );
+
+    logRequest(
+        req,
+        requestUrl.pathname,
+        res,
+        startedAt
+    );
+}
+
+function logRequest(
+    req: http.IncomingMessage,
+    pathname: string,
+    res: http.ServerResponse,
+    startedAt: number
+): void {
+    console.log(
+        `${req.method ?? "GET"} ${pathname} ${res.statusCode} ${(performance.now() - startedAt).toFixed(2)}ms`
+    );
+}
+
+function isFrameworkPath(
+    pathname: string
+): boolean {
+    return (
+        pathname === "/api" ||
+        pathname.startsWith("/api/") ||
+        pathname === "/_bcp" ||
+        pathname.startsWith("/_bcp/")
+    );
+}
+
+function sendStaticAsset(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    asset: StaticAsset
+): void {
+    const ifNoneMatch =
+        req.headers[
+            "if-none-match"
+        ];
+
+    const ifNoneMatchValue =
+        Array.isArray(
+            ifNoneMatch
+        )
+            ? ifNoneMatch.join(",")
+            : ifNoneMatch;
+
+    const ifModifiedSince =
+        req.headers[
+            "if-modified-since"
+        ];
+
+    const etagMatches =
+        ifNoneMatchValue === "*" ||
+        ifNoneMatchValue
+            ?.split(",")
+            .map(
+                (value) =>
+                    value.trim()
+            )
+            .includes(
+                asset.etag
+            );
+
+    const modifiedSinceMatches =
+        ifModifiedSince &&
+        Number.isFinite(
+            Date.parse(
+                ifModifiedSince
+            )
+        ) &&
+        Date.parse(
+            asset.lastModified
+        ) <=
+            Date.parse(
+                ifModifiedSince
+            );
+
+    const commonHeaders = {
+        "Cache-Control":
+            "public, max-age=0, must-revalidate",
+        ETag:
+            asset.etag,
+        "Last-Modified":
+            asset.lastModified,
+        "X-Content-Type-Options":
+            "nosniff",
+    };
+
+    if (
+        etagMatches ||
+        modifiedSinceMatches
+    ) {
+        res.writeHead(
+            304,
+            commonHeaders
+        );
+
+        res.end();
+
+        return;
+    }
+
+    res.writeHead(
+        200,
+        {
+            ...commonHeaders,
+            "Content-Type":
+                asset.contentType,
+            "Content-Length":
+                asset.content.length,
+        }
+    );
+
+    if (
+        req.method === "HEAD"
+    ) {
+        res.end();
+
+        return;
+    }
+
+    res.end(
+        asset.content
+    );
+}
+
+async function findFreePort(): Promise<number> {
+    const server =
+        net.createServer();
+
+    try {
+        await listen(
+            server,
+            0,
+            "127.0.0.1"
+        );
+
+        const address =
+            server.address();
+
+        if (
+            !address ||
+            typeof address === "string"
+        ) {
+            throw new Error(
+                "Could not determine an available TCP port."
+            );
+        }
+
+        return address.port;
+    } finally {
+        await closeServer(
+            server
+        );
+    }
+}
+
+function listen(
+    server: net.Server | http.Server,
+    port: number,
+    hostname: string
+): Promise<void> {
+    return new Promise(
+        (
+            resolve,
+            reject
+        ) => {
+            const onError =
+                (error: Error) => {
+                    server.off(
+                        "listening",
+                        onListening
+                    );
+                    reject(error);
+                };
+
+            const onListening =
+                () => {
+                    server.off(
+                        "error",
+                        onError
+                    );
+                    resolve();
+                };
+
+            server.once(
+                "error",
+                onError
+            );
+            server.once(
+                "listening",
+                onListening
+            );
+            server.listen(
+                port,
+                hostname
+            );
+        }
+    );
+}
+
+function closeServer(
+    server: net.Server | http.Server
+): Promise<void> {
+    if (
+        !server.listening
+    ) {
+        return Promise.resolve();
+    }
+
+    return new Promise(
+        (
+            resolve,
+            reject
+        ) => {
+            server.close(
+                (error) => {
+                    if (error) {
+                        reject(error);
+                        return;
+                    }
+
+                    resolve();
+                }
+            );
+        }
+    );
+}