fix: use a Proxy to avoid breaking change

Author: serhalp

packages/vite-plugin-react-router/README.md

@@ -71,13 +71,13 @@ type-safe `RouterContextProvider`. Note that this requires requires v2.0.0+ of `
 For example:
 
 ```tsx
-import { getNetlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
 import { useLoaderData } from 'react-router'
 import type { Route } from './+types/example'
 
 export async function loader({ context }: Route.LoaderArgs) {
   return {
-    country: context.get(getNetlifyRouterContext()).geo?.country?.name ?? 'an unknown country',
+    country: context.get(netlifyRouterContext).geo?.country?.name ?? 'an unknown country',
   }
 }
 export default function Example() {
@@ -88,7 +88,7 @@ export default function Example() {
 
 > [!IMPORTANT]
 >
-> Note that in local development, `getNetlifyRouterContext` requires Netlify platform emulation, which is provided
+> Note that in local development, `netlifyRouterContext` requires Netlify platform emulation, which is provided
 > seamlessly by [`@netlify/vite-plugin`](https://www.npmjs.com/package/@netlify/vite-plugin) (or Netlify CLI - up to
 > you).
 
@@ -104,12 +104,12 @@ To access the [Netlify context](https://docs.netlify.com/build/functions/api/#ne
 specifically, you must import our `RouterContextProvider` instance:
 
 ```tsx
-import { getNetlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
 
 import type { Route } from './+types/home'
 
 const logMiddleware: Route.MiddlewareFunction = async ({ request, context }) => {
-  const country = context.get(getNetlifyRouterContext()).geo?.country?.name ?? 'unknown'
+  const country = context.get(netlifyRouterContext).geo?.country?.name ?? 'unknown'
   console.log(`Handling ${request.method} request to ${request.url} from ${country}`)
 }
 
@@ -122,6 +122,6 @@ export default function Home() {
 
 > [!IMPORTANT]
 >
-> Note that in local development, `getNetlifyRouterContext` requires Netlify platform emulation, which is provided
+> Note that in local development, `netlifyRouterContext` requires Netlify platform emulation, which is provided
 > seamlessly by [`@netlify/vite-plugin`](https://www.npmjs.com/package/@netlify/vite-plugin) (or Netlify CLI - up to
 > you).

packages/vite-plugin-react-router/src/index.ts

@@ -1,4 +1,4 @@
 export type { GetLoadContextFunction, RequestHandler } from './server'
-export { createRequestHandler, getNetlifyRouterContext } from './server'
+export { createRequestHandler, netlifyRouterContext } from './server'
 
 export { netlifyPlugin as default } from './plugin'

packages/vite-plugin-react-router/src/server.ts

@@ -1,4 +1,4 @@
-import type { AppLoadContext, RouterContext, ServerBuild } from 'react-router'
+import type { AppLoadContext, ServerBuild } from 'react-router'
 import {
   createContext,
   RouterContextProvider,
@@ -35,20 +35,42 @@ export type GetLoadContextFunction_V8 = (
 
 export type RequestHandler = (request: Request, context: NetlifyContext) => Promise<Response>
 
-let netlifyRouterContext: RouterContext<Partial<NetlifyContext>>
 /**
  * An instance of `ReactContextProvider` providing access to
  * [Netlify request context]{@link https://docs.netlify.com/build/functions/api/#netlify-specific-context-object}
  *
- * @example context.get(getNetlifyRouterContext()).geo?.country?.name
+ * @example context.get(netlifyRouterContext).geo?.country?.name
  */
-export const getNetlifyRouterContext = () => {
-  // We must use a singleton because Remix contexts rely on referential equality
-  // We defer initialization until first use so that we can initialize it with a default value
-  // within a request lifecycle, where the `Netlify` global will be set. This is just for dev.
-  netlifyRouterContext ??= createContext<Partial<NetlifyContext>>(Netlify.context ?? {})
-  return netlifyRouterContext
-}
+export const netlifyRouterContext =
+  // We must use a singleton because Remix contexts rely on referential equality.
+  // We can't hook into the request lifecycle in dev mode, so we use a Proxy to always read from the
+  // current `Netlify.context` value, which is always contextual to the in-flight request.
+  createContext<Partial<NetlifyContext>>(
+    new Proxy(
+      // Can't reference `Netlify.context` here because it isn't set outside of a request lifecycle
+      {},
+      {
+        get(_target, prop, receiver) {
+          return Reflect.get(Netlify.context ?? {}, prop, receiver)
+        },
+        set(_target, prop, value, receiver) {
+          return Reflect.set(Netlify.context ?? {}, prop, value, receiver)
+        },
+        has(_target, prop) {
+          return Reflect.has(Netlify.context ?? {}, prop)
+        },
+        deleteProperty(_target, prop) {
+          return Reflect.deleteProperty(Netlify.context ?? {}, prop)
+        },
+        ownKeys(_target) {
+          return Reflect.ownKeys(Netlify.context ?? {})
+        },
+        getOwnPropertyDescriptor(_target, prop) {
+          return Reflect.getOwnPropertyDescriptor(Netlify.context ?? {}, prop)
+        },
+      },
+    ),
+  )
 
 /**
  * Given a build and a callback to get the base loader context, this returns
@@ -73,7 +95,7 @@ export function createRequestHandler({
     try {
       const getDefaultReactRouterContext = () => {
         const ctx = new RouterContextProvider()
-        ctx.set(getNetlifyRouterContext(), netlifyContext)
+        ctx.set(netlifyRouterContext, netlifyContext)
 
         // Provide backwards compatibility with previous plain object context
         // See https://reactrouter.com/how-to/middleware#migration-from-apploadcontext.

tests/e2e/fixtures/react-router-v8-middleware/app/routes/context.tsx

@@ -1,11 +1,11 @@
-import { getNetlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
 import { useLoaderData } from 'react-router'
 
 import type { Route } from './+types/context'
 
 export async function loader({ context }: Route.LoaderArgs) {
   return {
-    siteName: context.get(getNetlifyRouterContext()).site.name,
+    siteName: context.get(netlifyRouterContext).site.name,
   }
 }
 export default function About() {

tests/e2e/fixtures/react-router-v8-middleware/app/routes/middleware.tsx

@@ -1,9 +1,9 @@
-import { getNetlifyRouterContext } from '@netlify/vite-plugin-react-router'
+import { netlifyRouterContext } from '@netlify/vite-plugin-react-router'
 
 import type { Route } from './+types/middleware'
 
 const logMiddleware: Route.MiddlewareFunction = async ({ request, context }, next) => {
-  const siteName = context.get(getNetlifyRouterContext()).site.name
+  const siteName = context.get(netlifyRouterContext).site.name
   console.log(`Handling ${request.method} request to ${request.url} on ${siteName}`)
   const response = await next()
   response.headers.set('x-test-site-name', siteName)