Update to React Router v7

.gitignore

@@ -4,4 +4,5 @@
 /node_modules
 
 *.log
-.DS_Store
+.DS_Store
+.history

README.md

@@ -10,8 +10,8 @@ npm install remix-utils
 
 Additional optional dependencies may be needed, all optional dependencies are:
 
-- `@remix-run/react` (also `@remix-run/router` but you should be using the React one)
-- `@remix-run/node` or `@remix-run/cloudflare` or `@remix-run/deno` (actually it's `@remix-run/server-runtime` but you should use one of the others)
+- `react-router`
+- `@react-router/node` or `@react-router/cloudflare`
 - `crypto-js`
 - `is-ip`
 - `intl-parse-accept-language`
@@ -427,7 +427,7 @@ First create a new CSRF instance.
 ```ts
 // app/utils/csrf.server.ts
 import { CSRF } from "remix-utils/csrf/server";
-import { createCookie } from "@remix-run/node"; // or cloudflare/deno
+import { createCookie } from "react-router"; // or cloudflare/deno
 
 export const cookie = createCookie("csrf", {
 	path: "/",
@@ -494,7 +494,7 @@ Render it in your `root` component and wrap the `Outlet` with it.
 When you create a form in some route, you can use the `AuthenticityTokenInput` component to add the authenticity token to the form.
 
 ```tsx
-import { Form } from "@remix-run/react";
+import { Form } from "react-router";
 import { AuthenticityTokenInput } from "remix-utils/csrf/react";
 
 export default function Component() {
@@ -520,7 +520,7 @@ You should only customize the name if you also changed it on `createAuthenticity
 If you need to use `useFetcher` (or `useSubmit`) instead of `Form` you can also get the authenticity token with the `useAuthenticityToken` hook.
 
 ```tsx
-import { useFetcher } from "@remix-run/react";
+import { useFetcher } from "react-router";
 import { useAuthenticityToken } from "remix-utils/csrf/react";
 
 export function useMarkAsRead() {
@@ -593,7 +593,7 @@ import { ExistingSearchParams } from "remix-utils/existing-search-params";
 ```
 
 > **Note**
-> This depends on `react` and `@remix-run/react`
+> This depends on `react` and `react-router`
 
 When you submit a GET form, the browser will replace all of the search params in the URL with your form data. This component copies existing search params into hidden inputs so they will not be overwritten.
 
@@ -632,7 +632,7 @@ By excluding the `page` param, from the search form, the user will return to the
 ### External Scripts
 
 > **Note**
-> This depends on `react`, `@remix-run/react`, and a Remix server runtime.
+> This depends on `react`, and `react-router`.
 
 If you need to load different external scripts on certain routes, you can use the `ExternalScripts` component together with the `ExternalScriptsFunction` and `ScriptDescriptor` types.
 
@@ -770,7 +770,7 @@ return (
 ### useGlobalNavigationState
 
 > **Note**
-> This depends on `react`, and `@remix-run/react`.
+> This depends on `react`, and `react-router`.
 
 This hook allows you to read the value of `transition.state`, every `fetcher.state` in the app, and `revalidator.state`.
 
@@ -800,7 +800,7 @@ The return value of `useGlobalNavigationState` can be `"idle"`, `"loading"` or `
 ### useGlobalPendingState
 
 > **Note**
-> This depends on `react`, and `@remix-run/react`.
+> This depends on `react`, and `react-router`.
 
 This hook lets you know if the global navigation, if one of any active fetchers is either loading or submitting, or if the revalidator is running.
 
@@ -824,7 +824,7 @@ The return value of `useGlobalPendingState` is either `"idle"` or `"pending"`.
 ### useGlobalSubmittingState
 
 > **Note**
-> This depends on `react`, and `@remix-run/react`.
+> This depends on `react`, and `react-router`.
 
 This hook lets you know if the global transition or if one of any active fetchers is submitting.
 
@@ -844,7 +844,7 @@ The return value of `useGlobalSubmittingState` is either `"idle"` or `"submittin
 ### useGlobalLoadingState
 
 > **Note**
-> This depends on `react`, and `@remix-run/react`.
+> This depends on `react`, and `react-router`.
 
 This hook lets you know if the global transition, if one of any active fetchers is loading, or if the revalidator is running
 
@@ -922,15 +922,15 @@ The return type of `useLocales` is ready to be used with the Intl API.
 ### useShouldHydrate
 
 > **Note**
-> This depends on `@remix-run/react` and `react`.
+> This depends on `react-router` and `react`.
 
 If you are building a Remix application where most routes are static, and you want to avoid loading client-side JS, you can use this hook, plus some conventions, to detect if one or more active routes needs JS and only render the Scripts component in that case.
 
 In your document component, you can call this hook to dynamically render the Scripts component if needed.
 
 ```tsx
 import type { ReactNode } from "react";
-import { Links, LiveReload, Meta, Scripts } from "@remix-run/react";
+import { Links, LiveReload, Meta, Scripts } from "react-router";
 import { useShouldHydrate } from "remix-utils/use-should-hydrate";
 
 interface DocumentProps {
@@ -1205,7 +1205,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 Cookie objects in Remix allows any type, the typed cookies from Remix Utils lets you use Zod to parse the cookie values and ensure they conform to a schema.
 
 ```ts
-import { createCookie } from "@remix-run/node";
+import { createCookie } from "react-router";
 import { createTypedCookie } from "remix-utils/typed-cookie";
 import { z } from "zod";
 
@@ -1300,7 +1300,7 @@ await typedCookie.serialize("some fake url to pass schema validation", {
 Session objects in Remix allows any type, the typed sessions from Remix Utils lets you use Zod to parse the session data and ensure they conform to a schema.
 
 ```ts
-import { createCookieSessionStorage } from "@remix-run/node";
+import { createCookieSessionStorage } from "react-router";
 import { createTypedSessionStorage } from "remix-utils/typed-session";
 import { z } from "zod";
 
@@ -1775,7 +1775,7 @@ Now you can see in your DevTools that when the user hovers an anchor it will pre
 ### Debounced Fetcher and Submit
 
 > **Note**
-> This depends on `react`, and `@remix-run/react`.
+> This depends on `react`, and `react-router`.
 
 `useDebounceFetcher` and `useDebounceSubmit` are wrappers of `useFetcher` and `useSubmit` that add debounce support.
 

package.json

@@ -6,9 +6,7 @@
 		"node": ">=18.0.0"
 	},
 	"type": "module",
-	"funding": [
-		"https://github.com/sponsors/sergiodxa"
-	],
+	"funding": ["https://github.com/sponsors/sergiodxa"],
 	"exports": {
 		"./package.json": "./package.json",
 		"./promise": "./build/common/promise.js",
@@ -95,29 +93,21 @@
 		"named action"
 	],
 	"peerDependencies": {
-		"@remix-run/cloudflare": "^2.0.0",
-		"@remix-run/node": "^2.0.0",
-		"@remix-run/react": "^2.0.0",
-		"@remix-run/router": "^1.7.2",
+		"react-router": ">=7.0.0-pre.0",
 		"crypto-js": "^4.1.1",
 		"intl-parse-accept-language": "^1.0.0",
 		"is-ip": "^5.0.1",
 		"react": "^18.0.0",
 		"zod": "^3.22.4"
 	},
 	"peerDependenciesMeta": {
-		"@remix-run/cloudflare": {
-			"optional": true
-		},
-		"@remix-run/node": {
-			"optional": true
-		},
-		"@remix-run/react": {
+		"@react-router/cloudflare": {
 			"optional": true
 		},
-		"@remix-run/router": {
+		"react-router": {
 			"optional": true
 		},
+
 		"crypto-js": {
 			"optional": true
 		},
@@ -137,10 +127,7 @@
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.15.0",
 		"@biomejs/biome": "^1.7.2",
-		"@remix-run/node": "^2.0.0",
-		"@remix-run/react": "^2.0.0",
-		"@remix-run/router": "^1.7.2",
-		"@remix-run/testing": "^2.0.0",
+		"react-router": "7.0.0-pre.6",
 		"@testing-library/jest-dom": "^6.1.3",
 		"@testing-library/react": "^15.0.2",
 		"@types/bun": "^1.1.1",

src/client/cache-assets.ts

@@ -34,12 +34,19 @@ export async function cacheAssets({
 function getFilePaths() {
 	try {
 		return unique([
-			...Object.values(window.__remixManifest.routes).flatMap((route) => {
-				return [route.module, ...(route.imports ?? [])];
-			}),
-			window.__remixManifest.url,
-			window.__remixManifest.entry.module,
-			...window.__remixManifest.entry.imports,
+			// biome-ignore lint/suspicious/noExplicitAny: global window type is missing proper typing
+			...Object.values((window as any).__reactRouterManifest.routes).flatMap(
+				// biome-ignore lint/suspicious/noExplicitAny: global window type is missing proper typing
+				(route: any) => {
+					return [route.module, ...(route.imports ?? [])];
+				},
+			),
+			// biome-ignore lint/suspicious/noExplicitAny: global window type is missing proper typing
+			(window as any).__reactRouterManifest.url,
+			// biome-ignore lint/suspicious/noExplicitAny: global window type is missing proper typing
+			(window as any).__reactRouterManifest.entry.module,
+			// biome-ignore lint/suspicious/noExplicitAny: global window type is missing proper typing
+			...(window as any).__reactRouterManifest.entry.imports,
 		]);
 	} catch {
 		throw new Error("Failed to get file paths from Remix manifest");

src/react/existing-search-params.tsx

@@ -1,5 +1,5 @@
-import { useSearchParams } from "@remix-run/react";
 import * as React from "react";
+import { useSearchParams } from "react-router";
 
 type Props = {
 	/**

src/react/external-scripts.tsx

@@ -1,5 +1,5 @@
-import { useLocation, useMatches } from "@remix-run/react";
 import * as React from "react";
+import { useLocation, useMatches } from "react-router";
 import { HandleConventionArguments } from "./handle-conventions.js";
 import { useHydrated } from "./use-hydrated.js";
 

src/react/fetcher-type.ts

@@ -1,5 +1,5 @@
-import { type FetcherWithComponents, useNavigation } from "@remix-run/react";
-import { type Navigation } from "@remix-run/router";
+import { type Navigation } from "react-router";
+import { type FetcherWithComponents, useNavigation } from "react-router";
 
 /**
  * The list of types a fetcher can have

src/react/handle-conventions.ts

@@ -1,5 +1,5 @@
-import type { Location, Params, useMatches } from "@remix-run/react";
-import type { RouterState } from "@remix-run/router";
+import type { RouterState } from "react-router";
+import type { Location, Params, useMatches } from "react-router";
 
 export type HandleConventionArguments<Data = unknown> = {
 	id: string;

src/react/use-debounce-fetcher.ts

@@ -1,10 +1,10 @@
+import { useCallback, useEffect, useRef } from "react";
 import type {
 	FetcherWithComponents,
 	SubmitFunction,
 	SubmitOptions,
-} from "@remix-run/react";
-import { useFetcher } from "@remix-run/react";
-import { useCallback, useEffect, useRef } from "react";
+} from "react-router";
+import { useFetcher } from "react-router";
 
 type SubmitTarget = Parameters<SubmitFunction>["0"];
 

src/react/use-debounce-submit.ts

@@ -1,6 +1,6 @@
-import type { SubmitFunction, SubmitOptions } from "@remix-run/react";
-import { useSubmit } from "@remix-run/react";
 import { useCallback, useEffect, useRef } from "react";
+import type { SubmitFunction, SubmitOptions } from "react-router";
+import { useSubmit } from "react-router";
 
 type SubmitTarget = Parameters<SubmitFunction>["0"];
 

src/react/use-delegated-anchors.tsx

@@ -1,5 +1,5 @@
-import { PrefetchPageLinks, useNavigate } from "@remix-run/react";
 import * as React from "react";
+import { PrefetchPageLinks, useNavigate } from "react-router";
 
 const context = React.createContext(false);
 

src/react/use-global-navigation-state.ts

@@ -1,5 +1,5 @@
-import { useFetchers, useNavigation, useRevalidator } from "@remix-run/react";
 import { useMemo } from "react";
+import { useFetchers, useNavigation, useRevalidator } from "react-router";
 
 /**
  * This is a helper hook that returns the state of every fetcher active on

src/react/use-locales.ts

@@ -1,4 +1,4 @@
-import { useMatches } from "@remix-run/react";
+import { useMatches } from "react-router";
 import type { Locales } from "../server/get-client-locales.js";
 
 /**

src/react/use-should-hydrate.ts

@@ -1,4 +1,4 @@
-import { useMatches } from "@remix-run/react";
+import { useMatches } from "react-router";
 
 /**
  * Determine if at least one of the routes is asking to load JS and return a

src/server/csrf.ts

@@ -1,5 +1,5 @@
-import type { Cookie } from "@remix-run/server-runtime";
 import cryptoJS from "crypto-js";
+import type { Cookie } from "react-router";
 import { getHeaders } from "./get-headers.js";
 
 export type CSRFErrorCode =

src/server/is-prefetch.ts

@@ -18,6 +18,9 @@ export function isPrefetch(request: Request): boolean;
 export function isPrefetch(headers: Headers): boolean;
 export function isPrefetch(requestOrHeaders: Request | Headers): boolean {
 	let headers = getHeaders(requestOrHeaders);
+	if (!headers) {
+		return false;
+	}
 	let purpose =
 		headers.get("Purpose") ||
 		headers.get("X-Purpose") ||

src/server/json-hash.ts

@@ -1,6 +1,6 @@
-import type { TypedResponse } from "@remix-run/server-runtime";
+import { data, UNSAFE_DataWithResponseInit } from "react-router";
 
-import { json as remixJson } from "@remix-run/server-runtime";
+ 
 
 type ResponseResult<LoaderData> = {
 	[Key in keyof LoaderData]: LoaderData[Key] extends () => infer ReturnValue
@@ -15,7 +15,7 @@ type ResponseResult<LoaderData> = {
 export async function jsonHash<LoaderData extends Record<string, unknown>>(
 	input: LoaderData,
 	init?: ResponseInit | number,
-): Promise<TypedResponse<ResponseResult<LoaderData>>> {
+): Promise<UNSAFE_DataWithResponseInit<ResponseResult<LoaderData>>> {
 	let result: ResponseResult<LoaderData> = {} as ResponseResult<LoaderData>;
 
 	let resolvedResults = await Promise.all(
@@ -31,5 +31,5 @@ export async function jsonHash<LoaderData extends Record<string, unknown>>(
 			value as unknown as ResponseResult<LoaderData>[keyof LoaderData];
 	}
 
-	return remixJson<ResponseResult<LoaderData>>(result, init);
+	return data<ResponseResult<LoaderData>>(result, init);
 }