react-router 7.18.0 → 8.0.0-pre.1

package/dist/production/vendor/turbo-stream-v2/unflatten.js

@@ -0,0 +1,199 @@
+/**
+ * react-router v8.0.0-pre.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { SUPPORTED_ERROR_TYPES } from "../../lib/router/utils.js";
+import { Deferred } from "./utils.js";
+//#region vendor/turbo-stream-v2/unflatten.ts
+const globalObj = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : void 0;
+function unflatten(parsed) {
+	const { hydrated, values } = this;
+	if (typeof parsed === "number") return hydrate.call(this, parsed);
+	if (!Array.isArray(parsed) || !parsed.length) throw new SyntaxError();
+	const startIndex = values.length;
+	for (const value of parsed) values.push(value);
+	hydrated.length = values.length;
+	return hydrate.call(this, startIndex);
+}
+function hydrate(index) {
+	const { hydrated, values, deferred, plugins } = this;
+	let result;
+	const stack = [[index, (v) => {
+		result = v;
+	}]];
+	let postRun = [];
+	while (stack.length > 0) {
+		const [index, set] = stack.pop();
+		switch (index) {
+			case -7:
+				set(void 0);
+				continue;
+			case -5:
+				set(null);
+				continue;
+			case -2:
+				set(NaN);
+				continue;
+			case -6:
+				set(Infinity);
+				continue;
+			case -3:
+				set(-Infinity);
+				continue;
+			case -4:
+				set(-0);
+				continue;
+		}
+		if (hydrated[index]) {
+			set(hydrated[index]);
+			continue;
+		}
+		const value = values[index];
+		if (!value || typeof value !== "object") {
+			hydrated[index] = value;
+			set(value);
+			continue;
+		}
+		if (Array.isArray(value)) if (typeof value[0] === "string") {
+			const [type, b, c] = value;
+			switch (type) {
+				case "D":
+					set(hydrated[index] = new Date(b));
+					continue;
+				case "U":
+					set(hydrated[index] = new URL(b));
+					continue;
+				case "B":
+					set(hydrated[index] = BigInt(b));
+					continue;
+				case "R":
+					set(hydrated[index] = new RegExp(b, c));
+					continue;
+				case "Y":
+					set(hydrated[index] = Symbol.for(b));
+					continue;
+				case "S":
+					const newSet = /* @__PURE__ */ new Set();
+					hydrated[index] = newSet;
+					for (let i = value.length - 1; i > 0; i--) stack.push([value[i], (v) => {
+						newSet.add(v);
+					}]);
+					set(newSet);
+					continue;
+				case "M":
+					const map = /* @__PURE__ */ new Map();
+					hydrated[index] = map;
+					for (let i = value.length - 2; i > 0; i -= 2) {
+						const r = [];
+						stack.push([value[i + 1], (v) => {
+							r[1] = v;
+						}]);
+						stack.push([value[i], (k) => {
+							r[0] = k;
+						}]);
+						postRun.push(() => {
+							map.set(r[0], r[1]);
+						});
+					}
+					set(map);
+					continue;
+				case "N":
+					const obj = Object.create(null);
+					hydrated[index] = obj;
+					for (const key of Object.keys(b).reverse()) {
+						const r = [];
+						stack.push([b[key], (v) => {
+							r[1] = v;
+						}]);
+						stack.push([Number(key.slice(1)), (k) => {
+							r[0] = k;
+						}]);
+						postRun.push(() => {
+							obj[r[0]] = r[1];
+						});
+					}
+					set(obj);
+					continue;
+				case "P":
+					if (hydrated[b]) set(hydrated[index] = hydrated[b]);
+					else {
+						const d = new Deferred();
+						deferred[b] = d;
+						set(hydrated[index] = d.promise);
+					}
+					continue;
+				case "E":
+					const [, message, errorType] = value;
+					let error = errorType && globalObj && SUPPORTED_ERROR_TYPES.includes(errorType) && errorType in globalObj && typeof globalObj[errorType] === "function" ? new globalObj[errorType](message) : new Error(message);
+					hydrated[index] = error;
+					set(error);
+					continue;
+				case "Z":
+					set(hydrated[index] = hydrated[b]);
+					continue;
+				default:
+					if (Array.isArray(plugins)) {
+						const r = [];
+						const vals = value.slice(1);
+						for (let i = 0; i < vals.length; i++) {
+							const v = vals[i];
+							stack.push([v, (v) => {
+								r[i] = v;
+							}]);
+						}
+						postRun.push(() => {
+							for (const plugin of plugins) {
+								const result = plugin(value[0], ...r);
+								if (result) {
+									set(hydrated[index] = result.value);
+									return;
+								}
+							}
+							throw new SyntaxError();
+						});
+						continue;
+					}
+					throw new SyntaxError();
+			}
+		} else {
+			const array = [];
+			hydrated[index] = array;
+			for (let i = 0; i < value.length; i++) {
+				const n = value[i];
+				if (n !== -1) stack.push([n, (v) => {
+					array[i] = v;
+				}]);
+			}
+			set(array);
+			continue;
+		}
+		else {
+			const object = {};
+			hydrated[index] = object;
+			for (const key of Object.keys(value).reverse()) {
+				const r = [];
+				stack.push([value[key], (v) => {
+					r[1] = v;
+				}]);
+				stack.push([Number(key.slice(1)), (k) => {
+					r[0] = k;
+				}]);
+				postRun.push(() => {
+					object[r[0]] = r[1];
+				});
+			}
+			set(object);
+			continue;
+		}
+	}
+	while (postRun.length > 0) postRun.pop()();
+	return result;
+}
+//#endregion
+export { unflatten };

package/dist/production/vendor/turbo-stream-v2/utils.js

@@ -0,0 +1,39 @@
+/**
+ * react-router v8.0.0-pre.1
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+//#region vendor/turbo-stream-v2/utils.ts
+var Deferred = class {
+	promise;
+	resolve;
+	reject;
+	constructor() {
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve;
+			this.reject = reject;
+		});
+	}
+};
+function createLineSplittingTransform() {
+	const decoder = new TextDecoder();
+	let leftover = "";
+	return new TransformStream({
+		transform(chunk, controller) {
+			const str = decoder.decode(chunk, { stream: true });
+			const parts = (leftover + str).split("\n");
+			leftover = parts.pop() || "";
+			for (const part of parts) controller.enqueue(part);
+		},
+		flush(controller) {
+			if (leftover) controller.enqueue(leftover);
+		}
+	});
+}
+//#endregion
+export { Deferred, createLineSplittingTransform };

package/docs/explanation/code-splitting.md

@@ -33,6 +33,22 @@ Because these entry points are coupled to URL segments, React Router knows just
 
 If the user visits `"/about"` then the bundles for `about.tsx` will be loaded but not `contact.tsx`. This drastically reduces the JavaScript footprint for initial page loads and speeds up your application.
 
+## Route Module Splitting
+
+React Router can also split client-side route exports (`clientLoader`, `clientAction`, `clientMiddleware`, `HydrateFallback`) into separate chunks that can be loaded independently from the route component.
+
+This allows these exports to be fetched and executed while the component code is still downloading, improving performance for client-side data loading.
+
+This behavior is enabled by default. You can set `splitRouteModules` to `false` to opt out, or `"enforce"` to require all routes to be splittable. The `"enforce"` option will cause build failures for routes that cannot be split due to shared code.
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  splitRouteModules: false,
+} satisfies Config;
+```
+
 ## Removal of Server Code
 
 Any server-only [Route Module APIs][route-module] will be removed from the bundles. Consider this route module:

package/docs/how-to/middleware.md

@@ -29,23 +29,7 @@ For example, on a `GET /parent/child` request, the middleware would run in the f
 
 ## Quick Start (Framework mode)
 
-### 1. Enable the middleware flag
-
-First, enable middleware in your [React Router config][rr-config]:
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_middleware: true,
-  },
-} satisfies Config;
-```
-
-<docs-warning>By enabling the middleware feature, you change the type of the `context` parameter to your [`action`][framework-action]s and [`loader`][framework-loader]s. Please pay attention to the section on [`getLoadContext`][getloadcontext] below if you are actively using `context` today.</docs-warning>
-
-### 2. Create a context
+### 1. Create a context
 
 Middleware uses a `context` provider instance to provide data down the middleware chain.
 You can create type-safe context objects using [`createContext`][createContext]:
@@ -57,7 +41,7 @@ import type { User } from "~/types";
 export const userContext = createContext<User | null>(null);
 ```
 
-### 3. Export middleware from your routes
+### 2. Export middleware from your routes
 
 ```tsx filename=app/routes/dashboard.tsx
 import { redirect } from "react-router";
@@ -107,7 +91,7 @@ export default function Dashboard({
 }
 ```
 
-### 4. Update your `getLoadContext` function (if applicable)
+### 3. Update your `getLoadContext` function (if applicable)
 
 If you're using a custom server and a `getLoadContext` function, you will need to update your implementation to return an instance of [`RouterContextProvider`][RouterContextProvider], instead of a JavaScript object:
 
@@ -130,25 +114,7 @@ function getLoadContext(req, res) {
 
 ## Quick Start (Data Mode)
 
-### 1. TypeScript: augment `Future` for loader/action `context`
-
-In order to properly type your `context` param in your `loader`/`action`/`middleware` functions, you will need a small module augmentation to override the default context type of `any`:
-
-```ts
-// src/react-router.d.ts
-
-import "react-router";
-
-declare module "react-router" {
-  interface Future {
-    v8_middleware: true;
-  }
-}
-```
-
-Without this, `context` stays loosely typed even when middleware is enabled at runtime.
-
-### 2. Create a context
+### 1. Create a context
 
 Middleware uses a `context` provider to pass data through the middleware chain into loaders and actions. Create typed context with [`createContext`][createContext]:
 
@@ -159,7 +125,7 @@ import type { User } from "~/types";
 export const userContext = createContext<User | null>(null);
 ```
 
-### 3. Add `middleware` to route objects
+### 2. Add `middleware` to route objects
 
 Attach `middleware` arrays to your route objects:
 
@@ -225,7 +191,7 @@ export default function Dashboard() {
 }
 ```
 
-### 4. Add a `getContext` function (optional)
+### 3. Add a `getContext` function (optional)
 
 To seed every navigation or fetcher call with shared values, pass [`getContext`][getContext] when creating the router:
 
@@ -738,7 +704,6 @@ export async function loader({
 [Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
 [common-patterns]: #common-patterns
 [server-client]: #server-vs-client-middleware
-[rr-config]: ../api/framework-conventions/react-router.config.ts
 [create-browser-router]: ../api/data-routers/createBrowserRouter
 [create-hash-router]: ../api/data-routers/createHashRouter
 [create-memory-router]: ../api/data-routers/createMemoryRouter

package/docs/how-to/react-server-components.md

@@ -384,7 +384,7 @@ The following options from `react-router.config.ts` are not currently supported
 - `buildEnd`
 - `presets`
 - `serverBundles`
-- `future.v8_splitRouteModules`
+- `splitRouteModules`
 - `subResourceIntegrity`
 
 ## RSC Data Mode

package/docs/upgrading/future.md

@@ -19,253 +19,6 @@ First update to the latest minor version of v7.x to have the latest future flags
 npm install react-router@7 @react-router/{dev,node,etc.}@7
 ```
 
-## `future.v8_middleware`
-
-[MODES: framework, data]
-
-<br/>
-<br/>
-
-**Background**
-
-Middleware allows you to run code before and after the [`Response`][Response] generation for the matched path. This enables common patterns like authentication, logging, error handling, and data preprocessing in a reusable way. Please see the [docs](../how-to/middleware) for more information.
-
-👉 **Enable the Flag**
-
-In Framework mode:
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_middleware: true,
-  },
-} satisfies Config;
-```
-
-In Data mode:
-
-```ts
-import { createBrowserRouter } from "react-router/dom";
-
-const router = createBrowserRouter(routes, {
-  future: {
-    v8_middleware: true,
-  },
-});
-```
-
-**Update your Code**
-
-If you're using the `context` parameter in `loader` and `action` functions, you may need to update your code:
-
-- In Framework mode, if you're using `react-router-serve`, you should not need to make any updates. Otherwise, this only applies if you have a custom server with a `getLoadContext` function. Please see the docs on the middleware [`getLoadContext` changes](../how-to/middleware#changes-to-getloadcontextapploadcontext) and the instructions to [migrate to the new API](../how-to/middleware#migration-from-apploadcontext).
-- In Data mode, add the `Future` module augmentation described in the [middleware docs](../how-to/middleware#1-typescript-augment-future-for-loaderaction-context) so `context` is typed correctly.
-
-## `future.v8_splitRouteModules`
-
-[MODES: framework]
-
-<br/>
-<br/>
-
-**Background**
-
-This feature enables splitting client-side route exports (`clientLoader`, `clientAction`, `clientMiddleware`, `HydrateFallback`) into separate chunks that can be loaded independently from the route component. This allows these exports to be fetched and executed while the component code is still downloading, improving performance for client-side data loading.
-
-This can be set to `true` for opt-in behavior, or `"enforce"` to require all routes to be splittable (which will cause build failures for routes that cannot be split due to shared code).
-
-👉 **Enable the Flag**
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_splitRouteModules: true,
-  },
-} satisfies Config;
-```
-
-**Update your Code**
-
-No code changes are required. This is an optimization feature that works automatically once enabled.
-
-## `future.v8_viteEnvironmentApi`
-
-[MODES: framework]
-
-<br/>
-<br/>
-
-**Background**
-
-This enables support for the experimental Vite Environment API, which provides a more flexible and powerful way to configure Vite environments. This is only available when using Vite 6+.
-
-👉 **Enable the Flag**
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_viteEnvironmentApi: true,
-  },
-} satisfies Config;
-```
-
-**Update your Code**
-
-Most users won't need to make any changes. However, if you have custom Vite configuration that previously relied on the `isSsrBuild` flag — such as a custom server build that sets `build.rollupOptions.input` — you'll need to move that configuration under the per-environment [Environment API][vite-environment] config instead.
-
-For example, a custom server build should move its SSR `rollupOptions` from the top-level `build` config into `environments.ssr.build`:
-
-```diff filename=vite.config.ts
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-
--export default defineConfig(({ isSsrBuild }) => ({
--  build: {
--    rollupOptions: isSsrBuild
--      ? {
--          input: "./server/app.ts",
--        }
--      : undefined,
--  },
-+export default defineConfig({
-+  environments: {
-+    ssr: {
-+      build: {
-+        rollupOptions: {
-+          input: "./server/app.ts",
-+        },
-+      },
-+    },
-+  },
-   plugins: [reactRouter()],
--}));
-+});
-```
-
-See the [`node-custom-server` template][node-custom-server-template] for a complete example.
-
-## `future.v8_passThroughRequests`
-
-[MODES: framework]
-
-<br/>
-<br/>
-
-**Background**
-
-By default, React Router normalizes the `request.url` passed to your `loader`, `action`, and `middleware` functions by removing React Router's internal implementation details. Specifically, it removes `.data` suffixes and internal search parameters like `?index` and `?_routes`.
-
-This flag eliminates 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 based on the presence of a `.data` suffix (useful for [observability] purposes)
-
-If you were previously relying on the normalization of `request.url`, you can switch to use the new sibling `url` parameter which contains a `URL` instance representing the normalized location.
-
-👉 **Enable the Flag**
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_passThroughRequests: true,
-  },
-} satisfies Config;
-```
-
-**Update your Code**
-
-If your code relies on inspecting the request URL, you should review it for any assumptions about the URL format:
-
-```tsx
-// ❌ Before: assuming no `.data` suffix in `request.url` pathname
-export async function loader({
-  request,
-}: Route.LoaderArgs) {
-  let url = new URL(request.url);
-  if (url.pathname === "/path") {
-    // This check might now behave differently because the request pathname will
-    // contain the `.data` suffix on data requests
-  }
-}
-
-// ✅ After: use `url` for normalized routing logic and `request.url`
-// for raw routing logic
-export async function loader({
-  request,
-  url,
-}: Route.LoaderArgs) {
-  if (url.pathname === "/path") {
-    // This will always have the `.data` suffix stripped
-  }
-
-  // And now you can distinguish between document versus data requests
-  let isDataRequest = new URL(
-    request.url,
-  ).pathname.endsWith(".data");
-}
-```
-
-## `future.v8_trailingSlashAwareDataRequests`
-
-[MODES: framework]
-
-<br/>
-<br/>
-
-**Background**
-
-React Router serves Framework mode data requests from `.data` URLs. Previously, data requests for routes with and without trailing slashes could map to the same `.data` URL because trailing slashes were not considered during URL generation. This flag preserves trailing slash semantics for data request URLs to avoid ambiguity when your app distinguishes between trailing-slash and non-trailing-slash URLs.
-
-Currently, your HTTP and `request` pathnames would be as follows for `/a/b/c` and `/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` ✅             |
-
-| URL `/a/b/c/` | **HTTP pathname** | **`request` pathname`** |
-| ------------- | ----------------- | ----------------------- |
-| **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` ✅             |
-
-| URL `/a/b/c/` | **HTTP pathname**  | **`request` pathname`** |
-| ------------- | ------------------ | ----------------------- |
-| **Document**  | `/a/b/c/`          | `/a/b/c/` ✅            |
-| **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅            |
-
-This flag also aligns the root data request to match this behavior by changing it from `/_root.data` to `/_.data`.
-
-👉 **Enable the Flag**
-
-```ts filename=react-router.config.ts
-import type { Config } from "@react-router/dev/config";
-
-export default {
-  future: {
-    v8_trailingSlashAwareDataRequests: true,
-  },
-} satisfies Config;
-```
-
-**Update your Code**
-
-If you have custom app, CDN, cache, or rewrite logic that matches `.data` request URLs, update it to handle the new trailing-slash-aware `/_.data` format.
-
 ## Unstable Future Flags (Optional)
 
 We document some [unstable] flags here as a reference for folks contributing to the project via beta testing, but they are not generally recommended for production use and may having breaking changes patch/minor releases - adopt with caution!
@@ -275,6 +28,4 @@ _No current unstable flags to document_
 [api-development-strategy]: ../community/api-development-strategy
 [unstable]: ../community/api-development-strategy#unstable-flags
 [observability]: ../how-to/instrumentation
-[Response]: https://developer.mozilla.org/en-US/docs/Web/API/Response
 [vite-environment]: https://vite.dev/guide/api-environment
-[node-custom-server-template]: https://github.com/remix-run/react-router-templates/blob/7c617a435510bc3add3a5395c07bc65328b65e9e/node-custom-server/vite.config.ts