Migration from remix to rr7

.gitignore

@@ -129,4 +129,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 /dist
-.history
+.history
+.react-router

package.json

@@ -25,18 +25,18 @@
 		"test:cov": "vitest run --coverage",
 		"postbuild": "npm run check:exports",
 		"build": "tsup src/index.ts --config tsup.config.ts",
-		"remix:dev": "npm run dev -w test-apps/remix-vite",
-		"remix:cjs:dev": "npm run dev -w test-apps/remix-vite-cjs",
+		"react-router:esm:dev": "npm run dev -w test-apps/react-router-esm",
+		"react-router:cjs:dev": "npm run dev -w test-apps/react-router-cjs",
 		"build:dev": "tsup src/index.ts --config tsup.dev.config.ts",
 		"build:dev:watch": "npm run build:dev -- --watch",
 		"build:dev:cjs:watch": "npm run build:dev -- --watch",
-		"dev": "npm-run-all -s build:dev -p remix:dev build:dev:watch",
-		"dev:cjs": "npm-run-all -s build:dev -p remix:cjs:dev build:dev:cjs:watch",
+		"dev": "npm-run-all -s build:dev -p react-router:esm:dev build:dev:watch",
+		"dev:cjs": "npm-run-all -s build:dev -p react-router:cjs:dev build:dev:cjs:watch",
 		"prepublishOnly": "npm run build",
 		"check": "biome check .",
 		"check:fix": "biome check --fix .",
 		"typecheck": "tsc",
-		"validate": "npm run check && npm run tsc && npm run test",
+		"validate": "npm run check && npm run typecheck && npm run test",
 		"check:exports": "attw --pack .",
 		"local-release": "changeset version && changeset publish"
 	},

test-apps/remix-vite-cjs/app/entry.client.tsx → test-apps/react-router-cjs/app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
+import { HydratedRouter } from "react-router/dom"
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+     	<HydratedRouter />
     </StrictMode>
   );
 });

test-apps/remix-vite/app/entry.server.tsx → test-apps/react-router-cjs/app/entry.server.tsx

@@ -5,10 +5,8 @@
  */
 
 import { PassThrough } from "node:stream";
-
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { type AppLoadContext, type EntryContext, ServerRouter } from "react-router"
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
@@ -18,7 +16,7 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,30 +27,26 @@ export default function handleRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={reactRouterContext} url={request.url} />,
       {
         onAllReady() {
           shellRendered = true;
@@ -93,16 +87,12 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={reactRouterContext} url={request.url} />,
       {
         onShellReady() {
           shellRendered = true;

test-apps/remix-vite/app/root.tsx → test-apps/react-router-cjs/app/root.tsx

@@ -4,7 +4,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
+} from "react-router";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (

test-apps/react-router-cjs/app/routes.ts

@@ -0,0 +1,6 @@
+// @ts-ignore
+import { route } from "@react-router/dev/routes";
+
+export default [
+	route("/", "./routes/_index.tsx")
+]

test-apps/remix-vite-cjs/app/routes/_index.tsx → test-apps/react-router-cjs/app/routes/_index.tsx

@@ -1,5 +1,4 @@
-import type { MetaFunction } from "@remix-run/node";
-import { test } from "open-source-stack";
+import type { MetaFunction } from "react-router";
 
 export const meta: MetaFunction = () => {
   return [{ title: "New Remix App" }, { name: "description", content: "Welcome to Remix!" }];

test-apps/react-router-cjs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-router-cjs",
+  "private": true,
+  "sideEffects": false,
+  "type": "commonjs",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.1.5",
+    "react-router": "^7.1.5",
+    "@react-router/serve": "^7.1.5",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "open-source-stack": "*"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.1.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/node": "22.13.1",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  }
+}

test-apps/remix-vite-cjs/tsconfig.json → test-apps/react-router-cjs/tsconfig.json

@@ -9,7 +9,7 @@
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@react-router/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",

test-apps/react-router-cjs/vite.config.ts

@@ -0,0 +1,8 @@
+// @ts-ignore
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [reactRouter(), tsconfigPaths()],
+});

test-apps/remix-vite/app/entry.client.tsx → test-apps/react-router-esm/app/entry.client.tsx

@@ -4,15 +4,15 @@
  * For more information, see https://remix.run/file-conventions/entry.client
  */
 
-import { RemixBrowser } from "@remix-run/react";
+import { HydratedRouter } from "react-router/dom"
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 
 startTransition(() => {
   hydrateRoot(
     document,
     <StrictMode>
-      <RemixBrowser />
+     	<HydratedRouter />
     </StrictMode>
   );
 });

test-apps/remix-vite-cjs/app/entry.server.tsx → test-apps/react-router-esm/app/entry.server.tsx

@@ -5,10 +5,8 @@
  */
 
 import { PassThrough } from "node:stream";
-
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
-import { createReadableStreamFromReadable } from "@remix-run/node";
-import { RemixServer } from "@remix-run/react";
+import { createReadableStreamFromReadable } from "@react-router/node";
+import { type AppLoadContext, type EntryContext, ServerRouter } from "react-router"
 import { isbot } from "isbot";
 import { renderToPipeableStream } from "react-dom/server";
 
@@ -18,7 +16,7 @@ export default function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext,
+  reactRouterContext: EntryContext,
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,30 +27,26 @@ export default function handleRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       )
     : handleBrowserRequest(
         request,
         responseStatusCode,
         responseHeaders,
-        remixContext
+        reactRouterContext
       );
 }
 
 function handleBotRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={reactRouterContext} url={request.url} />,
       {
         onAllReady() {
           shellRendered = true;
@@ -93,16 +87,12 @@ function handleBrowserRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
-  remixContext: EntryContext
+  reactRouterContext: EntryContext
 ) {
   return new Promise((resolve, reject) => {
     let shellRendered = false;
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <ServerRouter context={reactRouterContext} url={request.url} />,
       {
         onShellReady() {
           shellRendered = true;

test-apps/remix-vite-cjs/app/root.tsx → test-apps/react-router-esm/app/root.tsx

@@ -4,7 +4,7 @@ import {
   Outlet,
   Scripts,
   ScrollRestoration,
-} from "@remix-run/react";
+} from "react-router";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (

test-apps/react-router-esm/app/routes.ts

@@ -0,0 +1,5 @@
+import { route } from "@react-router/dev/routes";
+
+export default [
+	route("/", "./routes/_index.tsx")
+]

test-apps/remix-vite/app/routes/_index.tsx → test-apps/react-router-esm/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "react-router";
 // Import and test your package
 import { test } from "open-source-stack";
 

test-apps/react-router-esm/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-router-esm",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.1.5",
+    "react-router": "^7.1.5",
+    "@react-router/serve": "^7.1.5",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "open-source-stack": "*"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.1.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/node": "22.13.1",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "react-router-devtools": "1.1.4"
+  },
+  "engines": {
+    "node": ">=22.0.0"
+  }
+}

test-apps/remix-vite/tsconfig.json → test-apps/react-router-esm/tsconfig.json

@@ -9,7 +9,7 @@
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
-    "types": ["@remix-run/node", "vite/client"],
+    "types": ["@react-router/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",

test-apps/react-router-esm/vite.config.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { reactRouterDevTools } from "react-router-devtools";
+
+export default defineConfig({
+  plugins: [ reactRouterDevTools(),reactRouter(), tsconfigPaths()],
+});