Add support for fetcher.abort()

.changeset/eight-dancers-allow.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/react": minor
+---
+
+Add `fetcher.abort()`

integration/package.json

@@ -14,7 +14,7 @@
     "@remix-run/dev": "workspace:*",
     "@remix-run/express": "workspace:*",
     "@remix-run/node": "workspace:*",
-    "@remix-run/router": "1.19.2",
+    "@remix-run/router": "0.0.0-experimental-819a53c77",
     "@remix-run/server-runtime": "workspace:*",
     "@types/express": "^4.17.9",
     "@vanilla-extract/css": "^1.10.0",

packages/remix-dev/package.json

@@ -32,7 +32,7 @@
     "@mdx-js/mdx": "^2.3.0",
     "@npmcli/package-json": "^4.0.1",
     "@remix-run/node": "workspace:*",
-    "@remix-run/router": "1.19.2",
+    "@remix-run/router": "0.0.0-experimental-819a53c77",
     "@remix-run/server-runtime": "workspace:*",
     "@types/mdx": "^2.0.5",
     "@vanilla-extract/integration": "^6.2.0",

packages/remix-dev/vite/cloudflare-proxy-plugin.ts

@@ -70,7 +70,7 @@ export const cloudflareDevProxyVitePlugin = <Env, Cf extends CfProperties>({
               )) as ServerBuild;
 
               let handler = createRequestHandler(build, "development");
-              let req = fromNodeRequest(nodeReq);
+              let req = fromNodeRequest(nodeReq, nodeRes);
               let loadContext = getLoadContext
                 ? await getLoadContext({ request: req, context })
                 : context;

packages/remix-dev/vite/node-adapter.ts

@@ -32,7 +32,8 @@ function fromNodeHeaders(nodeHeaders: IncomingHttpHeaders): Headers {
 
 // Based on `createRemixRequest` in packages/remix-express/server.ts
 export function fromNodeRequest(
-  nodeReq: Vite.Connect.IncomingMessage
+  nodeReq: Vite.Connect.IncomingMessage,
+  nodeRes: ServerResponse<Vite.Connect.IncomingMessage>
 ): Request {
   let origin =
     nodeReq.headers.origin && "null" !== nodeReq.headers.origin
@@ -44,9 +45,15 @@ export function fromNodeRequest(
     "Expected `nodeReq.originalUrl` to be defined"
   );
   let url = new URL(nodeReq.originalUrl, origin);
+
+  // Abort action/loaders once we can no longer write a response
+  let controller = new AbortController();
+  nodeRes.on("close", () => controller.abort());
+
   let init: RequestInit = {
     method: nodeReq.method,
     headers: fromNodeHeaders(nodeReq.headers),
+    signal: controller.signal,
   };
 
   if (nodeReq.method !== "GET" && nodeReq.method !== "HEAD") {

packages/remix-dev/vite/plugin.ts

@@ -1382,7 +1382,7 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
                   nodeReq,
                   nodeRes
                 ) => {
-                  let req = fromNodeRequest(nodeReq);
+                  let req = fromNodeRequest(nodeReq, nodeRes);
                   let res = await handler(req, await remixDevLoadContext(req));
                   await toNodeRequest(res, nodeRes);
                 };

packages/remix-react/browser.tsx

@@ -303,14 +303,14 @@ export function RemixBrowser(_props: RemixBrowserProps): ReactElement {
       },
       hydrationData,
       mapRouteProperties,
-      unstable_dataStrategy: window.__remixContext.future.unstable_singleFetch
+      dataStrategy: window.__remixContext.future.unstable_singleFetch
         ? getSingleFetchDataStrategy(
             window.__remixManifest,
             window.__remixRouteModules,
             () => router
           )
         : undefined,
-      unstable_patchRoutesOnNavigation: getPatchRoutesOnNavigationFunction(
+      patchRoutesOnNavigation: getPatchRoutesOnNavigationFunction(
         window.__remixManifest,
         window.__remixRouteModules,
         window.__remixContext.future,

packages/remix-react/fog-of-war.ts

@@ -1,7 +1,7 @@
 import type { Router } from "@remix-run/router";
 import { matchRoutes } from "@remix-run/router";
 import * as React from "react";
-import type { unstable_PatchRoutesOnNavigationFunction } from "react-router";
+import type { PatchRoutesOnNavigationFunction } from "react-router";
 
 import type { AssetsManifest, FutureConfig } from "./entry";
 import type { RouteModules } from "./routeModules";
@@ -70,7 +70,7 @@ export function getPatchRoutesOnNavigationFunction(
   future: FutureConfig,
   isSpaMode: boolean,
   basename: string | undefined
-): unstable_PatchRoutesOnNavigationFunction | undefined {
+): PatchRoutesOnNavigationFunction | undefined {
   if (!isFogOfWarEnabled(future, isSpaMode)) {
     return undefined;
   }

packages/remix-react/package.json

@@ -19,10 +19,10 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@remix-run/router": "1.19.2",
+    "@remix-run/router": "0.0.0-experimental-819a53c77",
     "@remix-run/server-runtime": "workspace:*",
-    "react-router": "6.26.2",
-    "react-router-dom": "6.26.2",
+    "react-router": "0.0.0-experimental-819a53c77",
+    "react-router-dom": "0.0.0-experimental-819a53c77",
     "turbo-stream": "2.4.0"
   },
   "devDependencies": {

packages/remix-react/single-fetch.tsx

@@ -1,22 +1,22 @@
 import * as React from "react";
 import type {
-  unstable_DataStrategyFunction as DataStrategyFunction,
-  unstable_DataStrategyResult as DataStrategyResult,
-  unstable_DataStrategyMatch,
+  DataStrategyFunction,
+  DataStrategyFunctionArgs,
+  DataStrategyResult,
+  DataStrategyMatch,
   Router as RemixRouter,
 } from "@remix-run/router";
 import {
   UNSAFE_ErrorResponseImpl as ErrorResponseImpl,
   isRouteErrorResponse,
   redirect,
-  unstable_data,
+  data,
 } from "@remix-run/router";
 import type {
   UNSAFE_SingleFetchResult as SingleFetchResult,
   UNSAFE_SingleFetchResults as SingleFetchResults,
 } from "@remix-run/server-runtime";
 import { UNSAFE_SingleFetchRedirectSymbol as SingleFetchRedirectSymbol } from "@remix-run/server-runtime";
-import type { unstable_DataStrategyFunctionArgs as DataStrategyFunctionArgs } from "react-router-dom";
 import { decode } from "turbo-stream";
 
 import { createRequestInit, isResponse } from "./data";
@@ -175,7 +175,7 @@ async function singleFetchActionStrategy(
   return {
     [actionMatch.route.id]: {
       type: result.type,
-      result: unstable_data(result.result, actionStatus),
+      result: data(result.result, actionStatus),
     },
   };
 }
@@ -344,7 +344,7 @@ async function singleFetchLoaderFetcherStrategy(
 
 function fetchSingleLoader(
   handler: Parameters<
-    NonNullable<Parameters<unstable_DataStrategyMatch["resolve"]>[0]>
+    NonNullable<Parameters<DataStrategyMatch["resolve"]>[0]>
   >[0],
   url: URL,
   init: RequestInit,

packages/remix-server-runtime/package.json

@@ -19,7 +19,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@remix-run/router": "1.19.2",
+    "@remix-run/router": "0.0.0-experimental-819a53c77",
     "@types/cookie": "^0.6.0",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.6.0",

packages/remix-server-runtime/single-fetch.ts

@@ -1,12 +1,12 @@
 import type {
   StaticHandler,
-  unstable_DataStrategyFunctionArgs as DataStrategyFunctionArgs,
-  unstable_DataStrategyFunction as DataStrategyFunction,
+  DataStrategyFunctionArgs,
+  DataStrategyFunction,
   UNSAFE_DataWithResponseInit as DataWithResponseInit,
 } from "@remix-run/router";
 import {
   isRouteErrorResponse,
-  unstable_data as routerData,
+  data as routerData,
   UNSAFE_ErrorResponseImpl as ErrorResponseImpl,
   stripBasename,
 } from "@remix-run/router";
@@ -102,7 +102,7 @@ export async function singleFetchAction(
     let result = await staticHandler.query(handlerRequest, {
       requestContext: loadContext,
       skipLoaderErrorBubbling: true,
-      unstable_dataStrategy: getSingleFetchDataStrategy({
+      dataStrategy: getSingleFetchDataStrategy({
         isActionDataRequest: true,
       }),
     });
@@ -190,7 +190,7 @@ export async function singleFetchLoaders(
     let result = await staticHandler.query(handlerRequest, {
       requestContext: loadContext,
       skipLoaderErrorBubbling: true,
-      unstable_dataStrategy: getSingleFetchDataStrategy({
+      dataStrategy: getSingleFetchDataStrategy({
         loadRouteIds,
       }),
     });

packages/remix-testing/package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@remix-run/node": "workspace:*",
     "@remix-run/react": "workspace:*",
-    "@remix-run/router": "1.19.2",
-    "react-router-dom": "6.26.2"
+    "@remix-run/router": "0.0.0-experimental-819a53c77",
+    "react-router-dom": "0.0.0-experimental-819a53c77"
   },
   "devDependencies": {
     "@remix-run/server-runtime": "workspace:*",