feat: pass in router instance in client function middleware (#4723)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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,74 @@
+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,
+  loader: async () => ({ serverFnLoaderResult: await serverFn() }),
+})
+
+function RouteComponent() {
+  const [serverFnClientResult, setServerFnClientResult] = React.useState({})
+  const { serverFnLoaderResult } = Route.useLoaderData()
+
+  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 when invoked in the loader returns:
+        <br />
+        <span data-testid="serverFn-loader-result">
+          {JSON.stringify(serverFnClientResult)}
+        </span>
+      </p>
+      <p>
+        serverFn when invoked on the client returns:
+        <br />
+        <span data-testid="serverFn-client-result">
+          {JSON.stringify(serverFnLoaderResult)}
+        </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(setServerFnClientResult)
+        }}
+      >
+        Invoke Server Function
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,25 @@
+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"
+            data-testid="client-middleware-router-link"
+          >
+            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,36 @@ test('raw response', async ({ page }) => {
     expect(page.url().endsWith(`/formdata-redirect/target/${expected}`))
   })
 })
+
+test.describe('middleware', () => {
+  test.describe('client middleware should have access to router context via the router instance', () => {
+    async function runTest(page: Page) {
+      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-loader-result')).toContainText(
+        expected,
+      )
+      await expect(page.getByTestId('serverFn-client-result')).toContainText(
+        expected,
+      )
+    }
+
+    test('direct visit', async ({ page }) => {
+      await page.goto('/middleware/client-middleware-router')
+      await runTest(page)
+    })
+
+    test('client navigation', async ({ page }) => {
+      await page.goto('/middleware')
+      await page.getByTestId('client-middleware-router-link').click()
+      await runTest(page)
+    })
+  })
+})

labeler-config.yml

@@ -94,6 +94,9 @@
 'package: start-server-functions-server':
   - changed-files:
       - any-glob-to-any-file: 'packages/start-server-functions-server/**/*'
+'package: start-storage-context':
+  - changed-files:
+      - any-glob-to-any-file: 'packages/start-storage-context/**/*'
 'package: valibot-adapter':
   - changed-files:
       - any-glob-to-any-file: 'packages/valibot-adapter/**/*'

package.json

@@ -112,6 +112,7 @@
       "@tanstack/start-plugin-core": "workspace:*",
       "@tanstack/start-client-core": "workspace:*",
       "@tanstack/start-server-core": "workspace:*",
+      "@tanstack/start-storage-context": "workspace:*",
       "@tanstack/eslint-plugin-router": "workspace:*",
       "@tanstack/server-functions-plugin": "workspace:*",
       "@tanstack/directive-functions-plugin": "workspace:*",

packages/react-start-client/package.json

@@ -25,7 +25,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist && rimraf ./coverage",
-    "test": "pnpm test:deps && pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
+    "test": "pnpm test:eslint && pnpm test:types && pnpm test:build && pnpm test:unit",
     "test:unit": "vitest",
     "test:unit:dev": "vitest --watch",
     "test:eslint": "eslint ./src",