feat: pass in router instance in client function middleware

this adds a new package `@tanstack/start-storage-context` to break up a circular dependency
between start-client-core and start-server-core

Author: schiller-manuel

e2e/react-start/server-functions/src/routeTree.gen.ts

@@ -22,8 +22,10 @@ import { Route as DeadCodePreserveRouteImport } from './routes/dead-code-preserv
 import { Route as ConsistentRouteImport } from './routes/consistent'
 import { Route as AbortSignalRouteImport } from './routes/abort-signal'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as MiddlewareIndexRouteImport } from './routes/middleware/index'
 import { Route as FormdataRedirectIndexRouteImport } from './routes/formdata-redirect/index'
 import { Route as CookiesIndexRouteImport } from './routes/cookies/index'
+import { Route as MiddlewareClientMiddlewareRouterRouteImport } from './routes/middleware/client-middleware-router'
 import { Route as CookiesSetRouteImport } from './routes/cookies/set'
 import { Route as FormdataRedirectTargetNameRouteImport } from './routes/formdata-redirect/target.$name'
 
@@ -92,6 +94,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MiddlewareIndexRoute = MiddlewareIndexRouteImport.update({
+  id: '/middleware/',
+  path: '/middleware/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const FormdataRedirectIndexRoute = FormdataRedirectIndexRouteImport.update({
   id: '/formdata-redirect/',
   path: '/formdata-redirect/',
@@ -102,6 +109,12 @@ const CookiesIndexRoute = CookiesIndexRouteImport.update({
   path: '/cookies/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const MiddlewareClientMiddlewareRouterRoute =
+  MiddlewareClientMiddlewareRouterRouteImport.update({
+    id: '/middleware/client-middleware-router',
+    path: '/middleware/client-middleware-router',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const CookiesSetRoute = CookiesSetRouteImport.update({
   id: '/cookies/set',
   path: '/cookies/set',
@@ -129,8 +142,10 @@ export interface FileRoutesByFullPath {
   '/status': typeof StatusRoute
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
+  '/middleware/client-middleware-router': typeof MiddlewareClientMiddlewareRouterRoute
   '/cookies': typeof CookiesIndexRoute
   '/formdata-redirect': typeof FormdataRedirectIndexRoute
+  '/middleware': typeof MiddlewareIndexRoute
   '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRoutesByTo {
@@ -148,8 +163,10 @@ export interface FileRoutesByTo {
   '/status': typeof StatusRoute
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
+  '/middleware/client-middleware-router': typeof MiddlewareClientMiddlewareRouterRoute
   '/cookies': typeof CookiesIndexRoute
   '/formdata-redirect': typeof FormdataRedirectIndexRoute
+  '/middleware': typeof MiddlewareIndexRoute
   '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRoutesById {
@@ -168,8 +185,10 @@ export interface FileRoutesById {
   '/status': typeof StatusRoute
   '/submit-post-formdata': typeof SubmitPostFormdataRoute
   '/cookies/set': typeof CookiesSetRoute
+  '/middleware/client-middleware-router': typeof MiddlewareClientMiddlewareRouterRoute
   '/cookies/': typeof CookiesIndexRoute
   '/formdata-redirect/': typeof FormdataRedirectIndexRoute
+  '/middleware/': typeof MiddlewareIndexRoute
   '/formdata-redirect/target/$name': typeof FormdataRedirectTargetNameRoute
 }
 export interface FileRouteTypes {
@@ -189,8 +208,10 @@ export interface FileRouteTypes {
     | '/status'
     | '/submit-post-formdata'
     | '/cookies/set'
+    | '/middleware/client-middleware-router'
     | '/cookies'
     | '/formdata-redirect'
+    | '/middleware'
     | '/formdata-redirect/target/$name'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -208,8 +229,10 @@ export interface FileRouteTypes {
     | '/status'
     | '/submit-post-formdata'
     | '/cookies/set'
+    | '/middleware/client-middleware-router'
     | '/cookies'
     | '/formdata-redirect'
+    | '/middleware'
     | '/formdata-redirect/target/$name'
   id:
     | '__root__'
@@ -227,8 +250,10 @@ export interface FileRouteTypes {
     | '/status'
     | '/submit-post-formdata'
     | '/cookies/set'
+    | '/middleware/client-middleware-router'
     | '/cookies/'
     | '/formdata-redirect/'
+    | '/middleware/'
     | '/formdata-redirect/target/$name'
   fileRoutesById: FileRoutesById
 }
@@ -247,8 +272,10 @@ export interface RootRouteChildren {
   StatusRoute: typeof StatusRoute
   SubmitPostFormdataRoute: typeof SubmitPostFormdataRoute
   CookiesSetRoute: typeof CookiesSetRoute
+  MiddlewareClientMiddlewareRouterRoute: typeof MiddlewareClientMiddlewareRouterRoute
   CookiesIndexRoute: typeof CookiesIndexRoute
   FormdataRedirectIndexRoute: typeof FormdataRedirectIndexRoute
+  MiddlewareIndexRoute: typeof MiddlewareIndexRoute
   FormdataRedirectTargetNameRoute: typeof FormdataRedirectTargetNameRoute
 }
 
@@ -345,6 +372,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/middleware/': {
+      id: '/middleware/'
+      path: '/middleware'
+      fullPath: '/middleware'
+      preLoaderRoute: typeof MiddlewareIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/formdata-redirect/': {
       id: '/formdata-redirect/'
       path: '/formdata-redirect'
@@ -359,6 +393,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof CookiesIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/middleware/client-middleware-router': {
+      id: '/middleware/client-middleware-router'
+      path: '/middleware/client-middleware-router'
+      fullPath: '/middleware/client-middleware-router'
+      preLoaderRoute: typeof MiddlewareClientMiddlewareRouterRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/cookies/set': {
       id: '/cookies/set'
       path: '/cookies/set'
@@ -391,8 +432,10 @@ const rootRouteChildren: RootRouteChildren = {
   StatusRoute: StatusRoute,
   SubmitPostFormdataRoute: SubmitPostFormdataRoute,
   CookiesSetRoute: CookiesSetRoute,
+  MiddlewareClientMiddlewareRouterRoute: MiddlewareClientMiddlewareRouterRoute,
   CookiesIndexRoute: CookiesIndexRoute,
   FormdataRedirectIndexRoute: FormdataRedirectIndexRoute,
+  MiddlewareIndexRoute: MiddlewareIndexRoute,
   FormdataRedirectTargetNameRoute: FormdataRedirectTargetNameRoute,
 }
 export const routeTree = rootRouteImport

e2e/react-start/server-functions/src/router.tsx

@@ -10,6 +10,11 @@ export function createRouter() {
     defaultErrorComponent: DefaultCatchBoundary,
     defaultNotFoundComponent: () => <NotFound />,
     scrollRestoration: true,
+    context: {
+      foo: {
+        bar: 'baz',
+      },
+    },
   })
 
   return router

e2e/react-start/server-functions/src/routes/__root.tsx

@@ -5,14 +5,14 @@ import {
   Link,
   Outlet,
   Scripts,
-  createRootRoute,
+  createRootRouteWithContext,
 } from '@tanstack/react-router'
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
 import appCss from '~/styles/app.css?url'
 
-export const Route = createRootRoute({
+export const Route = createRootRouteWithContext<{ foo: { bar: string } }>()({
   head: () => ({
     meta: [
       {

e2e/react-start/server-functions/src/routes/index.tsx

@@ -82,6 +82,9 @@ function Home() {
             server function redirects when FormData is submitted (via no-JS)
           </Link>
         </li>
+        <li>
+          <Link to="/middleware">Server Functions Middlware E2E tests</Link>
+        </li>
       </ul>
     </div>
   )

e2e/react-start/server-functions/src/routes/middleware/client-middleware-router.tsx

@@ -0,0 +1,64 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { createMiddleware, createServerFn } from '@tanstack/react-start'
+import React from 'react'
+
+const middleware = createMiddleware({ type: 'function' }).client(
+  async ({ router, next }) => {
+    return next({
+      sendContext: {
+        routerContext: router.options.context,
+      },
+    })
+  },
+)
+
+const serverFn = createServerFn()
+  .middleware([middleware])
+  .handler(({ context }) => {
+    return context.routerContext
+  })
+export const Route = createFileRoute('/middleware/client-middleware-router')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [serverFnResult, setServerFnResult] = React.useState({})
+  const router = useRouter()
+  return (
+    <div
+      className="p-2 m-2 grid gap-2"
+      data-testid="client-middleware-router-route-component"
+    >
+      <h3>Client Middleware has access to router instance</h3>
+      <p>
+        This component checks that the client middleware has access to the
+        router instance and thus its context.
+      </p>
+      <div>
+        It should return{' '}
+        <code>
+          <pre data-testid="expected-server-fn-result">
+            {JSON.stringify(router.options.context)}
+          </pre>
+        </code>
+      </div>
+      <p>
+        serverFn returns:
+        <br />
+        <span data-testid="serverFn-response">
+          {JSON.stringify(serverFnResult)}
+        </span>
+      </p>
+      <button
+        data-testid="btn-serverFn"
+        type="button"
+        className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        onClick={() => {
+          serverFn().then(setServerFnResult)
+        }}
+      >
+        Invoke Server Function
+      </button>
+    </div>
+  )
+}

e2e/react-start/server-functions/src/routes/middleware/index.tsx

@@ -0,0 +1,22 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/middleware/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="p-8">
+      <h1 className="font-bold text-lg">
+        Server functions middleware E2E tests
+      </h1>
+      <ul className="list-disc p-4">
+        <li>
+          <Route.Link to="./client-middleware-router">
+            Client Middleware has access to router instance
+          </Route.Link>
+        </li>
+      </ul>
+    </div>
+  )
+}

e2e/react-start/server-functions/tests/server-functions.spec.ts

@@ -339,3 +339,20 @@ test('raw response', async ({ page }) => {
     expect(page.url().endsWith(`/formdata-redirect/target/${expected}`))
   })
 })
+
+test.describe('middleware', () => {
+  test('client middleware should have access to router context via the router instance', async ({
+    page,
+  }) => {
+    await page.goto('/middleware/client-middleware-router')
+    await page.waitForLoadState('networkidle')
+
+    const expected =
+      (await page.getByTestId('expected-server-fn-result').textContent()) || ''
+    expect(expected).not.toBe('')
+
+    await page.getByTestId('btn-serverFn').click()
+    await page.waitForLoadState('networkidle')
+    await expect(page.getByTestId('serverFn-response')).toContainText(expected)
+  })
+})

packages/router-core/src/global.ts

@@ -0,0 +1,9 @@
+import type { AnyRouter } from './router'
+
+declare global {
+  interface Window {
+    __TSR_ROUTER__?: AnyRouter
+  }
+}
+
+export {}

packages/router-core/src/index.ts

@@ -1,3 +1,5 @@
+export * from './global'
+
 export { TSR_DEFERRED_PROMISE, defer } from './defer'
 export type { DeferredPromiseState, DeferredPromise } from './defer'
 export { preloadWarning } from './link'

packages/router-core/src/router.ts

@@ -86,12 +86,6 @@ import type { AnySchema, AnyValidator } from './validators'
 import type { NavigateOptions, ResolveRelativePath, ToOptions } from './link'
 import type { NotFoundError } from './not-found'
 
-declare global {
-  interface Window {
-    __TSR_ROUTER__?: AnyRouter
-  }
-}
-
 export type ControllablePromise<T = any> = Promise<T> & {
   resolve: (value: T) => void
   reject: (value?: any) => void