rsbuild-plugin-react-router 0.1.1 → 0.3.0

package/src/modify-browser-manifest.ts

@@ -0,0 +1,245 @@
+import type { Route, PluginOptions } from './types.js';
+import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
+import {
+  createReactRouterManifestStats,
+  generateReactRouterManifestForDev,
+  getReactRouterManifestChunkNames,
+  getReactRouterManifestForDev,
+  getReactRouterManifestPath,
+} from './manifest.js';
+import { combineURLs } from './plugin-utils.js';
+import jsesc from 'jsesc';
+
+type StatsAssetWithIntegrity = {
+  name?: string;
+  integrity?: unknown;
+};
+
+type StatsWithIntegrity = {
+  assets?: StatsAssetWithIntegrity[];
+};
+
+type CompilationAssetWithIntegrity = {
+  name: string;
+  info?: {
+    integrity?: unknown;
+  };
+};
+
+type CompilationWithIntegrityAssets =
+  | {
+      getAssets?: () => readonly CompilationAssetWithIntegrity[];
+    }
+  | Pick<Rspack.Compilation, 'getAssets'>;
+
+type ModifyBrowserManifestOptions = {
+  future?: { unstable_subResourceIntegrity?: boolean };
+  subResourceIntegrity?: boolean;
+  manifestChunkNames?: ReadonlySet<string>;
+  onManifest?: (
+    manifest: Awaited<ReturnType<typeof getReactRouterManifestForDev>>,
+    sri: Record<string, string> | true | undefined,
+    moduleExportsByRouteId: Awaited<
+      ReturnType<typeof generateReactRouterManifestForDev>
+    >['moduleExportsByRouteId'],
+    context: {
+      compilation: Rspack.Compilation;
+      manifestStats: ReturnType<typeof createReactRouterManifestStats>;
+    }
+  ) => void;
+};
+
+type ProcessAssetsApi = Pick<RsbuildPluginAPI, 'processAssets'>;
+type AssetPrefixInput = string | (() => string);
+type ReactRouterManifest = Awaited<
+  ReturnType<typeof getReactRouterManifestForDev>
+>;
+type RouteManifestModuleExports = Awaited<
+  ReturnType<typeof generateReactRouterManifestForDev>
+>['moduleExportsByRouteId'];
+type GeneratedManifest = {
+  manifest: ReactRouterManifest;
+  moduleExportsByRouteId: RouteManifestModuleExports;
+  manifestStats: ReturnType<typeof createReactRouterManifestStats>;
+  assetPrefix: string;
+};
+
+const BROWSER_MANIFEST_ASSET =
+  'static/js/virtual/react-router/browser-manifest.js';
+const ABSOLUTE_URL_RE = /^[a-zA-Z][a-zA-Z\d+\-.]*:/;
+
+const toManifestAssetUrl = (assetPrefix: string, assetName: string) => {
+  if (
+    ABSOLUTE_URL_RE.test(assetName) ||
+    assetName.startsWith('//') ||
+    assetName.startsWith('/')
+  ) {
+    return assetName;
+  }
+  return combineURLs(assetPrefix, assetName);
+};
+
+const addIntegrity = (
+  sri: Record<string, string>,
+  assetPrefix: string,
+  assetName: unknown,
+  integrity: unknown
+) => {
+  if (typeof assetName !== 'string' || typeof integrity !== 'string') {
+    return;
+  }
+  sri[toManifestAssetUrl(assetPrefix, assetName)] = integrity;
+};
+
+export const collectSubresourceIntegrity = (
+  stats: StatsWithIntegrity | undefined,
+  compilation: CompilationWithIntegrityAssets | undefined,
+  assetPrefix = '/'
+): Record<string, string> | undefined => {
+  const sri: Record<string, string> = {};
+
+  for (const asset of stats?.assets ?? []) {
+    addIntegrity(sri, assetPrefix, asset.name, asset.integrity);
+  }
+
+  if (typeof compilation?.getAssets === 'function') {
+    const assets =
+      compilation.getAssets() as readonly CompilationAssetWithIntegrity[];
+    for (const asset of assets) {
+      addIntegrity(sri, assetPrefix, asset.name, asset.info?.integrity);
+    }
+  }
+
+  return Object.keys(sri).length > 0 ? sri : undefined;
+};
+
+export function registerModifyBrowserManifestAssets(
+  api: ProcessAssetsApi,
+  routes: Record<string, Route>,
+  pluginOptions: PluginOptions,
+  appDirectory: string,
+  assetPrefix: AssetPrefixInput = '/',
+  routeChunkOptions?: Parameters<typeof getReactRouterManifestForDev>[5],
+  options?: ModifyBrowserManifestOptions
+): void {
+  const getAssetPrefix =
+    typeof assetPrefix === 'function' ? assetPrefix : () => assetPrefix;
+  const manifestChunkNames =
+    options?.manifestChunkNames ??
+    getReactRouterManifestChunkNames(
+      routes,
+      routeChunkOptions?.splitRouteModules
+    );
+  const finalizeSri = Boolean(
+    routeChunkOptions?.isBuild &&
+    (options?.subResourceIntegrity ??
+      options?.future?.unstable_subResourceIntegrity)
+  );
+  const generatedManifests = finalizeSri
+    ? new WeakMap<Rspack.Compilation, GeneratedManifest>()
+    : undefined;
+
+  api.processAssets(
+    { stage: 'additions', environments: ['web'] },
+    async ({ assets, sources, compilation }) => {
+      const currentAssetPrefix = getAssetPrefix();
+      const stats = createReactRouterManifestStats(
+        compilation,
+        manifestChunkNames
+      );
+      const { manifest, moduleExportsByRouteId } =
+        await generateReactRouterManifestForDev(
+          routes,
+          pluginOptions,
+          stats,
+          appDirectory,
+          currentAssetPrefix,
+          routeChunkOptions
+        );
+      const manifestForBrowser = finalizeSri
+        ? { ...manifest, sri: true as const }
+        : manifest;
+
+      const browserManifestAsset = assets[BROWSER_MANIFEST_ASSET];
+      if (browserManifestAsset) {
+        const originalSource = browserManifestAsset.source().toString();
+        const newSource = originalSource.replace(
+          /["'`]PLACEHOLDER["'`]/,
+          jsesc(manifestForBrowser, { es6: true })
+        );
+        compilation.updateAsset(
+          BROWSER_MANIFEST_ASSET,
+          new sources.RawSource(newSource)
+        );
+      }
+
+      if (routeChunkOptions?.isBuild) {
+        const entryAssets = stats?.assetsByChunkName?.['entry.client'];
+        const entryJsAssets =
+          entryAssets?.filter(asset => asset.endsWith('.js')) || [];
+        const manifestPath = getReactRouterManifestPath({
+          version: manifest.version,
+          isBuild: true,
+          entryModulePath: entryJsAssets[0],
+        });
+        const manifestSource = `window.__reactRouterManifest=${jsesc(
+          manifestForBrowser,
+          { es6: true }
+        )};`;
+        const source = new sources.RawSource(manifestSource);
+        if (compilation.getAsset(manifestPath)) {
+          compilation.updateAsset(manifestPath, source);
+        } else {
+          compilation.emitAsset(manifestPath, source);
+        }
+      }
+
+      if (generatedManifests) {
+        generatedManifests.set(compilation, {
+          manifest,
+          moduleExportsByRouteId,
+          manifestStats: stats,
+          assetPrefix: currentAssetPrefix,
+        });
+        return;
+      }
+
+      options?.onManifest?.(manifest, undefined, moduleExportsByRouteId, {
+        compilation,
+        manifestStats: stats,
+      });
+    }
+  );
+
+  if (generatedManifests) {
+    api.processAssets(
+      { stage: 'report', environments: ['web'] },
+      ({ compilation }) => {
+        const generatedManifest = generatedManifests.get(compilation);
+        if (!generatedManifest) {
+          return;
+        }
+
+        generatedManifests.delete(compilation);
+        const sri =
+          collectSubresourceIntegrity(
+            undefined,
+            compilation,
+            generatedManifest.assetPrefix
+          ) ?? true;
+        options?.onManifest?.(
+          {
+            ...generatedManifest.manifest,
+            sri,
+          },
+          sri,
+          generatedManifest.moduleExportsByRouteId,
+          {
+            compilation,
+            manifestStats: generatedManifest.manifestStats,
+          }
+        );
+      }
+    );
+  }
+}

package/src/parallel-route-transform-protocol.ts

@@ -0,0 +1,35 @@
+import type {
+  RouteTransformResult,
+  RouteTransformTask,
+} from './route-transform-tasks.js';
+
+type WithoutRequiredSource<Task> = Task extends RouteTransformTask
+  ? Omit<Task, 'code'> & { code?: string }
+  : never;
+
+export type CachedRouteTransformTask =
+  WithoutRequiredSource<RouteTransformTask>;
+
+export type WorkerRequest = {
+  id: number;
+  task: RouteTransformTask | CachedRouteTransformTask;
+  sourceCacheKey?: string;
+};
+
+export type WorkerErrorPayload = {
+  name?: string;
+  message: string;
+  stack?: string;
+};
+
+export type WorkerResponse =
+  | {
+      id: number;
+      ok: true;
+      result: RouteTransformResult;
+    }
+  | {
+      id: number;
+      ok: false;
+      error: WorkerErrorPayload;
+    };

package/src/parallel-route-transform-worker.ts

@@ -0,0 +1,82 @@
+import { parentPort } from 'node:worker_threads';
+import { setBoundedCacheEntry } from './bounded-cache.js';
+import {
+  executeRouteTransformTask,
+  type RouteTransformTask,
+} from './route-transform-tasks.js';
+import type {
+  WorkerErrorPayload,
+  WorkerRequest,
+  WorkerResponse,
+} from './parallel-route-transform-protocol.js';
+
+const serializeError = (error: unknown): WorkerErrorPayload => {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message,
+      stack: error.stack,
+    };
+  }
+  return {
+    message: String(error),
+  };
+};
+
+if (!parentPort) {
+  throw new Error('parallel route transform worker requires parentPort');
+}
+
+const MAX_SOURCE_CACHE_ENTRIES = 2048;
+const sourceCache = new Map<string, string>();
+
+const hydrateTaskSource = ({
+  task,
+  sourceCacheKey,
+}: Pick<WorkerRequest, 'task' | 'sourceCacheKey'>): RouteTransformTask => {
+  if (!sourceCacheKey) {
+    return task as RouteTransformTask;
+  }
+
+  if (typeof task.code === 'string') {
+    setBoundedCacheEntry(
+      sourceCache,
+      sourceCacheKey,
+      task.code,
+      MAX_SOURCE_CACHE_ENTRIES
+    );
+    return task as RouteTransformTask;
+  }
+
+  const code = sourceCache.get(sourceCacheKey);
+  if (code === undefined) {
+    throw new Error(
+      `Missing cached route transform source for ${sourceCacheKey}.`
+    );
+  }
+  return {
+    ...task,
+    code,
+  } as RouteTransformTask;
+};
+
+parentPort.on(
+  'message',
+  async ({ id, task, sourceCacheKey }: WorkerRequest) => {
+    try {
+      const hydratedTask = hydrateTaskSource({ task, sourceCacheKey });
+      const result = await executeRouteTransformTask(hydratedTask);
+      parentPort?.postMessage({
+        id,
+        ok: true,
+        result,
+      } satisfies WorkerResponse);
+    } catch (error) {
+      parentPort?.postMessage({
+        id,
+        ok: false,
+        error: serializeError(error),
+      } satisfies WorkerResponse);
+    }
+  }
+);

package/src/parallel-route-transforms.ts

@@ -0,0 +1,332 @@
+import { Worker } from 'node:worker_threads';
+import { setBoundedCacheEntry } from './bounded-cache.js';
+import { getDefaultConcurrency } from './concurrency.js';
+import {
+  executeRouteTransformTask,
+  type RouteTransformResult,
+  type RouteTransformTask,
+  type RouteTransformTaskOptions,
+} from './route-transform-tasks.js';
+import type { PluginOptions } from './types.js';
+import type {
+  WorkerErrorPayload,
+  WorkerRequest,
+  WorkerResponse,
+} from './parallel-route-transform-protocol.js';
+
+export type ParallelRouteTransformConfig =
+  NonNullable<PluginOptions['parallelRouteTransform']> extends infer Config
+    ? Exclude<Config, false>
+    : never;
+
+export type RouteTransformExecutorOptions = RouteTransformTaskOptions & {
+  parallelRouteTransform?: PluginOptions['parallelRouteTransform'];
+  splitRouteModules?: boolean;
+};
+
+export type RouteTransformExecutor = {
+  run: (task: RouteTransformTask) => Promise<RouteTransformResult>;
+  close: () => Promise<void>;
+};
+
+type PendingTask = {
+  resolve: (result: RouteTransformResult) => void;
+  reject: (error: Error) => void;
+};
+
+type WorkerState = {
+  worker: Worker;
+  pending: Map<number, PendingTask>;
+  sourceCache: Map<string, string>;
+};
+
+class WorkerStartupError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'WorkerStartupError';
+  }
+}
+
+const MAX_WORKER_SOURCE_CACHE_ENTRIES = 2048;
+const AUTO_PARALLEL_ROUTE_THRESHOLD = 256;
+
+export const getDefaultWorkerCount = (cpuCount?: number): number =>
+  getDefaultConcurrency(cpuCount);
+
+export const shouldParallelizeRouteTransforms = (routeCount: number): boolean =>
+  routeCount >= AUTO_PARALLEL_ROUTE_THRESHOLD;
+
+const getConfiguredWorkerCount = (
+  parallelRouteTransform: ParallelRouteTransformConfig
+): number => {
+  if (parallelRouteTransform === true) {
+    return getDefaultWorkerCount();
+  }
+
+  if (!Number.isInteger(parallelRouteTransform) || parallelRouteTransform < 1) {
+    throw new Error(
+      '[react-router] parallelRouteTransform must be true, false, or a positive integer.'
+    );
+  }
+  return parallelRouteTransform;
+};
+
+const hashString = (value: string): number => {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) >>> 0;
+  }
+  return hash;
+};
+
+const deserializeWorkerError = (error: WorkerErrorPayload): Error => {
+  const result = new Error(error.message);
+  result.name = error.name ?? 'Error';
+  if (error.stack) {
+    result.stack = error.stack;
+  }
+  return result;
+};
+
+const createWorkerUrl = (): URL =>
+  new URL('./parallel-route-transform-worker.js', import.meta.url);
+
+const isWorkerStartupError = (error: unknown): error is WorkerStartupError =>
+  error instanceof WorkerStartupError;
+
+class ParallelRouteTransformExecutor implements RouteTransformExecutor {
+  #closed = false;
+  #closePromise: Promise<void> | undefined;
+  #workersDisabled = false;
+  #nextId = 1;
+  #nextRouteModuleWorkerIndex = 0;
+  #nextSplitRouteAnalysisWorkerIndex = 0;
+  #splitRouteAnalysisWorkers = new Map<string, number>();
+  #workers: WorkerState[];
+
+  constructor(
+    workerCount: number,
+    private readonly options: RouteTransformTaskOptions,
+    private readonly balanceRouteModuleTransforms: boolean
+  ) {
+    this.#workers = [];
+    try {
+      for (let index = 0; index < workerCount; index += 1) {
+        this.#workers.push(this.#createWorkerState());
+      }
+    } catch (error) {
+      for (const state of this.#workers) {
+        void state.worker.terminate();
+      }
+      this.#workers = [];
+      throw error;
+    }
+  }
+
+  async run(task: RouteTransformTask): Promise<RouteTransformResult> {
+    if (this.#closed) {
+      return executeRouteTransformTask(task, this.options);
+    }
+    if (task.kind === 'clientOnlyStub' && task.resolveExportAllModule) {
+      return executeRouteTransformTask(task, this.options);
+    }
+
+    try {
+      return await this.#runInWorker(task);
+    } catch (error) {
+      if (isWorkerStartupError(error)) {
+        return executeRouteTransformTask(task, this.options);
+      }
+      throw error;
+    }
+  }
+
+  close(): Promise<void> {
+    if (this.#closePromise) {
+      return this.#closePromise;
+    }
+    this.#closed = true;
+    const workers = this.#workers;
+    this.#workers = [];
+    this.#closePromise = Promise.all(
+      workers.map(async state => {
+        for (const pending of state.pending.values()) {
+          pending.reject(new Error('Route transform worker closed.'));
+        }
+        state.pending.clear();
+        await state.worker.terminate();
+      })
+    ).then(() => undefined);
+    return this.#closePromise;
+  }
+
+  #disableWorkers(error: WorkerStartupError): void {
+    if (this.#workersDisabled || this.#closed) {
+      return;
+    }
+    this.#workersDisabled = true;
+    const workers = this.#workers;
+    this.#workers = [];
+    for (const state of workers) {
+      for (const pending of state.pending.values()) {
+        pending.reject(error);
+      }
+      state.pending.clear();
+      void state.worker.terminate();
+    }
+  }
+
+  #createWorkerState(): WorkerState {
+    const worker = new Worker(createWorkerUrl());
+    const state: WorkerState = {
+      worker,
+      pending: new Map(),
+      sourceCache: new Map(),
+    };
+
+    worker.on('message', (response: WorkerResponse) => {
+      const pending = state.pending.get(response.id);
+      if (!pending) {
+        return;
+      }
+      state.pending.delete(response.id);
+      if (response.ok) {
+        pending.resolve(response.result);
+      } else {
+        pending.reject(deserializeWorkerError(response.error));
+      }
+    });
+
+    worker.on('error', (error: Error) => {
+      const startupError = new WorkerStartupError(error.message);
+      startupError.stack = error.stack;
+      this.#disableWorkers(startupError);
+    });
+
+    worker.on('exit', code => {
+      if (this.#closed || this.#workersDisabled) {
+        return;
+      }
+      const startupError = new WorkerStartupError(
+        `Route transform worker exited with code ${code}.`
+      );
+      this.#disableWorkers(startupError);
+    });
+
+    return state;
+  }
+
+  #runInWorker(task: RouteTransformTask): Promise<RouteTransformResult> {
+    const workerIndex = this.#getWorkerIndex(task);
+    const state = this.#workers[workerIndex];
+    if (!state) {
+      return executeRouteTransformTask(task, this.options);
+    }
+
+    const id = this.#nextId++;
+    const sourceCacheKey = task.resourcePath;
+    const requestTask = this.#createWorkerRequestTask(
+      state,
+      task,
+      sourceCacheKey
+    );
+    return new Promise((resolve, reject) => {
+      state.pending.set(id, { resolve, reject });
+      try {
+        state.worker.postMessage({
+          id,
+          task: requestTask,
+          sourceCacheKey,
+        } satisfies WorkerRequest);
+      } catch (error) {
+        state.pending.delete(id);
+        // The worker may not have received the source update. Force the next
+        // request for this module to send its full source again.
+        state.sourceCache.delete(sourceCacheKey);
+        reject(error instanceof Error ? error : new Error(String(error)));
+      }
+    });
+  }
+
+  #createWorkerRequestTask(
+    state: WorkerState,
+    task: RouteTransformTask,
+    sourceCacheKey: string
+  ): WorkerRequest['task'] {
+    const cachedSource = state.sourceCache.get(sourceCacheKey);
+    if (cachedSource === task.code) {
+      const { code: _code, ...cachedTask } = task;
+      return cachedTask;
+    }
+
+    setBoundedCacheEntry(
+      state.sourceCache,
+      sourceCacheKey,
+      task.code,
+      MAX_WORKER_SOURCE_CACHE_ENTRIES
+    );
+    return task;
+  }
+
+  #getWorkerIndex(task: RouteTransformTask): number {
+    const workerCount = Math.max(1, this.#workers.length);
+    if (
+      this.balanceRouteModuleTransforms &&
+      (task.kind === 'routeClientEntry' ||
+        task.kind === 'routeChunk' ||
+        task.kind === 'splitRouteExports')
+    ) {
+      const existingWorkerIndex = this.#splitRouteAnalysisWorkers.get(
+        task.resourcePath
+      );
+      if (existingWorkerIndex !== undefined) {
+        return existingWorkerIndex % workerCount;
+      }
+      const workerIndex = this.#nextSplitRouteAnalysisWorkerIndex % workerCount;
+      this.#nextSplitRouteAnalysisWorkerIndex += 1;
+      this.#splitRouteAnalysisWorkers.set(task.resourcePath, workerIndex);
+      return workerIndex;
+    }
+    if (
+      this.balanceRouteModuleTransforms &&
+      task.kind === 'routeModule' &&
+      !(task.environmentName === 'web' && !task.ssr && task.isSpaMode)
+    ) {
+      const workerIndex = this.#nextRouteModuleWorkerIndex % workerCount;
+      this.#nextRouteModuleWorkerIndex += 1;
+      return workerIndex;
+    }
+    return hashString(task.resourcePath) % workerCount;
+  }
+}
+
+export const createRouteTransformExecutor = ({
+  parallelRouteTransform,
+  routeChunkCache,
+  splitRouteModules,
+}: RouteTransformExecutorOptions = {}): RouteTransformExecutor => {
+  const options = { routeChunkCache };
+  if (
+    parallelRouteTransform === undefined ||
+    parallelRouteTransform === false
+  ) {
+    return {
+      run: task => executeRouteTransformTask(task, options),
+      close: async () => {},
+    };
+  }
+
+  const workerCount = getConfiguredWorkerCount(parallelRouteTransform);
+  if (workerCount < 1) {
+    return {
+      run: task => executeRouteTransformTask(task, options),
+      close: async () => {},
+    };
+  }
+
+  return new ParallelRouteTransformExecutor(
+    workerCount,
+    options,
+    Boolean(splitRouteModules)
+  );
+};