fix(rsc): support unstable_getContext in RSCHydratedRouter (#13960)

Author: markdalgleish

docs/api/rsc/RSCHydratedRouter.md

@@ -47,3 +47,7 @@ The decoded `RSCPayload` to hydrate.
 ### routeDiscovery
 
 `eager` or `lazy` - Determines if links are eagerly discovered, or delayed until clicked.
+
+### unstable_getContext
+
+A function that returns an `unstable_InitialContext` object (`Map<RouterContext, unknown>`), for use in client loaders, actions and middleware.

integration/helpers/rsc-parcel/src/browser.tsx

@@ -15,6 +15,7 @@ import {
   setServerCallback,
   // @ts-expect-error - no types for this yet
 } from "react-server-dom-parcel/client";
+import { unstable_getContext } from "./config/unstable-get-context";
 
 // Create and set the callServer function to support post-hydration server actions.
 setServerCallback(
@@ -38,6 +39,7 @@ createFromReadableStream(getRSCStream()).then((payload: RSCPayload) => {
         <RSCHydratedRouter
           payload={payload}
           createFromReadableStream={createFromReadableStream}
+          unstable_getContext={unstable_getContext}
         />
       </StrictMode>,
       {

integration/helpers/rsc-parcel/src/config/unstable-get-context.ts

@@ -0,0 +1,2 @@
+// THIS FILE IS DESIGNED TO BE OVERRIDDEN IN TESTS IF NEEDED
+export const unstable_getContext = undefined;

integration/helpers/rsc-vite/src/config/unstable-get-context.ts

@@ -0,0 +1,2 @@
+// THIS FILE IS DESIGNED TO BE OVERRIDDEN IN TESTS IF NEEDED
+export const unstable_getContext = undefined;

integration/helpers/rsc-vite/src/entry.browser.tsx

@@ -12,6 +12,7 @@ import {
   unstable_RSCHydratedRouter as RSCHydratedRouter,
 } from "react-router";
 import type { unstable_RSCPayload as RSCPayload } from "react-router";
+import { unstable_getContext } from "./config/unstable-get-context";
 
 setServerCallback(
   createCallServer({
@@ -29,6 +30,7 @@ createFromReadableStream<RSCPayload>(getRSCStream()).then((payload) => {
         <RSCHydratedRouter
           payload={payload}
           createFromReadableStream={createFromReadableStream}
+          unstable_getContext={unstable_getContext}
         />
       </StrictMode>
     );

integration/rsc/rsc-test.ts

@@ -719,6 +719,104 @@ implementations.forEach((implementation) => {
         validateRSCHtml(await page.content());
       });
 
+      test("Supports client context using unstable_getContext", async ({
+        page,
+      }) => {
+        let port = await getPort();
+        stop = await setupRscTest({
+          implementation,
+          port,
+          files: {
+            "src/config/unstable-get-context.ts": js`
+              // THIS FILE OVERRIDES THE DEFAULT IMPLEMENTATION
+              import { unstable_createContext } from "react-router";
+
+              export const testContext = unstable_createContext<string>("default-value");
+
+              export function unstable_getContext() {
+                return new Map([[testContext, "client-context-value"]]);
+              }
+            `,
+            "src/routes.ts": js`
+              import type { unstable_RSCRouteConfig as RSCRouteConfig } from "react-router";
+
+              export const routes = [
+                {
+                  id: "root",
+                  path: "",
+                  lazy: () => import("./routes/root"),
+                  children: [
+                    {
+                      id: "home",
+                      index: true,
+                      lazy: () => import("./routes/home"),
+                    },
+                  ],
+                },
+              ] satisfies RSCRouteConfig;
+            `,
+            "src/routes/root.tsx": js`
+              "use client";
+
+              import { Outlet } from "react-router";
+              import type { unstable_ClientMiddlewareFunction } from "react-router";
+              import { testContext } from "../config/unstable-get-context";
+
+              export const unstable_clientMiddleware = [
+                async ({ context }, next) => {
+                  context.set(testContext, "client-context-value");                  
+                  return await next();
+                },
+              ];
+
+              export function HydrateFallback() {
+                return <div>Loading...</div>;
+              }
+
+              export default function RootRoute() {
+                return (
+                  <div>
+                    <h1>Root Route</h1>
+                    <Outlet />
+                  </div>
+                );
+              }
+            `,
+            "src/routes/home.tsx": js`
+              "use client";
+
+              import { useLoaderData } from "react-router";
+              import { testContext } from "../config/unstable-get-context";
+
+              export function clientLoader({ context }) {
+                const contextValue = context.get(testContext);
+                return { contextValue };
+              }
+
+              clientLoader.hydrate = true;
+
+              export default function HomeRoute() {
+                const loaderData = useLoaderData();
+                return (
+                  <div>
+                    <h2 data-client-context>Client context value: {loaderData.contextValue}</h2>
+                  </div>
+                );
+              }
+            `,
+          },
+        });
+
+        await page.goto(`http://localhost:${port}/`);
+        await page.waitForSelector("[data-client-context]");
+        expect(await page.locator("[data-client-context]").textContent()).toBe(
+          "Client context value: client-context-value"
+        );
+
+        // Ensure this is using RSC
+        validateRSCHtml(await page.content());
+      });
+
       test("Supports resource routes as URL and fetchers", async ({
         page,
         request,

packages/react-router/lib/rsc/browser.tsx

@@ -10,7 +10,7 @@ import {
 import { FrameworkContext } from "../dom/ssr/components";
 import type { FrameworkContextObject } from "../dom/ssr/entry";
 import { createBrowserHistory, invariant } from "../router/history";
-import type { Router as DataRouter } from "../router/router";
+import type { Router as DataRouter, RouterInit } from "../router/router";
 import { createRouter, isMutationMethod } from "../router/router";
 import type {
   RSCPayload,
@@ -176,11 +176,13 @@ export function createCallServer({
 function createRouterFromPayload({
   fetchImplementation,
   createFromReadableStream,
+  unstable_getContext,
   payload,
 }: {
   payload: RSCPayload;
   createFromReadableStream: BrowserCreateFromReadableStreamFunction;
   fetchImplementation: (request: Request) => Promise<Response>;
+  unstable_getContext: RouterInit["unstable_getContext"] | undefined;
 }) {
   if (window.__router) return window.__router;
 
@@ -213,6 +215,7 @@ function createRouterFromPayload({
 
   window.__router = createRouter({
     routes,
+    unstable_getContext,
     basename: payload.basename,
     history: createBrowserHistory(),
     hydrationData: getHydrationData(
@@ -455,11 +458,13 @@ export function RSCHydratedRouter({
   fetch: fetchImplementation = fetch,
   payload,
   routeDiscovery = "eager",
+  unstable_getContext,
 }: {
   createFromReadableStream: BrowserCreateFromReadableStreamFunction;
   fetch?: (request: Request) => Promise<Response>;
   payload: RSCPayload;
   routeDiscovery?: "eager" | "lazy";
+  unstable_getContext?: RouterInit["unstable_getContext"];
 }) {
   if (payload.type !== "render") throw new Error("Invalid payload type");
 
@@ -468,9 +473,15 @@ export function RSCHydratedRouter({
       createRouterFromPayload({
         payload,
         fetchImplementation,
+        unstable_getContext,
         createFromReadableStream,
       }),
-    [createFromReadableStream, payload, fetchImplementation]
+    [
+      createFromReadableStream,
+      payload,
+      fetchImplementation,
+      unstable_getContext,
+    ]
   );
 
   React.useLayoutEffect(() => {