React Router type safety (#580)

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

Author: kentcdodds

packages/workshop-app/app/routes/$.tsx

@@ -1,15 +1,16 @@
+import { type Route } from './+types/$'
 // This is called a "splat route" and as it's in the root `/app/routes/`
 // directory, it's a catchall. If no other routes match, this one will and we
 // can know that the user is hitting a URL that doesn't exist. By throwing a
 // 404 from the loader, we can force the error boundary to render which will
 // 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 { type LoaderFunctionArgs, Link, useLocation } from 'react-router'
+import { Link, useLocation } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/icons.tsx'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	const splat = params['*']
 	const segments = splat?.split('/') ?? []
 	if (segments.length > 0 && !isNaN(Number(segments[0]))) {

packages/workshop-app/app/routes/_app+/_layout.tsx

@@ -1,3 +1,4 @@
+import { type Route } from './+types/_layout'
 import {
 	extractNumbersAndTypeFromAppNameOrPath,
 	getApps,
@@ -24,7 +25,6 @@ import {
 	useParams,
 	data,
 	type HeadersFunction,
-	type LoaderFunctionArgs,
 } from 'react-router'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { Icon } from '#app/components/icons.tsx'
@@ -94,7 +94,7 @@ function getSidecarStatus() {
 	return { processes, hasFailure, count: processes.length, failureCount }
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const timings = makeTimings('appLayoutLoader')
 	const { title: workshopTitle } = getWorkshopConfig()
 	const [exercises, playgroundAppName, apps] = await Promise.all([

packages/workshop-app/app/routes/_app+/account.tsx

@@ -1,11 +1,12 @@
+import { type Route } from './+types/account'
 import { deleteCache } from '@epic-web/workshop-utils/cache.server'
 import {
 	logout,
 	requireAuthInfo,
 	setPreferences,
 } from '@epic-web/workshop-utils/db.server'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import { redirect, type LoaderFunctionArgs, Form, Link } from 'react-router'
+import { redirect, Form, Link } from 'react-router'
 import { Button } from '#app/components/button.tsx'
 import { Icon } from '#app/components/icons.tsx'
 import {
@@ -26,13 +27,13 @@ export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	ensureUndeployed()
 	await requireAuthInfo({ request })
 	return {}
 }
 
-export async function action({ request }: { request: Request }) {
+export async function action({ request }: Route.ActionArgs) {
 	ensureUndeployed()
 	const formData = await request.formData()
 	const intent = formData.get('intent')

packages/workshop-app/app/routes/_app+/app.$appName+/$.ts

@@ -1,10 +1,11 @@
+import { type Route } from './+types/$'
 import path from 'path'
 import { invariantResponse } from '@epic-web/invariant'
 import { makeTimings } from '@epic-web/workshop-utils/timing.server'
 import etag from 'etag'
 import fsExtra from 'fs-extra'
 import mimeTypes from 'mime-types'
-import { redirect, type LoaderFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { z } from 'zod'
 import { compileTs } from '#app/utils/compile-app.server.ts'
 import {
@@ -173,7 +174,7 @@ function generateErrorJavaScript(
 `
 }
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	ensureUndeployed()
 	const timings = makeTimings('app-file')
 	const { fileApp, app } = await resolveApps({ request, params, timings })

packages/workshop-app/app/routes/_app+/app.$appName+/api.$.ts

@@ -1,22 +1,19 @@
+import { type Route } from './+types/api.$'
 import path from 'node:path'
 import { invariantResponse } from '@epic-web/invariant'
 import { makeTimings } from '@epic-web/workshop-utils/timing.server'
 import fsExtra from 'fs-extra'
-import {
-	redirect,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-} from 'react-router'
+import { redirect } from 'react-router'
 import { z } from 'zod'
 import { compileTs } from '#app/utils/compile-app.server.ts'
 import { ensureUndeployed, getBaseUrl } from '#app/utils/misc.tsx'
 import { resolveApps } from './__utils'
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
 	ensureUndeployed()
 	const api = await getApiModule(args)
 	const loaderFn = api.mod.loader as
-		| ((loaderArgs: LoaderFunctionArgs) => unknown)
+		| ((loaderArgs: Route.LoaderArgs) => unknown)
 		| undefined
 	invariantResponse(
 		loaderFn,
@@ -31,11 +28,11 @@ export async function loader(args: LoaderFunctionArgs) {
 	}
 }
 
-export async function action(args: ActionFunctionArgs) {
+export async function action(args: Route.ActionArgs) {
 	ensureUndeployed()
 	const api = await getApiModule(args)
 	const actionFn = api.mod.action as
-		| ((actionArgs: ActionFunctionArgs) => unknown)
+		| ((actionArgs: Route.ActionArgs) => unknown)
 		| undefined
 	invariantResponse(
 		actionFn,
@@ -55,7 +52,7 @@ const ApiModuleSchema = z.object({
 	action: z.function().optional(),
 })
 
-async function getApiModule({ request, params }: LoaderFunctionArgs) {
+async function getApiModule({ request, params }: Route.LoaderArgs) {
 	const timings = makeTimings('app-api')
 	const { fileApp, app } = await resolveApps({ request, params, timings })
 	if (!fileApp || !app) {

packages/workshop-app/app/routes/_app+/app.$appName+/epic_ws[.js].ts

@@ -1,9 +1,10 @@
+import { type Route } from './+types/epic_ws[.js]'
 import { makeTimings } from '@epic-web/workshop-utils/timing.server'
-import { redirect, type LoaderFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { ensureUndeployed, getBaseUrl } from '#app/utils/misc.tsx'
 import { resolveApps } from './__utils.ts'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	ensureUndeployed()
 	const timings = makeTimings('epic_ws script')
 	const { fileApp, app } = await resolveApps({ request, params, timings })

packages/workshop-app/app/routes/_app+/app.$appName+/index.ts

@@ -1,3 +1,4 @@
+import { type Route } from './+types/index'
 import path from 'path'
 import {
 	getAppByName,
@@ -14,11 +15,11 @@ import {
 	makeTimings,
 } from '@epic-web/workshop-utils/timing.server'
 import fsExtra from 'fs-extra'
-import { redirect, type LoaderFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { ensureUndeployed, getBaseUrl } from '#app/utils/misc.tsx'
 import { resolveApps } from './__utils.ts'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	ensureUndeployed()
 	const timings = makeTimings('app')
 	const { fileApp, app } = await resolveApps({ request, params, timings })

packages/workshop-app/app/routes/_app+/app.$appName+/test.$testName.ts

@@ -1,3 +1,4 @@
+import { type Route } from './+types/test.$testName'
 import path from 'path'
 import { invariantResponse } from '@epic-web/invariant'
 import {
@@ -13,12 +14,11 @@ import {
 	makeTimings,
 } from '@epic-web/workshop-utils/timing.server'
 import fsExtra from 'fs-extra'
-import { type LoaderFunctionArgs } from 'react-router'
 import { ensureUndeployed } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { resolveApps } from './__utils.ts'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	ensureUndeployed()
 	const timings = makeTimings('app_test_loader')
 	const userHasAccess = await userHasAccessToWorkshop({

packages/workshop-app/app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/app.tsx

@@ -1,20 +1,16 @@
+import { type Route } from './+types/app'
 import { requireExerciseApp } from '@epic-web/workshop-utils/apps.server'
 import {
 	combineServerTimings,
 	makeTimings,
 } from '@epic-web/workshop-utils/timing.server'
 import { useRef } from 'react'
-import {
-	data,
-	type HeadersFunction,
-	type LoaderFunctionArgs,
-	useLoaderData,
-} from 'react-router'
+import { data, type HeadersFunction, useLoaderData } from 'react-router'
 import { type InBrowserBrowserRef } from '#app/components/in-browser-browser.ts'
 import { Preview } from './__shared/preview.tsx'
 import { getAppRunningState } from './__shared/utils.tsx'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	const timings = makeTimings('exercise-step-test')
 	const exerciseStepApp = await requireExerciseApp(params, { request, timings })
 	const { isRunning, portIsAvailable } =

packages/workshop-app/app/routes/_app+/exercise+/$exerciseNumber_.$stepNumber.$type+/index.tsx

@@ -1,3 +1,4 @@
+import { type Route } from './+types/index'
 import {
 	getAppByName,
 	getAppDisplayName,
@@ -24,7 +25,6 @@ import {
 	data,
 	redirect,
 	type HeadersFunction,
-	type LoaderFunctionArgs,
 	useOutletContext,
 } from 'react-router'
 import { Diff } from '#app/components/diff.tsx'
@@ -38,13 +38,12 @@ import {
 import { useWorkshopConfig } from '#app/components/workshop-config.tsx'
 import { fetchDiscordPosts } from '#app/utils/discord.server.ts'
 import { useAltDown } from '#app/utils/misc.tsx'
-import { type Route } from './+types/index.ts'
 import { Playground } from './__shared/playground.tsx'
 import { Preview } from './__shared/preview.tsx'
 import { Tests } from './__shared/tests.tsx'
 import { getAppRunningState, getTestState } from './__shared/utils.tsx'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	const timings = makeTimings('exerciseStepTypeIndexLoader')
 	const searchParams = new URL(request.url).searchParams
 	const cacheOptions = { request, timings }