@react-router/dev 7.13.2-pre.0 → 7.14.0-pre.0

package/CHANGELOG.md

@@ -1,11 +1,86 @@
 # `@react-router/dev`
 
-## 7.13.2-pre.0
+## 7.14.0-pre.0
+
+### Minor Changes
+
+- Add support for Vite 8 ([#14876](https://github.com/remix-run/react-router/pull/14876))
+
+### Patch Changes
+
+- support for prerendering multiple server bundles with v8_viteEnvironmentApi ([#14921](https://github.com/remix-run/react-router/pull/14921))
+- rsc framework mode prerender / spa mode support ([#14907](https://github.com/remix-run/react-router/pull/14907))
+- UNSTABLE RSC FRAMEWORK MODE BREAKING CHANGE - Existing route module exports remain unchanged from stable v7 non-RSC mode, but new exports are added for RSC mode. If you want to use RSC features, you will need to update your route modules to export the new annotations. ([#14901](https://github.com/remix-run/react-router/pull/14901))
+
+  If you are using RSC framework mode currently, you will need to update your route modules to the new conventions. The following route module components have their own mutually exclusive server component counterparts:
+
+  | Server Component Export | Client Component  |
+  | ----------------------- | ----------------- |
+  | `ServerComponent`       | `default`         |
+  | `ServerErrorBoundary`   | `ErrorBoundary`   |
+  | `ServerLayout`          | `Layout`          |
+  | `ServerHydrateFallback` | `HydrateFallback` |
+
+  If you were previously exporting a `ServerComponent`, your `ErrorBoundary`, `Layout`, and `HydrateFallback` were also server components. If you want to keep those as server components, you can rename them and prefix them with `Server`. If you were previously importing the implementations of those components from a client module, you can simply inline them.
+
+  Example:
+
+  Before
+
+  ```tsx
+  import { ErrorBoundary as ClientErrorBoundary } from "./client";
+
+  export function ServerComponent() {
+    // ...
+  }
+
+  export function ErrorBoundary() {
+    return <ClientErrorBoundary />;
+  }
+
+  export function Layout() {
+    // ...
+  }
+
+  export function HydrateFallback() {
+    // ...
+  }
+  ```
+
+  After
+
+  ```tsx
+  export function ServerComponent() {
+    // ...
+  }
+
+  export function ErrorBoundary() {
+    // previous implementation of ClientErrorBoundary, this is now a client component
+  }
+
+  export function ServerLayout() {
+    // rename previous Layout export to ServerLayout to make it a server component
+  }
+
+  export function ServerHydrateFallback() {
+    // rename previous HydrateFallback export to ServerHydrateFallback to make it a server component
+  }
+  ```
+
+- update the reveal command to support rsc for `entry.client`, `entry.rsc`, `entry.ssr` ([#14904](https://github.com/remix-run/react-router/pull/14904))
+- Updated dependencies:
+  - `react-router@7.14.0-pre.0`
+  - `@react-router/node@7.14.0-pre.0`
+  - `@react-router/serve@7.14.0-pre.0`
+
+## 7.13.2
 
 ### Patch Changes
 
 - Fix `react-router dev` crash when Unix socket files exist in the project root ([#14854](https://github.com/remix-run/react-router/pull/14854))
+
 - Escape redirect locations in prerendered redirect HTML ([#14880](https://github.com/remix-run/react-router/pull/14880))
+
 - Add `future.unstable_passThroughRequests` flag ([#14775](https://github.com/remix-run/react-router/pull/14775))
 
   By default, React Router normalizes the `request.url` passed to your `loader`, `action`, and `middleware` functions by removing React Router's internal implementation details (`.data` suffixes, `index` + `_routes` query params).
@@ -45,9 +120,9 @@
   If you don't have the flag enabled, then `unstable_url` will match `request.url`.
 
 - Updated dependencies:
-  - `react-router@7.13.2-pre.0`
-  - `@react-router/node@7.13.2-pre.0`
-  - `@react-router/serve@7.13.2-pre.0`
+  - `react-router@7.13.2`
+  - `@react-router/node@7.13.2`
+  - `@react-router/serve@7.13.2`
 
 ## 7.13.1
 

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.13.2-pre.0
+ * @react-router/dev v7.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -511,7 +511,7 @@ async function resolveConfig({
     unstable_previewServerPrerendering: userAndPresetConfigs.future?.unstable_previewServerPrerendering ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
-    v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
+    v8_viteEnvironmentApi: (userAndPresetConfigs.future?.v8_viteEnvironmentApi || userAndPresetConfigs.future?.unstable_previewServerPrerendering) ?? false
   };
   let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
@@ -1183,7 +1183,7 @@ function getRouteAnnotations({
         module: Module
       }>
     ` + "\n\n" + generate(matchesType).code + "\n\n" + import_dedent.default`
-      type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }, ${ctx.rsc}>;
+      type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
 
       export namespace Route {
         // links
@@ -1220,11 +1220,20 @@ function getRouteAnnotations({
         // HydrateFallback
         export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
 
+        // ServerHydrateFallback
+        export type ServerHydrateFallbackProps = Annotations["ServerHydrateFallbackProps"];
+
         // Component
         export type ComponentProps = Annotations["ComponentProps"];
 
+        // ServerComponent
+        export type ServerComponentProps = Annotations["ServerComponentProps"];
+
         // ErrorBoundary
         export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
+
+        // ServerErrorBoundary
+        export type ServerErrorBoundaryProps = Annotations["ServerErrorBoundaryProps"];
       }
     `;
   return { filename: filename2, content };
@@ -1370,7 +1379,8 @@ async function hasReactRouterRscPlugin({
   root,
   viteBuildOptions: { config, logLevel, mode }
 }) {
-  const vite2 = await import("vite");
+  await preloadVite();
+  const vite2 = getVite();
   const viteConfig = await vite2.resolveConfig(
     {
       configFile: config,
@@ -1392,6 +1402,7 @@ async function hasReactRouterRscPlugin({
 var init_has_rsc_plugin = __esm({
   "vite/has-rsc-plugin.ts"() {
     "use strict";
+    init_vite();
   }
 });
 
@@ -2306,12 +2317,16 @@ async function dev2(root, options = {}) {
 var clientEntries = ["entry.client.tsx", "entry.client.js", "entry.client.jsx"];
 var serverEntries = ["entry.server.tsx", "entry.server.js", "entry.server.jsx"];
 var entries = ["entry.client", "entry.server"];
+var rscEntries = ["entry.client", "entry.rsc", "entry.ssr"];
 var conjunctionListFormat = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
 });
 async function generateEntry(entry, rootDirectory, flags = {}) {
   rootDirectory = resolveRootDirectory(rootDirectory, flags);
+  let configDir = "defaults";
+  let entriesToUse = entries;
+  let isRsc = false;
   if (await hasReactRouterRscPlugin({
     root: rootDirectory,
     viteBuildOptions: {
@@ -2319,12 +2334,15 @@ async function generateEntry(entry, rootDirectory, flags = {}) {
       mode: flags.mode
     }
   })) {
-    console.error(
-      import_picocolors8.default.red(
-        `The reveal command is currently not supported in RSC Framework Mode.`
-      )
-    );
-    process.exit(1);
+    if (!entry) {
+      await generateEntry("entry.client", rootDirectory, flags);
+      await generateEntry("entry.rsc", rootDirectory, flags);
+      await generateEntry("entry.ssr", rootDirectory, flags);
+      return;
+    }
+    configDir = "default-rsc-entries";
+    entriesToUse = rscEntries;
+    isRsc = true;
   }
   if (!entry) {
     await generateEntry("entry.client", rootDirectory, flags);
@@ -2340,46 +2358,65 @@ async function generateEntry(entry, rootDirectory, flags = {}) {
     return;
   }
   let appDirectory = configResult.value.appDirectory;
-  if (!entries.includes(entry)) {
-    let entriesArray = Array.from(entries);
+  if (!entriesToUse.includes(entry)) {
+    let entriesArray = Array.from(entriesToUse);
     let list = conjunctionListFormat.format(entriesArray);
     console.error(
       import_picocolors8.default.red(`Invalid entry file. Valid entry files are ${list}`)
     );
     return;
   }
-  let { readPackageJSON } = await import("pkg-types");
-  let pkgJson = await readPackageJSON(rootDirectory);
-  let deps = pkgJson.dependencies ?? {};
-  if (!deps["@react-router/node"]) {
-    console.error(import_picocolors8.default.red(`No default server entry detected.`));
-    return;
-  }
   let defaultsDirectory = path9.resolve(
     path9.dirname(require.resolve("@react-router/dev/package.json")),
     "dist",
     "config",
-    "defaults"
-  );
-  let defaultEntryClient = path9.resolve(defaultsDirectory, "entry.client.tsx");
-  let defaultEntryServer = path9.resolve(
-    defaultsDirectory,
-    `entry.server.node.tsx`
+    configDir
   );
-  let isServerEntry = entry === "entry.server";
-  let contents = isServerEntry ? await createServerEntry(rootDirectory, appDirectory, defaultEntryServer) : await createClientEntry(rootDirectory, appDirectory, defaultEntryClient);
-  let useTypeScript = flags.typescript ?? true;
-  let outputExtension = useTypeScript ? "tsx" : "jsx";
-  let outputEntry = `${entry}.${outputExtension}`;
-  let outputFile = path9.resolve(appDirectory, outputEntry);
-  if (!useTypeScript) {
-    let javascript = await transpile(contents, {
-      cwd: rootDirectory,
-      filename: isServerEntry ? defaultEntryServer : defaultEntryClient
-    });
-    await (0, import_promises4.writeFile)(outputFile, javascript, "utf-8");
+  let outputFile;
+  if (isRsc) {
+    let defaultEntry = path9.resolve(defaultsDirectory, `${entry}.tsx`);
+    outputFile = path9.resolve(appDirectory, `${entry}.tsx`);
+    if ((0, import_node_fs4.existsSync)(outputFile)) {
+      let relative7 = path9.relative(rootDirectory, outputFile);
+      console.error(import_picocolors8.default.red(`Entry file ${relative7} already exists.`));
+      return;
+    }
+    await (0, import_promises4.copyFile)(defaultEntry, outputFile);
   } else {
-    await (0, import_promises4.writeFile)(outputFile, contents, "utf-8");
+    let { readPackageJSON } = await import("pkg-types");
+    let pkgJson = await readPackageJSON(rootDirectory);
+    let deps = pkgJson.dependencies ?? {};
+    if (!deps["@react-router/node"]) {
+      console.error(import_picocolors8.default.red(`No default server entry detected.`));
+      return;
+    }
+    let defaultEntryClient = path9.resolve(
+      defaultsDirectory,
+      "entry.client.tsx"
+    );
+    let defaultEntryServer = path9.resolve(
+      defaultsDirectory,
+      `entry.server.node.tsx`
+    );
+    let isServerEntry = entry === "entry.server";
+    let contents = isServerEntry ? await createServerEntry(rootDirectory, appDirectory, defaultEntryServer) : await createClientEntry(
+      rootDirectory,
+      appDirectory,
+      defaultEntryClient
+    );
+    let useTypeScript = flags.typescript ?? true;
+    let outputExtension = useTypeScript ? "tsx" : "jsx";
+    let outputEntry = `${entry}.${outputExtension}`;
+    outputFile = path9.resolve(appDirectory, outputEntry);
+    if (!useTypeScript) {
+      let javascript = await transpile(contents, {
+        cwd: rootDirectory,
+        filename: isServerEntry ? defaultEntryServer : defaultEntryClient
+      });
+      await (0, import_promises4.writeFile)(outputFile, javascript, "utf-8");
+    } else {
+      await (0, import_promises4.writeFile)(outputFile, contents, "utf-8");
+    }
   }
   console.log(
     import_picocolors8.default.blue(

package/dist/config/default-rsc-entries/entry.client.tsx

@@ -24,7 +24,6 @@ setServerCallback(
 );
 
 createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
-  // @ts-expect-error - on 18 types, requires 19.
   startTransition(async () => {
     const formState =
       payload.type === "render" ? await payload.formState : undefined;
@@ -33,12 +32,11 @@ createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
       document,
       <StrictMode>
         <RSCHydratedRouter
-          payload={payload}
           createFromReadableStream={createFromReadableStream}
+          payload={payload}
         />
       </StrictMode>,
       {
-        // @ts-expect-error - no types for this yet
         formState,
       },
     );

package/dist/config/default-rsc-entries/entry.rsc.tsx

@@ -13,6 +13,7 @@ import {
 
 // Import the routes generated by routes.ts
 import routes from "virtual:react-router/unstable_rsc/routes";
+import routeDiscovery from "virtual:react-router/unstable_rsc/route-discovery";
 import basename from "virtual:react-router/unstable_rsc/basename";
 import unstable_reactRouterServeConfig from "virtual:react-router/unstable_rsc/react-router-serve-config";
 
@@ -35,6 +36,8 @@ export function fetchServer(
     requestContext,
     // The app routes.
     routes,
+    // The route discovery configuration.
+    routeDiscovery,
     // Encode the match with the React Server implementation.
     generateResponse(match, options) {
       return new Response(renderToReadableStream(match.payload, options), {

package/dist/config/default-rsc-entries/entry.ssr.tsx

@@ -1,5 +1,4 @@
 import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr";
-// @ts-expect-error - no types for this, can import from root once on latest 19
 import { renderToReadableStream } from "react-dom/server.edge";
 import {
   unstable_routeRSCServerRequest as routeRSCServerRequest,

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.13.2-pre.0
+ * @react-router/dev v7.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.13.2-pre.0
+ * @react-router/dev v7.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.13.2-pre.0
+ * @react-router/dev v7.14.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -537,7 +537,7 @@ async function resolveConfig({
     unstable_previewServerPrerendering: userAndPresetConfigs.future?.unstable_previewServerPrerendering ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
-    v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
+    v8_viteEnvironmentApi: (userAndPresetConfigs.future?.v8_viteEnvironmentApi || userAndPresetConfigs.future?.unstable_previewServerPrerendering) ?? false
   };
   let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({