Start of React router v7 transition

Author: AlemTuzlak

package-lock.json

@@ -54,7 +54,9 @@
 			"default": "./dist/client.css"
 		}
 	},
-	"files": ["dist"],
+	"files": [
+		"dist"
+	],
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/Code-Forge-Net/Remix-Dev-Tools.git"
@@ -91,20 +93,20 @@
 		"icons": "npm run run:scripts scripts/icons.ts",
 		"check:unused": "knip "
 	},
-	"workspaces": [".", "test-apps/*", "docs"],
+	"workspaces": [
+		".",
+		"test-apps/*"
+	],
 	"peerDependencies": {
-		"@remix-run/react": ">=1.15",
 		"react": ">=17",
 		"react-dom": ">=17",
 		"vite": ">=5.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.3",
-		"@remix-run/dev": "^2.9.1",
-		"@remix-run/node": "^2.9.1",
-		"@remix-run/react": "^2.9.1",
-		"@remix-run/router": "^1.9.0",
-		"@remix-run/server-runtime": "^2.9.1",
+		"@react-router/dev": "^7.0.0-pre.0",
+		"@react-router/node": "^7.0.0-pre.0",
+		"@react-router/serve": "^7.0.0-pre.0",
 		"@testing-library/react": "^14.0.0",
 		"@types/beautify": "^0.0.3",
 		"@types/node": "^20.4.5",
@@ -125,7 +127,7 @@
 		"tsup": "^7.2.0",
 		"tsx": "^4.19.1",
 		"typescript": "^5.1.6",
-		"vite": "^5.1.0",
+		"vite": "^5.4.8",
 		"vitest": "^0.33.0"
 	},
 	"dependencies": {
@@ -139,7 +141,8 @@
 		"react-d3-tree": "^3.6.2",
 		"react-diff-viewer-continued": "^3.3.1",
 		"react-hotkeys-hook": "^4.5.0",
+		"react-router": "^7.0.0-pre.0",
 		"react-use-websocket": "^4.8.1",
 		"tailwind-merge": "^1.14.0"
 	}
-}
+}

package.json

@@ -1,6 +1,6 @@
-import { useLocation } from "@remix-run/react"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
+import { useLocation } from "react-router"
 import type { RemixDevToolsProps } from "./RemixDevTools.js"
 import { RDTContextProvider } from "./context/RDTContext.js"
 import { useSettingsContext } from "./context/useRDTContext.js"

src/client/EmbeddedDevTools.tsx

@@ -1,5 +1,5 @@
-import { Link, useLocation } from "@remix-run/react"
 import { useEffect, useState } from "react"
+import { Link, useLocation } from "react-router"
 import { Trigger } from "./components/Trigger.js"
 import { RDTContextProvider, type RdtClientConfig } from "./context/RDTContext.js"
 import { useDetachedWindowControls, usePersistOpen, useSettingsContext } from "./context/useRDTContext.js"

src/client/RemixDevTools.tsx

@@ -1,6 +1,6 @@
-import { Link } from "@remix-run/react"
 import clsx from "clsx"
 import type { MouseEvent } from "react"
+import { Link } from "react-router"
 import { useSettingsContext } from "../context/useRDTContext.js"
 import { type ExtendedRoute, constructRoutePath } from "../utils/routing.js"
 import { Input } from "./Input.js"

src/client/components/RouteInfo.tsx

@@ -1,6 +1,6 @@
-import type { useNavigate } from "@remix-run/react"
 import clsx from "clsx"
 import type { CustomNodeElementProps } from "react-d3-tree"
+import type { useNavigate } from "react-router"
 import type { RouteWildcards } from "../context/rdtReducer.js"
 import { type ExtendedRoute, getRouteColor } from "../utils/routing.js"
 

src/client/components/RouteNode.tsx

@@ -89,7 +89,7 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
 			isHoveringRoute: type === "enter",
 		})
 	}
-	const entryRoute = __remixManifest.routes[route.id]
+	const entryRoute = __reactRouterManifest.routes[route.id]
 	const isLayout = isLayoutRoute(entryRoute)
 
 	const clearServerInfoForRoute = () => {

src/client/components/RouteSegmentInfo.tsx

@@ -15,7 +15,7 @@ import {
 	//getExistingStateFromStorage,
 } from "./RDTContext.js"
 
-vi.mock("@remix-run/react", () => ({
+vi.mock("react-router", () => ({
 	useLocation: () => ({
 		pathname: "/",
 	}),

src/client/context/RDTContext.test.tsx

@@ -1,4 +1,4 @@
-import type { FormEncType } from "@remix-run/react"
+import type { FormEncType } from "react-router"
 
 interface NormalRedirectEvent {
 	type: "REDIRECT"

src/client/context/timeline/types.ts

@@ -1,5 +1,5 @@
-import { useLocation, useNavigate, useNavigation } from "@remix-run/react"
 import { useEffect, useRef } from "react"
+import { useLocation, useNavigate, useNavigation } from "react-router"
 import { detachedModeSetup } from "../../context/RDTContext.js"
 import { useDetachedWindowControls } from "../../context/useRDTContext.js"
 import { getStorageItem, setStorageItem } from "../../utils/storage.js"