chore: stage over updates from mf branch

Author: ScriptedAlchemy

package.json

@@ -33,6 +33,7 @@
   ],
   "scripts": {
     "build": "rslib build",
+    "e2e": "pnpm build && cd examples/default-template; pnpm test:e2e",
     "dev": "rslib build --watch",
     "test": "vitest run",
     "test:watch": "vitest watch",

src/constants.ts

@@ -1,5 +1,14 @@
 export const PLUGIN_NAME = 'rsbuild:react-router';
 
+export const JS_EXTENSIONS = ['.tsx', '.ts', '.jsx', '.js', '.mjs'] as const;
+
+export const JS_LOADERS = {
+  '.ts': 'ts',
+  '.tsx': 'tsx',
+  '.js': 'js',
+  '.jsx': 'jsx'
+} as const;
+
 export const SERVER_ONLY_ROUTE_EXPORTS = [
   'loader',
   'action',
@@ -41,4 +50,4 @@ export const CLIENT_EXPORTS = {
   links: 'links',
   meta: 'meta',
   shouldRevalidate: 'shouldRevalidate',
-} as const;
+} as const;

src/index.ts

@@ -5,18 +5,23 @@ import type { RsbuildPlugin, Rspack } from '@rsbuild/core';
 import * as esbuild from 'esbuild';
 import { createJiti } from 'jiti';
 import jsesc from 'jsesc';
-import { isAbsolute, relative, resolve } from 'pathe';
+import { relative, resolve } from 'pathe';
 import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module';
 import { generate, parse } from './babel.js';
-import { PLUGIN_NAME, SERVER_EXPORTS, CLIENT_EXPORTS, SERVER_ONLY_ROUTE_EXPORTS } from './constants.js';
+import { PLUGIN_NAME, SERVER_ONLY_ROUTE_EXPORTS } from './constants.js';
 import { createDevServerMiddleware } from './dev-server.js';
 import {
-  combineURLs,
-  createRouteId,
-  generateWithProps,
-  removeExports,
-  transformRoute,
+    generateWithProps,
+    removeExports,
+    transformRoute,
+    findEntryFile
 } from './plugin-utils.js';
+import {
+    configRoutesToRouteManifest,
+    getReactRouterManifestForDev
+} from './manifest.js';
+import { generateServerBuild } from './server-utils.js';
+import { createModifyBrowserManifestPlugin } from './modify-browser-manifest.js';
 
 export type PluginOptions = {
   /**
@@ -140,18 +145,9 @@ export const pluginReactRouter = (
         return [] as RouteConfigEntry[];
       });
 
-    const jsExtensions = ['.tsx', '.ts', '.jsx', '.js', '.mjs'];
-
-    const findEntryFile = (basePath: string) => {
-      for (const ext of jsExtensions) {
-        const filePath = `${basePath}${ext}`;
-        if (existsSync(filePath)) {
-          return filePath;
-        }
-      }
-      return `${basePath}.tsx`; // Default to .tsx if no file exists
-    };
-
+    // Remove local JS_EXTENSIONS definition - use the imported one instead
+    
+    // Remove duplicate findEntryFile implementation
     const entryClientPath = findEntryFile(
       resolve(appDirectory, 'entry.client'),
     );
@@ -208,6 +204,7 @@ export const pluginReactRouter = (
         basename,
         appDirectory,
         ssr,
+        federation: false,
       }),
       'virtual/react-router/with-props': generateWithProps(),
     });
@@ -329,61 +326,9 @@ export const pluginReactRouter = (
             tools: {
               rspack: (rspackConfig) => {
                 if (rspackConfig.plugins) {
-                  rspackConfig.plugins.push({
-                    apply(compiler: Rspack.Compiler) {
-                      compiler.hooks.emit.tapAsync(
-                        'ModifyBrowserManifest',
-                        async (compilation: Rspack.Compilation, callback) => {
-                          const manifest = await getReactRouterManifestForDev(
-                            routes,
-                            pluginOptions,
-                            compilation.getStats().toJson(),
-                            appDirectory,
-                          );
-
-                          const manifestPath =
-                            'static/js/virtual/react-router/browser-manifest.js';
-                          if (compilation.assets[manifestPath]) {
-                            const originalSource = compilation.assets[
-                              manifestPath
-                            ]
-                              .source()
-                              .toString();
-                            const newSource = originalSource.replace(
-                              /["'`]PLACEHOLDER["'`]/,
-                              jsesc(manifest, { es6: true }),
-                            );
-                            compilation.assets[manifestPath] = {
-                              source: () => newSource,
-                              size: () => newSource.length,
-                              map: () => ({
-                                version: 3,
-                                sources: [manifestPath],
-                                names: [],
-                                mappings: '',
-                                file: manifestPath,
-                                sourcesContent: [newSource],
-                              }),
-                              sourceAndMap: () => ({
-                                source: newSource,
-                                map: {
-                                  version: 3,
-                                  sources: [manifestPath],
-                                  names: [],
-                                  mappings: '',
-                                  file: manifestPath,
-                                  sourcesContent: [newSource],
-                                },
-                              }),
-                              updateHash: (hash) => hash.update(newSource),
-                              buffer: () => Buffer.from(newSource),
-                            };
-                          }
-                          callback();
-                        },
-                      );
-                    },
-                  });
+                  rspackConfig.plugins.push(
+                    createModifyBrowserManifestPlugin(routes, pluginOptions, appDirectory)
+                  );
                 }
                 return rspackConfig;
               },
@@ -478,187 +423,3 @@ export const pluginReactRouter = (
     );
   },
 });
-
-// Helper functions
-function configRoutesToRouteManifest(
-  appDirectory: string,
-  routes: RouteConfigEntry[],
-  rootId = 'root',
-) {
-  const routeManifest: Record<string, Route> = {};
-
-  function walk(route: RouteConfigEntry, parentId: string) {
-    const id = route.id || createRouteId(route.file);
-    const manifestItem = {
-      id,
-      parentId,
-      file: isAbsolute(route.file)
-        ? relative(appDirectory, route.file)
-        : route.file,
-      path: route.path,
-      index: route.index,
-      caseSensitive: route.caseSensitive,
-    };
-
-    if (Object.prototype.hasOwnProperty.call(routeManifest, id)) {
-      throw new Error(
-        `Unable to define routes with duplicate route id: "${id}"`,
-      );
-    }
-    routeManifest[id] = manifestItem;
-
-    if (route.children) {
-      for (const child of route.children) {
-        walk(child, id);
-      }
-    }
-  }
-
-  for (const route of routes) {
-    walk(route, rootId);
-  }
-
-  return routeManifest;
-}
-
-async function getReactRouterManifestForDev(
-  routes: Record<string, Route>,
-  //@ts-ignore
-  options: PluginOptions,
-  clientStats: Rspack.StatsCompilation | undefined,
-  context: string,
-): Promise<{
-  version: string;
-  url: string;
-  entry: {
-    module: string;
-    imports: string[];
-    css: string[];
-  };
-  routes: Record<string, RouteManifestItem>;
-}> {
-  const result: Record<string, RouteManifestItem> = {};
-
-  for (const [key, route] of Object.entries(routes)) {
-    const assets = clientStats?.assetsByChunkName?.[route.id];
-    const jsAssets = assets?.filter((asset) => asset.endsWith('.js')) || [];
-    const cssAssets = assets?.filter((asset) => asset.endsWith('.css')) || [];
-    // Read and analyze the route file to check for exports
-    const routeFilePath = resolve(context, route.file);
-    let exports = new Set<string>();
-
-    try {
-      const buildResult = await esbuild.build({
-        entryPoints: [routeFilePath],
-        bundle: false,
-        write: false,
-        metafile: true,
-        jsx: 'automatic',
-        format: 'esm',
-        platform: 'neutral',
-        loader: {
-          '.ts': 'ts',
-          '.tsx': 'tsx',
-          '.js': 'js',
-          '.jsx': 'jsx'
-        },
-      });
-
-      // Get exports from the metafile
-      const entryPoint = Object.values(buildResult.metafile.outputs)[0];
-      if (entryPoint?.exports) {
-        exports = new Set(entryPoint.exports);
-      }
-    } catch (error) {
-      console.error(`Failed to analyze route file ${routeFilePath}:`, error);
-    }
-
-    result[key] = {
-      id: route.id,
-      parentId: route.parentId,
-      path: route.path,
-      index: route.index,
-      caseSensitive: route.caseSensitive,
-      module: combineURLs('/', jsAssets[0] || ''),
-      hasAction: exports.has(SERVER_EXPORTS.action),
-      hasLoader: exports.has(SERVER_EXPORTS.loader),
-      hasClientAction: exports.has(CLIENT_EXPORTS.clientAction),
-      hasClientLoader: exports.has(CLIENT_EXPORTS.clientLoader),
-      hasErrorBoundary: exports.has(CLIENT_EXPORTS.ErrorBoundary),
-      imports: jsAssets.map((asset) => combineURLs('/', asset)),
-      css: cssAssets.map((asset) => combineURLs('/', asset)),
-    };
-  }
-
-  const entryAssets = clientStats?.assetsByChunkName?.['entry.client'];
-  const entryJsAssets =
-    entryAssets?.filter((asset) => asset.endsWith('.js')) || [];
-  const entryCssAssets =
-    entryAssets?.filter((asset) => asset.endsWith('.css')) || [];
-
-  return {
-    version: String(Math.random()),
-    url: '/static/js/virtual/react-router/browser-manifest.js',
-    entry: {
-      module: combineURLs('/', entryJsAssets[0] || ''),
-      imports: entryJsAssets.map((asset) => combineURLs('/', asset)),
-      css: entryCssAssets.map((asset) => combineURLs('/', asset)),
-    },
-    routes: result,
-  };
-}
-
-/**
- * Generates the server build module content
- * @param routes The route manifest
- * @param options Build options
- * @returns The generated module content as a string
- */
-function generateServerBuild(
-  routes: Record<string, Route>,
-  options: {
-    entryServerPath: string;
-    assetsBuildDirectory: string;
-    basename: string;
-    appDirectory: string;
-    ssr: boolean;
-  },
-): string {
-  return `
-    import * as entryServer from ${JSON.stringify(options.entryServerPath)};
-    ${Object.keys(routes)
-      .map((key, index) => {
-        const route = routes[key];
-        return `import * as route${index} from ${JSON.stringify(
-          `${resolve(options.appDirectory, route.file)}?react-router-route`,
-        )};`;
-      })
-      .join('\n')}
-
-    export { default as assets } from "virtual/react-router/server-manifest";
-    export const assetsBuildDirectory = ${JSON.stringify(
-      options.assetsBuildDirectory,
-    )};
-    export const basename = ${JSON.stringify(options.basename)};
-    export const future = ${JSON.stringify({})};
-    export const isSpaMode = ${!options.ssr};
-    export const ssr = ${options.ssr};
-    export const publicPath = "/";
-    export const entry = { module: entryServer };
-    export const routes = {
-      ${Object.keys(routes)
-        .map((key, index) => {
-          const route = routes[key];
-          return `${JSON.stringify(key)}: {
-            id: ${JSON.stringify(route.id)},
-            parentId: ${JSON.stringify(route.parentId)},
-            path: ${JSON.stringify(route.path)},
-            index: ${JSON.stringify(route.index)},
-            caseSensitive: ${JSON.stringify(route.caseSensitive)},
-            module: route${index}
-          }`;
-        })
-        .join(',\n  ')}
-    };
-  `;
-}