Move RSC matcher creation out of createStaticRouter

Author: brophdawg11

packages/react-router/__tests__/dom/ssr/components-test.tsx

@@ -163,16 +163,21 @@ describe("<NavLink />", () => {
 
 describe("<ServerRouter>", () => {
   it("handles empty default export objects from the compiler", async () => {
-    let staticHandlerContext = await createStaticHandler([{ path: "/" }]).query(
-      new Request("http://localhost/"),
-    );
+    let staticHandlerContext = await createStaticHandler([
+      {
+        id: "root",
+        path: "/",
+        children: [{ id: "empty", index: true }],
+      },
+    ]).query(new Request("http://localhost/"));
 
     invariant(
       !(staticHandlerContext instanceof Response),
       "Expected a context",
     );
 
     let context = mockEntryContext({
+      staticHandlerContext,
       manifest: {
         routes: {
           root: {
@@ -528,16 +533,17 @@ describe("<Links />", () => {
 
 describe("<Scripts />", () => {
   it("propagates nonce to modulepreload links", async () => {
-    let staticHandlerContext = await createStaticHandler([{ path: "/" }]).query(
-      new Request("http://localhost/"),
-    );
+    let staticHandlerContext = await createStaticHandler([
+      { id: "root", path: "/" },
+    ]).query(new Request("http://localhost/"));
 
     invariant(
       !(staticHandlerContext instanceof Response),
       "Expected a context",
     );
 
     let context = mockEntryContext({
+      staticHandlerContext,
       manifest: {
         routes: {
           root: {
@@ -604,16 +610,17 @@ describe("<Scripts />", () => {
   });
 
   it("propagates the ServerRouter nonce to default HydrateFallback scripts when a route has a clientLoader without a HydrateFallback", async () => {
-    let staticHandlerContext = await createStaticHandler([{ path: "/" }]).query(
-      new Request("http://localhost/"),
-    );
+    let staticHandlerContext = await createStaticHandler([
+      { id: "root", path: "/" },
+    ]).query(new Request("http://localhost/"));
 
     invariant(
       !(staticHandlerContext instanceof Response),
       "Expected a context",
     );
 
     let context = mockEntryContext({
+      staticHandlerContext,
       manifest: {
         routes: {
           root: {

packages/react-router/lib/dom/server.tsx

@@ -14,12 +14,7 @@ import type {
   RevalidationState,
   StaticHandlerContext,
 } from "../router/router";
-import {
-  createDataRouteMatcher,
-  IDLE_BLOCKER,
-  IDLE_FETCHER,
-  IDLE_NAVIGATION,
-} from "../router/router";
+import { IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION } from "../router/router";
 import type {
   DataRouteObject,
   RouteBranch,
@@ -395,7 +390,6 @@ export function createStaticRouter(
     ...opts?.future,
   };
   let matchRoutes = context._match;
-  let dataRouteMatcher: ReturnType<typeof createDataRouteMatcher> | undefined;
 
   // Because our context matches may be from a set of routes passed to
   // createStaticHandler(), we update them here with our newly created/enhanced
@@ -447,18 +441,7 @@ export function createStaticRouter(
       return undefined;
     },
     match(locationArg) {
-      let routeMatches;
-      if (matchRoutes) {
-        routeMatches = matchRoutes(locationArg);
-      } else {
-        // Contexts not created by createStaticHandler() need their own matcher.
-        if (!dataRouteMatcher) {
-          dataRouteMatcher = createDataRouteMatcher(context.basename || "/");
-          dataRouteMatcher.update(dataRoutes);
-        }
-        routeMatches = dataRouteMatcher.match(locationArg);
-      }
-      return routeMatches && routeMatches.map(mapRouteMatch);
+      return matchRoutes(locationArg)?.map(mapRouteMatch) ?? null;
     },
     initialize() {
       throw msg("initialize");

packages/react-router/lib/router/router.ts

@@ -480,7 +480,7 @@ export interface StaticHandlerContext {
   actionHeaders: Record<string, Headers>;
   _deepestRenderedBoundaryId?: string | null;
   /** @private */
-  _match?: StaticHandler["match"];
+  _match: StaticHandler["match"];
 }
 
 /**
@@ -4578,7 +4578,9 @@ export function createStaticHandler(
     routeMatch: DataRouteMatch | null,
     filterMatchesToLoad: ((m: DataRouteMatch) => boolean) | null,
     skipRevalidation: boolean,
-  ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
+  ): Promise<
+    Omit<StaticHandlerContext, "location" | "basename" | "_match"> | Response
+  > {
     invariant(
       request.signal,
       "query()/queryRoute() requests must contain an AbortController signal",
@@ -4648,7 +4650,9 @@ export function createStaticHandler(
     isRouteRequest: boolean,
     filterMatchesToLoad: ((m: DataRouteMatch) => boolean) | null,
     skipRevalidation: boolean,
-  ): Promise<Omit<StaticHandlerContext, "location" | "basename"> | Response> {
+  ): Promise<
+    Omit<StaticHandlerContext, "location" | "basename" | "_match"> | Response
+  > {
     let result: DataResult;
 
     if (!actionMatch.route.action && !actionMatch.route.lazy) {
@@ -4844,7 +4848,7 @@ export function createStaticHandler(
   ): Promise<
     | Omit<
         StaticHandlerContext,
-        "location" | "basename" | "actionData" | "actionHeaders"
+        "location" | "basename" | "actionData" | "actionHeaders" | "_match"
       >
     | Response
   > {

packages/react-router/lib/rsc/server.ssr.tsx

@@ -10,7 +10,11 @@ import { shouldHydrateRouteLoader } from "../dom/ssr/routes";
 import type { RSCPayload } from "./server.rsc";
 import { createRSCRouteModules } from "./route-modules";
 import { isRouteErrorResponse, type DataRouteObject } from "../router/utils";
-import { hasInvalidProtocol } from "../router/router";
+import {
+  createDataRouteMatcher,
+  hasInvalidProtocol,
+  type StaticHandlerContext,
+} from "../router/router";
 import {
   decodeRedirectErrorDigest,
   decodeRouteErrorResponseDigest,
@@ -560,7 +564,28 @@ export function RSCStaticRouter({ getPayload, nonce }: RSCStaticRouterProps) {
     }
   }
 
-  const context = {
+  const routes = payload.matches.reduceRight((previous, match) => {
+    const route: DataRouteObject = {
+      id: match.id,
+      action: match.hasAction || !!match.clientAction,
+      element: match.element,
+      errorElement: match.errorElement,
+      handle: match.handle,
+      hydrateFallbackElement: match.hydrateFallbackElement,
+      index: match.index,
+      loader: match.hasLoader || !!match.clientLoader,
+      path: match.path,
+      shouldRevalidate: match.shouldRevalidate,
+    };
+    if (previous.length > 0) {
+      route.children = previous;
+    }
+    return [route];
+  }, [] as DataRouteObject[]);
+  const dataRouteMatcher = createDataRouteMatcher(payload.basename || "/");
+  dataRouteMatcher.update(routes);
+
+  const context: StaticHandlerContext = {
     get _deepestRenderedBoundaryId() {
       return decoded._deepestRenderedBoundaryId ?? null;
     },
@@ -575,6 +600,7 @@ export function RSCStaticRouter({ getPayload, nonce }: RSCStaticRouterProps) {
     loaderHeaders: {},
     location: payload.location,
     statusCode: 200,
+    _match: (locationArg) => dataRouteMatcher.match(locationArg),
     matches: payload.matches.map((match) => ({
       params: match.params,
       pathname: match.pathname,
@@ -591,27 +617,7 @@ export function RSCStaticRouter({ getPayload, nonce }: RSCStaticRouterProps) {
     })),
   };
 
-  const router = createStaticRouter(
-    payload.matches.reduceRight((previous, match) => {
-      const route: DataRouteObject = {
-        id: match.id,
-        action: match.hasAction || !!match.clientAction,
-        element: match.element,
-        errorElement: match.errorElement,
-        handle: match.handle,
-        hydrateFallbackElement: match.hydrateFallbackElement,
-        index: match.index,
-        loader: match.hasLoader || !!match.clientLoader,
-        path: match.path,
-        shouldRevalidate: match.shouldRevalidate,
-      };
-      if (previous.length > 0) {
-        route.children = previous;
-      }
-      return [route];
-    }, [] as DataRouteObject[]),
-    context,
-  );
+  const router = createStaticRouter(routes, context);
 
   const frameworkContext: FrameworkContextObject = {
     future: {},