Simplify fetch-router action and middleware types

Author: mjackson

demos/bookstore/app/middleware/asset-entry.ts

@@ -20,7 +20,7 @@ type SetAssetEntryContextTransform = readonly [readonly [typeof assetsEntryKey,
 export function loadAssetEntry(
   scriptEntry = defaultScriptEntry,
   stylesheetEntry = defaultStylesheetEntry,
-): Middleware<any, any, SetAssetEntryContextTransform> {
+): Middleware<any, SetAssetEntryContextTransform> {
   return async (context, next) => {
     let [scriptSrc, scriptPreloads, stylesheetHref] = await Promise.all([
       assetServer.getHref(scriptEntry),

demos/bookstore/app/middleware/database.ts

@@ -5,7 +5,7 @@ import { db } from '../data/setup.ts'
 
 type SetDatabaseContextTransform = readonly [readonly [typeof Database, Database]]
 
-export function loadDatabase(): Middleware<'ANY', {}, SetDatabaseContextTransform> {
+export function loadDatabase(): Middleware<{}, SetDatabaseContextTransform> {
   return async (context, next) => {
     context.set(Database, db)
     return next()

demos/frames/app/actions/root-reload-client-entries.tsx

@@ -1,4 +1,4 @@
-import type { BuildAction } from 'remix/fetch-router'
+import type { Action } from 'remix/fetch-router'
 import type { Handle } from 'remix/ui'
 
 import {
@@ -28,7 +28,7 @@ export const rootReloadClientEntriesAction = {
       { request: context.request, router: context.router },
     )
   },
-} satisfies BuildAction<typeof routes.rootReloadClientEntries>
+} satisfies Action<typeof routes.rootReloadClientEntries>
 
 type RootReloadClientEntriesPageProps = {
   includeRemoved: boolean

demos/social-auth/app/middleware/database.ts

@@ -5,7 +5,7 @@ import { db } from '../data/setup.ts'
 
 type SetDatabaseContextTransform = readonly [readonly [typeof Database, Database]]
 
-export function loadDatabase(): Middleware<'ANY', {}, SetDatabaseContextTransform> {
+export function loadDatabase(): Middleware<{}, SetDatabaseContextTransform> {
   return async (context, next) => {
     context.set(Database, db)
     return next()

packages/auth-middleware/src/lib/auth-types.test.ts

@@ -2,7 +2,7 @@ import { describe, it } from '@remix-run/test'
 
 import {
   createRouter,
-  type BuildAction,
+  type Action,
   type Controller,
   type GetContextValue,
   type MiddlewareContext,
@@ -109,7 +109,7 @@ const privateAction = {
 
     return new Response('Private')
   },
-} satisfies BuildAction<typeof routes.private, ProtectedAppContext>
+} satisfies Action<typeof routes.private, ProtectedAppContext>
 
 const adminController = {
   actions: {

packages/auth-middleware/src/lib/auth.ts

@@ -135,7 +135,7 @@ export interface AuthOptions<schemes extends readonly AuthScheme<any>[] = AuthSc
  */
 export function auth<schemes extends readonly AuthScheme<any>[]>(
   options: AuthOptions<schemes>,
-): Middleware<any, any, SetAuthContextTransform<AuthForSchemes<schemes>>> {
+): Middleware<any, SetAuthContextTransform<AuthForSchemes<schemes>>> {
   if (options.schemes.length === 0) {
     throw new Error('auth() requires at least one authentication scheme')
   }

packages/auth-middleware/src/lib/require-auth.ts

@@ -46,7 +46,7 @@ export interface RequireAuthOptions {
  */
 export function requireAuth<identity = unknown>(
   options: RequireAuthOptions = {},
-): Middleware<any, any, RequireAuthContextTransform<identity>> {
+): Middleware<any, RequireAuthContextTransform<identity>> {
   return async (context, next) => {
     let auth = context.get(Auth)
     if (auth == null) {

packages/auth-middleware/src/lib/schemes/session.test.ts

@@ -109,7 +109,7 @@ describe('createSessionAuthScheme scheme', () => {
 
   it('fails and invalidates when verify() returns null', async () => {
     let invalidated = false
-    let setSession: Middleware<any, any, SetSessionContextTransform> = (context, next) => {
+    let setSession: Middleware<any, SetSessionContextTransform> = (context, next) => {
       let session = createSession()
       session.set('auth', { userId: 'u1' })
       context.set(Session, session)

packages/fetch-router/.changes/minor.action-route-entry-types.md

@@ -1,4 +1,4 @@
-BREAKING CHANGE: Simplified route action helper types so `Action` and `BuildAction` no longer accept an unused request method type parameter. If you manually type route actions, pass only the route pattern or route object plus any request context type:
+BREAKING CHANGE: Simplified route action and middleware helper types so they no longer accept unused request method type parameters. If you manually type route actions, pass only the route pattern or route object plus any request context type:
 
 ```ts
 // before
@@ -13,7 +13,7 @@ let action = {
   handler(context) {
     return new Response(context.params.id)
   },
-} satisfies BuildAction<typeof routes.account, AppContext>
+} satisfies Action<typeof routes.account, AppContext>
 ```
 
 Renamed the custom router matcher payload type from `MatchData` to `RouteEntry`:
@@ -25,3 +25,41 @@ let matcher = createMatcher<MatchData>()
 // after
 let matcher = createMatcher<RouteEntry>()
 ```
+
+If you manually annotate middleware, pass only the params type and context transform type:
+
+```ts
+// before
+let middleware: Middleware<'ANY', {}, SetDatabaseContextTransform>
+
+// after
+let middleware: Middleware<{}, SetDatabaseContextTransform>
+```
+
+`Action` now accepts string patterns, `RoutePattern` objects, and `Route` objects directly. It also owns the optional action middleware tuple generic, so `BuildAction` is no longer exported.
+
+For stored action objects with action-local middleware, the handler context can now be derived from the middleware tuple that actually runs. Previously, the action had to repeat the middleware's type effect with a manually refined context type. That was type-safe only as long as the manual context type and the runtime middleware stayed in sync:
+
+```ts
+// before
+type AuthenticatedAppContext = WithRequiredAuth<AppContext, AuthIdentity>
+
+let action = {
+  middleware: [requireAuth<AuthIdentity>()],
+  handler(context) {
+    let auth = context.get(Auth)
+    return Response.json(auth.identity)
+  },
+} satisfies BuildAction<'GET', typeof routes.account, AuthenticatedAppContext>
+
+// after
+let accountMiddleware = [requireAuth<AuthIdentity>()] as const
+
+let action = {
+  middleware: accountMiddleware,
+  handler(context) {
+    let auth = context.get(Auth)
+    return Response.json(auth.identity)
+  },
+} satisfies Action<typeof routes.account, AppContext, typeof accountMiddleware>
+```

packages/fetch-router/README.md

@@ -629,8 +629,8 @@ Route params are only half of a handler's type contract. In many apps, handlers
 `fetch-router` now lets you carry that context contract through the router, controller, and action types directly. A common pattern is to derive one app-local context type from your router middleware, then reuse it across stored controllers and actions.
 
 ```ts
-import { Auth, requireAuth, type WithRequiredAuth } from 'remix/auth-middleware'
-import { type BuildAction, type RequestContext, type WithParams } from 'remix/fetch-router'
+import { Auth, requireAuth } from 'remix/auth-middleware'
+import { type Action, type RequestContext, type WithParams } from 'remix/fetch-router'
 import { route } from 'remix/routes'
 
 let routes = route({
@@ -641,21 +641,18 @@ type AppContext<params extends Record<string, string> = {}> = WithParams<Request
 
 type AuthIdentity = { id: string }
 
-type AuthenticatedAppContext<params extends Record<string, string> = {}> = WithRequiredAuth<
-  AppContext<params>,
-  AuthIdentity
->
+let accountMiddleware = [requireAuth<AuthIdentity>()] as const
 
 let accountAction = {
-  middleware: [requireAuth<AuthIdentity>()],
+  middleware: accountMiddleware,
   handler(context) {
     let auth = context.get(Auth)
     return Response.json({ id: auth.identity.id })
   },
-} satisfies BuildAction<typeof routes.account, AuthenticatedAppContext>
+} satisfies Action<typeof routes.account, AppContext, typeof accountMiddleware>
 ```
 
-In this example, the action declares the stronger context it requires, and the action-local middleware makes that contract true at runtime. In a larger app, you can still derive a shared base context from router middleware with `MiddlewareContext<typeof middleware>` and build on top of it the same way.
+In this example, the action-local middleware tuple gives the handler the stronger context it requires and makes that contract true at runtime. In a larger app, you can still derive a shared base context from router middleware with `MiddlewareContext<typeof middleware>` and build on top of it the same way.
 
 #### Middleware Provider Guidance