feat: typegen

Author: DennisKraaijeveld

app/entry.client.tsx

@@ -1,6 +1,6 @@
-import { HydratedRouter } from 'react-router/dom';
 import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
+import { HydratedRouter } from 'react-router/dom'
 
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	void import('./utils/monitoring.client.tsx').then(({ init }) => init())

app/entry.server.tsx

@@ -1,17 +1,16 @@
 import { PassThrough } from 'node:stream'
-import { createReadableStreamFromReadable } from '@react-router/node';
+import { createReadableStreamFromReadable } from '@react-router/node'
 
-import {
-    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'
 import { renderToPipeableStream } from 'react-dom/server'
+import {
+	ServerRouter,
+	type LoaderFunctionArgs,
+	type ActionFunctionArgs,
+	type HandleDocumentRequestFunction,
+} from 'react-router'
 import { getEnv, init } from './utils/env.server.ts'
 import { getInstanceInfo } from './utils/litefs.server.ts'
 import { NonceProvider } from './utils/nonce-provider.ts'
@@ -55,7 +54,11 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<ServerRouter nonce={nonce} context={reactRouterContext} url={request.url} />
+				<ServerRouter
+					nonce={nonce}
+					context={reactRouterContext}
+					url={request.url}
+				/>
 			</NonceProvider>,
 			{
 				[callbackName]: () => {
@@ -81,7 +84,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		)
 
 		setTimeout(abort, streamTimeout + 5000)
-	});
+	})
 }
 
 export async function handleDataRequest(response: Response) {

package.json

@@ -33,7 +33,7 @@
     "pretest:e2e:run": "npm run build",
     "test:e2e:run": "cross-env CI=true playwright test",
     "test:e2e:install": "npx playwright install --with-deps chromium",
-    "typecheck": "tsc",
+    "typecheck": "react-router typegen && tsc",
     "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run"
   },
   "eslintIgnore": [

remix.init/gitignore

@@ -24,3 +24,4 @@ node_modules
 
 # generated files
 /app/components/ui/icons
+.react-router/

tsconfig.json

@@ -1,7 +1,10 @@
 {
-	"include": ["**/*.ts", "**/*.tsx"],
+	"include": ["**/*.ts", "**/*.tsx", ".react-router/types/**/*"],
 	"extends": ["@epic-web/config/typescript"],
 	"compilerOptions": {
+		// TODO: Probably should move this into epic-web/config
+		"types": ["@react-router/node", "vite/client"],
+		"rootDirs": [".", "./.react-router/types"],
 		"paths": {
 			"#app/*": ["./app/*"],
 			"#tests/*": ["./tests/*"],