feat: Migrate packages from Remix to React Router (#251)

Co-authored-by: me <me@kentcdodds.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: kentcdodds

package-lock.json

@@ -6,3 +6,5 @@ node_modules
 
 /prisma/data.db
 /prisma/data.db-journal
+
+.react-router/

packages/workshop-app/.gitignore

@@ -1,8 +1,8 @@
-import { useRouteLoaderData } from '@remix-run/react'
-import { type loader as rootLoader } from '#app/root.tsx'
+import { useRouteLoaderData } from 'react-router'
+import { type RootLoaderData } from '#app/root.tsx'
 
 export function useApps() {
-	const data = useRouteLoaderData<typeof rootLoader>('root')
+	const data = useRouteLoaderData('root') as RootLoaderData
 	if (!data) {
 		throw new Error('useApps requires a data object from the root loader')
 	}

packages/workshop-app/app/components/apps.tsx

@@ -1,5 +1,5 @@
-import { Link } from '@remix-run/react'
 import { clsx } from 'clsx'
+import { Link } from 'react-router'
 
 function PendingState() {
 	return <span className="inline-block animate-spin">🌀</span>

packages/workshop-app/app/components/button.tsx

@@ -1,15 +1,15 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import * as Select from '@radix-ui/react-select'
+import { clsx } from 'clsx'
+import React, { Suspense } from 'react'
 import {
 	Await,
 	Form,
 	Link,
 	useNavigation,
 	useSearchParams,
 	useSubmit,
-} from '@remix-run/react'
-import { clsx } from 'clsx'
-import React, { Suspense } from 'react'
+} from 'react-router'
 import { useSpinDelay } from 'spin-delay'
 import AccordionComponent from '#app/components/accordion.tsx'
 import { Mdx } from '#app/utils/mdx.tsx'
@@ -109,7 +109,7 @@ export function Diff({
 			<Await
 				resolve={diff}
 				errorElement={
-					<p className="text-foreground-destructive p-6">
+					<p className="p-6 text-foreground-destructive">
 						There was an error calculating the diff. Sorry.
 					</p>
 				}

packages/workshop-app/app/components/diff.tsx

@@ -1,7 +1,7 @@
 import { type EpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'
 import { type MuxPlayerRefAttributes } from '@mux/mux-player-react'
-import { Await, Link } from '@remix-run/react'
 import * as React from 'react'
+import { Await, Link } from 'react-router'
 import { useTheme } from '#app/routes/theme/index.tsx'
 import { MuxPlayer } from '#app/routes/video-player/index.tsx'
 import { cn } from '#app/utils/misc.tsx'

packages/workshop-app/app/components/epic-video.tsx

@@ -3,7 +3,7 @@ import {
 	useParams,
 	useRouteError,
 	type ErrorResponse,
-} from '@remix-run/react'
+} from 'react-router'
 import { getErrorMessage } from '#app/utils/misc.tsx'
 
 type StatusHandler = (info: {

packages/workshop-app/app/components/error-boundary.tsx

@@ -1,4 +1,3 @@
-import { Form, useSearchParams, type NavigateFunction } from '@remix-run/react'
 import { clsx } from 'clsx'
 import {
 	forwardRef,
@@ -8,6 +7,7 @@ import {
 	useState,
 	type ForwardedRef,
 } from 'react'
+import { Form, useSearchParams, type NavigateFunction } from 'react-router'
 import { z } from 'zod'
 import { Icon } from '#app/components/icons.tsx'
 import { AppStarter, AppStopper, PortStopper } from '#app/routes/start.tsx'
@@ -324,7 +324,7 @@ function InBrowserBrowserForRealzImpl(
 		setPathnameInputValue(newPathnameInputValue)
 
 		const currentPathname = iframeContext.history[iframeContext.index]
-		navigateChild(newPathnameInputValue, {
+		void navigateChild(newPathnameInputValue, {
 			replace: currentPathname === newPathnameInputValue,
 		})
 	}

packages/workshop-app/app/components/in-browser-browser.tsx

@@ -1,4 +1,4 @@
-import { Link, type LinkProps } from '@remix-run/react'
+import { Link, type LinkProps } from 'react-router'
 import { Icon } from './icons.tsx'
 
 export function NavChevrons({

packages/workshop-app/app/components/nav-chevrons.tsx

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