rsbuild-plugin-react-router 0.2.0 → 0.3.1

package/src/modify-browser-manifest.ts

@@ -0,0 +1,246 @@
+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 serializedManifest = jsesc(manifestForBrowser, { es6: true });
+        const newSource = originalSource.replace(
+          /["'`]PLACEHOLDER["'`]/,
+          () => serializedManifest
+        );
+        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);
+    }
+  }
+);