@react-router/dev 0.0.0-experimental-fbbd4fd81 → 0.0.0-experimental-27337b0d6

package/dist/vite/build.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -227,7 +227,16 @@ async function build(root, {
     });
   }
   await cleanBuildDirectory(viteConfig, ctx);
-  // Run the Vite client build first
+  // Then run React server build first
+  if (reactRouterConfig.future.unstable_serverComponents) {
+    // TODO: This will be handled by the vite env API in the future
+    process.env.REACT_SERVER_BUILD = "1";
+    await viteBuild({
+      ssr: true
+    });
+  }
+  process.env.REACT_SERVER_BUILD = "";
+  // Run the Vite client build second
   await viteBuild({
     ssr: false
   });
@@ -267,6 +276,10 @@ async function build(root, {
     reactRouterConfig,
     viteConfig
   }));
+  const {
+    serverModules
+  } = plugin.getReactServerOptions();
+  invariant["default"](!serverModules.size, "`use server` is not yet supported.");
 }
 
 exports.build = build;

package/dist/vite/cloudflare-proxy-plugin.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/dev.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/import-vite-esm-sync.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/index.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/node-adapter.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/plugin.d.ts

@@ -59,6 +59,7 @@ type ReactRouterPluginSsrBuildContext = {
 export type ReactRouterPluginContext = ReactRouterPluginSsrBuildContext & {
     rootDirectory: string;
     entryClientFilePath: string;
+    entryReactServerFilePath?: string;
     entryServerFilePath: string;
     reactRouterConfig: ResolvedVitePluginConfig;
     viteManifestEnabled: boolean;
@@ -68,4 +69,12 @@ type MaybePromise<T> = T | Promise<T>;
 export declare let setReactRouterDevLoadContext: (loadContext: (request: Request) => MaybePromise<Record<string, unknown>>) => void;
 export type ReactRouterVitePlugin = (config?: VitePluginConfig) => Vite.Plugin[];
 export declare const reactRouterVitePlugin: ReactRouterVitePlugin;
+declare global {
+    var __clientModules: Set<string>;
+    var __serverModules: Set<string>;
+}
+export declare function getReactServerOptions(): {
+    clientModules: Set<string>;
+    serverModules: Set<string>;
+};
 export {};

package/dist/vite/plugin.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-fbbd4fd81
+ * @react-router/dev v0.0.0-experimental-27337b0d6
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -18,9 +18,11 @@ var url = require('node:url');
 var fse = require('fs-extra');
 var babel = require('@babel/core');
 var serverRuntime = require('@react-router/server-runtime');
+var reactRouter = require('react-router');
 var esModuleLexer = require('es-module-lexer');
 var jsesc = require('jsesc');
 var colors = require('picocolors');
+var unpluginRsc = require('unplugin-rsc');
 var findConfig = require('../config/findConfig.js');
 var invariant = require('../invariant.js');
 var nodeAdapter = require('./node-adapter.js');
@@ -107,21 +109,26 @@ async function loadPluginContext({
 }
 const SERVER_ONLY_ROUTE_EXPORTS = ["loader", "action", "headers"];
 const CLIENT_ROUTE_EXPORTS = ["clientAction", "clientLoader", "default", "ErrorBoundary", "handle", "HydrateFallback", "Layout", "links", "meta", "shouldRevalidate"];
-// The "=1" suffix ensures client route requests can be processed before hitting
-// the Vite plugin since "?client-route" can be serialized as "?client-route="
-const CLIENT_ROUTE_QUERY_STRING = "?client-route=1";
+/** This is used to manage a build optimization to remove unused route exports
+from the client build output. This is important in cases where custom route
+exports are only ever used on the server. Without this optimization we can't
+tree-shake any unused custom exports because routes are entry points. */
+const BUILD_CLIENT_ROUTE_QUERY_STRING = "?__remix-build-client-route";
 let serverBuildId = vmod.id("server-build");
 let serverManifestId = vmod.id("server-manifest");
 let browserManifestId = vmod.id("browser-manifest");
 let hmrRuntimeId = vmod.id("hmr-runtime");
 let injectHmrRuntimeId = vmod.id("inject-hmr-runtime");
+let reactServerBuildId = vmod.id("react-server-build");
+let clientReferencesId = vmod.id("client-references");
+let serverReferencesId = vmod.id("server-references");
 const resolveRelativeRouteFilePath = (route, reactRouterConfig) => {
   let vite = importViteEsmSync.importViteEsmSync();
   let file = route.file;
   let fullPath = path__namespace.resolve(reactRouterConfig.appDirectory, file);
   return vite.normalizePath(fullPath);
 };
-let vmods = [serverBuildId, serverManifestId, browserManifestId];
+let vmods = [serverBuildId, serverManifestId, browserManifestId, reactServerBuildId, clientReferencesId, serverReferencesId];
 const invalidateVirtualModules = viteDevServer => {
   vmods.forEach(vmod$1 => {
     let mod = viteDevServer.moduleGraph.getModuleById(vmod.resolve(vmod$1));
@@ -134,13 +141,10 @@ const getHash = (source, maxLength) => {
   let hash = node_crypto.createHash("sha256").update(source).digest("hex");
   return typeof maxLength === "number" ? hash.slice(0, maxLength) : hash;
 };
-const isClientRoute = id => {
-  return id.endsWith(CLIENT_ROUTE_QUERY_STRING);
-};
 const resolveChunk = (ctx, viteManifest, absoluteFilePath) => {
   let vite = importViteEsmSync.importViteEsmSync();
   let rootRelativeFilePath = vite.normalizePath(path__namespace.relative(ctx.rootDirectory, absoluteFilePath));
-  let entryChunk = viteManifest[rootRelativeFilePath + CLIENT_ROUTE_QUERY_STRING] ?? viteManifest[rootRelativeFilePath];
+  let entryChunk = viteManifest[rootRelativeFilePath + BUILD_CLIENT_ROUTE_QUERY_STRING] ?? viteManifest[rootRelativeFilePath];
   if (!entryChunk) {
     let knownManifestKeys = Object.keys(viteManifest).map(key => '"' + key + '"').join(", ");
     throw new Error(`No manifest entry found for "${rootRelativeFilePath}". Known manifest keys: ${knownManifestKeys}`);
@@ -233,6 +237,7 @@ const getServerBundleBuildConfig = viteUserConfig => {
   return viteUserConfig.__reactRouterServerBundleBuildConfig;
 };
 let getServerBuildDirectory = ctx => path__namespace.join(ctx.reactRouterConfig.buildDirectory, "server", ...(ctx.serverBundleBuildConfig ? [ctx.serverBundleBuildConfig.serverBundleId] : []));
+let getReactServerBuildDirectory = reactRouterConfig => path__namespace.join(reactRouterConfig.buildDirectory, "react-server");
 let getClientBuildDirectory = reactRouterConfig => path__namespace.join(reactRouterConfig.buildDirectory, "client");
 let defaultEntriesDir = path__namespace.resolve(__dirname, "..", "config", "defaults");
 let defaultEntries = fse__namespace.readdirSync(defaultEntriesDir).map(filename => path__namespace.join(defaultEntriesDir, filename));
@@ -280,6 +285,7 @@ const reactRouterVitePlugin = _config => {
     });
     let {
       entryClientFilePath,
+      entryReactServerFilePath,
       entryServerFilePath
     } = await config.resolveEntryFiles({
       rootDirectory,
@@ -297,6 +303,7 @@ const reactRouterVitePlugin = _config => {
       reactRouterConfig,
       rootDirectory,
       entryClientFilePath,
+      entryReactServerFilePath,
       entryServerFilePath,
       viteManifestEnabled,
       ...ssrBuildCtx
@@ -314,7 +321,7 @@ const reactRouterVitePlugin = _config => {
     ctx.serverBundleBuildConfig.routes :
     // Otherwise, all routes are imported as usual
     ctx.reactRouterConfig.routes;
-    return `
+    let code = `
     import * as entryServer from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, ctx.entryServerFilePath))};
     ${Object.keys(routes).map((key, index) => {
       let route = routes[key];
@@ -324,7 +331,7 @@ const reactRouterVitePlugin = _config => {
       export const assetsBuildDirectory = ${JSON.stringify(path__namespace.relative(ctx.rootDirectory, getClientBuildDirectory(ctx.reactRouterConfig)))};
       export const basename = ${JSON.stringify(ctx.reactRouterConfig.basename)};
       export const future = ${JSON.stringify(ctx.reactRouterConfig.future)};
-      export const isSpaMode = ${!ctx.reactRouterConfig.ssr};
+      export const isSpaMode = ${!ctx.reactRouterConfig.ssr && ctx.reactRouterConfig.prerender == null};
       export const publicPath = ${JSON.stringify(ctx.reactRouterConfig.publicPath)};
       export const entry = { module: entryServer };
       export const routes = {
@@ -340,6 +347,61 @@ const reactRouterVitePlugin = _config => {
         }`;
     }).join(",\n  ")}
       };`;
+    if (ctx.reactRouterConfig.future.unstable_serverComponents) {
+      code += `
+      export { default as clientReferences } from ${JSON.stringify(clientReferencesId)};`;
+    }
+    return code;
+  };
+  let {
+    clientModules,
+    serverModules
+  } = getReactServerOptions();
+  let getReactServerEntry = () => {
+    invariant["default"](viteConfig, "viteconfig required to generate the react-server entry");
+    invariant["default"](ctx.entryReactServerFilePath, "entryReactServerFilePath required to generate the react-server entry");
+    let routes = ctx.serverBundleBuildConfig ?
+    // For server bundle builds, the server build should only import the
+    // routes for this bundle rather than importing all routes
+    ctx.serverBundleBuildConfig.routes :
+    // Otherwise, all routes are imported as usual
+    ctx.reactRouterConfig.routes;
+    return `
+      import * as entryServer from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, ctx.entryReactServerFilePath))};
+      ${Object.keys(routes).map((key, index) => {
+      let route = routes[key];
+      return `import * as route${index} from ${JSON.stringify(resolveFileUrl.resolveFileUrl(ctx, resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)))};`;
+    }).join("\n")}
+      export const future = ${JSON.stringify(ctx.reactRouterConfig.future)};
+      export const basename = ${JSON.stringify(ctx.reactRouterConfig.basename)};
+      export const entry = { module: entryServer };
+      export const routes = {
+        ${Object.keys(routes).map((key, index) => {
+      let 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  ")}
+      };`;
+  };
+  let getClientReferencesEntry = () => {
+    let result = "export default {";
+    for (let clientModule of clientModules) {
+      result += `${JSON.stringify(prodHash(clientModule))}: () => import(${JSON.stringify(clientModule)}),`;
+    }
+    return `${result}};`;
+  };
+  let getServerReferencesEntry = () => {
+    let result = "export default {";
+    for (let serverModule of serverModules) {
+      result += `${JSON.stringify(prodHash(serverModule))}: () => import(${JSON.stringify(serverModule)}),`;
+    }
+    return `${result}\};`;
   };
   let loadViteManifest = async directory => {
     let manifestContents = await fse__namespace.readFile(path__namespace.resolve(directory, ".vite", "manifest.json"), "utf-8");
@@ -432,7 +494,7 @@ const reactRouterVitePlugin = _config => {
         path: route.path,
         index: route.index,
         caseSensitive: route.caseSensitive,
-        module: path__namespace.posix.join(ctx.reactRouterConfig.publicPath, `${resolveFileUrl.resolveFileUrl(ctx, resolveRelativeRouteFilePath(route, ctx.reactRouterConfig))}${CLIENT_ROUTE_QUERY_STRING}`),
+        module: path__namespace.posix.join(ctx.reactRouterConfig.publicPath, `${resolveFileUrl.resolveFileUrl(ctx, resolveRelativeRouteFilePath(route, ctx.reactRouterConfig))}`),
         hasAction: sourceExports.includes("action"),
         hasLoader: sourceExports.includes("loader"),
         hasClientAction: sourceExports.includes("clientAction"),
@@ -538,9 +600,9 @@ const reactRouterVitePlugin = _config => {
               rollupOptions: {
                 ...baseRollupOptions,
                 preserveEntrySignatures: "exports-only",
-                input: [ctx.entryClientFilePath, ...Object.values(ctx.reactRouterConfig.routes).map(route => `${path__namespace.resolve(ctx.reactRouterConfig.appDirectory, route.file)}${CLIENT_ROUTE_QUERY_STRING}`)]
+                input: [ctx.entryClientFilePath, ...Object.values(ctx.reactRouterConfig.routes).map(route => `${path__namespace.resolve(ctx.reactRouterConfig.appDirectory, route.file)}${BUILD_CLIENT_ROUTE_QUERY_STRING}`), ...(ctx.reactRouterConfig.future.unstable_serverComponents ? clientModules : [])]
               }
-            } : {
+            } : !ctx.reactRouterConfig.future.unstable_serverComponents || !process.env.REACT_SERVER_BUILD ? {
               // We move SSR-only assets to client assets. Note that the
               // SSR build can also emit code-split JS files (e.g. by
               // dynamic import) under the same assets directory
@@ -561,6 +623,28 @@ const reactRouterVitePlugin = _config => {
                   format: ctx.reactRouterConfig.serverModuleFormat
                 }
               }
+            } : {
+              // We move SSR-only assets to client assets. Note that the
+              // SSR build can also emit code-split JS files (e.g. by
+              // dynamic import) under the same assets directory
+              // regardless of "ssrEmitAssets" option, so we also need to
+              // keep these JS files have to be kept as-is.
+              ssrEmitAssets: true,
+              copyPublicDir: false,
+              // Assets in the public directory are only used by the client
+              manifest: true,
+              // We need the manifest to detect SSR-only assets
+              outDir: getReactServerBuildDirectory(ctx.reactRouterConfig),
+              rollupOptions: {
+                ...baseRollupOptions,
+                preserveEntrySignatures: "exports-only",
+                // TODO: Add server references (serverModules) to input
+                input: reactServerBuildId,
+                output: {
+                  entryFileNames: ctx.reactRouterConfig.serverBuildFile,
+                  format: ctx.reactRouterConfig.serverModuleFormat
+                }
+              }
             })
           }
         } : undefined),
@@ -635,8 +719,8 @@ const reactRouterVitePlugin = _config => {
       if (styles.isCssModulesFile(id)) {
         cssModulesManifest[id] = code;
       }
-      if (isClientRoute(id)) {
-        let routeModuleId = id.replace(CLIENT_ROUTE_QUERY_STRING, "");
+      if (id.endsWith(BUILD_CLIENT_ROUTE_QUERY_STRING)) {
+        let routeModuleId = id.replace(BUILD_CLIENT_ROUTE_QUERY_STRING, "");
         let sourceExports = await getRouteModuleExports(viteChildCompiler, ctx, routeModuleId);
         let routeFileName = path__namespace.basename(routeModuleId);
         let clientExports = sourceExports.filter(exportName => CLIENT_ROUTE_EXPORTS.includes(exportName)).join(", ");
@@ -714,7 +798,7 @@ const reactRouterVitePlugin = _config => {
       // After the SSR build is finished, we inspect the Vite manifest for
       // the SSR build and move server-only assets to client assets directory
       async handler() {
-        if (!ctx.isSsrBuild) {
+        if (!ctx.isSsrBuild || process.env.REACT_SERVER_BUILD) {
           return;
         }
         invariant["default"](viteConfig);
@@ -748,8 +832,19 @@ const reactRouterVitePlugin = _config => {
         if (movedAssetPaths.length) {
           viteConfig.logger.info(["", `${colors__default["default"].green("✓")} ${movedAssetPaths.length} asset${movedAssetPaths.length > 1 ? "s" : ""} moved from React Router server build to client assets.`, ...movedAssetPaths.map(movedAssetPath => colors__default["default"].dim(path__namespace.relative(ctx.rootDirectory, movedAssetPath))), ""].join("\n"));
         }
+        if (ctx.reactRouterConfig.prerender != null) {
+          // If we have prerender routes, that takes precedence over SPA mode
+          // which is ssr:false and only the rot route being rendered
+          await handlePrerender(viteConfig, ctx.reactRouterConfig, serverBuildDirectory, clientBuildDirectory);
+        } else if (!ctx.reactRouterConfig.ssr) {
+          await handleSpaMode(viteConfig, ctx.reactRouterConfig, serverBuildDirectory, clientBuildDirectory);
+        }
+        // For both SPA mode and prerendering, we can remove the server builds
+        // if ssr:false is set
         if (!ctx.reactRouterConfig.ssr) {
-          await handleSpaMode(serverBuildDirectory, ctx.reactRouterConfig.serverBuildFile, clientBuildDirectory, viteConfig, ctx.reactRouterConfig.basename);
+          // Cleanup - we no longer need the server build assets
+          viteConfig.logger.info(["Removing the server build in", colors__default["default"].green(serverBuildDirectory), "due to ssr:false"].join(" "));
+          fse__namespace.removeSync(serverBuildDirectory);
         }
       }
     },
@@ -787,6 +882,18 @@ const reactRouterVitePlugin = _config => {
             });
             return `window.__remixManifest=${reactRouterManifestString};`;
           }
+        case vmod.resolve(reactServerBuildId):
+          {
+            return getReactServerEntry();
+          }
+        case vmod.resolve(clientReferencesId):
+          {
+            return getClientReferencesEntry();
+          }
+        case vmod.resolve(serverReferencesId):
+          {
+            return getServerReferencesEntry();
+          }
       }
     }
   }, {
@@ -842,9 +949,20 @@ const reactRouterVitePlugin = _config => {
   }, {
     name: "react-router-route-exports",
     async transform(code, id, options) {
-      if (options !== null && options !== void 0 && options.ssr) return;
+      var _ctx;
+      if (options !== null && options !== void 0 && options.ssr && !((_ctx = ctx) !== null && _ctx !== void 0 && _ctx.reactRouterConfig.future.unstable_serverComponents)) {
+        return;
+      }
       let route = getRoute(ctx.reactRouterConfig, id);
       if (!route) return;
+      let [filepath] = id.split("?");
+      if (ctx.reactRouterConfig.future.unstable_serverComponents && process.env.REACT_SERVER_BUILD) {
+        return removeExports.removeExports(code, CLIENT_ROUTE_EXPORTS, {
+          sourceMaps: true,
+          filename: id,
+          sourceFileName: filepath
+        });
+      }
       if (!ctx.reactRouterConfig.ssr) {
         let serverOnlyExports = esModuleLexer.parse(code)[1].map(exp => exp.n).filter(exp => SERVER_ONLY_ROUTE_EXPORTS.includes(exp));
         if (serverOnlyExports.length > 0) {
@@ -860,7 +978,6 @@ const reactRouterVitePlugin = _config => {
           }
         }
       }
-      let [filepath] = id.split("?");
       return removeExports.removeExports(code, SERVER_ONLY_ROUTE_EXPORTS, {
         sourceMaps: true,
         filename: id,
@@ -902,11 +1019,6 @@ const reactRouterVitePlugin = _config => {
       let isJSX = filepath.endsWith("x");
       let useFastRefresh = !ssr && (isJSX || code.includes(devRuntime));
       if (!useFastRefresh) return;
-      if (isClientRoute(id)) {
-        return {
-          code: addRefreshWrapper(ctx.reactRouterConfig, code, id)
-        };
-      }
       let result = await babel__default["default"].transformAsync(code, {
         babelrc: false,
         configFile: false,
@@ -961,6 +1073,82 @@ const reactRouterVitePlugin = _config => {
       });
       return modules;
     }
+  }, {
+    name: "remix:react-server",
+    config() {
+      const env = process.env.REACT_SERVER_BUILD ? "server" : "client";
+      switch (env) {
+        case "server":
+          return {
+            optimizeDeps: {
+              include: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"]
+            },
+            resolve: {
+              conditions: ["react-server"]
+            },
+            ssr: {
+              noExternal: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"],
+              optimizeDeps: {
+                include: ["react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-server-dom-diy/server"]
+              },
+              resolve: {
+                conditions: ["react-server"],
+                externalConditions: ["react-server"]
+              }
+            }
+          };
+      }
+    },
+    configResolved(resolvedViteConfig) {
+      viteConfig = resolvedViteConfig;
+      invariant["default"](viteConfig);
+    },
+    transform(...args) {
+      invariant["default"](viteConfig);
+      const env = process.env.REACT_SERVER_BUILD ? "server" : "client";
+      let hash = viteConfig.mode !== "production" ? devHash : prodHash;
+      switch (env) {
+        case "client":
+          return unpluginRsc.rscClientPlugin.vite({
+            include: ["**/*"],
+            transformModuleId: hash,
+            useServerRuntime: {
+              function: "createServerReference",
+              module: "@react-router/dev/dist/runtime.client.js"
+            },
+            onModuleFound(id, type) {
+              switch (type) {
+                case "use server":
+                  serverModules.add(id);
+                  break;
+              }
+            }
+          }).transform.call(this, ...args);
+        case "server":
+          return unpluginRsc.rscServerPlugin.vite({
+            include: ["**/*"],
+            transformModuleId: hash,
+            useClientRuntime: {
+              function: "registerClientReference",
+              module: "react-server-dom-diy/server"
+            },
+            useServerRuntime: {
+              function: "registerServerReference",
+              module: "react-server-dom-diy/server"
+            },
+            onModuleFound(id, type) {
+              switch (type) {
+                case "use client":
+                  clientModules.add(id);
+                  break;
+                case "use server":
+                  serverModules.add(id);
+                  break;
+              }
+            }
+          }).transform.call(this, ...args);
+      }
+    }
   }];
 };
 function isInReactRouterMonorepo() {
@@ -975,7 +1163,7 @@ function isEqualJson(v1, v2) {
 }
 function addRefreshWrapper(reactRouterConfig, code, id) {
   let route = getRoute(reactRouterConfig, id);
-  let acceptExports = route || isClientRoute(id) ? ["clientAction", "clientLoader", "handle", "meta", "links", "shouldRevalidate"] : [];
+  let acceptExports = route ? ["clientAction", "clientLoader", "handle", "meta", "links", "shouldRevalidate"] : [];
   return REACT_REFRESH_HEADER.replaceAll("__SOURCE__", JSON.stringify(id)) + code + REACT_REFRESH_FOOTER.replaceAll("__SOURCE__", JSON.stringify(id)).replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports)).replaceAll("__ROUTE_ID__", JSON.stringify(route === null || route === void 0 ? void 0 : route.id));
 }
 const REACT_REFRESH_HEADER = `
@@ -1039,32 +1227,151 @@ async function getRouteMetadata(ctx, viteChildCompiler, route, readRouteFile) {
   };
   return info;
 }
-async function handleSpaMode(serverBuildDirectoryPath, serverBuildFile, clientBuildDirectory, viteConfig, basename) {
-  // Create a handler and call it for the `/` path - rendering down to the
-  // proper HydrateFallback ... or not!  Maybe they have a static landing page
-  // generated from routes/_index.tsx.
-  let serverBuildPath = path__namespace.join(serverBuildDirectoryPath, serverBuildFile);
+async function getPrerenderBuildAndHandler(viteConfig, reactRouterConfig, serverBuildDirectory) {
+  let serverBuildPath = path__namespace.join(serverBuildDirectory, reactRouterConfig.serverBuildFile);
   let build = await import(url__namespace.pathToFileURL(serverBuildPath).toString());
   let {
     createRequestHandler: createHandler
   } = await import('@react-router/node');
-  let handler = createHandler(build, viteConfig.mode);
-  let response = await handler(new Request(`http://localhost${basename}`));
+  return {
+    build,
+    handler: createHandler(build, viteConfig.mode)
+  };
+}
+async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory, clientBuildDirectory) {
+  let {
+    handler
+  } = await getPrerenderBuildAndHandler(viteConfig, reactRouterConfig, serverBuildDirectory);
+  let request = new Request(`http://localhost${reactRouterConfig.basename}`);
+  let response = await handler(request);
+  let html = await response.text();
+  validatePrerenderedResponse(response, html, "SPA Mode", "/");
+  validatePrerenderedHtml(html, "SPA Mode");
+  // Write out the index.html file for the SPA
+  await fse__namespace.writeFile(path__namespace.join(clientBuildDirectory, "index.html"), html);
+  viteConfig.logger.info("SPA Mode: index.html has been written to your " + colors__default["default"].bold(path__namespace.relative(process.cwd(), clientBuildDirectory)) + " directory");
+}
+async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirectory, clientBuildDirectory) {
+  let {
+    build,
+    handler
+  } = await getPrerenderBuildAndHandler(viteConfig, reactRouterConfig, serverBuildDirectory);
+  let routes = createPrerenderRoutes(build.routes);
+  let routesToPrerender = reactRouterConfig.prerender || ["/"];
+  let requestInit = {
+    headers: {
+      // Header that can be used in the loader to know if you're running at
+      // build time or runtime
+      "X-React-Router-Prerender": "yes"
+    }
+  };
+  for (let path of routesToPrerender) {
+    var _matchRoutes;
+    let hasLoaders = (_matchRoutes = reactRouter.matchRoutes(routes, path)) === null || _matchRoutes === void 0 ? void 0 : _matchRoutes.some(m => m.route.loader);
+    if (hasLoaders) {
+      await prerenderData(handler, path, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit);
+    }
+    await prerenderRoute(handler, path, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit);
+  }
+  async function prerenderData(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
+    let normalizedPath = `${reactRouterConfig.basename}${prerenderPath === "/" ? "/_root.data" : `${prerenderPath.replace(/\/$/, "")}.data`}`.replace(/\/\/+/g, "/");
+    let request = new Request(`http://localhost${normalizedPath}`, requestInit);
+    let response = await handler(request);
+    let data = await response.text();
+    validatePrerenderedResponse(response, data, "Prerender", normalizedPath);
+    // Write out the .data file
+    let outdir = path__namespace.relative(process.cwd(), clientBuildDirectory);
+    let outfile = path__namespace.join(outdir, normalizedPath.split("/").join(path__namespace.sep));
+    await fse__namespace.ensureDir(path__namespace.dirname(outfile));
+    await fse__namespace.outputFile(outfile, data);
+    viteConfig.logger.info(`Prerender: Generated ${colors__default["default"].bold(outfile)}`);
+  }
+}
+async function prerenderRoute(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
+  let normalizedPath = `${reactRouterConfig.basename}${prerenderPath}/`.replace(/\/\/+/g, "/");
+  let request = new Request(`http://localhost${normalizedPath}`, requestInit);
+  let response = await handler(request);
   let html = await response.text();
+  validatePrerenderedResponse(response, html, "Prerender", normalizedPath);
+  if (!reactRouterConfig.ssr) {
+    validatePrerenderedHtml(html, "Prerender");
+  }
+  // Write out the HTML file
+  let outdir = path__namespace.relative(process.cwd(), clientBuildDirectory);
+  let outfile = path__namespace.join(outdir, ...normalizedPath.split("/"), "index.html");
+  await fse__namespace.ensureDir(path__namespace.dirname(outfile));
+  await fse__namespace.outputFile(outfile, html);
+  viteConfig.logger.info(`Prerender: Generated ${colors__default["default"].bold(outfile)}`);
+}
+function validatePrerenderedResponse(response, html, prefix, path) {
   if (response.status !== 200) {
-    throw new Error(`SPA Mode: Received a ${response.status} status code from ` + `\`entry.server.tsx\` while generating the \`index.html\` file.\n${html}`);
+    throw new Error(`${prefix}: Received a ${response.status} status code from ` + `\`entry.server.tsx\` while prerendering the \`${path}\` ` + `path.\n${html}`);
   }
+}
+function validatePrerenderedHtml(html, prefix) {
   if (!html.includes("window.__remixContext =") || !html.includes("window.__remixRouteModules =")) {
-    throw new Error("SPA Mode: Did you forget to include <Scripts/> in your `root.tsx` " + "`HydrateFallback` component?  Your `index.html` file cannot hydrate " + "into a SPA without `<Scripts />`.");
+    throw new Error(`${prefix}: Did you forget to include <Scripts/> in your root route? ` + "Your pre-rendered HTML files cannot hydrate without `<Scripts />`.");
   }
-  // Write out the index.html file for the SPA
-  await fse__namespace.writeFile(path__namespace.join(clientBuildDirectory, "index.html"), html);
-  viteConfig.logger.info("SPA Mode: index.html has been written to your " + colors__default["default"].bold(path__namespace.relative(process.cwd(), clientBuildDirectory)) + " directory");
-  // Cleanup - we no longer need the server build assets
-  fse__namespace.removeSync(serverBuildDirectoryPath);
+}
+// Note: Duplicated from remix-server-runtime
+function groupRoutesByParentId(manifest) {
+  let routes = {};
+  Object.values(manifest).forEach(route => {
+    let parentId = route.parentId || "";
+    if (!routes[parentId]) {
+      routes[parentId] = [];
+    }
+    routes[parentId].push(route);
+  });
+  return routes;
+}
+// Note: Duplicated from remix-server-runtime
+function createPrerenderRoutes(manifest, parentId = "", routesByParentId = groupRoutesByParentId(manifest)) {
+  return (routesByParentId[parentId] || []).map(route => {
+    let commonRoute = {
+      // Always include root due to default boundaries
+      hasErrorBoundary: route.id === "root" || route.module.ErrorBoundary != null,
+      id: route.id,
+      path: route.path,
+      loader: route.module.loader ? () => null : undefined,
+      action: undefined,
+      handle: route.module.handle
+    };
+    return route.index ? {
+      index: true,
+      ...commonRoute
+    } : {
+      caseSensitive: route.caseSensitive,
+      children: createPrerenderRoutes(manifest, route.id, routesByParentId),
+      ...commonRoute
+    };
+  });
+}
+function prodHash(str, _) {
+  return `/${path__namespace.relative(process.cwd(), str)}`;
+}
+function devHash(str, _) {
+  const resolved = path__namespace.resolve(str);
+  let unixPath = resolved.replace(/\\/g, "/");
+  if (!unixPath.startsWith("/")) {
+    unixPath = `/${unixPath}`;
+  }
+  if (resolved.startsWith(process.cwd())) {
+    return `/${path__namespace.relative(process.cwd(), unixPath)}`;
+  }
+  return `/@fs${unixPath}`;
+}
+global.__clientModules = global.__clientModules || new Set();
+global.__serverModules = global.__serverModules || new Set();
+function getReactServerOptions() {
+  return {
+    clientModules: global.__clientModules,
+    serverModules: global.__serverModules
+  };
 }
 
 exports.extractPluginContext = extractPluginContext;
+exports.getReactServerOptions = getReactServerOptions;
 exports.getServerBuildDirectory = getServerBuildDirectory;
 exports.loadPluginContext = loadPluginContext;
 exports.reactRouterVitePlugin = reactRouterVitePlugin;