@chidchanun/bcp 0.1.0

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

@@ -0,0 +1,471 @@
+import * as http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import {
+    pathToFileURL,
+} from "node:url";
+
+import {
+    createElement,
+    type ComponentType,
+} from "react";
+
+import {
+    renderToStaticMarkup,
+} from "react-dom/server";
+
+import type {
+    ResolvedMetadata,
+} from "../../client/src/metadata.js";
+
+import {
+    matchRoute,
+    scanRoutes,
+} from "../../router/src/index.js";
+
+import {
+    resolveRouteMetadata,
+    type MetadataSource,
+} from "./metadata.js";
+
+export interface NavigationPayload {
+    route: string;
+    params: Record<string, string>;
+    clientScript: string;
+    clientImports: string[];
+    title: string;
+    metadata: ResolvedMetadata;
+    version: number;
+    loadingHtml: string | null;
+}
+
+export interface NavigationPayloadOptions {
+    resolveClientScript?: (
+        pathname: string
+    ) => string | null;
+
+    resolveClientImports?: (
+        pathname: string
+    ) => string[];
+
+    title?: string;
+
+    version?: number;
+}
+
+export async function resolveNavigationPayload(
+    rootDirectory: string,
+    pathname: string,
+    options: NavigationPayloadOptions = {}
+): Promise<NavigationPayload | null> {
+    const appDirectory =
+        path.join(
+            rootDirectory,
+            "app"
+        );
+
+    const routes =
+        scanRoutes(
+            appDirectory
+        );
+
+    const match =
+        matchRoute(
+            routes,
+            normalizePathname(
+                pathname
+            )
+        );
+
+    if (!match) {
+        return null;
+    }
+
+    const loadingFile =
+        findNearestLoadingFile(
+            appDirectory,
+            match.route.filePath
+        );
+
+    const loadingHtml =
+        loadingFile
+            ? await renderLoadingFile(
+                loadingFile,
+                match.params
+            )
+            : null;
+
+    const clientScript =
+        options.resolveClientScript
+            ? options.resolveClientScript(
+                match.route.pathname
+            )
+            : `/_bcp/client/${routeToBundleName(
+                match.route.pathname
+            )}`;
+
+    if (!clientScript) {
+        return null;
+    }
+
+    const metadata =
+        await resolveDevMetadata(
+            [
+                ...match.route.layouts,
+                match.route.filePath,
+            ],
+            match.params,
+            rootDirectory,
+            options.title ??
+                "BCP Framework"
+        );
+
+    return {
+        route:
+            match.route.pathname,
+        params:
+            match.params,
+        clientScript,
+        clientImports:
+            options.resolveClientImports?.(
+                match.route.pathname
+            ) ?? [],
+        title:
+            metadata.title,
+        metadata,
+        version:
+            options.version ??
+            Date.now(),
+        loadingHtml,
+    };
+}
+
+export function sendNavigationPayload(
+    res: http.ServerResponse,
+    payload: NavigationPayload,
+    statusCode = 200
+): void {
+    sendJson(
+        res,
+        statusCode,
+        payload
+    );
+}
+
+export function sendNavigationError(
+    res: http.ServerResponse,
+    statusCode: number,
+    message: string
+): void {
+    sendJson(
+        res,
+        statusCode,
+        {
+            error:
+                message,
+        }
+    );
+}
+
+async function resolveDevMetadata(
+    files: string[],
+    params: Record<string, string>,
+    rootDirectory: string,
+    fallbackTitle: string
+): Promise<ResolvedMetadata> {
+    const sources:
+        MetadataSource[] = [];
+
+    for (const filePath of files) {
+        const moduleUrl =
+            pathToFileURL(
+                filePath
+            );
+
+        moduleUrl.searchParams.set(
+            "bcp-metadata",
+            String(
+                Date.now()
+            )
+        );
+
+        const module =
+            await import(
+                moduleUrl.href
+            );
+
+        sources.push({
+            label:
+                path.relative(
+                    rootDirectory,
+                    filePath
+                )
+                    .replace(
+                        /\\/g,
+                        "/"
+                    ),
+            metadata:
+                module.metadata,
+            generateMetadata:
+                module.generateMetadata,
+        });
+    }
+
+    return resolveRouteMetadata(
+        sources,
+        params,
+        fallbackTitle
+    );
+}
+
+async function renderLoadingFile(
+    filePath: string,
+    params: Record<string, string>
+): Promise<string> {
+    const moduleUrl =
+        pathToFileURL(
+            filePath
+        );
+
+    moduleUrl.searchParams.set(
+        "bcp-loading",
+        String(
+            Date.now()
+        )
+    );
+
+    const loadingModule =
+        await import(
+            moduleUrl.href
+        );
+
+    const Loading =
+        loadingModule.default as
+        ComponentType<{
+            params: Record<string, string>;
+        }>;
+
+    if (
+        typeof Loading !==
+        "function"
+    ) {
+        throw new Error(
+            `BCP Framework: loading file "${filePath}" must export a default React component.`
+        );
+    }
+
+    return renderToStaticMarkup(
+        createElement(
+            Loading,
+            {
+                params,
+            }
+        )
+    );
+}
+
+function findNearestLoadingFile(
+    appDirectory: string,
+    pageFilePath: string
+): string | null {
+    const appRoot =
+        path.resolve(
+            appDirectory
+        );
+
+    let currentDirectory =
+        path.dirname(
+            path.resolve(
+                pageFilePath
+            )
+        );
+
+    while (true) {
+        const loadingFile =
+            findLoadingFile(
+                currentDirectory
+            );
+
+        if (loadingFile) {
+            return loadingFile;
+        }
+
+        if (
+            currentDirectory ===
+            appRoot
+        ) {
+            break;
+        }
+
+        const parent =
+            path.dirname(
+                currentDirectory
+            );
+
+        if (
+            parent ===
+            currentDirectory ||
+            !isInsideDirectory(
+                appRoot,
+                parent
+            )
+        ) {
+            break;
+        }
+
+        currentDirectory =
+            parent;
+    }
+
+    return null;
+}
+
+function findLoadingFile(
+    directory: string
+): string | null {
+    const tsxFile =
+        path.join(
+            directory,
+            "loading.tsx"
+        );
+
+    const tsFile =
+        path.join(
+            directory,
+            "loading.ts"
+        );
+
+    const hasTsx =
+        fs.existsSync(
+            tsxFile
+        );
+
+    const hasTs =
+        fs.existsSync(
+            tsFile
+        );
+
+    if (
+        hasTsx &&
+        hasTs
+    ) {
+        throw new Error(
+            `BCP Framework: both loading.ts and loading.tsx exist in "${directory}".`
+        );
+    }
+
+    if (hasTsx) {
+        return tsxFile;
+    }
+
+    if (hasTs) {
+        return tsFile;
+    }
+
+    return null;
+}
+
+function isInsideDirectory(
+    rootDirectory: string,
+    candidate: string
+): boolean {
+    const relative =
+        path.relative(
+            rootDirectory,
+            candidate
+        );
+
+    return (
+        relative === "" ||
+        (
+            !relative.startsWith("..") &&
+            !path.isAbsolute(
+                relative
+            )
+        )
+    );
+}
+
+function sendJson(
+    res: http.ServerResponse,
+    statusCode: number,
+    value: unknown
+): void {
+    const body =
+        JSON.stringify(
+            value
+        );
+
+    res.writeHead(
+        statusCode,
+        {
+            "Content-Type":
+                "application/json; charset=utf-8",
+            "Cache-Control":
+                "no-store",
+            "X-Content-Type-Options":
+                "nosniff",
+            "Content-Length":
+                Buffer.byteLength(
+                    body
+                ),
+        }
+    );
+
+    res.end(
+        body
+    );
+}
+
+function routeToBundleName(
+    pathname: string
+): string {
+    if (pathname === "/") {
+        return "index.js";
+    }
+
+    const name =
+        pathname
+            .slice(1)
+            .split("/")
+            .map(
+                sanitizeSegment
+            )
+            .join("__");
+
+    return `${name}.js`;
+}
+
+function sanitizeSegment(
+    segment: string
+): string {
+    const dynamicMatch =
+        /^\[([A-Za-z_][A-Za-z0-9_]*)\]$/.exec(
+            segment
+        );
+
+    if (dynamicMatch) {
+        return `param-${dynamicMatch[1]}`;
+    }
+
+    return segment.replace(
+        /[^A-Za-z0-9._-]/g,
+        "_"
+    );
+}
+
+function normalizePathname(
+    pathname: string
+): string {
+    if (
+        pathname.length > 1 &&
+        pathname.endsWith("/")
+    ) {
+        return pathname.slice(
+            0,
+            -1
+        );
+    }
+
+    return pathname || "/";
+}