@chidchanun/bcp 0.1.8 → 0.1.10

package/packages/server/src/dev-navigation-target.ts

@@ -0,0 +1,188 @@
+import * as http from "node:http";
+import path from "node:path";
+
+import {
+    matchRoute,
+    scanRoutes,
+} from "../../router/src/index.js";
+
+import {
+    resolveNavigationPayload,
+} from "./navigation-payload.js";
+
+import {
+    attachLoaderDataToParams,
+    executePageLoader,
+} from "./page-loader.js";
+
+import {
+    createNavigationJsonResponse,
+    createNavigationRedirectResponse,
+} from "./navigation-response.js";
+
+import {
+    applyResponseCookies,
+    runWithRequestContext,
+} from "./request-context.js";
+
+export async function createDevNavigationTargetResponse(
+    req: http.IncomingMessage,
+    rootDirectory: string,
+    target: URL
+): Promise<Response | null> {
+    const routes =
+        scanRoutes(
+            path.join(
+                rootDirectory,
+                "app"
+            )
+        );
+
+    const match =
+        matchRoute(
+            routes,
+            normalizePathname(
+                target.pathname
+            )
+        );
+
+    if (!match) {
+        return null;
+    }
+
+    const request =
+        createNavigationRequest(
+            req,
+            target
+        );
+
+    return runWithRequestContext(
+        request,
+        async () => {
+            const loaderExecution =
+                await executePageLoader(
+                    match.route.filePath,
+                    match.params,
+                    target,
+                    Date.now()
+                );
+
+            if (
+                loaderExecution.response
+            ) {
+                const loaderResponse =
+                    applyResponseCookies(
+                        loaderExecution.response
+                    );
+
+                return (
+                    createNavigationRedirectResponse(
+                        loaderResponse
+                    ) ??
+                    loaderResponse
+                );
+            }
+
+            const payload =
+                await resolveNavigationPayload(
+                    rootDirectory,
+                    target.pathname,
+                    {
+                        allowLoaderRoute:
+                            true,
+                    }
+                );
+
+            if (!payload) {
+                return createNavigationJsonResponse(
+                    {
+                        error:
+                            "Route not found.",
+                    },
+                    {
+                        status:
+                            404,
+                    }
+                );
+            }
+
+            payload.params =
+                attachLoaderDataToParams(
+                    match.params,
+                    loaderExecution
+                );
+
+            return applyResponseCookies(
+                createNavigationJsonResponse(
+                    payload
+                )
+            );
+        },
+        {
+            remoteAddress:
+                req.socket
+                    .remoteAddress ??
+                null,
+        }
+    );
+}
+
+function createNavigationRequest(
+    req: http.IncomingMessage,
+    target: URL
+): Request {
+    const headers =
+        new Headers();
+
+    for (
+        const [key, value]
+        of Object.entries(
+            req.headers
+        )
+    ) {
+        if (value === undefined) {
+            continue;
+        }
+
+        if (Array.isArray(value)) {
+            for (const item of value) {
+                headers.append(
+                    key,
+                    item
+                );
+            }
+        } else {
+            headers.set(
+                key,
+                value
+            );
+        }
+    }
+
+    return new Request(
+        target,
+        {
+            method:
+                "GET",
+            headers,
+        }
+    );
+}
+
+function normalizePathname(
+    pathname: string
+): string {
+    if (
+        pathname.length > 1 &&
+        pathname.endsWith(
+            "/"
+        )
+    ) {
+        return pathname.slice(
+            0,
+            -1
+        );
+    }
+
+    return pathname || "/";
+}

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,