@chidchanun/bcp 0.1.7 → 0.1.9

package/packages/server/src/index.ts

@@ -18,6 +18,10 @@ import {
     renderToString,
 } from "react-dom/server";
 
+import {
+    BcpLoaderDataProvider,
+} from "../../client/src/loader-data.js";
+
 import {
     assertNoPageApiConflicts,
     matchApiRoute,
@@ -41,7 +45,15 @@ import {
     DevHmrServer,
 } from "./dev-hmr.js";
 
-import { runWithRequestContext, applyResponseCookies } from "./request-context.ts";
+import {
+    attachLoaderDataToParams,
+    executePageLoader,
+} from "./page-loader.js";
+
+import {
+    runWithRequestContext,
+    applyResponseCookies,
+} from "./request-context.ts";
 
 /*
  * =====================================
@@ -71,7 +83,7 @@ interface FrameworkData {
 
     params: Record<
         string,
-        string
+        any
     >;
 }
 
@@ -501,124 +513,15 @@ export function createDevServer(
                         );
                     }
 
-                    /*
-                     * =================================
-                     * Server Components Import
-                     * =================================
-                     */
-
-                    const importStartedAt =
-                        performance.now();
-
-                    const Page =
-                        await importComponent(
-                            route.filePath,
-                            "Page",
-                            moduleVersion
-                        );
-
-                    const Layouts:
-                        ComponentType<any>[] =
-                        [];
-
-                    for (
-                        const layoutFile
-                        of route.layouts
-                    ) {
-                        const Layout =
-                            await importComponent(
-                                layoutFile,
-                                "Layout",
-                                moduleVersion
-                            );
-
-                        Layouts.push(
-                            Layout
-                        );
-                    }
-
-                    console.log(
-                        `Import: ${(performance.now() - importStartedAt).toFixed(2)}ms`
-                    );
-
-                    /*
-                     * =================================
-                     * React Tree
-                     * =================================
-                     */
-
-                    const renderStartedAt =
-                        performance.now();
-
-                    let element:
-                        ReactElement =
-                        createElement(
-                            Page,
-                            {
-                                params,
-                            }
-                        );
-
-                    for (
-                        let index =
-                            Layouts.length -
-                            1;
-
-                        index >= 0;
-
-                        index--
-                    ) {
-                        const Layout =
-                            Layouts[index];
-
-                        element =
-                            createElement(
-                                Layout,
-                                {
-                                    params,
-                                },
-                                element
-                            );
-                    }
-
-                    const content =
-                        renderToString(
-                            element
-                        );
-
-                    console.log(
-                        `SSR: ${(performance.now() - renderStartedAt).toFixed(2)}ms`
-                    );
-
-                    /*
-                     * =================================
-                     * Framework Data
-                     * =================================
-                     */
-
-                    const frameworkData:
-                        FrameworkData = {
-                        route:
-                            route.pathname,
-
-                        params,
-                    };
-
-                    const html =
-                        renderDocument(
-                            content,
-
-                            pageClientBundle
-                                .publicPath,
-
-                            frameworkData,
-
-                            clientVersion
-                        );
-
-                    sendHtml(
+                    await handlePageRoute(
+                        req,
                         res,
-                        html
+                        requestUrl,
+                        route,
+                        params,
+                        pageClientBundle,
+                        moduleVersion,
+                        clientVersion
                     );
                 } catch (error) {
                     console.error("");
@@ -1335,6 +1238,193 @@ export function createDevServer(
     };
 }
 
+/*
+ * =====================================
+ * Page Route
+ * =====================================
+ */
+
+async function handlePageRoute(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    requestUrl: URL,
+    route: Route,
+    params: Record<string, any>,
+    pageClientBundle: ClientBundle,
+    moduleVersion: number,
+    clientVersion: number
+): Promise<void> {
+    const request =
+        await createWebRequest(
+            req,
+            requestUrl
+        );
+
+    const response =
+        await runWithRequestContext(
+            request,
+            async () => {
+                const loaderExecution =
+                    await executePageLoader(
+                        route.filePath,
+                        params,
+                        requestUrl,
+                        moduleVersion
+                    );
+
+                if (
+                    loaderExecution.response
+                ) {
+                    return applyResponseCookies(
+                        loaderExecution.response
+                    );
+                }
+
+                const frameworkParams =
+                    attachLoaderDataToParams(
+                        params,
+                        loaderExecution
+                    );
+
+                const importStartedAt =
+                    performance.now();
+
+                const Page =
+                    await importComponent(
+                        route.filePath,
+                        "Page",
+                        moduleVersion
+                    );
+
+                const Layouts:
+                    ComponentType<any>[] = [];
+
+                for (
+                    const layoutFile
+                    of route.layouts
+                ) {
+                    const Layout =
+                        await importComponent(
+                            layoutFile,
+                            "Layout",
+                            moduleVersion
+                        );
+
+                    Layouts.push(
+                        Layout
+                    );
+                }
+
+                console.log(
+                    `Import: ${(performance.now() - importStartedAt).toFixed(2)}ms`
+                );
+
+                const renderStartedAt =
+                    performance.now();
+
+                let element:
+                    ReactElement =
+                    createElement(
+                        Page,
+                        {
+                            params:
+                                frameworkParams,
+                        }
+                    );
+
+                for (
+                    let index =
+                        Layouts.length - 1;
+                    index >= 0;
+                    index--
+                ) {
+                    const Layout =
+                        Layouts[index];
+
+                    element =
+                        createElement(
+                            Layout,
+                            {
+                                params:
+                                    frameworkParams,
+                            },
+                            element
+                        );
+                }
+
+                if (
+                    loaderExecution.hasLoader
+                ) {
+                    element =
+                        createElement(
+                            BcpLoaderDataProvider,
+                            {
+                                data:
+                                    loaderExecution.data,
+                            },
+                            element
+                        );
+                }
+
+                const content =
+                    renderToString(
+                        element
+                    );
+
+                console.log(
+                    `SSR: ${(performance.now() - renderStartedAt).toFixed(2)}ms`
+                );
+
+                const frameworkData:
+                    FrameworkData = {
+                    route:
+                        route.pathname,
+                    params:
+                        frameworkParams,
+                };
+
+                const html =
+                    renderDocument(
+                        content,
+                        pageClientBundle
+                            .publicPath,
+                        frameworkData,
+                        clientVersion
+                    );
+
+                return applyResponseCookies(
+                    new Response(
+                        html,
+                        {
+                            status:
+                                200,
+                            headers: {
+                                "Content-Type":
+                                    "text/html; charset=utf-8",
+                                "Cache-Control":
+                                    "no-store",
+                            },
+                        }
+                    )
+                );
+            },
+            {
+                remoteAddress:
+                    req.socket
+                        .remoteAddress ??
+                    null,
+            }
+        );
+
+    await sendWebResponse(
+        res,
+        response,
+        normalizeHttpMethod(
+            req.method
+        ) === "HEAD"
+    );
+}
+
 /*
  * =====================================
  * API Route

package/packages/server/src/navigation-payload.ts

@@ -28,9 +28,13 @@ import {
     type MetadataSource,
 } from "./metadata.js";
 
+import {
+    routeHasPageLoader,
+} from "./page-loader.js";
+
 export interface NavigationPayload {
     route: string;
-    params: Record<string, string>;
+    params: Record<string, unknown>;
     clientScript: string;
     clientImports: string[];
     title: string;
@@ -51,6 +55,8 @@ export interface NavigationPayloadOptions {
     title?: string;
 
     version?: number;
+
+    allowLoaderRoute?: boolean;
 }
 
 export async function resolveNavigationPayload(
@@ -81,6 +87,23 @@ export async function resolveNavigationPayload(
         return null;
     }
 
+    /*
+     * A loader-backed route must opt in here because this helper only knows
+     * how to build the route/navigation metadata. Step 2 navigation callers
+     * execute the loader in a request context first and then attach the fresh
+     * loader data to params before sending the payload. Document metadata
+     * resolution also opts in because the page loader has already run in the
+     * normal SSR request pipeline.
+     */
+    if (
+        !options.allowLoaderRoute &&
+        routeHasPageLoader(
+            match.route.filePath
+        )
+    ) {
+        return null;
+    }
+
     const loadingFile =
         findNearestLoadingFile(
             appDirectory,

package/packages/server/src/navigation-response.ts

@@ -0,0 +1,284 @@
+import * as http from "node:http";
+
+import {
+    appendVary,
+    compressDynamicContent,
+    selectContentEncoding,
+} from "./compression.js";
+
+export interface NavigationRedirectPayload {
+    redirect: {
+        location: string;
+        status: number;
+    };
+}
+
+export function createNavigationJsonResponse(
+    value: unknown,
+    init: ResponseInit = {}
+): Response {
+    const headers =
+        new Headers(
+            init.headers
+        );
+
+    if (
+        !headers.has(
+            "Cache-Control"
+        )
+    ) {
+        headers.set(
+            "Cache-Control",
+            "no-store"
+        );
+    }
+
+    if (
+        !headers.has(
+            "X-Content-Type-Options"
+        )
+    ) {
+        headers.set(
+            "X-Content-Type-Options",
+            "nosniff"
+        );
+    }
+
+    return Response.json(
+        value,
+        {
+            ...init,
+            headers,
+        }
+    );
+}
+
+export function createNavigationRedirectResponse(
+    response: Response
+): Response | null {
+    if (
+        !isRedirectStatus(
+            response.status
+        )
+    ) {
+        return null;
+    }
+
+    const location =
+        response.headers.get(
+            "location"
+        );
+
+    if (!location) {
+        return null;
+    }
+
+    const headers =
+        new Headers();
+
+    copySetCookieHeaders(
+        response.headers,
+        headers
+    );
+
+    return createNavigationJsonResponse(
+        {
+            redirect: {
+                location,
+                status:
+                    response.status,
+            },
+        } satisfies NavigationRedirectPayload,
+        {
+            status:
+                200,
+            headers,
+        }
+    );
+}
+
+export async function sendNavigationWebResponse(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    response: Response
+): Promise<void> {
+    res.statusCode =
+        response.status;
+
+    response.headers.forEach(
+        (
+            value,
+            key
+        ) => {
+            const normalized =
+                key.toLowerCase();
+
+            if (
+                normalized ===
+                    "set-cookie" ||
+                normalized ===
+                    "content-length" ||
+                normalized ===
+                    "content-encoding"
+            ) {
+                return;
+            }
+
+            res.setHeader(
+                key,
+                value
+            );
+        }
+    );
+
+    const cookies =
+        getSetCookieHeaders(
+            response.headers
+        );
+
+    if (
+        cookies.length > 0
+    ) {
+        res.setHeader(
+            "Set-Cookie",
+            cookies
+        );
+    }
+
+    if (
+        response.status === 204 ||
+        response.status === 304
+    ) {
+        res.end();
+        return;
+    }
+
+    const rawBody =
+        Buffer.from(
+            await response.arrayBuffer()
+        );
+
+    const contentType =
+        response.headers.get(
+            "content-type"
+        ) ??
+        "application/octet-stream";
+
+    const existingEncoding =
+        response.headers.get(
+            "content-encoding"
+        );
+
+    const encoding =
+        existingEncoding
+            ? null
+            : selectContentEncoding(
+                req,
+                contentType,
+                rawBody.length
+            );
+
+    const body =
+        existingEncoding
+            ? rawBody
+            : compressDynamicContent(
+                rawBody,
+                encoding
+            );
+
+    if (existingEncoding) {
+        res.setHeader(
+            "Content-Encoding",
+            existingEncoding
+        );
+    } else if (encoding) {
+        res.setHeader(
+            "Content-Encoding",
+            encoding
+        );
+        res.setHeader(
+            "Vary",
+            appendVary(
+                res.getHeader(
+                    "Vary"
+                )?.toString(),
+                "Accept-Encoding"
+            )
+        );
+    }
+
+    res.setHeader(
+        "Content-Length",
+        body.length
+    );
+
+    if (
+        (
+            req.method ??
+            "GET"
+        ).toUpperCase() ===
+        "HEAD"
+    ) {
+        res.end();
+        return;
+    }
+
+    res.end(
+        body
+    );
+}
+
+export function copySetCookieHeaders(
+    source: Headers,
+    target: Headers
+): void {
+    for (
+        const cookie
+        of getSetCookieHeaders(
+            source
+        )
+    ) {
+        target.append(
+            "Set-Cookie",
+            cookie
+        );
+    }
+}
+
+function getSetCookieHeaders(
+    headers: Headers
+): string[] {
+    const extended =
+        headers as Headers & {
+            getSetCookie?: () =>
+                string[];
+        };
+
+    const values =
+        extended.getSetCookie?.();
+
+    if (values) {
+        return values;
+    }
+
+    const fallback =
+        headers.get(
+            "set-cookie"
+        );
+
+    return fallback
+        ? [fallback]
+        : [];
+}
+
+function isRedirectStatus(
+    status: number
+): boolean {
+    return (
+        status === 301 ||
+        status === 302 ||
+        status === 303 ||
+        status === 307 ||
+        status === 308
+    );
+}