Use named type parameters in fetch-router

This is a start on #10805

Author: mjackson

packages/fetch-router/src/lib/app-storage.ts

@@ -10,7 +10,7 @@ export class AppStorage {
    * @param key The key to check
    * @returns `true` if a value is stored for the given key, `false` otherwise
    */
-  has<K extends StorageKey<any>>(key: K): boolean {
+  has<key extends StorageKey<any>>(key: key): boolean {
     return this.#map.has(key)
   }
 
@@ -20,7 +20,7 @@ export class AppStorage {
    * @param key The key to get
    * @returns The value for the given key
    */
-  get<K extends StorageKey<any>>(key: K): StorageValue<K> {
+  get<key extends StorageKey<any>>(key: key): StorageValue<key> {
     if (!this.#map.has(key)) {
       if (key.defaultValue === undefined) {
         throw new Error(`Missing default value in storage for key ${key}`)
@@ -29,7 +29,7 @@ export class AppStorage {
       return key.defaultValue
     }
 
-    return this.#map.get(key) as StorageValue<K>
+    return this.#map.get(key) as StorageValue<key>
   }
 
   /**
@@ -38,15 +38,15 @@ export class AppStorage {
    * @param key The key to set
    * @param value The value to set
    */
-  set<K extends StorageKey<any>>(key: K, value: StorageValue<K>): void {
+  set<key extends StorageKey<any>>(key: key, value: StorageValue<key>): void {
     this.#map.set(key, value)
   }
 }
 
 /**
  * Create a storage key with an optional default value.
  *
- * @param defaultValue The default value for the storage key
+ * @param T The default value for the storage key
  * @returns The new storage key
  */
 export function createStorageKey<T>(defaultValue?: T): StorageKey<T> {
@@ -57,4 +57,4 @@ export interface StorageKey<T> {
   defaultValue?: T
 }
 
-export type StorageValue<TKey> = TKey extends StorageKey<infer T> ? T : never
+export type StorageValue<T> = T extends StorageKey<infer V> ? V : never

packages/fetch-router/src/lib/form-action.ts

@@ -26,35 +26,35 @@ export interface FormActionOptions {
  *
  * @param pattern The route pattern to use for the form and its submit action
  */
-export function createFormAction<P extends string, const O extends FormActionOptions>(
-  pattern: P | RoutePattern<P>,
-  options?: O,
-): BuildFormActionMap<P, O> {
+export function createFormAction<pattern extends string, const options extends FormActionOptions>(
+  pattern: pattern | RoutePattern<pattern>,
+  options?: options,
+): BuildFormActionMap<pattern, options> {
   let formMethod = options?.formMethod ?? 'POST'
   let indexName = options?.names?.index ?? 'index'
   let actionName = options?.names?.action ?? 'action'
 
   return createRoutes(pattern, {
     [indexName]: { method: 'GET', pattern: '/' },
     [actionName]: { method: formMethod, pattern: '/' },
-  }) as BuildFormActionMap<P, O>
+  }) as BuildFormActionMap<pattern, options>
 }
 
 // prettier-ignore
-type BuildFormActionMap<P extends string, O extends FormActionOptions> = BuildRouteMap<
-  P,
+type BuildFormActionMap<pattern extends string, options extends FormActionOptions> = BuildRouteMap<
+  pattern,
   {
     [
-      K in O extends { names: { index: infer N extends string } } ? N : 'index'
+      key in options extends { names: { index: infer indexName extends string } } ? indexName : 'index'
     ]: {
       method: 'GET'
       pattern: '/'
     }
   } & {
     [
-      K in O extends { names: { action: infer N extends string } } ? N : 'action'
+      key in options extends { names: { action: infer actionName extends string } } ? actionName : 'action'
     ]: {
-      method: O extends { formMethod: infer M extends RequestMethod } ? M : 'POST'
+      method: options extends { formMethod: infer formMethod extends RequestMethod } ? formMethod : 'POST'
       pattern: '/'
     }
   }

packages/fetch-router/src/lib/middleware.ts

@@ -8,24 +8,24 @@ import type { RequestMethod } from './request-methods.ts'
  * to the next middleware or request handler in the chain.
  */
 export interface Middleware<
-  Method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
-  Params extends Record<string, any> = {},
+  method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
+  params extends Record<string, any> = {},
 > {
   (
-    context: RequestContext<Method, Params>,
+    context: RequestContext<method, params>,
     next: NextFunction,
   ): Response | undefined | void | Promise<Response | undefined | void>
 }
 
 export type NextFunction = () => Promise<Response>
 
 export function runMiddleware<
-  Method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
-  Params extends Record<string, any> = {},
+  method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
+  params extends Record<string, any> = {},
 >(
-  middleware: Middleware<Method, Params>[],
-  context: RequestContext<Method, Params>,
-  handler: RequestHandler<Method, Params, Response>,
+  middleware: Middleware<method, params>[],
+  context: RequestContext<method, params>,
+  handler: RequestHandler<method, params, Response>,
 ): Promise<Response> {
   let index = -1
 

packages/fetch-router/src/lib/request-context.ts

@@ -8,8 +8,8 @@ import type { RequestBodyMethod, RequestMethod } from './request-methods.ts'
  * handler or middleware in the lifecycle of a request receives the same context object.
  */
 export class RequestContext<
-  Method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
-  Params extends Record<string, any> = {},
+  method extends RequestMethod | 'ANY' = RequestMethod | 'ANY',
+  params extends Record<string, any> = {},
 > {
   /**
    * Parsed [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) from the
@@ -19,7 +19,7 @@ export class RequestContext<
    *
    * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/FormData)
    */
-  formData: Method extends RequestBodyMethod ? FormData : FormData | undefined
+  formData: method extends RequestBodyMethod ? FormData : FormData | undefined
   /**
    * The request method. This may differ from `request.method` if the request body contained a
    * method override field (e.g. `_method=DELETE`), allowing HTML forms to simulate RESTful API
@@ -29,7 +29,7 @@ export class RequestContext<
   /**
    * Params that were parsed from the URL.
    */
-  params: Params
+  params: params
   /**
    * The original request that was dispatched to the router.
    */
@@ -53,7 +53,7 @@ export class RequestContext<
   constructor(request: Request) {
     this.formData = undefined as any
     this.method = request.method.toUpperCase() as RequestMethod
-    this.params = {} as Params
+    this.params = {} as params
     this.request = request
     this.storage = new AppStorage()
     this.headers = new SuperHeaders(request.headers)

packages/fetch-router/src/lib/resource.ts

@@ -32,10 +32,10 @@ export interface ResourceOptions {
  * @param base The base route pattern to use for the resource
  * @param options Options to configure the resource routes
  */
-export function createResource<P extends string, const O extends ResourceOptions>(
-  base: P | RoutePattern<P>,
-  options?: O,
-): BuildResourceMap<P, O> {
+export function createResource<base extends string, const options extends ResourceOptions>(
+  base: base | RoutePattern<base>,
+  options?: options,
+): BuildResourceMap<base, options> {
   let only = options?.only ?? (ResourceMethods as readonly ResourceMethod[])
   let newName = options?.names?.new ?? 'new'
   let showName = options?.names?.show ?? 'show'
@@ -65,25 +65,28 @@ export function createResource<P extends string, const O extends ResourceOptions
     routes[destroyName] = { method: 'DELETE', pattern: `/` }
   }
 
-  return createRoutes(base, routes) as BuildResourceMap<P, O>
+  return createRoutes(base, routes) as BuildResourceMap<base, options>
 }
 
-type BuildResourceMap<B extends string, O extends ResourceOptions> = BuildRouteMap<
-  B,
+type BuildResourceMap<base extends string, options extends ResourceOptions> = BuildRouteMap<
+  base,
   BuildResourceRoutes<
-    O,
-    O extends { only: readonly ResourceMethod[] } ? O['only'][number] : ResourceMethod
+    options,
+    options extends { only: readonly ResourceMethod[] } ? options['only'][number] : ResourceMethod
   >
 >
 
-type BuildResourceRoutes<O extends ResourceOptions, M extends ResourceMethod> = {
-  [K in M as GetRouteName<O, K>]: ResourceRoutes[K]
+type BuildResourceRoutes<options extends ResourceOptions, method extends ResourceMethod> = {
+  [methodName in method as GetRouteName<options, methodName>]: ResourceRoutes[methodName]
 }
 
-type GetRouteName<O extends ResourceOptions, M extends ResourceMethod> = M extends ResourceMethod
-  ? O extends { names: { [K in M]: infer N extends string } }
-    ? N
-    : M
+type GetRouteName<
+  options extends ResourceOptions,
+  method extends ResourceMethod,
+> = method extends ResourceMethod
+  ? options extends { names: { [methodName in method]: infer customName extends string } }
+    ? customName
+    : method
   : never
 
 type ResourceRoutes = {
@@ -130,10 +133,10 @@ export type ResourcesOptions = {
  * @param base The base route pattern to use for the resources
  * @param options Options to configure the resource routes
  */
-export function createResources<P extends string, const O extends ResourcesOptions>(
-  base: P | RoutePattern<P>,
-  options?: O,
-): BuildResourcesMap<P, O> {
+export function createResources<base extends string, const options extends ResourcesOptions>(
+  base: base | RoutePattern<base>,
+  options?: options,
+): BuildResourcesMap<base, options> {
   let only = options?.only ?? (ResourcesMethods as readonly ResourcesMethod[])
   let param = options?.param ?? 'id'
   let indexName = options?.names?.index ?? 'index'
@@ -168,43 +171,48 @@ export function createResources<P extends string, const O extends ResourcesOptio
     routes[destroyName] = { method: 'DELETE', pattern: `/:${param}` }
   }
 
-  return createRoutes(base, routes) as BuildResourcesMap<P, O>
+  return createRoutes(base, routes) as BuildResourcesMap<base, options>
 }
 
-type BuildResourcesMap<B extends string, O extends ResourcesOptions> = BuildRouteMap<
-  B,
+type BuildResourcesMap<base extends string, options extends ResourcesOptions> = BuildRouteMap<
+  base,
   BuildResourcesRoutes<
-    O,
-    O extends { only: readonly ResourcesMethod[] } ? O['only'][number] : ResourcesMethod,
-    GetParam<O>
+    options,
+    options extends { only: readonly ResourcesMethod[] }
+      ? options['only'][number]
+      : ResourcesMethod,
+    GetParam<options>
   >
 >
 
+// prettier-ignore
 type BuildResourcesRoutes<
-  O extends ResourcesOptions,
-  M extends ResourcesMethod,
-  Param extends string,
+  options extends ResourcesOptions,
+  method extends ResourcesMethod,
+  param extends string,
 > = {
-  [K in M as GetResourcesRouteName<O, K>]: ResourcesRoutes<Param>[K]
+  [methodName in method as GetResourcesRouteName<options, methodName>]: ResourcesRoutes<param>[methodName]
 }
 
 type GetResourcesRouteName<
-  O extends ResourcesOptions,
-  M extends ResourcesMethod,
-> = M extends ResourcesMethod
-  ? O extends { names: { [K in M]: infer N extends string } }
-    ? N
-    : M
+  options extends ResourcesOptions,
+  method extends ResourcesMethod,
+> = method extends ResourcesMethod
+  ? options extends { names: { [methodName in method]: infer customName extends string } }
+    ? customName
+    : method
   : never
 
-type ResourcesRoutes<Param extends string> = {
+type ResourcesRoutes<param extends string> = {
   index: { method: 'GET'; pattern: `/` }
   new: { method: 'GET'; pattern: `/new` }
-  show: { method: 'GET'; pattern: `/:${Param}` }
+  show: { method: 'GET'; pattern: `/:${param}` }
   create: { method: 'POST'; pattern: `/` }
-  edit: { method: 'GET'; pattern: `/:${Param}/edit` }
-  update: { method: 'PUT'; pattern: `/:${Param}` }
-  destroy: { method: 'DELETE'; pattern: `/:${Param}` }
+  edit: { method: 'GET'; pattern: `/:${param}/edit` }
+  update: { method: 'PUT'; pattern: `/:${param}` }
+  destroy: { method: 'DELETE'; pattern: `/:${param}` }
 }
 
-type GetParam<O extends ResourcesOptions> = O extends { param: infer P extends string } ? P : 'id'
+// prettier-ignore
+type GetParam<options extends ResourcesOptions> =
+  options extends { param: infer param extends string } ? param : 'id'

packages/fetch-router/src/lib/response-helpers/json.ts

@@ -1,15 +1,15 @@
 /**
  * A helper for working with JSON [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)s.
  *
- * @param body The body of the response.
- * @param init (optional) The `ResponseInit` object for the response.
- * @returns A `Response` object with a JSON body and the appropriate `Content-Type` header.
+ * @param data The data to serialize to JSON
+ * @param init (optional) The `ResponseInit` object for the response
+ * @returns A `Response` object with a JSON body and the appropriate `Content-Type` header
  */
-export function json(body: any, init?: ResponseInit): Response {
+export function json(data: unknown, init?: ResponseInit): Response {
   let headers = new Headers(init?.headers)
   if (!headers.has('Content-Type')) {
     headers.set('Content-Type', 'application/json; charset=UTF-8')
   }
 
-  return new Response(JSON.stringify(body), { ...init, headers })
+  return new Response(JSON.stringify(data), { ...init, headers })
 }

packages/fetch-router/src/lib/response-helpers/redirect.ts

@@ -1,9 +1,9 @@
 /**
  * A helper for working with redirect [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)s.
  *
- * @param location The location to redirect to.
- * @param init (optional) The `ResponseInit` object for the response (or a status code).
- * @returns A `Response` object with a redirect header.
+ * @param location The location to redirect to
+ * @param init (optional) The `ResponseInit` object for the response, or a status code
+ * @returns A `Response` object with a redirect header
  */
 export function redirect(location: string | URL, init?: ResponseInit | number): Response {
   let status = 302