@tanstack/start-client-core 1.120.7 → 1.121.0-alpha.11

package/src/createServerFn.ts

@@ -16,15 +16,17 @@ import type {
 } from '@tanstack/router-core'
 import type { Readable } from 'node:stream'
 import type {
-  AnyMiddleware,
+  AnyFunctionMiddleware,
   AssignAllClientSendContext,
   AssignAllServerContext,
+  FunctionMiddlewareClientFnResult,
+  FunctionMiddlewareServerFnResult,
   IntersectAllValidatorInputs,
   IntersectAllValidatorOutputs,
-  MiddlewareClientFnResult,
-  MiddlewareServerFnResult,
 } from './createMiddleware'
 
+type TODO = any
+
 export function createServerFn<
   TMethod extends Method,
   TServerFnResponseType extends ServerFnResponseType = 'data',
@@ -215,8 +217,8 @@ export function createServerFn<
   }
 }
 
-async function executeMiddleware(
-  middlewares: Array<AnyMiddleware>,
+export async function executeMiddleware(
+  middlewares: Array<AnyFunctionMiddleware>,
   env: 'client' | 'server',
   opts: ServerFnMiddlewareOptions,
 ): Promise<ServerFnMiddlewareResult> {
@@ -398,6 +400,7 @@ export type ServerFnReturnType<
 > = TServerFnResponseType extends 'raw'
   ? RawResponse | Promise<RawResponse>
   : Promise<SerializerStringify<TResponse>> | SerializerStringify<TResponse>
+
 export type ServerFn<
   TMethod,
   TServerFnResponseType extends ServerFnResponseType,
@@ -442,7 +445,7 @@ export type ServerFnBaseOptions<
   method: TMethod
   response?: TServerFnResponseType
   validateClient?: boolean
-  middleware?: Constrain<TMiddlewares, ReadonlyArray<AnyMiddleware>>
+  middleware?: Constrain<TMiddlewares, ReadonlyArray<AnyFunctionMiddleware>>
   validator?: ConstrainValidator<TInput>
   extractedFn?: CompiledFetcherFn<TResponse, TServerFnResponseType>
   serverFn?: ServerFn<
@@ -485,7 +488,10 @@ export interface ServerFnMiddleware<
   TValidator,
 > {
   middleware: <const TNewMiddlewares = undefined>(
-    middlewares: Constrain<TNewMiddlewares, ReadonlyArray<AnyMiddleware>>,
+    middlewares: Constrain<
+      TNewMiddlewares,
+      ReadonlyArray<AnyFunctionMiddleware>
+    >,
   ) => ServerFnAfterMiddleware<
     TMethod,
     TServerFnResponseType,
@@ -812,12 +818,12 @@ export function extractFormDataContext(formData: FormData) {
 }
 
 export function flattenMiddlewares(
-  middlewares: Array<AnyMiddleware>,
-): Array<AnyMiddleware> {
-  const seen = new Set<AnyMiddleware>()
-  const flattened: Array<AnyMiddleware> = []
+  middlewares: Array<AnyFunctionMiddleware>,
+): Array<AnyFunctionMiddleware> {
+  const seen = new Set<AnyFunctionMiddleware>()
+  const flattened: Array<AnyFunctionMiddleware> = []
 
-  const recurse = (middleware: Array<AnyMiddleware>) => {
+  const recurse = (middleware: Array<AnyFunctionMiddleware>) => {
     middleware.forEach((m) => {
       if (m.options.middleware) {
         recurse(m.options.middleware)
@@ -929,7 +935,7 @@ export function execValidator(
 
 export function serverFnBaseToMiddleware(
   options: ServerFnBaseOptions<any, any, any, any, any>,
-): AnyMiddleware {
+): AnyFunctionMiddleware {
   return {
     _types: undefined!,
     options: {
@@ -973,16 +979,25 @@ export function serverFnBaseToMiddleware(
         // but not before serializing the context
         const res = await options.extractedFn?.(payload)
 
-        return next(res) as unknown as MiddlewareClientFnResult<any, any, any>
+        return next(res) as unknown as FunctionMiddlewareClientFnResult<
+          any,
+          any,
+          any
+        >
       },
       server: async ({ next, ...ctx }) => {
         // Execute the server function
-        const result = await options.serverFn?.(ctx)
+        const result = await options.serverFn?.(ctx as TODO)
 
         return next({
           ...ctx,
           result,
-        } as any) as unknown as MiddlewareServerFnResult<any, any, any, any>
+        } as any) as unknown as FunctionMiddlewareServerFnResult<
+          any,
+          any,
+          any,
+          any
+        >
       },
     },
   }

package/src/index.tsx

@@ -25,30 +25,30 @@ export {
   createMiddleware,
   type IntersectAllValidatorInputs,
   type IntersectAllValidatorOutputs,
-  type MiddlewareServerFn,
-  type AnyMiddleware,
-  type MiddlewareOptions,
-  type MiddlewareWithTypes,
-  type MiddlewareValidator,
-  type MiddlewareServer,
-  type MiddlewareAfterClient,
-  type MiddlewareAfterMiddleware,
-  type MiddlewareAfterServer,
-  type Middleware,
-  type MiddlewareClientFnOptions,
-  type MiddlewareClientFnResult,
-  type MiddlewareClientNextFn,
-  type ClientResultWithContext,
+  type FunctionMiddlewareServerFn,
+  type AnyFunctionMiddleware,
+  type FunctionMiddlewareOptions,
+  type FunctionMiddlewareWithTypes,
+  type FunctionMiddlewareValidator,
+  type FunctionMiddlewareServer,
+  type FunctionMiddlewareAfterClient,
+  type FunctionMiddlewareAfterServer,
+  type FunctionMiddleware,
+  type FunctionMiddlewareClientFnOptions,
+  type FunctionMiddlewareClientFnResult,
+  type FunctionMiddlewareClientNextFn,
+  type FunctionClientResultWithContext,
   type AssignAllClientContextBeforeNext,
   type AssignAllMiddleware,
   type AssignAllServerContext,
-  type MiddlewareAfterValidator,
-  type MiddlewareClientFn,
-  type MiddlewareServerFnResult,
-  type MiddlewareClient,
-  type MiddlewareServerFnOptions,
-  type MiddlewareServerNextFn,
-  type ServerResultWithContext,
+  type FunctionMiddlewareAfterValidator,
+  type FunctionMiddlewareClientFn,
+  type FunctionMiddlewareServerFnResult,
+  type FunctionMiddlewareClient,
+  type FunctionMiddlewareServerFnOptions,
+  type FunctionMiddlewareServerNextFn,
+  type FunctionServerResultWithContext,
+  type AnyRequestMiddleware,
 } from './createMiddleware'
 export {
   registerGlobalMiddleware,
@@ -84,4 +84,5 @@ export {
   extractFormDataContext,
   flattenMiddlewares,
   serverFnStaticCache,
+  executeMiddleware,
 } from './createServerFn'

package/src/registerGlobalMiddleware.ts

@@ -1,9 +1,9 @@
-import type { AnyMiddleware } from './createMiddleware'
+import type { AnyFunctionMiddleware } from './createMiddleware'
 
-export const globalMiddleware: Array<AnyMiddleware> = []
+export const globalMiddleware: Array<AnyFunctionMiddleware> = []
 
 export function registerGlobalMiddleware(options: {
-  middleware: Array<AnyMiddleware>
+  middleware: Array<AnyFunctionMiddleware>
 }) {
   globalMiddleware.push(...options.middleware)
 }

package/src/ssr-client.tsx

@@ -77,15 +77,16 @@ export interface ResolvePromiseState {
 export interface DehydratedRouter {
   manifest: Manifest | undefined
   dehydratedData: any
+  lastMatchId: string
 }
 
-export function hydrate(router: AnyRouter) {
+export async function hydrate(router: AnyRouter): Promise<any> {
   invariant(
     window.__TSR_SSR__?.dehydrated,
     'Expected to find a dehydrated data on window.__TSR_SSR__.dehydrated... but we did not. Please file an issue!',
   )
 
-  const { manifest, dehydratedData } = startSerializer.parse(
+  const { manifest, dehydratedData, lastMatchId } = startSerializer.parse(
     window.__TSR_SSR__.dehydrated,
   ) as DehydratedRouter
 
@@ -116,6 +117,7 @@ export function hydrate(router: AnyRouter) {
 
   // Hydrate the router state
   const matches = router.matchRoutes(router.state.location)
+
   // kick off loading the route chunks
   const routeChunkPromise = Promise.all(
     matches.map((match) => {
@@ -123,6 +125,7 @@ export function hydrate(router: AnyRouter) {
       return router.loadRouteChunk(route)
     }),
   )
+
   // Right after hydration and before the first render, we need to rehydrate each match
   // First step is to reyhdrate loaderData and __beforeLoadContext
   matches.forEach((match) => {
@@ -130,39 +133,36 @@ export function hydrate(router: AnyRouter) {
       (d) => d.id === match.id,
     )
 
-    if (dehydratedMatch) {
-      Object.assign(match, dehydratedMatch)
+    if (!dehydratedMatch) {
+      return
+    }
 
-      // Handle beforeLoadContext
-      if (dehydratedMatch.__beforeLoadContext) {
-        match.__beforeLoadContext = router.ssr!.serializer.parse(
-          dehydratedMatch.__beforeLoadContext,
-        ) as any
-      }
+    Object.assign(match, dehydratedMatch)
 
-      // Handle loaderData
-      if (dehydratedMatch.loaderData) {
-        match.loaderData = router.ssr!.serializer.parse(
-          dehydratedMatch.loaderData,
-        )
-      }
+    // Handle beforeLoadContext
+    if (dehydratedMatch.__beforeLoadContext) {
+      match.__beforeLoadContext = router.ssr!.serializer.parse(
+        dehydratedMatch.__beforeLoadContext,
+      ) as any
+    }
 
-      // Handle error
-      if (dehydratedMatch.error) {
-        match.error = router.ssr!.serializer.parse(dehydratedMatch.error)
-      }
+    // Handle loaderData
+    if (dehydratedMatch.loaderData) {
+      match.loaderData = router.ssr!.serializer.parse(
+        dehydratedMatch.loaderData,
+      )
+    }
 
-      // Handle extracted
-      ;(match as unknown as SsrMatch).extracted?.forEach((ex) => {
-        deepMutableSetByPath(match, ['loaderData', ...ex.path], ex.value)
-      })
-    } else {
-      Object.assign(match, {
-        status: 'success',
-        updatedAt: Date.now(),
-      })
+    // Handle error
+    if (dehydratedMatch.error) {
+      match.error = router.ssr!.serializer.parse(dehydratedMatch.error)
     }
 
+    // Handle extracted
+    ;(match as unknown as SsrMatch).extracted?.forEach((ex) => {
+      deepMutableSetByPath(match, ['loaderData', ...ex.path], ex.value)
+    })
+
     return match
   })
 
@@ -179,50 +179,56 @@ export function hydrate(router: AnyRouter) {
   // now that all necessary data is hydrated:
   // 1) fully reconstruct the route context
   // 2) execute `head()` and `scripts()` for each match
-  router.state.matches.forEach((match) => {
-    const route = router.looseRoutesById[match.routeId]!
-
-    const parentMatch = router.state.matches[match.index - 1]
-    const parentContext = parentMatch?.context ?? router.options.context ?? {}
-
-    // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
-    // so run it again and merge route context
-    const contextFnContext: RouteContextOptions<any, any, any, any> = {
-      deps: match.loaderDeps,
-      params: match.params,
-      context: parentContext,
-      location: router.state.location,
-      navigate: (opts: any) =>
-        router.navigate({ ...opts, _fromLocation: router.state.location }),
-      buildLocation: router.buildLocation,
-      cause: match.cause,
-      abortController: match.abortController,
-      preload: false,
-      matches,
-    }
-    match.__routeContext = route.options.context?.(contextFnContext) ?? {}
+  await Promise.all(
+    router.state.matches.map(async (match) => {
+      const route = router.looseRoutesById[match.routeId]!
 
-    match.context = {
-      ...parentContext,
-      ...match.__routeContext,
-      ...match.__beforeLoadContext,
-    }
+      const parentMatch = router.state.matches[match.index - 1]
+      const parentContext = parentMatch?.context ?? router.options.context ?? {}
+
+      // `context()` was already executed by `matchRoutes`, however route context was not yet fully reconstructed
+      // so run it again and merge route context
+      const contextFnContext: RouteContextOptions<any, any, any, any> = {
+        deps: match.loaderDeps,
+        params: match.params,
+        context: parentContext,
+        location: router.state.location,
+        navigate: (opts: any) =>
+          router.navigate({ ...opts, _fromLocation: router.state.location }),
+        buildLocation: router.buildLocation,
+        cause: match.cause,
+        abortController: match.abortController,
+        preload: false,
+        matches,
+      }
+      match.__routeContext = route.options.context?.(contextFnContext) ?? {}
 
-    const assetContext = {
-      matches: router.state.matches,
-      match,
-      params: match.params,
-      loaderData: match.loaderData,
-    }
-    const headFnContent = route.options.head?.(assetContext)
+      match.context = {
+        ...parentContext,
+        ...match.__routeContext,
+        ...match.__beforeLoadContext,
+      }
 
-    const scripts = route.options.scripts?.(assetContext)
+      const assetContext = {
+        matches: router.state.matches,
+        match,
+        params: match.params,
+        loaderData: match.loaderData,
+      }
+      const headFnContent = await route.options.head?.(assetContext)
 
-    match.meta = headFnContent?.meta
-    match.links = headFnContent?.links
-    match.headScripts = headFnContent?.scripts
-    match.scripts = scripts
-  })
+      const scripts = await route.options.scripts?.(assetContext)
+
+      match.meta = headFnContent?.meta
+      match.links = headFnContent?.links
+      match.headScripts = headFnContent?.scripts
+      match.scripts = scripts
+    }),
+  )
+
+  if (matches[matches.length - 1]!.id !== lastMatchId) {
+    return await Promise.all([routeChunkPromise, router.load()])
+  }
 
   return routeChunkPromise
 }

package/src/tests/createServerFn.test-d.ts

@@ -60,21 +60,25 @@ test('createServerFn with validator', () => {
 })
 
 test('createServerFn with middleware and context', () => {
-  const middleware1 = createMiddleware().server(({ next }) => {
-    return next({ context: { a: 'a' } as const })
-  })
+  const middleware1 = createMiddleware({ type: 'function' }).server(
+    ({ next }) => {
+      return next({ context: { a: 'a' } as const })
+    },
+  )
 
-  const middleware2 = createMiddleware().server(({ next }) => {
-    return next({ context: { b: 'b' } as const })
-  })
+  const middleware2 = createMiddleware({ type: 'function' }).server(
+    ({ next }) => {
+      return next({ context: { b: 'b' } as const })
+    },
+  )
 
-  const middleware3 = createMiddleware()
+  const middleware3 = createMiddleware({ type: 'function' })
     .middleware([middleware1, middleware2])
     .client(({ next }) => {
       return next({ context: { c: 'c' } as const })
     })
 
-  const middleware4 = createMiddleware()
+  const middleware4 = createMiddleware({ type: 'function' })
     .middleware([middleware3])
     .client(({ context, next }) => {
       return next({ sendContext: context })
@@ -113,21 +117,24 @@ test('createServerFn with middleware and context', () => {
 })
 
 describe('createServerFn with middleware and validator', () => {
-  const middleware1 = createMiddleware().validator(
+  const middleware1 = createMiddleware({ type: 'function' }).validator(
     (input: { readonly inputA: 'inputA' }) =>
       ({
         outputA: 'outputA',
       }) as const,
   )
 
-  const middleware2 = createMiddleware().validator(
+  const middleware2 = createMiddleware({ type: 'function' }).validator(
     (input: { readonly inputB: 'inputB' }) =>
       ({
         outputB: 'outputB',
       }) as const,
   )
 
-  const middleware3 = createMiddleware().middleware([middleware1, middleware2])
+  const middleware3 = createMiddleware({ type: 'function' }).middleware([
+    middleware1,
+    middleware2,
+  ])
 
   test(`response: 'data'`, () => {
     const fn = createServerFn({ method: 'GET', response: 'data' })
@@ -222,7 +229,7 @@ describe('createServerFn with middleware and validator', () => {
 })
 
 test('createServerFn overrides properties', () => {
-  const middleware1 = createMiddleware()
+  const middleware1 = createMiddleware({ type: 'function' })
     .validator(
       () =>
         ({
@@ -246,7 +253,7 @@ test('createServerFn overrides properties', () => {
       return next({ sendContext: newContext, context: newContext })
     })
 
-  const middleware2 = createMiddleware()
+  const middleware2 = createMiddleware({ type: 'function' })
     .middleware([middleware1])
     .validator(
       () =>