@chidchanun/bcp 0.1.0

package/packages/bundler/src/production.ts

@@ -0,0 +1,974 @@
+import fs from "node:fs";
+import path from "node:path";
+import {
+    brotliCompressSync,
+    constants,
+    gzipSync,
+} from "node:zlib";
+
+import {
+    build,
+    type Metafile,
+} from "esbuild";
+
+import {
+    createClientEnvironmentDefines,
+} from "../../env/src/index.js";
+
+import type {
+    Route,
+} from "../../router/src/index.js";
+
+import {
+    findNearestSpecialFile,
+} from "./special-files.js";
+
+export interface ProductionAssetSize {
+    raw: number;
+    gzip: number;
+    brotli: number;
+}
+
+export interface ProductionAssetInfo {
+    path: string;
+    size: ProductionAssetSize;
+}
+
+export interface ProductionRouteAsset {
+    entry: string;
+    imports: string[];
+    size: ProductionAssetSize;
+}
+
+export interface ProductionBuildManifest {
+    version: number;
+    buildId: string;
+    builtAt: string;
+    routes: Record<
+        string,
+        ProductionRouteAsset
+    >;
+    assets: ProductionAssetInfo[];
+}
+
+interface OutputNode {
+    absolutePath: string;
+    publicPath: string;
+    metadata:
+        Metafile["outputs"][string];
+}
+
+const PRECOMPRESS_MIN_BYTES =
+    1024;
+
+export async function buildProductionClient(
+    routes: Route[],
+    rootDirectory: string
+): Promise<ProductionBuildManifest> {
+    const buildRoot =
+        path.join(
+            rootDirectory,
+            ".bcp-framework",
+            "build"
+        );
+
+    const clientDirectory =
+        path.join(
+            buildRoot,
+            "client"
+        );
+
+    const entryDirectory =
+        path.join(
+            buildRoot,
+            ".entries"
+        );
+
+    fs.rmSync(
+        buildRoot,
+        {
+            recursive: true,
+            force: true,
+        }
+    );
+
+    fs.mkdirSync(
+        entryDirectory,
+        {
+            recursive: true,
+        }
+    );
+
+    fs.mkdirSync(
+        clientDirectory,
+        {
+            recursive: true,
+        }
+    );
+
+    const entryPoints:
+        Record<string, string> = {};
+
+    const entryToRoute =
+        new Map<string, string>();
+
+    for (
+        const route
+        of routes
+    ) {
+        const entryName =
+            routeToEntryName(
+                route.pathname
+            );
+
+        const entryFile =
+            path.join(
+                entryDirectory,
+                `${entryName}.mjs`
+            );
+
+        fs.writeFileSync(
+            entryFile,
+            createProductionClientEntry(
+                route,
+                entryDirectory
+            ),
+            "utf8"
+        );
+
+        entryPoints[
+            entryName
+        ] =
+            entryFile;
+
+        entryToRoute.set(
+            normalizePath(
+                entryFile
+            ),
+            route.pathname
+        );
+    }
+
+    const result =
+        await build({
+            absWorkingDir:
+                rootDirectory,
+            entryPoints,
+            outdir:
+                clientDirectory,
+            bundle:
+                true,
+            splitting:
+                true,
+            format:
+                "esm",
+            platform:
+                "browser",
+            target: [
+                "es2022",
+            ],
+            minify:
+                process.env
+                    .BCP_BUILD_MINIFY !==
+                "0",
+            treeShaking:
+                true,
+            sourcemap:
+                process.env
+                    .BCP_BUILD_SOURCE_MAPS ===
+                "1",
+            metafile:
+                true,
+            jsx:
+                "automatic",
+            entryNames:
+                "routes/[name]-[hash]",
+            chunkNames:
+                "chunks/[name]-[hash]",
+            assetNames:
+                "assets/[name]-[hash]",
+            define:
+                createClientEnvironmentDefines(
+                    "production"
+                ),
+            legalComments:
+                "none",
+            logLevel:
+                "silent",
+        });
+
+    if (!result.metafile) {
+        throw new Error(
+            "BCP Framework: esbuild did not return production metadata."
+        );
+    }
+
+    const outputNodes =
+        createOutputNodeMap(
+            result.metafile,
+            rootDirectory,
+            clientDirectory
+        );
+
+    const assetInfoByPath =
+        new Map<
+            string,
+            ProductionAssetInfo
+        >();
+
+    for (
+        const node
+        of outputNodes.values()
+    ) {
+        const assetInfo =
+            precompressOutput(
+                node.absolutePath,
+                node.publicPath
+            );
+
+        assetInfoByPath.set(
+            node.publicPath,
+            assetInfo
+        );
+    }
+
+    const routeManifest:
+        Record<
+            string,
+            ProductionRouteAsset
+        > = {};
+
+    for (
+        const node
+        of outputNodes.values()
+    ) {
+        if (
+            !node.metadata.entryPoint
+        ) {
+            continue;
+        }
+
+        const absoluteEntry =
+            path.isAbsolute(
+                node.metadata.entryPoint
+            )
+                ? node.metadata.entryPoint
+                : path.resolve(
+                    rootDirectory,
+                    node.metadata.entryPoint
+                );
+
+        const routePathname =
+            entryToRoute.get(
+                normalizePath(
+                    absoluteEntry
+                )
+            );
+
+        if (!routePathname) {
+            continue;
+        }
+
+        const imports =
+            collectOutputImports(
+                node,
+                outputNodes,
+                rootDirectory
+            );
+
+        const routeAssetPaths = [
+            node.publicPath,
+            ...imports,
+        ];
+
+        routeManifest[
+            routePathname
+        ] = {
+            entry:
+                node.publicPath,
+            imports,
+            size:
+                sumAssetSizes(
+                    routeAssetPaths,
+                    assetInfoByPath
+                ),
+        };
+    }
+
+    for (
+        const route
+        of routes
+    ) {
+        if (
+            !routeManifest[
+                route.pathname
+            ]
+        ) {
+            throw new Error(
+                `BCP Framework: production client output was not found for route "${route.pathname}".`
+            );
+        }
+    }
+
+    const version =
+        Date.now();
+
+    const manifest:
+        ProductionBuildManifest = {
+        version,
+        buildId:
+            version.toString(36),
+        builtAt:
+            new Date(
+                version
+            ).toISOString(),
+        routes:
+            routeManifest,
+        assets:
+            Array.from(
+                assetInfoByPath.values()
+            ).sort(
+                (left, right) =>
+                    left.path.localeCompare(
+                        right.path
+                    )
+            ),
+    };
+
+    fs.writeFileSync(
+        path.join(
+            buildRoot,
+            "manifest.json"
+        ),
+        JSON.stringify(
+            manifest,
+            null,
+            2
+        ),
+        "utf8"
+    );
+
+    fs.rmSync(
+        entryDirectory,
+        {
+            recursive: true,
+            force: true,
+        }
+    );
+
+    return manifest;
+}
+
+function createOutputNodeMap(
+    metafile: Metafile,
+    rootDirectory: string,
+    clientDirectory: string
+): Map<string, OutputNode> {
+    const nodes =
+        new Map<string, OutputNode>();
+
+    for (
+        const [
+            outputName,
+            metadata,
+        ]
+        of Object.entries(
+            metafile.outputs
+        )
+    ) {
+        const absolutePath =
+            path.isAbsolute(
+                outputName
+            )
+                ? outputName
+                : path.resolve(
+                    rootDirectory,
+                    outputName
+                );
+
+        const relativePath =
+            path.relative(
+                clientDirectory,
+                absolutePath
+            );
+
+        if (
+            relativePath.startsWith(
+                ".."
+            ) ||
+            path.isAbsolute(
+                relativePath
+            )
+        ) {
+            continue;
+        }
+
+        const publicPath =
+            `/_bcp/client/${relativePath.replace(
+                /\\/g,
+                "/"
+            )}`;
+
+        nodes.set(
+            normalizePath(
+                absolutePath
+            ),
+            {
+                absolutePath,
+                publicPath,
+                metadata,
+            }
+        );
+    }
+
+    return nodes;
+}
+
+function collectOutputImports(
+    entryNode: OutputNode,
+    nodes: Map<string, OutputNode>,
+    rootDirectory: string
+): string[] {
+    const imports =
+        new Set<string>();
+
+    const visited =
+        new Set<string>();
+
+    function visit(
+        node: OutputNode
+    ): void {
+        const key =
+            normalizePath(
+                node.absolutePath
+            );
+
+        if (
+            visited.has(
+                key
+            )
+        ) {
+            return;
+        }
+
+        visited.add(
+            key
+        );
+
+        for (
+            const imported
+            of node.metadata.imports
+        ) {
+            if (
+                imported.external
+            ) {
+                continue;
+            }
+
+            const target =
+                resolveImportedOutput(
+                    node,
+                    imported.path,
+                    nodes,
+                    rootDirectory
+                );
+
+            if (!target) {
+                continue;
+            }
+
+            if (
+                target.publicPath !==
+                    entryNode.publicPath &&
+                isModulePreloadAsset(
+                    target.publicPath
+                )
+            ) {
+                imports.add(
+                    target.publicPath
+                );
+            }
+
+            visit(
+                target
+            );
+        }
+    }
+
+    visit(
+        entryNode
+    );
+
+    return Array.from(
+        imports
+    ).sort();
+}
+
+function resolveImportedOutput(
+    source: OutputNode,
+    importPath: string,
+    nodes: Map<string, OutputNode>,
+    rootDirectory: string
+): OutputNode | null {
+    const candidates =
+        path.isAbsolute(
+            importPath
+        )
+            ? [
+                importPath,
+            ]
+            : [
+                path.resolve(
+                    rootDirectory,
+                    importPath
+                ),
+                path.resolve(
+                    path.dirname(
+                        source.absolutePath
+                    ),
+                    importPath
+                ),
+            ];
+
+    for (
+        const candidate
+        of candidates
+    ) {
+        const node =
+            nodes.get(
+                normalizePath(
+                    candidate
+                )
+            );
+
+        if (node) {
+            return node;
+        }
+    }
+
+    return null;
+}
+
+function precompressOutput(
+    absolutePath: string,
+    publicPath: string
+): ProductionAssetInfo {
+    const content =
+        fs.readFileSync(
+            absolutePath
+        );
+
+    const raw =
+        content.length;
+
+    let gzip = raw;
+    let brotli = raw;
+
+    if (
+        process.env
+            .BCP_COMPRESSION !==
+            "0" &&
+        raw >=
+            PRECOMPRESS_MIN_BYTES &&
+        isPrecompressibleAsset(
+            absolutePath
+        )
+    ) {
+        const gzipContent =
+            gzipSync(
+                content,
+                {
+                    level: 9,
+                }
+            );
+
+        if (
+            gzipContent.length < raw
+        ) {
+            fs.writeFileSync(
+                `${absolutePath}.gz`,
+                gzipContent
+            );
+
+            gzip =
+                gzipContent.length;
+        }
+
+        const brotliContent =
+            brotliCompressSync(
+                content,
+                {
+                    params: {
+                        [constants.BROTLI_PARAM_QUALITY]:
+                            8,
+                    },
+                }
+            );
+
+        if (
+            brotliContent.length < raw
+        ) {
+            fs.writeFileSync(
+                `${absolutePath}.br`,
+                brotliContent
+            );
+
+            brotli =
+                brotliContent.length;
+        }
+    }
+
+    return {
+        path:
+            publicPath,
+        size: {
+            raw,
+            gzip,
+            brotli,
+        },
+    };
+}
+
+function sumAssetSizes(
+    assetPaths: string[],
+    assets: Map<
+        string,
+        ProductionAssetInfo
+    >
+): ProductionAssetSize {
+    const total:
+        ProductionAssetSize = {
+        raw: 0,
+        gzip: 0,
+        brotli: 0,
+    };
+
+    for (
+        const assetPath
+        of assetPaths
+    ) {
+        const asset =
+            assets.get(
+                assetPath
+            );
+
+        if (!asset) {
+            continue;
+        }
+
+        total.raw +=
+            asset.size.raw;
+        total.gzip +=
+            asset.size.gzip;
+        total.brotli +=
+            asset.size.brotli;
+    }
+
+    return total;
+}
+
+function isModulePreloadAsset(
+    publicPath: string
+): boolean {
+    return /\.(?:m?js)$/i.test(
+        publicPath
+    );
+}
+
+function isPrecompressibleAsset(
+    filePath: string
+): boolean {
+    return /\.(?:m?js|css|json|html?|svg|txt|xml)$/i.test(
+        filePath
+    );
+}
+
+function createProductionClientEntry(
+    route: Route,
+    entryDirectory: string
+): string {
+    const pageImport =
+        toImportSpecifier(
+            entryDirectory,
+            route.filePath
+        );
+
+    const appDirectory =
+        resolveRouteAppDirectory(
+            route
+        );
+
+    const errorFile =
+        findNearestSpecialFile(
+            appDirectory,
+            route.filePath,
+            "error"
+        );
+
+    const notFoundFile =
+        findNearestSpecialFile(
+            appDirectory,
+            route.filePath,
+            "not-found"
+        );
+
+    const errorImport =
+        errorFile
+            ? `import ErrorComponent from ${JSON.stringify(
+                toImportSpecifier(
+                    entryDirectory,
+                    errorFile
+                )
+            )};`
+            : "const ErrorComponent = null;";
+
+    const notFoundImport =
+        notFoundFile
+            ? `import NotFoundComponent from ${JSON.stringify(
+                toImportSpecifier(
+                    entryDirectory,
+                    notFoundFile
+                )
+            )};`
+            : "const NotFoundComponent = null;";
+
+    const layoutImports =
+        route.layouts
+            .map(
+                (
+                    layoutFile,
+                    index
+                ) =>
+                    `import Layout${index} from ${JSON.stringify(
+                        toImportSpecifier(
+                            entryDirectory,
+                            layoutFile
+                        )
+                    )};`
+            )
+            .join("\n");
+
+    const layoutNames =
+        route.layouts
+            .map(
+                (
+                    _,
+                    index
+                ) =>
+                    `Layout${index}`
+            )
+            .join(", ");
+
+    return `
+import {
+  BcpRouteErrorBoundary
+} from "bcp";
+
+import {
+  createElement
+} from "react";
+
+import {
+  hydrateRoot
+} from "react-dom/client";
+
+import Page from ${JSON.stringify(pageImport)};
+
+${errorImport}
+${notFoundImport}
+${layoutImports}
+
+const rootElement =
+  document.getElementById(
+    "root"
+  );
+
+if (!rootElement) {
+  throw new Error(
+    "BCP Framework: root element was not found."
+  );
+}
+
+const dataElement =
+  document.getElementById(
+    "__BCP_DATA__"
+  );
+
+if (!dataElement) {
+  throw new Error(
+    "BCP Framework: framework data was not found."
+  );
+}
+
+const data =
+  JSON.parse(
+    dataElement.textContent ||
+    "{}"
+  );
+
+const params =
+  data.params || {};
+
+const layouts = [
+  ${layoutNames}
+];
+
+let tree =
+  createElement(
+    Page,
+    {
+      params
+    }
+  );
+
+tree =
+  createElement(
+    BcpRouteErrorBoundary,
+    {
+      ErrorComponent,
+      NotFoundComponent
+    },
+    tree
+  );
+
+for (
+  let index =
+    layouts.length - 1;
+
+  index >= 0;
+
+  index--
+) {
+  const Layout =
+    layouts[index];
+
+  tree =
+    createElement(
+      Layout,
+      {
+        params
+      },
+      tree
+    );
+}
+
+if (
+  globalThis.__BCP_REACT_ROOT__
+) {
+  globalThis.__BCP_REACT_ROOT__
+    .render(tree);
+} else {
+  globalThis.__BCP_REACT_ROOT__ =
+    hydrateRoot(
+      rootElement,
+      tree
+    );
+}
+    `.trim();
+}
+
+function resolveRouteAppDirectory(
+    route: Route
+): string {
+    let directory =
+        path.dirname(
+            route.filePath
+        );
+
+    for (
+        let index = 0;
+        index <
+            route.segments.length;
+        index++
+    ) {
+        directory =
+            path.dirname(
+                directory
+            );
+    }
+
+    return directory;
+}
+
+function toImportSpecifier(
+    fromDirectory: string,
+    filePath: string
+): string {
+    let relative =
+        path.relative(
+            fromDirectory,
+            filePath
+        )
+            .replace(
+                /\\/g,
+                "/"
+            );
+
+    if (
+        !relative.startsWith(".")
+    ) {
+        relative =
+            `./${relative}`;
+    }
+
+    return relative;
+}
+
+function routeToEntryName(
+    pathname: string
+): string {
+    if (
+        pathname === "/"
+    ) {
+        return "index";
+    }
+
+    return pathname
+        .slice(1)
+        .split("/")
+        .map(
+            sanitizeSegment
+        )
+        .join("__");
+}
+
+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 normalizePath(
+    filePath: string
+): string {
+    let normalized =
+        path.normalize(
+            path.resolve(
+                filePath
+            )
+        );
+
+    if (
+        process.platform ===
+        "win32"
+    ) {
+        normalized =
+            normalized.toLowerCase();
+    }
+
+    return normalized;
+}