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

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # `@react-router/dev`
 
+## 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
@@ -13,7 +86,6 @@
   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).
 
   Enabling this flag removes that normalization and passes the raw HTTP `request` instance to your handlers. This provides a few benefits:
-
   - Reduces server-side overhead by eliminating multiple `new Request()` calls on the critical path
   - Allows you to distinguish document from data requests in your handlers base don the presence of a `.data` suffix (useful for observability purposes)
 
@@ -89,25 +161,25 @@
 
   | URL `/a/b/c` | **HTTP pathname** | **`request` pathname\`** |
   | ------------ | ----------------- | ------------------------ |
-  | **Document** | `/a/b/c`          | `/a/b/c` ✅               |
-  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅               |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅              |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅              |
 
   | URL `/a/b/c/` | **HTTP pathname** | **`request` pathname\`** |
   | ------------- | ----------------- | ------------------------ |
-  | **Document**  | `/a/b/c/`         | `/a/b/c/` ✅              |
+  | **Document**  | `/a/b/c/`         | `/a/b/c/` ✅             |
   | **Data**      | `/a/b/c.data`     | `/a/b/c` ⚠️              |
 
   With this flag enabled, these pathnames will be made consistent though a new `_.data` format for client-side `.data` requests:
 
   | URL `/a/b/c` | **HTTP pathname** | **`request` pathname\`** |
   | ------------ | ----------------- | ------------------------ |
-  | **Document** | `/a/b/c`          | `/a/b/c` ✅               |
-  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅               |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅              |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅              |
 
   | URL `/a/b/c/` | **HTTP pathname**  | **`request` pathname\`** |
   | ------------- | ------------------ | ------------------------ |
-  | **Document**  | `/a/b/c/`          | `/a/b/c/` ✅              |
-  | **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅              |
+  | **Document**  | `/a/b/c/`          | `/a/b/c/` ✅             |
+  | **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅             |
 
   This a bug fix but we are putting it behind an opt-in flag because it has the potential to be a "breaking bug fix" if you are relying on the URL format for any other application or caching logic.
 
@@ -365,7 +437,6 @@
 - Stabilize middleware and context APIs. ([#14215](https://github.com/remix-run/react-router/pull/14215))
 
   We have removed the `unstable_` prefix from the following APIs and they are now considered stable and ready for production use:
-
   - [`RouterContextProvider`](https://reactrouter.com/api/utils/RouterContextProvider)
   - [`createContext`](https://reactrouter.com/api/utils/createContext)
   - `createBrowserRouter` [`getContext`](https://reactrouter.com/api/data-routers/createBrowserRouter#optsgetcontext) option
@@ -1108,7 +1179,6 @@
   ```
 
   This initial implementation targets type inference for:
-
   - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
   - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
   - `ActionData` : Action data from `action` and/or `clientAction` within your route module
@@ -1123,7 +1193,6 @@
   ```
 
   Check out our docs for more:
-
   - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
   - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
 
@@ -1323,7 +1392,6 @@
 - Vite: Provide `Unstable_ServerBundlesFunction` and `Unstable_VitePluginConfig` types ([#8654](https://github.com/remix-run/remix/pull/8654))
 
 - Vite: add `--sourcemapClient` and `--sourcemapServer` flags to `remix vite:build` ([#8613](https://github.com/remix-run/remix/pull/8613))
-
   - `--sourcemapClient`
 
   - `--sourcemapClient=inline`
@@ -1660,7 +1728,6 @@
 - Add support for `clientLoader`/`clientAction`/`HydrateFallback` route exports ([RFC](https://github.com/remix-run/remix/discussions/7634)) ([#8173](https://github.com/remix-run/remix/pull/8173))
 
   Remix now supports loaders/actions that run on the client (in addition to, or instead of the loader/action that runs on the server). While we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as:
-
   - Leveraging a data source local to the browser (i.e., `localStorage`)
   - Managing a client-side cache of server data (like `IndexedDB`)
   - Bypassing the Remix server in a BFF setup and hitting your API directly from the browser
@@ -2064,7 +2131,6 @@
 - Output esbuild metafiles for bundle analysis ([#6772](https://github.com/remix-run/remix/pull/6772))
 
   Written to server build directory (`build/` by default):
-
   - `metafile.css.json`
   - `metafile.js.json` (browser JS)
   - `metafile.server.json` (server JS)
@@ -2162,7 +2228,6 @@
 - built-in tls support ([#6483](https://github.com/remix-run/remix/pull/6483))
 
   New options:
-
   - `--tls-key` / `tlsKey`: TLS key
   - `--tls-cert` / `tlsCert`: TLS Certificate
 
@@ -2433,7 +2498,6 @@
   ```
 
   The dev server will:
-
   - force `NODE_ENV=development` and warn you if it was previously set to something else
   - rebuild your app whenever your Remix app code changes
   - restart your app server whenever rebuilds succeed

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.13.2
+ * @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
+ * @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
+ * @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
+ * @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({