rsbuild-plugin-react-router 0.7.3 → 0.8.0

package/src/modify-browser-manifest.ts

@@ -1,3 +1,5 @@
+import { BROWSER_MANIFEST_ENTRY_NAME } from './constants.js';
+import { getManifestAssetType, stripAssetQuery } from './manifest-assets.js';
 import { createHash } from 'node:crypto';
 import type { Route, PluginOptions } from './types.js';
 import type { RsbuildPluginAPI, Rspack } from '@rsbuild/core';
@@ -30,6 +32,8 @@ type CompilationAssetWithIntegrity = {
   source?: { source(): string | Buffer };
   info?: {
     integrity?: unknown;
+    assetType?: string;
+    javascriptModule?: boolean;
   };
 };
 
@@ -79,14 +83,10 @@ const toManifestAssetUrl = (assetPrefix: string, assetName: string) => {
 const addIntegrity = (
   sri: Record<string, string>,
   assetPrefix: string,
-  assetName: unknown,
+  assetName: string,
   integrity: unknown
 ) => {
-  if (
-    typeof assetName !== 'string' ||
-    !isManifestJsAsset(assetName) ||
-    typeof integrity !== 'string'
-  ) {
+  if (typeof integrity !== 'string') {
     return;
   }
   sri[toManifestAssetUrl(assetPrefix, assetName)] = integrity;
@@ -111,6 +111,9 @@ export const collectSubresourceIntegrity = (
   const sri: Record<string, string> = {};
 
   for (const asset of stats?.assets ?? []) {
+    if (typeof asset.name !== 'string' || !isManifestJsAsset(asset.name)) {
+      continue;
+    }
     addIntegrity(sri, assetPrefix, asset.name, asset.integrity);
   }
 
@@ -118,7 +121,17 @@ export const collectSubresourceIntegrity = (
     const assets =
       compilation.getAssets() as readonly CompilationAssetWithIntegrity[];
     for (const asset of assets) {
-      if (!isManifestJsAsset(asset.name)) {
+      const assetType =
+        asset.info?.assetType ??
+        (typeof asset.info?.javascriptModule === 'boolean'
+          ? 'javascript'
+          : undefined);
+      if (
+        getManifestAssetType(
+          asset.name,
+          assetType === undefined ? undefined : { [asset.name]: assetType }
+        ) !== 'javascript'
+      ) {
         continue;
       }
       addIntegrity(
@@ -144,13 +157,15 @@ export function registerModifyBrowserManifestAssets(
 ): void {
   const getAssetPrefix =
     typeof assetPrefix === 'function' ? assetPrefix : () => assetPrefix;
-  const manifestChunkNames =
+  const manifestChunkNames = new Set(
     options?.manifestChunkNames ??
-    getReactRouterManifestChunkNames(
-      routes,
-      appDirectory,
-      routeChunkOptions?.splitRouteModules
-    );
+      getReactRouterManifestChunkNames(
+        routes,
+        appDirectory,
+        routeChunkOptions?.splitRouteModules
+      )
+  );
+  manifestChunkNames.add(BROWSER_MANIFEST_ENTRY_NAME);
   const isBuild = Boolean(routeChunkOptions?.isBuild);
   const finalizeSri = Boolean(
     isBuild &&
@@ -165,6 +180,7 @@ export function registerModifyBrowserManifestAssets(
     { assets, sources, compilation }: ManifestProcessAssetsContext,
     { withSri }: { withSri: boolean }
   ): Promise<void> => {
+    if (compilation.errors?.length) return;
     const currentAssetPrefix = getAssetPrefix();
     const stats = createReactRouterManifestStats(
       compilation,
@@ -185,8 +201,17 @@ export function registerModifyBrowserManifestAssets(
     const browserManifest = { ...manifest };
     delete browserManifest.sri;
 
-    const browserManifestAsset = assets[BROWSER_MANIFEST_ASSET];
-    if (browserManifestAsset) {
+    const browserManifestPaths = stats?.assetsByChunkName?.[
+      BROWSER_MANIFEST_ENTRY_NAME
+    ]?.filter(
+      name =>
+        getManifestAssetType(name, stats.assetTypesByName) === 'javascript'
+    ) ?? [BROWSER_MANIFEST_ASSET];
+    // Production consumes the separately emitted versioned manifest. Leave the
+    // placeholder chunk unchanged: its content hash has already been finalized.
+    for (const browserManifestPath of isBuild ? [] : browserManifestPaths) {
+      const browserManifestAsset = assets[browserManifestPath];
+      if (!browserManifestAsset) continue;
       const originalSource = browserManifestAsset.source().toString();
       const serializedManifest = jsesc(browserManifest, { es6: true });
       const newSource = originalSource.replace(
@@ -194,18 +219,22 @@ export function registerModifyBrowserManifestAssets(
         () => serializedManifest
       );
       compilation.updateAsset(
-        BROWSER_MANIFEST_ASSET,
+        browserManifestPath,
         new sources.RawSource(newSource)
       );
     }
 
     if (isBuild) {
       const entryAssets = stats?.assetsByChunkName?.['entry.client'];
-      const entryJsAssets = entryAssets?.filter(isManifestJsAsset) || [];
+      const entryJsAssets =
+        entryAssets?.filter(
+          name =>
+            getManifestAssetType(name, stats?.assetTypesByName) === 'javascript'
+        ) || [];
       const manifestPath = getReactRouterManifestPath({
         version: manifest.version,
         isBuild: true,
-        entryModulePath: entryJsAssets[0],
+        entryModulePath: stripAssetQuery(entryJsAssets[0] ?? ''),
       });
       const manifestSource = `window.__reactRouterManifest=${jsesc(
         browserManifest,

package/src/node-only-manifest.ts

@@ -0,0 +1,52 @@
+import { rspack, type RsbuildPluginAPI, type Rspack } from '@rsbuild/core';
+import { resolve } from 'pathe';
+import type { ReactRouterManifestSnapshot } from './manifest-snapshot.js';
+import type { Route } from './types.js';
+
+// Inspect the compiled graph rather than parsing source: loaders, re-exports,
+// and cached modules must all participate in the compatibility check.
+export const registerNodeOnlyManifestValidation = ({
+  api,
+  routeByFilePath,
+  getSnapshot,
+}: {
+  api: RsbuildPluginAPI;
+  routeByFilePath: ReadonlyMap<string, Route>;
+  getSnapshot: () => ReactRouterManifestSnapshot | null;
+}): void => {
+  api.modifyRspackConfig((config, { environment }) => {
+    if (environment.name !== 'node') return;
+    config.plugins ??= [];
+    config.plugins.push({
+      apply(compiler: Rspack.Compiler) {
+        const name = 'ReactRouterNodeOnlyManifestValidation';
+        compiler.hooks.thisCompilation.tap(name, compilation => {
+          compilation.hooks.afterOptimizeModules.tap(name, modules => {
+            const snapshot = getSnapshot();
+            if (!snapshot) return;
+            for (const module of modules) {
+              if (!(module instanceof rspack.NormalModule)) continue;
+              const route = routeByFilePath.get(
+                resolve(module.resource.split('?')[0])
+              );
+              if (!route) continue;
+              const exports =
+                compilation.moduleGraph.getProvidedExports(module);
+              const saved = snapshot.browser.routes[route.id];
+              if (
+                !Array.isArray(exports) ||
+                !saved ||
+                exports.includes('loader') !== saved.hasLoader ||
+                exports.includes('action') !== saved.hasAction
+              ) {
+                throw new Error(
+                  `Run a full build before building only the node environment: loader/action exports changed for route "${route.id}".`
+                );
+              }
+            }
+          });
+        });
+      },
+    });
+  });
+};

package/src/plugin-utils.ts

@@ -6,10 +6,14 @@ import { JS_EXTENSIONS } from './constants.js';
 const requireFromApp = createRequire(resolve(process.cwd(), 'package.json'));
 
 export const resolveAppPackagePath = (
-  specifier: string
+  specifier: string,
+  rootPath?: string
 ): string | undefined => {
   try {
-    return requireFromApp.resolve(specifier);
+    const require = rootPath
+      ? createRequire(resolve(rootPath, 'package.json'))
+      : requireFromApp;
+    return require.resolve(specifier);
   } catch {
     return undefined;
   }

package/src/route-chunks.ts

@@ -1,10 +1,13 @@
 import {
   Analyzer,
+  SymbolFlags,
+  type Export as YukuExport,
   type Module,
+  type Reference as YukuReference,
   type Symbol as YukuSymbol,
 } from 'yuku-analyzer';
 import { print } from 'yuku-codegen';
-import { walk } from 'yuku-parser';
+import { walk, type Node } from 'yuku-parser';
 import { dirname, normalize, relative, resolve } from 'pathe';
 import { SERVER_ONLY_ROUTE_EXPORTS_SET } from './constants.js';
 import { createRouteId } from './plugin-utils.js';
@@ -146,6 +149,7 @@ type ExportDependencies = {
   importedIdentifierNames: Set<string>;
   importSources: Set<string>;
   exportedVariableDeclarators: Set<AnyNode>;
+  exportedLocalSymbols: Set<YukuSymbol>;
 };
 
 const getTopLevelStatementForNode = (
@@ -162,30 +166,30 @@ const getTopLevelStatementForNode = (
   return current;
 };
 
-const getVariableDeclaratorForNode = (
+const getExportedVariableDeclaratorForNode = (
   module: Module,
   node: AnyNode
 ): AnyNode | null => {
-  let current: AnyNode | null = node;
-  while (current) {
-    if (current.type === 'VariableDeclarator') {
-      return current;
+  let current = node as Node;
+  while (true) {
+    const parent = module.parentOf(current);
+    if (!parent || parent.type === 'Program') {
+      return null;
     }
-    current = module.parentOf(current as never) as AnyNode | null;
-  }
-  return null;
-};
-
-const isTopLevelExportedVariableDeclarator = (
-  module: Module,
-  node: AnyNode
-): boolean => {
-  const declaration = module.parentOf(node as never) as AnyNode | null;
-  if (declaration?.type !== 'VariableDeclaration') {
-    return false;
+    if (
+      current.type === 'VariableDeclarator' &&
+      parent.type === 'VariableDeclaration'
+    ) {
+      const exported = module.parentOf(parent);
+      if (
+        exported?.type === 'ExportNamedDeclaration' &&
+        module.parentOf(exported)?.type === 'Program'
+      ) {
+        return current;
+      }
+    }
+    current = parent;
   }
-  const statement = module.parentOf(declaration as never) as AnyNode | null;
-  return statement?.type === 'ExportNamedDeclaration';
 };
 
 const getExportedName = (exported: AnyNode): string => {
@@ -241,9 +245,29 @@ const getExportDependencies = (
     code,
     () => {
       const { module } = analyzeCode(code, cache, cacheKey);
+      const namedExports = module.exports.filter(
+        (exp): exp is YukuExport & { name: string } =>
+          exp.name !== null &&
+          !exp.typeOnly &&
+          !exp.isStar &&
+          !exp.isExportEquals
+      );
+      // Removing type declarations can change legacy decorator metadata and
+      // name hygiene. Preserve the original dependency graph for decorated
+      // modules because the downstream compiler options are not known here.
+      let hasDecorators = false;
+      walk(module.ast, {
+        Decorator(_node, context) {
+          hasDecorators = true;
+          context.stop();
+        },
+      });
       const exportDependencies = new Map<string, ExportDependencies>();
       const topLevelStatementCache = new Map<AnyNode, AnyNode>();
-      const variableDeclaratorCache = new Map<AnyNode, AnyNode | null>();
+      const exportedVariableDeclaratorCache = new Map<
+        AnyNode,
+        AnyNode | null
+      >();
       const getCachedTopLevelStatementForNode = (node: AnyNode): AnyNode => {
         const cached = topLevelStatementCache.get(node);
         if (cached) {
@@ -254,14 +278,67 @@ const getExportDependencies = (
         return statement;
       };
 
-      const getCachedVariableDeclaratorForNode = (
+      // Ordinary imports can be repeated in multiple chunks. Exported local
+      // bindings must keep a single owner, including functions and classes.
+      const nonShareableExportedSymbols = new Set<YukuSymbol>();
+      for (const { local } of namedExports) {
+        if (!local?.has(SymbolFlags.ValueSpace | SymbolFlags.ValueImport)) {
+          continue;
+        }
+        const isImport = local.declarations.every(
+          declaration =>
+            getCachedTopLevelStatementForNode(declaration).type ===
+            'ImportDeclaration'
+        );
+        // Setup belongs to the imported value too. If another export consumes
+        // that value, moving its setup into a separate chunk changes behavior.
+        const hasSetup =
+          isImport &&
+          local.references.some(reference => {
+            const statement = getCachedTopLevelStatementForNode(reference.node);
+            return (
+              reference.kind === 'value' &&
+              statement.type !== 'ImportDeclaration' &&
+              !statement.type.startsWith('Export')
+            );
+          });
+        if (isImport && !hasSetup) continue;
+        nonShareableExportedSymbols.add(local);
+      }
+
+      const isValueImportEqualsReference = (
+        reference: YukuReference
+      ): boolean => {
+        let node: Node = reference.node;
+        let parent = module.parentOf(node);
+        while (parent?.type === 'TSQualifiedName') {
+          node = parent;
+          parent = module.parentOf(node);
+        }
+        // Yuku also marks the runtime RHS of `import x = Namespace.value`
+        // as a type reference.
+        return (
+          parent?.type === 'TSImportEqualsDeclaration' &&
+          parent.moduleReference === node &&
+          parent.importKind !== 'type'
+        );
+      };
+
+      const isRuntimeRelevantReference = (reference: YukuReference): boolean =>
+        hasDecorators ||
+        reference.kind === 'value' ||
+        isValueImportEqualsReference(reference);
+
+      const getCachedExportedVariableDeclaratorForNode = (
         node: AnyNode
       ): AnyNode | null => {
-        if (variableDeclaratorCache.has(node)) {
-          return variableDeclaratorCache.get(node) ?? null;
+        if (exportedVariableDeclaratorCache.has(node)) {
+          return exportedVariableDeclaratorCache.get(node) ?? null;
         }
-        const declarator = getVariableDeclaratorForNode(module, node);
-        variableDeclaratorCache.set(node, declarator);
+        // Only direct exported declarators can be emitted independently.
+        // Every other top-level statement is moved as a whole.
+        const declarator = getExportedVariableDeclaratorForNode(module, node);
+        exportedVariableDeclaratorCache.set(node, declarator);
         return declarator;
       };
 
@@ -291,22 +368,41 @@ const getExportDependencies = (
           importedIdentifierNames: new Set(),
           importSources: new Set(),
           exportedVariableDeclarators: new Set(),
+          exportedLocalSymbols: new Set(),
         };
         const visitedSymbols = new Set<YukuSymbol>();
         const scannedNodes = new Set<AnyNode>();
 
+        const visitIdentifier = (node: YukuReference['node']) => {
+          const reference = module.referenceOf(node);
+          if (reference) {
+            if (reference.symbol && isRuntimeRelevantReference(reference)) {
+              visitSymbol(reference.symbol);
+            }
+            return;
+          }
+          const symbol = module.symbolOf(node);
+          if (
+            symbol?.scope === module.rootScope &&
+            symbol.has(SymbolFlags.ValueSpace | SymbolFlags.ValueImport) &&
+            dependencies.topLevelNonModuleStatements.has(
+              getCachedTopLevelStatementForNode(node)
+            )
+          ) {
+            // Moving a statement also moves the bindings it declares. Follow
+            // their consumers so no references remain in another chunk.
+            visitSymbol(symbol);
+          }
+        };
+
         const scanNode = (node: AnyNode) => {
           if (scannedNodes.has(node)) {
             return;
           }
           scannedNodes.add(node);
           walk(node as any, {
-            Identifier(node: AnyNode) {
-              const reference = module.referenceOf(node as never);
-              if (reference?.symbol) {
-                visitSymbol(reference.symbol);
-              }
-            },
+            Identifier: visitIdentifier,
+            JSXIdentifier: visitIdentifier,
           });
         };
 
@@ -318,6 +414,9 @@ const getExportDependencies = (
           if (symbol.declarations.length === 0) {
             return;
           }
+          if (nonShareableExportedSymbols.has(symbol)) {
+            dependencies.exportedLocalSymbols.add(symbol);
+          }
 
           for (const declaration of symbol.declarations as AnyNode[]) {
             const statement = addCachedTopLevelStatement(
@@ -329,24 +428,27 @@ const getExportDependencies = (
               if (typeof statement.source?.value === 'string') {
                 dependencies.importSources.add(statement.source.value);
               }
-              return;
+              // Ordinary imports are shareable; a directly exported import
+              // also owns setup statements such as `load.hydrate = true`.
+              if (symbol !== localSymbol) return;
             }
-            const declarator = getCachedVariableDeclaratorForNode(declaration);
-            if (
-              declarator &&
-              isTopLevelExportedVariableDeclarator(module, declarator)
-            ) {
+            const declarator =
+              getCachedExportedVariableDeclaratorForNode(declaration);
+            if (declarator) {
               dependencies.exportedVariableDeclarators.add(declarator);
             }
             scanNode(declarator ?? statement);
           }
 
-          for (const reference of symbol.references as any[]) {
+          for (const reference of symbol.references) {
+            if (!isRuntimeRelevantReference(reference)) {
+              continue;
+            }
             const statement = addCachedTopLevelStatement(
               dependencies,
               reference.node
             );
-            const declarator = getCachedVariableDeclaratorForNode(
+            const declarator = getCachedExportedVariableDeclaratorForNode(
               reference.node
             );
             scanNode(declarator ?? statement);
@@ -365,10 +467,7 @@ const getExportDependencies = (
         exportDependencies.set(exportName, dependencies);
       };
 
-      for (const exp of module.exports as any[]) {
-        if (exp.typeOnly || exp.isStar || exp.isExportEquals) {
-          continue;
-        }
+      for (const exp of namedExports) {
         handleExport(exp.name, exp.node as AnyNode, exp.local ?? null);
       }
 
@@ -383,7 +482,7 @@ const isExportChunkable = (
   importer: string
 ) => {
   const dependencies = exportDependencies.get(exportName);
-  if (!dependencies) {
+  if (!dependencies || dependencies.exportedVariableDeclarators.size > 1) {
     return false;
   }
   if (exportName === 'clientLoader' && hasHydrateAssignment(dependencies)) {
@@ -403,29 +502,19 @@ const isExportChunkable = (
       setsIntersect(
         currentDependencies.topLevelNonModuleStatements,
         dependencies.topLevelNonModuleStatements
+      ) ||
+      setsIntersect(
+        currentDependencies.exportedVariableDeclarators,
+        dependencies.exportedVariableDeclarators
+      ) ||
+      setsIntersect(
+        currentDependencies.exportedLocalSymbols,
+        dependencies.exportedLocalSymbols
       )
     ) {
       return false;
     }
   }
-  if (dependencies.exportedVariableDeclarators.size > 1) {
-    return false;
-  }
-  if (dependencies.exportedVariableDeclarators.size > 0) {
-    for (const [currentExportName, currentDependencies] of exportDependencies) {
-      if (currentExportName === exportName) {
-        continue;
-      }
-      if (
-        setsIntersect(
-          currentDependencies.exportedVariableDeclarators,
-          dependencies.exportedVariableDeclarators
-        )
-      ) {
-        return false;
-      }
-    }
-  }
   return true;
 };
 

package/src/types.ts

@@ -11,6 +11,13 @@ export type Route = {
 };
 
 export type PluginOptions = {
+  /**
+   * Generate React Router route types during development and builds.
+   * Set to false when type generation is managed separately.
+   * @default true
+   */
+  typegen?: boolean;
+
   /**
    * Whether to disable automatic middleware setup for custom server implementation.
    * Use this when you want to handle server setup manually.