@chidchanun/bcp 0.1.0

package/packages/bundler/src/module-graph.ts

@@ -0,0 +1,317 @@
+import path from "node:path";
+import type { Metafile } from "esbuild";
+
+export interface ModuleNode {
+  id: string;
+  bytes: number;
+
+  /**
+   * Modules ที่ module นี้ import
+   */
+  dependencies: Set<string>;
+
+  /**
+   * Modules ที่ import module นี้
+   */
+  importers: Set<string>;
+}
+
+export interface ModuleGraphStats {
+  modules: number;
+  edges: number;
+}
+
+export class ModuleGraph {
+  private readonly rootDir: string;
+
+  private nodes = new Map<string, ModuleNode>();
+
+  constructor(rootDir: string) {
+    this.rootDir = path.resolve(rootDir);
+  }
+
+  /**
+   * Update graph จาก esbuild metafile
+   */
+  update(metafile: Metafile): void {
+    const nextNodes = new Map<string, ModuleNode>();
+
+    /**
+     * ----------------------------------------
+     * 1. Create all nodes
+     * ----------------------------------------
+     */
+
+    for (const [inputPath, input] of Object.entries(metafile.inputs)) {
+      const id = this.normalizeInputPath(inputPath);
+
+      nextNodes.set(id, {
+        id,
+        bytes: input.bytes,
+        dependencies: new Set<string>(),
+        importers: new Set<string>(),
+      });
+    }
+
+    /**
+     * ----------------------------------------
+     * 2. Build dependency graph
+     * ----------------------------------------
+     */
+
+    for (const [inputPath, input] of Object.entries(metafile.inputs)) {
+      const importer = this.normalizeInputPath(inputPath);
+
+      const importerNode = nextNodes.get(importer);
+
+      if (!importerNode) {
+        continue;
+      }
+
+      for (const imported of input.imports) {
+        /**
+         * External module ไม่อยู่ใน graph ของ application
+         */
+        if (imported.external) {
+          continue;
+        }
+
+        const dependency = this.resolveDependency(
+          importer,
+          imported.path,
+          nextNodes,
+        );
+
+        if (!dependency) {
+          continue;
+        }
+
+        importerNode.dependencies.add(dependency);
+
+        const dependencyNode = nextNodes.get(dependency);
+
+        if (dependencyNode) {
+          dependencyNode.importers.add(importer);
+        }
+      }
+    }
+
+    this.nodes = nextNodes;
+  }
+
+  /**
+   * หา module ที่ได้รับผลกระทบจาก file ที่เปลี่ยน
+   *
+   * ตัวอย่าง:
+   *
+   * page.tsx
+   *    ↑
+   * layout.tsx
+   *    ↑
+   * app.tsx
+   *
+   * ถ้า page.tsx เปลี่ยน
+   * affected จะเป็น:
+   *
+   * page.tsx
+   * layout.tsx
+   * app.tsx
+   */
+  getAffectedModules(filePath: string): string[] {
+    const start = this.normalizeAbsolutePath(filePath);
+
+    if (!this.nodes.has(start)) {
+      return [];
+    }
+
+    const visited = new Set<string>();
+    const queue: string[] = [start];
+
+    while (queue.length > 0) {
+      const current = queue.shift();
+
+      if (!current) {
+        continue;
+      }
+
+      if (visited.has(current)) {
+        continue;
+      }
+
+      visited.add(current);
+
+      const node = this.nodes.get(current);
+
+      if (!node) {
+        continue;
+      }
+
+      for (const importer of node.importers) {
+        if (!visited.has(importer)) {
+          queue.push(importer);
+        }
+      }
+    }
+
+    return [...visited];
+  }
+
+  /**
+   * ตรวจสอบว่ามี module นี้หรือไม่
+   */
+  has(filePath: string): boolean {
+    return this.nodes.has(this.normalizeAbsolutePath(filePath));
+  }
+
+  /**
+   * ดึง module
+   */
+  get(filePath: string): ModuleNode | undefined {
+    return this.nodes.get(this.normalizeAbsolutePath(filePath));
+  }
+
+  /**
+   * ดึงทุก module
+   */
+  getAll(): ModuleNode[] {
+    return [...this.nodes.values()];
+  }
+
+  /**
+   * จำนวน module / dependency
+   */
+  getStats(): ModuleGraphStats {
+    let edges = 0;
+
+    for (const node of this.nodes.values()) {
+      edges += node.dependencies.size;
+    }
+
+    return {
+      modules: this.nodes.size,
+      edges,
+    };
+  }
+
+  /**
+   * Debug graph
+   */
+  print(): void {
+    console.log("\n[BCP] Module Graph");
+
+    for (const node of this.nodes.values()) {
+      const relative = path.relative(this.rootDir, node.id);
+
+      console.log(`  ${relative}`);
+
+      for (const dependency of node.dependencies) {
+        const dependencyRelative = path.relative(
+          this.rootDir,
+          dependency,
+        );
+
+        console.log(`    └─ ${dependencyRelative}`);
+      }
+    }
+
+    const stats = this.getStats();
+
+    console.log(
+      `[BCP] ${stats.modules} modules / ${stats.edges} dependencies\n`,
+    );
+  }
+
+  /**
+   * Normalize path จาก metafile
+   */
+  private normalizeInputPath(inputPath: string): string {
+    if (path.isAbsolute(inputPath)) {
+      return this.normalizeAbsolutePath(inputPath);
+    }
+
+    return this.normalizeAbsolutePath(
+      path.resolve(this.rootDir, inputPath),
+    );
+  }
+
+  /**
+   * Normalize absolute path
+   */
+  private normalizeAbsolutePath(filePath: string): string {
+    return path.normalize(path.resolve(filePath));
+  }
+
+  /**
+   * Resolve import จาก metafile
+   */
+  private resolveDependency(
+    importer: string,
+    importedPath: string,
+    nodes: Map<string, ModuleNode>,
+  ): string | undefined {
+    const normalizedImported = importedPath.replaceAll("/", path.sep);
+
+    const candidates: string[] = [];
+
+    /**
+     * absolute
+     */
+    if (path.isAbsolute(normalizedImported)) {
+      candidates.push(
+        this.normalizeAbsolutePath(normalizedImported),
+      );
+    }
+
+    /**
+     * relative to importer
+     */
+    candidates.push(
+      this.normalizeAbsolutePath(
+        path.resolve(
+          path.dirname(importer),
+          normalizedImported,
+        ),
+      ),
+    );
+
+    /**
+     * relative to project root
+     */
+    candidates.push(
+      this.normalizeAbsolutePath(
+        path.resolve(
+          this.rootDir,
+          normalizedImported,
+        ),
+      ),
+    );
+
+    for (const candidate of candidates) {
+      if (nodes.has(candidate)) {
+        return candidate;
+      }
+    }
+
+    /**
+     * metafile บางกรณีใช้ path relative
+     */
+    const normalizedRelative = path
+      .normalize(normalizedImported);
+
+    for (const nodePath of nodes.keys()) {
+      const relative = path
+        .relative(this.rootDir, nodePath)
+        .split(path.sep)
+        .join("/");
+
+      if (
+        relative === normalizedImported ||
+        path.normalize(relative) === normalizedRelative
+      ) {
+        return nodePath;
+      }
+    }
+
+    return undefined;
+  }
+}

package/packages/bundler/src/partial-hydration.ts

@@ -0,0 +1,414 @@
+import crypto from "node:crypto";
+import fs from "node:fs";
+import path from "node:path";
+
+import type {
+    Route,
+} from "../../router/src/index.js";
+
+import {
+    buildClientIslands,
+    type ProductionIslandAsset,
+} from "./client-islands.js";
+
+import {
+    buildProductionClient as buildBaseProductionClient,
+    type ProductionAssetInfo,
+    type ProductionBuildManifest,
+} from "./production.js";
+
+export type HydrationMode =
+    | "full"
+    | "none";
+
+export interface PartialHydrationBuildManifest
+    extends ProductionBuildManifest {
+    hydration: {
+        serverOnlyRoutes: string[];
+    };
+    islands: Record<
+        string,
+        ProductionIslandAsset
+    >;
+}
+
+export async function buildProductionClient(
+    routes: Route[],
+    rootDirectory: string
+): Promise<PartialHydrationBuildManifest> {
+    const manifest =
+        await buildBaseProductionClient(
+            routes,
+            rootDirectory
+        );
+
+    const islandsEnabled =
+        process.env
+            .BCP_EXPERIMENTAL_ISLANDS !==
+        "0";
+
+    const partialHydrationEnabled =
+        process.env
+            .BCP_EXPERIMENTAL_PARTIAL_HYDRATION !==
+        "0";
+
+    const islands =
+        islandsEnabled
+            ? await buildClientIslands(
+                manifest,
+                rootDirectory
+            )
+            : {};
+
+    const serverOnlyRoutes =
+        partialHydrationEnabled
+            ? applyPartialHydration(
+                manifest,
+                routes,
+                rootDirectory
+            )
+            : [];
+
+    const result:
+        PartialHydrationBuildManifest = {
+        ...manifest,
+        hydration: {
+            serverOnlyRoutes,
+        },
+        islands,
+    };
+
+    writeManifest(
+        result,
+        rootDirectory
+    );
+
+    return result;
+}
+
+function applyPartialHydration(
+    manifest: ProductionBuildManifest,
+    routes: Route[],
+    rootDirectory: string
+): string[] {
+    const buildRoot =
+        path.join(
+            rootDirectory,
+            ".bcp-framework",
+            "build"
+        );
+
+    const clientDirectory =
+        path.join(
+            buildRoot,
+            "client"
+        );
+
+    const serverOnlyRoutes:
+        string[] = [];
+
+    for (
+        const route
+        of routes
+    ) {
+        const hydration =
+            readHydrationMode(
+                route.filePath
+            );
+
+        if (
+            hydration !== "none"
+        ) {
+            continue;
+        }
+
+        const current =
+            manifest.routes[
+                route.pathname
+            ];
+
+        if (!current) {
+            throw new Error(
+                `BCP Framework: production client entry missing for route "${route.pathname}".`
+            );
+        }
+
+        removeUnusedRouteEntry(
+            current.entry,
+            manifest,
+            clientDirectory
+        );
+
+        const staticRuntime =
+            createServerOnlyRuntime();
+
+        const hash =
+            crypto
+                .createHash("sha256")
+                .update(
+                    route.pathname
+                )
+                .update("\0")
+                .update(
+                    staticRuntime
+                )
+                .digest("hex")
+                .slice(0, 10)
+                .toUpperCase();
+
+        const fileName =
+            `${routeToEntryName(
+                route.pathname
+            )}-server-only-${hash}.js`;
+
+        const relativePath =
+            path.join(
+                "routes",
+                fileName
+            );
+
+        const outputPath =
+            path.join(
+                clientDirectory,
+                relativePath
+            );
+
+        fs.mkdirSync(
+            path.dirname(
+                outputPath
+            ),
+            {
+                recursive: true,
+            }
+        );
+
+        fs.writeFileSync(
+            outputPath,
+            staticRuntime,
+            "utf8"
+        );
+
+        const publicPath =
+            `/_bcp/client/${relativePath.replace(
+                /\\/g,
+                "/"
+            )}`;
+
+        const size =
+            Buffer.byteLength(
+                staticRuntime
+            );
+
+        manifest.routes[
+            route.pathname
+        ] = {
+            entry:
+                publicPath,
+            imports: [],
+            size: {
+                raw:
+                    size,
+                gzip:
+                    size,
+                brotli:
+                    size,
+            },
+        };
+
+        manifest.assets.push({
+            path:
+                publicPath,
+            size: {
+                raw:
+                    size,
+                gzip:
+                    size,
+                brotli:
+                    size,
+            },
+        });
+
+        serverOnlyRoutes.push(
+            route.pathname
+        );
+    }
+
+    manifest.assets.sort(
+        (left, right) =>
+            left.path.localeCompare(
+                right.path
+            )
+    );
+
+    return serverOnlyRoutes.sort();
+}
+
+function writeManifest(
+    manifest: PartialHydrationBuildManifest,
+    rootDirectory: string
+): void {
+    const manifestPath =
+        path.join(
+            rootDirectory,
+            ".bcp-framework",
+            "build",
+            "manifest.json"
+        );
+
+    fs.writeFileSync(
+        manifestPath,
+        JSON.stringify(
+            manifest,
+            null,
+            2
+        ),
+        "utf8"
+    );
+}
+
+function readHydrationMode(
+    filePath: string
+): HydrationMode {
+    const source =
+        fs.readFileSync(
+            filePath,
+            "utf8"
+        );
+
+    const match =
+        /\bexport\s+const\s+hydration\s*(?::[^=;]+)?=\s*["']([^"']+)["']/.exec(
+            source
+        );
+
+    if (!match) {
+        return "full";
+    }
+
+    const value =
+        match[1];
+
+    if (
+        value === "full" ||
+        value === "none"
+    ) {
+        return value;
+    }
+
+    throw new Error(
+        `BCP Framework: invalid hydration mode "${value}" in "${filePath}". Use "full" or "none".`
+    );
+}
+
+function removeUnusedRouteEntry(
+    publicPath: string,
+    manifest: ProductionBuildManifest,
+    clientDirectory: string
+): void {
+    const prefix =
+        "/_bcp/client/";
+
+    if (
+        !publicPath.startsWith(
+            prefix
+        )
+    ) {
+        return;
+    }
+
+    const relativePath =
+        publicPath.slice(
+            prefix.length
+        );
+
+    const outputPath =
+        path.resolve(
+            clientDirectory,
+            relativePath.replaceAll(
+                "/",
+                path.sep
+            )
+        );
+
+    const clientRoot =
+        path.resolve(
+            clientDirectory
+        );
+
+    const relative =
+        path.relative(
+            clientRoot,
+            outputPath
+        );
+
+    if (
+        relative.startsWith("..") ||
+        path.isAbsolute(
+            relative
+        )
+    ) {
+        return;
+    }
+
+    for (
+        const candidate
+        of [
+            outputPath,
+            `${outputPath}.gz`,
+            `${outputPath}.br`,
+        ]
+    ) {
+        fs.rmSync(
+            candidate,
+            {
+                force: true,
+            }
+        );
+    }
+
+    manifest.assets =
+        manifest.assets.filter(
+            (asset) =>
+                asset.path !==
+                publicPath
+        ) as ProductionAssetInfo[];
+}
+
+function createServerOnlyRuntime(): string {
+    return `if(globalThis.__BCP_REACT_ROOT__){window.location.reload();}`;
+}
+
+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,
+        "_"
+    );
+}