Add future flag for Single Fetch

packages/remix-dev/__tests__/readConfig-test.ts

@@ -36,6 +36,7 @@ describe("readConfig", () => {
         "entryServerFile": "entry.server.tsx",
         "entryServerFilePath": Any<String>,
         "future": {
+          "unstable_singleFetch": false,
           "v3_fetcherPersist": false,
           "v3_relativeSplatPath": false,
           "v3_throwAbortReason": false,

packages/remix-dev/config.ts

@@ -37,6 +37,7 @@ interface FutureConfig {
   v3_fetcherPersist: boolean;
   v3_relativeSplatPath: boolean;
   v3_throwAbortReason: boolean;
+  unstable_singleFetch: boolean;
 }
 
 type NodeBuiltinsPolyfillOptions = Pick<
@@ -600,6 +601,7 @@ export async function resolveConfig(
     v3_fetcherPersist: appConfig.future?.v3_fetcherPersist === true,
     v3_relativeSplatPath: appConfig.future?.v3_relativeSplatPath === true,
     v3_throwAbortReason: appConfig.future?.v3_throwAbortReason === true,
+    unstable_singleFetch: appConfig.future?.unstable_singleFetch === true,
   };
 
   if (appConfig.future) {

packages/remix-dev/package.json

@@ -29,7 +29,7 @@
     "@mdx-js/mdx": "^2.3.0",
     "@npmcli/package-json": "^4.0.1",
     "@remix-run/node": "2.6.0",
-    "@remix-run/router": "1.15.0",
+    "@remix-run/router": "0.0.0-experimental-cbcd94b7",
     "@remix-run/server-runtime": "2.6.0",
     "@types/mdx": "^2.0.5",
     "@vanilla-extract/integration": "^6.2.0",

packages/remix-react/browser.tsx

@@ -1,9 +1,5 @@
-import {
-  createBrowserHistory,
-  createRouter,
-  type HydrationState,
-  type Router,
-} from "@remix-run/router";
+import type { HydrationState, Router } from "@remix-run/router";
+import { createBrowserHistory, createRouter } from "@remix-run/router";
 import type { ReactElement } from "react";
 import * as React from "react";
 import { UNSAFE_mapRouteProperties as mapRouteProperties } from "react-router";
@@ -19,6 +15,7 @@ import {
   createClientRoutesWithHMRRevalidationOptOut,
   shouldHydrateRouteLoader,
 } from "./routes";
+import { getSingleFetchDataStrategy } from "./single-fetch";
 
 /* eslint-disable prefer-let/prefer-let */
 declare global {
@@ -275,9 +272,18 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
         v7_partialHydration: true,
         v7_prependBasename: true,
         v7_relativeSplatPath: window.__remixContext.future.v3_relativeSplatPath,
+        // Single fetch enables this underlying behavior
+        v7_skipActionErrorRevalidation:
+          window.__remixContext.future.unstable_singleFetch === true,
       },
       hydrationData,
       mapRouteProperties,
+      unstable_dataStrategy: window.__remixContext.future.unstable_singleFetch
+        ? getSingleFetchDataStrategy(
+            window.__remixManifest,
+            window.__remixRouteModules
+          )
+        : undefined,
     });
 
     // We can call initialize() immediately if the router doesn't have any

packages/remix-react/components.tsx

@@ -283,7 +283,7 @@ function getActiveMatches(
   }
 
   if (errors) {
-    let errorIdx = matches.findIndex((m) => errors[m.route.id]);
+    let errorIdx = matches.findIndex((m) => errors[m.route.id] !== undefined);
     return matches.slice(0, errorIdx + 1);
   }
 

packages/remix-react/data.ts

@@ -20,7 +20,7 @@ export function isNetworkErrorResponse(response: any): response is Response {
   // If we reach the Remix server, we can safely identify response types via the
   // X-Remix-Error/X-Remix-Catch headers.  However, if we never reach the Remix
   // server, and instead receive a 4xx/5xx from somewhere in between (like
-  // Cloudflare), then we get a false negative n the isErrorResponse check and
+  // Cloudflare), then we get a false negative in the isErrorResponse check and
   // we incorrectly assume that the user returns the 4xx/5xx response and
   // consider it successful.  To alleviate this, we add X-Remix-Response to any
   // non-Error/non-Catch responses coming back from the server.  If we don't
@@ -73,37 +73,13 @@ export async function fetchData(
   let url = new URL(request.url);
   url.searchParams.set("_data", routeId);
 
-  let init: RequestInit = { signal: request.signal };
-
-  if (request.method !== "GET") {
-    init.method = request.method;
-
-    let contentType = request.headers.get("Content-Type");
-
-    // Check between word boundaries instead of startsWith() due to the last
-    // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
-    if (contentType && /\bapplication\/json\b/.test(contentType)) {
-      init.headers = { "Content-Type": contentType };
-      init.body = JSON.stringify(await request.json());
-    } else if (contentType && /\btext\/plain\b/.test(contentType)) {
-      init.headers = { "Content-Type": contentType };
-      init.body = await request.text();
-    } else if (
-      contentType &&
-      /\bapplication\/x-www-form-urlencoded\b/.test(contentType)
-    ) {
-      init.body = new URLSearchParams(await request.text());
-    } else {
-      init.body = await request.formData();
-    }
-  }
-
   if (retry > 0) {
     // Retry up to 3 times waiting 50, 250, 1250 ms
     // between retries for a total of 1550 ms before giving up.
     await new Promise((resolve) => setTimeout(resolve, 5 ** retry * 10));
   }
 
+  let init = await createRequestInit(request);
   let revalidation = window.__remixRevalidation;
   let response = await fetch(url.href, init).catch((error) => {
     if (
@@ -134,6 +110,37 @@ export async function fetchData(
   return response;
 }
 
+export async function createRequestInit(
+  request: Request
+): Promise<RequestInit> {
+  let init: RequestInit = { signal: request.signal };
+
+  if (request.method !== "GET") {
+    init.method = request.method;
+
+    let contentType = request.headers.get("Content-Type");
+
+    // Check between word boundaries instead of startsWith() due to the last
+    // paragraph of https://httpwg.org/specs/rfc9110.html#field.content-type
+    if (contentType && /\bapplication\/json\b/.test(contentType)) {
+      init.headers = { "Content-Type": contentType };
+      init.body = JSON.stringify(await request.json());
+    } else if (contentType && /\btext\/plain\b/.test(contentType)) {
+      init.headers = { "Content-Type": contentType };
+      init.body = await request.text();
+    } else if (
+      contentType &&
+      /\bapplication\/x-www-form-urlencoded\b/.test(contentType)
+    ) {
+      init.body = new URLSearchParams(await request.text());
+    } else {
+      init.body = await request.formData();
+    }
+  }
+
+  return init;
+}
+
 const DEFERRED_VALUE_PLACEHOLDER_PREFIX = "__deferred_promise:";
 export async function parseDeferredReadableStream(
   stream: ReadableStream<Uint8Array>

packages/remix-react/entry.ts

@@ -29,6 +29,7 @@ export interface EntryContext extends RemixContextObject {
 export interface FutureConfig {
   v3_fetcherPersist: boolean;
   v3_relativeSplatPath: boolean;
+  unstable_singleFetch: boolean;
 }
 
 export interface AssetsManifest {

packages/remix-react/package.json

@@ -16,10 +16,11 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.15.0",
+    "@remix-run/router": "0.0.0-experimental-cbcd94b7",
     "@remix-run/server-runtime": "2.6.0",
-    "react-router": "6.22.0",
-    "react-router-dom": "6.22.0"
+    "react-router": "0.0.0-experimental-cbcd94b7",
+    "react-router-dom": "0.0.0-experimental-cbcd94b7",
+    "turbo-stream": "^1.2.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",

packages/remix-react/routes.tsx

@@ -196,7 +196,7 @@ export function createClientRoutesWithHMRRevalidationOptOut(
   );
 }
 
-function preventInvalidServerHandlerCall(
+export function preventInvalidServerHandlerCall(
   type: "action" | "loader",
   route: Omit<EntryRoute, "children">,
   isSpaMode: boolean
@@ -221,7 +221,7 @@ function preventInvalidServerHandlerCall(
   }
 }
 
-function noActionDefinedError(
+export function noActionDefinedError(
   type: "action" | "clientAction",
   routeId: string
 ) {
@@ -249,16 +249,34 @@ export function createClientRoutes(
   return (routesByParentId[parentId] || []).map((route) => {
     let routeModule = routeModulesCache[route.id];
 
-    async function fetchServerLoader(request: Request) {
+    async function fetchServerLoader(
+      request: Request,
+      unwrap: boolean,
+      singleFetch: unknown
+    ) {
       if (!route.hasLoader) return null;
-      return fetchServerHandler(request, route);
+      if (typeof singleFetch === "function") {
+        let result = await singleFetch();
+        return result;
+      }
+      let result = await fetchServerHandler(request, route);
+      return unwrap ? unwrapServerResponse(result) : result;
     }
 
-    async function fetchServerAction(request: Request) {
+    async function fetchServerAction(
+      request: Request,
+      unwrap: boolean,
+      singleFetch: unknown
+    ) {
       if (!route.hasAction) {
         throw noActionDefinedError("action", route.id);
       }
-      return fetchServerHandler(request, route);
+      if (typeof singleFetch === "function") {
+        let result = await singleFetch();
+        return result;
+      }
+      let result = await fetchServerHandler(request, route);
+      return unwrap ? unwrapServerResponse(result) : result;
     }
 
     async function prefetchStylesAndCallHandler(
@@ -306,7 +324,10 @@ export function createClientRoutes(
         needsRevalidation == null &&
         (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
 
-      dataRoute.loader = async ({ request, params }: LoaderFunctionArgs) => {
+      dataRoute.loader = async (
+        { request, params }: LoaderFunctionArgs,
+        singleFetch?: unknown
+      ) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
             invariant(
@@ -316,7 +337,7 @@ export function createClientRoutes(
             if (!routeModule.clientLoader) {
               if (isSpaMode) return null;
               // Call the server when no client loader exists
-              return fetchServerLoader(request);
+              return fetchServerLoader(request, false, singleFetch);
             }
 
             return routeModule.clientLoader({
@@ -334,9 +355,7 @@ export function createClientRoutes(
                 }
 
                 // Call the server loader for client-side navigations
-                let result = await fetchServerLoader(request);
-                let unwrapped = await unwrapServerResponse(result);
-                return unwrapped;
+                return fetchServerLoader(request, true, singleFetch);
               },
             });
           });
@@ -355,7 +374,10 @@ export function createClientRoutes(
         isSpaMode
       );
 
-      dataRoute.action = ({ request, params }: ActionFunctionArgs) => {
+      dataRoute.action = (
+        { request, params }: ActionFunctionArgs,
+        singleFetch?: unknown
+      ) => {
         return prefetchStylesAndCallHandler(async () => {
           invariant(
             routeModule,
@@ -365,17 +387,15 @@ export function createClientRoutes(
             if (isSpaMode) {
               throw noActionDefinedError("clientAction", route.id);
             }
-            return fetchServerAction(request);
+            return fetchServerAction(request, false, singleFetch);
           }
 
           return routeModule.clientAction({
             request,
             params,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route, isSpaMode);
-              let result = await fetchServerAction(request);
-              let unwrapped = await unwrapServerResponse(result);
-              return unwrapped;
+              return fetchServerAction(request, true, singleFetch);
             },
           });
         });
@@ -385,19 +405,25 @@ export function createClientRoutes(
       // the server loader/action in parallel with the module load so we add
       // loader/action as static props on the route
       if (!route.hasClientLoader) {
-        dataRoute.loader = ({ request }: LoaderFunctionArgs) =>
+        dataRoute.loader = (
+          { request }: LoaderFunctionArgs,
+          singleFetch?: unknown
+        ) =>
           prefetchStylesAndCallHandler(() => {
             if (isSpaMode) return Promise.resolve(null);
-            return fetchServerLoader(request);
+            return fetchServerLoader(request, false, singleFetch);
           });
       }
       if (!route.hasClientAction) {
-        dataRoute.action = ({ request }: ActionFunctionArgs) =>
+        dataRoute.action = (
+          { request }: ActionFunctionArgs,
+          singleFetch?: unknown
+        ) =>
           prefetchStylesAndCallHandler(() => {
             if (isSpaMode) {
               throw noActionDefinedError("clientAction", route.id);
             }
-            return fetchServerAction(request);
+            return fetchServerAction(request, false, singleFetch);
           });
       }
 
@@ -411,28 +437,30 @@ export function createClientRoutes(
         let lazyRoute: Partial<DataRouteObject> = { ...mod };
         if (mod.clientLoader) {
           let clientLoader = mod.clientLoader;
-          lazyRoute.loader = (args) =>
+          lazyRoute.loader = (
+            args: LoaderFunctionArgs,
+            singleFetch?: unknown
+          ) =>
             clientLoader({
               ...args,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route, isSpaMode);
-                let response = await fetchServerLoader(args.request);
-                let result = await unwrapServerResponse(response);
-                return result;
+                return fetchServerLoader(args.request, true, singleFetch);
               },
             });
         }
 
         if (mod.clientAction) {
           let clientAction = mod.clientAction;
-          lazyRoute.action = (args) =>
+          lazyRoute.action = (
+            args: ActionFunctionArgs,
+            singleFetch?: unknown
+          ) =>
             clientAction({
               ...args,
               async serverAction() {
                 preventInvalidServerHandlerCall("action", route, isSpaMode);
-                let response = await fetchServerAction(args.request);
-                let result = await unwrapServerResponse(response);
-                return result;
+                return fetchServerAction(args.request, true, singleFetch);
               },
             });
         }