Updates

Author: brophdawg11

integration/fog-of-war-test.ts

@@ -1414,7 +1414,7 @@ test.describe("Fog of War", () => {
       files: {
         ...getFiles(),
         "react-router.config.ts": reactRouterConfig({
-          routeDiscovery: { manifestPath: "/custom-manifest" },
+          routeDiscovery: { mode: "lazy", manifestPath: "/custom-manifest" },
         }),
       },
     });
@@ -1461,7 +1461,7 @@ test.describe("Fog of War", () => {
         files: {
           ...getFiles(),
           "react-router.config.ts": reactRouterConfig({
-            routeDiscovery: "initial",
+            routeDiscovery: { mode: "initial" },
           }),
           "app/entry.client.tsx": js`
             import { HydratedRouter } from "react-router/dom";
@@ -1575,7 +1575,7 @@ test.describe("Fog of War", () => {
       let res = await fixture.requestDocument("/");
       let html = await res.text();
 
-      expect(html).toContain('"routeDiscovery":"initial"');
+      expect(html).toContain('"routeDiscovery":{"mode":"initial"}');
 
       await app.goto("/", true);
       await page.waitForSelector("#index");
@@ -1598,7 +1598,7 @@ test.describe("Fog of War", () => {
             ...getFiles(),
             "react-router.config.ts": reactRouterConfig({
               ssr: false,
-              routeDiscovery: "lazy",
+              routeDiscovery: { mode: "lazy" },
             }),
           },
         });
@@ -1617,7 +1617,7 @@ test.describe("Fog of War", () => {
 
       expect(err).toEqual(new Error("Build failed, check the output above"));
       expect(buildOutput).toContain(
-        'Error: The `routeDiscovery` config cannot be set to "lazy" when setting `ssr:false`'
+        'Error: The `routeDiscovery.mode` config cannot be set to "lazy" when setting `ssr:false`'
       );
       console.error = ogConsole;
     });

integration/helpers/vite.ts

@@ -42,14 +42,7 @@ export const reactRouterConfig = ({
   >["unstable_splitRouteModules"];
   viteEnvironmentApi?: boolean;
   middleware?: boolean;
-  routeDiscovery?:
-    | "initial"
-    | "lazy"
-    | {
-        mode?: "lazy";
-        manifestPath: string;
-      }
-    | { mode: "initial" };
+  routeDiscovery?: Config["routeDiscovery"];
 }) => {
   let config: Config = {
     ssr,

packages/react-router-dev/config/config.ts

@@ -172,11 +172,9 @@ export type ReactRouterConfig = {
    * directly on the `routeDiscovery` config.
    */
   routeDiscovery?:
-    | "lazy"
-    | "initial"
     | {
-        mode?: "lazy"; // Can only adjust the manifest path in `lazy` mode
-        manifestPath: string;
+        mode?: "lazy";
+        manifestPath?: string;
       }
     | {
         mode: "initial";
@@ -234,10 +232,7 @@ export type ResolvedReactRouterConfig = Readonly<{
    * application.  You can set this to `initial` to opt-out of this behavior and
    * load all routes with the initial HTML document load.
    */
-  routeDiscovery: {
-    mode: "lazy" | "initial";
-    manifestPath: string;
-  };
+  routeDiscovery: ReactRouterConfig["routeDiscovery"];
   /**
    * An object of all available routes, keyed by route id.
    */
@@ -416,6 +411,10 @@ async function resolveConfig({
   let defaults = {
     basename: "/",
     buildDirectory: "build",
+    routeDiscovery: {
+      mode: "lazy",
+      manifestPath: "/__manifest",
+    },
     serverBuildFile: "index.js",
     serverModuleFormat: "esm",
     ssr: true,
@@ -432,7 +431,7 @@ async function resolveConfig({
     buildDirectory: userBuildDirectory,
     buildEnd,
     prerender,
-    routeDiscovery: userRouteDiscovery,
+    routeDiscovery,
     serverBuildFile,
     serverBundles,
     serverModuleFormat,
@@ -459,43 +458,24 @@ async function resolveConfig({
     );
   }
 
-  let routeDiscovery: ResolvedReactRouterConfig["routeDiscovery"] = {
-    mode: "lazy",
-    manifestPath: "/__manifest",
-  };
-
-  if (userRouteDiscovery == null) {
+  if (userAndPresetConfigs.routeDiscovery == null) {
+    // Disable FOW when SSR is disabled, otherwise use defaults
     if (!ssr) {
-      // No FOW when SSR is disabled
-      routeDiscovery.mode = "initial";
-    } else {
-      // no-op - use defaults
+      routeDiscovery = { mode: "initial" };
     }
-  } else if (
-    userRouteDiscovery === "initial" ||
-    (typeof userRouteDiscovery === "object" &&
-      userRouteDiscovery.mode === "initial")
-  ) {
-    routeDiscovery.mode = "initial";
-  } else {
+  } else if (userAndPresetConfigs.routeDiscovery.mode === "lazy") {
     if (!ssr) {
       return err(
-        'The `routeDiscovery` config must be left unset or set to "initial" ' +
-          "when setting `ssr:false`"
+        'The `routeDiscovery.mode` config cannot be set to "lazy" when setting `ssr:false`'
       );
     }
-    if (typeof userRouteDiscovery === "object") {
-      if (
-        userRouteDiscovery.manifestPath != null &&
-        !userRouteDiscovery.manifestPath.startsWith("/")
-      ) {
-        return err(
-          "The `routeDiscovery.manifestPath` config must be a root-relative " +
-            'pathname beginning with a slash (i.e., "/__manifest")'
-        );
-      }
-      routeDiscovery.manifestPath =
-        userRouteDiscovery.manifestPath ?? "/__manifest";
+
+    let manifestPath = userAndPresetConfigs.routeDiscovery.manifestPath;
+    if (manifestPath != null && !manifestPath.startsWith("/")) {
+      return err(
+        "The `routeDiscovery.manifestPath` config must be a root-relative " +
+          'pathname beginning with a slash (i.e., "/__manifest")'
+      );
     }
   }
 

packages/react-router/lib/dom/ssr/components.tsx

@@ -29,7 +29,7 @@ import type {
 import { singleFetchUrl } from "./single-fetch";
 import { DataRouterContext, DataRouterStateContext } from "../../context";
 import { useLocation } from "../../hooks";
-import { getPartialManifest } from "./fog-of-war";
+import { getPartialManifest, isFogOfWarEnabled } from "./fog-of-war";
 import type { PageLinkDescriptor } from "../../router/links";
 
 function useDataRouterContext() {
@@ -643,11 +643,17 @@ export type ScriptsProps = Omit<
   @category Components
  */
 export function Scripts(props: ScriptsProps) {
-  let { manifest, serverHandoffString, isSpaMode, renderMeta, routeDiscovery } =
-    useFrameworkContext();
+  let {
+    manifest,
+    serverHandoffString,
+    isSpaMode,
+    renderMeta,
+    routeDiscovery,
+    ssr,
+  } = useFrameworkContext();
   let { router, static: isStatic, staticContext } = useDataRouterContext();
   let { matches: routerMatches } = useDataRouterStateContext();
-  let enableFogOfWar = routeDiscovery.mode === "lazy";
+  let enableFogOfWar = isFogOfWarEnabled(routeDiscovery, ssr);
 
   // Let <ServerRouter> know that we hydrated and we should render the single
   // fetch streaming scripts

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -27,6 +27,13 @@ const discoveredPaths = new Set<string>();
 // https://stackoverflow.com/a/417184
 const URL_LIMIT = 7680;
 
+export function isFogOfWarEnabled(
+  routeDiscovery: ServerBuild["routeDiscovery"],
+  ssr: boolean
+) {
+  return routeDiscovery.mode === "lazy" && ssr === true;
+}
+
 export function getPartialManifest(
   { sri, ...manifest }: AssetsManifest,
   router: DataRouter
@@ -73,7 +80,7 @@ export function getPatchRoutesOnNavigationFunction(
   isSpaMode: boolean,
   basename: string | undefined
 ): PatchRoutesOnNavigationFunction | undefined {
-  if (routeDiscovery.mode !== "lazy") {
+  if (!isFogOfWarEnabled(routeDiscovery, ssr)) {
     return undefined;
   }
 
@@ -107,7 +114,7 @@ export function useFogOFWarDiscovery(
   React.useEffect(() => {
     // Don't prefetch if not enabled or if the user has `saveData` enabled
     if (
-      routeDiscovery.mode !== "lazy" ||
+      !isFogOfWarEnabled(routeDiscovery, ssr) ||
       navigator.connection?.saveData === true
     ) {
       return;
@@ -188,6 +195,19 @@ export function useFogOFWarDiscovery(
   }, [ssr, isSpaMode, manifest, routeModules, router, routeDiscovery]);
 }
 
+export function getManifestPath(
+  _manifestPath: string | undefined,
+  basename: string | undefined
+) {
+  let manifestPath = _manifestPath || "/_manifest";
+
+  if (basename == null) {
+    return manifestPath;
+  }
+
+  return `${basename}${manifestPath}`.replace(/\/+/g, "/");
+}
+
 const MANIFEST_VERSION_STORAGE_KEY = "react-router-manifest-version";
 
 export async function fetchAndApplyManifestPatches(
@@ -198,14 +218,14 @@ export async function fetchAndApplyManifestPatches(
   ssr: boolean,
   isSpaMode: boolean,
   basename: string | undefined,
-  _manifestPath: string,
+  manifestPath: string,
   patchRoutes: DataRouter["patchRoutes"],
   signal?: AbortSignal
 ): Promise<void> {
-  let manifestPath = `${
-    basename != null ? basename : "/"
-  }${_manifestPath}`.replace(/\/+/g, "/");
-  let url = new URL(manifestPath, window.location.origin);
+  let url = new URL(
+    getManifestPath(manifestPath, basename),
+    window.location.origin
+  );
   paths.sort().forEach((path) => url.searchParams.append("p", path));
   url.searchParams.set("version", manifest.version);
 

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

@@ -41,6 +41,7 @@ import type {
 } from "../dom/ssr/single-fetch";
 import { SingleFetchRedirectSymbol } from "../dom/ssr/single-fetch";
 import type { MiddlewareEnabled } from "../types/future";
+import { getManifestPath } from "../dom/ssr/fog-of-war";
 
 export type RequestHandler = (
   request: Request,
@@ -199,11 +200,10 @@ export const createRequestHandler: CreateRequestHandlerFunction = (
     }
 
     // Manifest request for fog of war
-    let manifestUrl =
-      `${normalizedBasename}${_build.routeDiscovery.manifestPath}`.replace(
-        /\/+/g,
-        "/"
-      );
+    let manifestUrl = getManifestPath(
+      _build.routeDiscovery.manifestPath,
+      normalizedBasename
+    );
     if (url.pathname === manifestUrl) {
       try {
         let res = await handleManifestRequest(_build, routes, url);