feat: initial codemod remix > rr7

Author: DennisKraaijeveld

app/components/error-boundary.tsx

@@ -1,9 +1,4 @@
-import {
-	type ErrorResponse,
-	isRouteErrorResponse,
-	useParams,
-	useRouteError,
-} from '@remix-run/react'
+import { type ErrorResponse, isRouteErrorResponse, useParams, useRouteError } from 'react-router';
 import { captureRemixErrorBoundaryError } from '@sentry/remix'
 import { type ReactElement } from 'react'
 import { getErrorMessage } from '#app/utils/misc.tsx'

app/components/progress-bar.tsx

@@ -1,4 +1,4 @@
-import { useNavigation } from '@remix-run/react'
+import { useNavigation } from 'react-router';
 import { useEffect, useRef, useState } from 'react'
 import { useSpinDelay } from 'spin-delay'
 import { cn } from '#app/utils/misc.tsx'

app/components/search-bar.tsx

@@ -1,4 +1,4 @@
-import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { Form, useSearchParams, useSubmit } from 'react-router';
 import { useId } from 'react'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'

app/entry.client.tsx

@@ -1,4 +1,4 @@
-import { RemixBrowser } from '@remix-run/react'
+import { HydratedRouter } from 'react-router/dom';
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
@@ -7,5 +7,5 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 }
 
 startTransition(() => {
-	hydrateRoot(document, <RemixBrowser />)
+	hydrateRoot(document, <HydratedRouter />)
 })

app/entry.server.tsx

@@ -1,11 +1,13 @@
 import { PassThrough } from 'node:stream'
+import { createReadableStreamFromReadable } from '@react-router/node';
+
 import {
-	createReadableStreamFromReadable,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	type HandleDocumentRequestFunction,
-} from '@remix-run/node'
-import { RemixServer } from '@remix-run/react'
+    type LoaderFunctionArgs,
+    type ActionFunctionArgs,
+    type HandleDocumentRequestFunction,
+} from 'react-router';
+
+import { ServerRouter } from 'react-router';
 import * as Sentry from '@sentry/remix'
 import chalk from 'chalk'
 import { isbot } from 'isbot'
@@ -27,7 +29,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		request,
 		responseStatusCode,
 		responseHeaders,
-		remixContext,
+		reactRouterContext,
 		loadContext,
 	] = args
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
@@ -53,7 +55,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer nonce={nonce} context={remixContext} url={request.url} />
+				<ServerRouter nonce={nonce} context={reactRouterContext} url={request.url} />
 			</NonceProvider>,
 			{
 				[callbackName]: () => {
@@ -79,7 +81,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		)
 
 		setTimeout(abort, streamTimeout + 5000)
-	})
+	});
 }
 
 export async function handleDataRequest(response: Response) {

app/root.tsx

@@ -1,22 +1,22 @@
 import {
-	data,
-	type LoaderFunctionArgs,
-	type HeadersFunction,
-	type LinksFunction,
-	type MetaFunction,
-} from '@remix-run/node'
+    data,
+    type LoaderFunctionArgs,
+    type HeadersFunction,
+    type LinksFunction,
+    type MetaFunction,
+} from 'react-router';
 import {
-	Form,
-	Link,
-	Links,
-	Meta,
-	Outlet,
-	Scripts,
-	ScrollRestoration,
-	useLoaderData,
-	useMatches,
-	useSubmit,
-} from '@remix-run/react'
+    Form,
+    Link,
+    Links,
+    Meta,
+    Outlet,
+    Scripts,
+    ScrollRestoration,
+    useLoaderData,
+    useMatches,
+    useSubmit,
+} from 'react-router';
 import { withSentry } from '@sentry/remix'
 import { useRef } from 'react'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'

app/routes/$.tsx

@@ -5,7 +5,7 @@
 // ensure the user gets the right status code and we can display a nicer error
 // message for them than the Remix and/or browser default.
 
-import { Link, useLocation } from '@remix-run/react'
+import { Link, useLocation } from 'react-router';
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 

app/routes/_auth+/auth.$provider.callback.ts

@@ -1,4 +1,4 @@
-import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
+import { redirect, type LoaderFunctionArgs } from 'react-router';
 import {
 	authenticator,
 	getSessionExpirationDate,
@@ -39,8 +39,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 	const authResult = await authenticator
 		.authenticate(providerName, request, { throwOnError: true })
 		.then(
-			(data) => ({ success: true, data }) as const,
-			(error) => ({ success: false, error }) as const,
+			(data) => (({
+                success: true,
+                data
+            }) as const),
+			(error) => (({
+                success: false,
+                error
+            }) as const),
 		)
 
 	if (!authResult.success) {

app/routes/_auth+/auth_.$provider.ts

@@ -1,4 +1,4 @@
-import { redirect, type ActionFunctionArgs } from '@remix-run/node'
+import { redirect, type ActionFunctionArgs } from 'react-router';
 import { authenticator } from '#app/utils/auth.server.ts'
 import { handleMockAction } from '#app/utils/connections.server.ts'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'

app/routes/_auth+/forgot-password.tsx

@@ -2,13 +2,8 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
-import {
-	data,
-	redirect,
-	type ActionFunctionArgs,
-	type MetaFunction,
-} from '@remix-run/node'
-import { Link, useFetcher } from '@remix-run/react'
+import { data, redirect, type ActionFunctionArgs, type MetaFunction } from 'react-router';
+import { Link, useFetcher } from 'react-router';
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'