Migration from remix to rr7

package.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"
 	}
-}
+}

test-apps/react-router-cjs/.react-router/types/app/+types/root.ts

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

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

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

@@ -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>
+}