react-router 8.0.0-pre.0 → 8.0.0-pre.1

package/dist/production/lib/server-runtime/sessions/cookieStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions/memoryStorage.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/sessions.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/server-runtime/single-fetch.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -22,7 +22,7 @@ const SERVER_NO_BODY_STATUS_CODES = new Set([...NO_BODY_STATUS_CODES, 304]);
 async function singleFetchAction(build, serverMode, staticHandler, request, loadContext, handleError) {
 	try {
 		try {
-			throwIfPotentialCSRFAttack(request.headers, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
+			throwIfPotentialCSRFAttack(request, Array.isArray(build.allowedActionOrigins) ? build.allowedActionOrigins : []);
 		} catch (e) {
 			return handleQueryError(/* @__PURE__ */ new Error("Bad Request"), 400);
 		}
@@ -37,7 +37,7 @@ async function singleFetchAction(build, serverMode, staticHandler, request, load
 					return handleQueryError(error);
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		}));
 	} catch (error) {
 		return handleQueryError(error);
@@ -90,7 +90,7 @@ async function singleFetchLoaders(build, serverMode, staticHandler, request, loa
 					return handleQueryError(error);
 				}
 			},
-			normalizePath: (r) => getNormalizedPath(r, build.basename)
+			normalizePath: (r) => getNormalizedPath(r)
 		}));
 	} catch (error) {
 		return handleQueryError(error);

package/dist/production/lib/server-runtime/urls.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,15 +8,12 @@
  *
  * @license MIT
  */
-import { stripBasename } from "../router/utils.js";
 //#region lib/server-runtime/urls.ts
-function getNormalizedPath(request, basename) {
-	basename = basename || "/";
+function getNormalizedPath(request) {
 	let url = new URL(request.url);
 	let pathname = url.pathname;
 	if (pathname.endsWith("/_.data")) pathname = pathname.replace(/_\.data$/, "");
 	else pathname = pathname.replace(/\.data$/, "");
-	if (stripBasename(pathname, basename) !== "/" && pathname.endsWith("/")) pathname = pathname.slice(0, -1);
 	let searchParams = new URLSearchParams(url.search);
 	searchParams.delete("_routes");
 	let search = searchParams.toString();

package/dist/production/lib/server-runtime/warnings.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/types/internal.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,6 +8,7 @@
  *
  * @license MIT
  */
+import "../../lib/router/utils.js";
 import { Deferred, createLineSplittingTransform } from "./utils.js";
 import { flatten } from "./flatten.js";
 import { unflatten } from "./unflatten.js";

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,7 +8,8 @@
  *
  * @license MIT
  */
-import { Deferred, SUPPORTED_ERROR_TYPES } from "./utils.js";
+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) {

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.0-pre.0
+ * react-router v8.0.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,14 +9,6 @@
  * @license MIT
  */
 //#region vendor/turbo-stream-v2/utils.ts
-const SUPPORTED_ERROR_TYPES = [
-	"EvalError",
-	"RangeError",
-	"ReferenceError",
-	"SyntaxError",
-	"TypeError",
-	"URIError"
-];
 var Deferred = class {
 	promise;
 	resolve;
@@ -44,4 +36,4 @@ function createLineSplittingTransform() {
 	});
 }
 //#endregion
-export { Deferred, SUPPORTED_ERROR_TYPES, createLineSplittingTransform };
+export { Deferred, createLineSplittingTransform };

package/docs/explanation/code-splitting.md

@@ -74,4 +74,4 @@ export default function Component({ loaderData }) {
 
 After building for the browser, only the `Component` will still be in the bundle, so you can use server-only code in the other module exports.
 
-[route-module]: ../../start/framework/route-module
+[route-module]: ../start/framework/route-module

package/docs/explanation/index-query-param.md

@@ -80,7 +80,7 @@ function Component() {
 }
 ```
 
-[loader]: ../api/data-routers/loader
+[loader]: ../start/data/route-object#loader
 [form_element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
 [form_component]: ../api/components/Form
-[action]: ../api/data-routers/action
+[action]: ../start/data/route-object#action

package/docs/explanation/type-safety.md

@@ -50,7 +50,7 @@ React Router's type generation executes your route config (`app/routes.ts` by de
 It then generates a `+types/<route file>.d.ts` for each route within a special `.react-router/types/` directory.
 With [`rootDirs` configured][route-module-type-safety], TypeScript can import these generated files as if they were right next to their corresponding route modules.
 
-For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/dev/decisions/0012-type-inference.md).
+For a deeper dive into some of the design decisions, check out our [type inference decision doc](https://github.com/remix-run/react-router/blob/main/decisions/0012-type-inference.md).
 
 [route-module-type-safety]: ../how-to/route-module-type-safety
 

package/docs/how-to/data-strategy.md

@@ -158,11 +158,11 @@ const matchesToLoad = matches.filter((match) => {
 
 ## Migrating away from `shouldLoad`
 
-Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy`functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that.
+Now that we have stabilized the new `match.shouldCallHandler()`/`match.shouldRevalidateArgs` fields, it's recommended to move away from the now-deprecated `match.shouldLoad` API. The prior boolean approach did not allow for custom `dataStrategy` functions to alter the default revalidation behavior, so the new function-based APIs were created to allow that.
 
 The major difference between these two APIs is that when using `shouldLoad`, calling `resolve()` would _only_ call the handler if `shouldLoad` was `true`. You could safely call it for all matches even if only a subset needed to have their handlers executed.
 
-With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on a the set of matches you wish to run handlers for.
+With `shouldCallHandler`, you are in charge of which handlers should be called so calling resolve will automatically call the handler. You should only call resolve on the set of matches you wish to run handlers for.
 
 Here's an example change from the prior API to the new API. Note that we pre-filter the `matchesToLoad` before calling `resolve()`:
 
@@ -184,9 +184,9 @@ return results;
 
 <docs-info>This is an unlikely use-case now that React Router has built-in middleware, but if you wish to use a custom middleware you can do so with a `dataStrategy`.</docs-info>
 
-Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle)
+Let's define a middleware on each route via [`handle`](../start/data/route-object#handle)
 and call middleware sequentially first, then call all
-[`loader`](../../start/data/route-object#loader)s in parallel - providing
+[`loader`](../start/data/route-object#loader)s in parallel - providing
 any data made available via the middleware:
 
 ```ts
@@ -258,7 +258,7 @@ let router = createBrowserRouter(routes, {
 
 ### Custom Handler
 
-It's also possible you don't even want to define a [`loader`](../../start/daoute-object#loader)
+It's also possible you don't even want to define a [`loader`](../start/data/route-object#loader)
 implementation at the route level. Maybe you want to just determine the
 routes and issue a single GraphQL request for all of your data. You can do
 that by setting your `route.loader=true` so it qualifies as "having a

package/docs/how-to/error-reporting.md

@@ -104,7 +104,11 @@ See also:
 This function is called whenever React Router catches an error in your application on the client.
 
 ```tsx
-import { type ClientOnErrorFunction } from "react-router";
+import {
+  createBrowserRouter,
+  type ClientOnErrorFunction,
+} from "react-router";
+import { RouterProvider } from "react-router/dom";
 
 const onError: ClientOnErrorFunction = (
   error,
@@ -116,8 +120,12 @@ const onError: ClientOnErrorFunction = (
   console.error(error, errorInfo);
 };
 
+const router = createBrowserRouter(routes);
+
 function App() {
-  return <RouterProvider onError={onError} />;
+  return (
+    <RouterProvider router={router} onError={onError} />
+  );
 }
 ```
 

package/docs/how-to/headers.md

@@ -110,7 +110,8 @@ The easiest way is to simply append to the parent headers. This avoids overwriti
 ```tsx
 export function headers({ parentHeaders }: HeadersArgs) {
   parentHeaders.append(
-    "Permissions-Policy: geolocation=()",
+    "Permissions-Policy",
+    "geolocation=()",
   );
   return parentHeaders;
 }

package/docs/how-to/security.md

@@ -13,18 +13,20 @@ This is by no means a comprehensive guide, but React Router provides features to
 
 ## `Content-Security-Policy`
 
-If you are implementing a [Content-Security-Policy (CSP)][csp] in your application, specifically one using the `unsafe-inline` directive, you will need to specify a [`nonce`][nonce] attribute on the inline `<script>` elements rendered in your HTML. This must be specified on any API that generates inline scripts, including:
+If you are implementing a [Content-Security-Policy (CSP)][csp] in your application, specifically one using the `unsafe-inline` directive, you will need to specify a [`nonce`][nonce] attribute on the inline `<script>` elements rendered in your HTML.
 
-- [`<Scripts nonce>`][scripts] (`root.tsx`)
-- [`<ScrollRestoration nonce>`][scrollrestoration] (`root.tsx`)
-- [`<ServerRouter nonce>`][serverrouter] (`entry.server.tsx`)
-- [`renderToPipeableStream(..., { nonce })`][renderToPipeableStream] (`entry.server.tsx`)
-- [`renderToReadableStream(..., { nonce })`][renderToReadableStream] (`entry.server.tsx`)
+Add a nonce to these two spots in [`entry.server.tsx`][entryserver]:
+
+- The [`<ServerRouter nonce>`][serverrouter] prop
+  - This will be proxied along through React Context and used for other Framework Mode components that output `nonce`-aware elements, including [`<Scripts>`][scripts], [`<ScrollRestoration>`][scrollrestoration]
+  - If those components specify their own `nonce` prop, it will override the `ServerRouter` value
+- The `nonce` options of [`renderToPipeableStream`][renderToPipeableStream]/[`renderToReadableStream`][renderToReadableStream]
 
 [csp]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
+[entryserver]: ../api/framework-conventions/entry.server.tsx
 [nonce]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
 [renderToPipeableStream]: https://react.dev/reference/react-dom/server/renderToPipeableStream
 [renderToReadableStream]: https://react.dev/reference/react-dom/server/renderToReadableStream
 [scripts]: ../api/components/Scripts
 [scrollrestoration]: ../api/components/ScrollRestoration
-[serverrouter]: ../api/components/ServerRouter
+[serverrouter]: ../api/framework-routers/ServerRouter

package/docs/start/data/installation.md

@@ -47,6 +47,10 @@ ReactDOM.createRoot(root).render(
 );
 ```
 
+<docs-info>Data Routers should not be held in React state. You should create your router
+once outside of the React tree and pass it to `<RouterProvider>`. You can use
+`patchRoutesOnNavigation` to add additional routes programmatically.</docs-info>
+
 ---
 
 Next: [Routing](./routing)

package/docs/start/data/route-object.md

@@ -240,9 +240,29 @@ createBrowserRouter([
 ]);
 ```
 
+## `handle`
+
+Route handle allows apps to add anything to a route match in `useMatches` to create abstractions (like breadcrumbs, etc.).
+
+```tsx
+createBrowserRouter([
+  {
+    path: "/app",
+    handle: {
+      breadcrumb: "App",
+    },
+  },
+]);
+```
+
+See also:
+
+- [`useMatches`][use-matches]
+
 ---
 
 Next: [Data Loading](./data-loading)
 
 [loader-params]: https://api.reactrouter.com/v7/interfaces/react-router.LoaderFunctionArgs
 [middleware]: ../../how-to/middleware
+[use-matches]: ../../api/hooks/useMatches

package/docs/start/framework/actions.md

@@ -172,4 +172,3 @@ See the [Using Fetchers][fetchers] guide for more information.
 Next: [Navigating](./navigating)
 
 [fetchers]: ../../how-to/fetchers
-[data]: ../../api/react-router/data

package/docs/start/framework/data-loading.md

@@ -142,7 +142,7 @@ export async function clientLoader({
 }: Route.ClientLoaderArgs) {
   const res = await fetch(`/api/products/${params.pid}`);
   const serverData = await serverLoader();
-  return { ...serverData, ...res.json() };
+  return { ...serverData, ...(await res.json()) };
 }
 
 export default function Product({

package/docs/start/framework/deploying.md

@@ -94,3 +94,7 @@ Netlify maintains their own template for React Router. Checkout the [Netlify Gui
 ### EdgeOne Pages
 
 EdgeOne Pages maintains their own template for React Router. Checkout the [EdgeOne Pages Guide](https://pages.edgeone.ai/document/framework-react-router) for more information.
+
+### DeployHQ
+
+DeployHQ maintains their own guide for deploying React Router v7 to your own server. Checkout the [DeployHQ Guide](https://www.deployhq.com/guides/deploy-react-router-from-github) for more information.

package/docs/start/framework/installation.md

@@ -37,6 +37,5 @@ npx create-react-router@latest --template remix-run/react-router-templates/<temp
 
 Next: [Routing](./routing)
 
-[manual_usage]: ../how-to/manual-usage
 [default-template]: https://github.com/remix-run/react-router-templates/tree/main/default
 [react-router-templates]: https://github.com/remix-run/react-router-templates

package/docs/upgrading/v6.md

@@ -141,6 +141,8 @@ You don't need to update anything unless you are using `React.lazy` _inside_ of
 
 Using `React.lazy` inside of a component is incompatible with `React.useTransition` (or other code that makes promises inside of components). Move `React.lazy` to the module scope and stop making promises inside of components. This is not a limitation of React Router but rather incorrect usage of React.
 
+<docs-info>We added a flag to opt-out of `React.startTransition` in v7 so you can use that to upgrade to v7 without adopting React transition-enabled navigations if needed. See the [transition docs][transitions] for more information.</docs-info>
+
 ### v7_fetcherPersist
 
 <docs-warning>If you are not using a `<RouterProvider>` you can skip this</docs-warning>
@@ -377,3 +379,4 @@ Congratulations, you're now on v7!
 [react-flushsync]: https://react.dev/reference/react-dom/flushSync
 [response-json]: https://developer.mozilla.org/en-US/docs/Web/API/Response/json
 [data-util]: https://api.reactrouter.com/v7/functions/react-router.data.html
+[transitions]: ../explanation/react-transitions

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-router",
   "type": "module",
-  "version": "8.0.0-pre.0",
+  "version": "8.0.0-pre.1",
   "description": "Declarative routing for React",
   "keywords": [
     "react",
@@ -110,7 +110,7 @@
     "README.md"
   ],
   "engines": {
-    "node": ">=22.12.0"
+    "node": ">=22.22.0"
   },
   "scripts": {
     "build": "wireit",

package/dist/development/lib/dom/ssr/errors.d.ts

@@ -1,7 +0,0 @@
-
-import { RouterState } from "../../router/router.js";
-
-//#region lib/dom/ssr/errors.d.ts
-declare function deserializeErrors(errors: RouterState["errors"]): RouterState["errors"];
-//#endregion
-export { deserializeErrors };

package/dist/development/lib/dom/ssr/errors.js

@@ -1,36 +0,0 @@
-/**
- * react-router v8.0.0-pre.0
- *
- * 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 { ErrorResponseImpl } from "../../router/utils.js";
-//#region lib/dom/ssr/errors.ts
-function deserializeErrors(errors) {
-	if (!errors) return null;
-	let entries = Object.entries(errors);
-	let serialized = {};
-	for (let [key, val] of entries) if (val && val.__type === "RouteErrorResponse") serialized[key] = new ErrorResponseImpl(val.status, val.statusText, val.data, val.internal === true);
-	else if (val && val.__type === "Error") {
-		if (val.__subType) {
-			let ErrorConstructor = window[val.__subType];
-			if (typeof ErrorConstructor === "function") try {
-				let error = new ErrorConstructor(val.message);
-				error.stack = val.stack;
-				serialized[key] = error;
-			} catch (e) {}
-		}
-		if (serialized[key] == null) {
-			let error = new Error(val.message);
-			error.stack = val.stack;
-			serialized[key] = error;
-		}
-	} else serialized[key] = val;
-	return serialized;
-}
-//#endregion
-export { deserializeErrors };

package/dist/production/lib/dom/ssr/errors.d.ts

@@ -1,7 +0,0 @@
-
-import { RouterState } from "../../router/router.js";
-
-//#region lib/dom/ssr/errors.d.ts
-declare function deserializeErrors(errors: RouterState["errors"]): RouterState["errors"];
-//#endregion
-export { deserializeErrors };

package/dist/production/lib/dom/ssr/errors.js

@@ -1,36 +0,0 @@
-/**
- * react-router v8.0.0-pre.0
- *
- * 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 { ErrorResponseImpl } from "../../router/utils.js";
-//#region lib/dom/ssr/errors.ts
-function deserializeErrors(errors) {
-	if (!errors) return null;
-	let entries = Object.entries(errors);
-	let serialized = {};
-	for (let [key, val] of entries) if (val && val.__type === "RouteErrorResponse") serialized[key] = new ErrorResponseImpl(val.status, val.statusText, val.data, val.internal === true);
-	else if (val && val.__type === "Error") {
-		if (val.__subType) {
-			let ErrorConstructor = window[val.__subType];
-			if (typeof ErrorConstructor === "function") try {
-				let error = new ErrorConstructor(val.message);
-				error.stack = val.stack;
-				serialized[key] = error;
-			} catch (e) {}
-		}
-		if (serialized[key] == null) {
-			let error = new Error(val.message);
-			error.stack = val.stack;
-			serialized[key] = error;
-		}
-	} else serialized[key] = val;
-	return serialized;
-}
-//#endregion
-export { deserializeErrors };