Migration from remix to rr7

Author: AlemTuzlak

package-lock.json

@@ -25,8 +25,8 @@
 		"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",
+		"remix:dev": "npm run dev -w test-apps/react-router-vite",
+		"remix: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",
@@ -36,7 +36,7 @@
 		"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"
 	},
@@ -49,8 +49,13 @@
 	"bugs": {
 		"url": "https://github.com/forge42dev/open-source-stack/issues"
 	},
-	"files": ["dist"],
-	"workspaces": [".", "test-apps/*"],
+	"files": [
+		"dist"
+	],
+	"workspaces": [
+		".",
+		"test-apps/*"
+	],
 	"homepage": "https://github.com/forge42dev/open-source-stack#readme",
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.15.4",
@@ -78,4 +83,4 @@
 	"engines": {
 		"node": ">=20.0.0"
 	}
-}
+}

package.json

@@ -0,0 +1,40 @@
+// React Router generated types for route:
+// root.tsx
+
+import type * as T from "react-router/route-module"
+
+
+
+type Module = typeof import("../root.js")
+
+export type Info = {
+  parents: [],
+  id: "root"
+  file: "root.tsx"
+  path: ""
+  params: {} & { [key: string]: string | undefined }
+  module: Module
+  loaderData: T.CreateLoaderData<Module>
+  actionData: T.CreateActionData<Module>
+}
+
+export namespace Route {
+  export type LinkDescriptors = T.LinkDescriptors
+  export type LinksFunction = () => LinkDescriptors
+
+  export type MetaArgs = T.CreateMetaArgs<Info>
+  export type MetaDescriptors = T.MetaDescriptors
+  export type MetaFunction = (args: MetaArgs) => MetaDescriptors
+
+  export type HeadersArgs = T.HeadersArgs
+  export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
+
+  export type LoaderArgs = T.CreateServerLoaderArgs<Info>
+  export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
+  export type ActionArgs = T.CreateServerActionArgs<Info>
+  export type ClientActionArgs = T.CreateClientActionArgs<Info>
+
+  export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Info>
+  export type ComponentProps = T.CreateComponentProps<Info>
+  export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Info>
+}

test-apps/remix-vite-cjs/.eslintrc.cjs test-apps/react-router-cjs/.eslintrc.cjstest-apps/remix-vite-cjs/.eslintrc.cjs renamed to test-apps/react-router-cjs/.eslintrc.cjs

@@ -0,0 +1,40 @@
+// React Router generated types for route:
+// ./routes/_index.tsx
+
+import type * as T from "react-router/route-module"
+
+import type { Info as Parent0 } from "../../+types/root.js"
+
+type Module = typeof import("../_index.js")
+
+export type Info = {
+  parents: [Parent0],
+  id: "routes/_index"
+  file: "./routes/_index.tsx"
+  path: "/"
+  params: {} & { [key: string]: string | undefined }
+  module: Module
+  loaderData: T.CreateLoaderData<Module>
+  actionData: T.CreateActionData<Module>
+}
+
+export namespace Route {
+  export type LinkDescriptors = T.LinkDescriptors
+  export type LinksFunction = () => LinkDescriptors
+
+  export type MetaArgs = T.CreateMetaArgs<Info>
+  export type MetaDescriptors = T.MetaDescriptors
+  export type MetaFunction = (args: MetaArgs) => MetaDescriptors
+
+  export type HeadersArgs = T.HeadersArgs
+  export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
+
+  export type LoaderArgs = T.CreateServerLoaderArgs<Info>
+  export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
+  export type ActionArgs = T.CreateServerActionArgs<Info>
+  export type ClientActionArgs = T.CreateClientActionArgs<Info>
+
+  export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Info>
+  export type ComponentProps = T.CreateComponentProps<Info>
+  export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Info>
+}

test-apps/remix-vite-cjs/.gitignore test-apps/react-router-cjs/.gitignoretest-apps/remix-vite-cjs/.gitignore renamed to test-apps/react-router-cjs/.gitignore

@@ -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/react-router-cjs/.react-router/types/app/+types/root.ts

@@ -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/react-router-cjs/.react-router/types/app/routes/+types/_index.ts

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