@remix-run/router 1.18.0 → 1.19.0-pre.1

package/dist/utils.d.ts

@@ -55,7 +55,6 @@ export type DataResult = SuccessResult | DeferredResult | RedirectResult | Error
 export interface HandlerResult {
     type: "data" | "error";
     result: unknown;
-    status?: number;
 }
 type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
 type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>;
@@ -459,6 +458,17 @@ export type JsonFunction = <Data>(data: Data, init?: number | ResponseInit) => R
  * to JSON and sets the `Content-Type` header.
  */
 export declare const json: JsonFunction;
+export declare class DataWithResponseInit<D> {
+    type: string;
+    data: D;
+    init: ResponseInit | null;
+    constructor(data: D, init?: ResponseInit);
+}
+/**
+ * Create "responses" that contain `status`/`headers` without forcing
+ * serialization into an actual `Response` - used by Remix single fetch
+ */
+export declare function data<D>(data: D, init?: number | ResponseInit): DataWithResponseInit<D>;
 export interface TrackedPromise extends Promise<any> {
     _tracked?: boolean;
     _data?: any;
@@ -500,6 +510,13 @@ export declare const redirect: RedirectFunction;
  * Defaults to "302 Found".
  */
 export declare const redirectDocument: RedirectFunction;
+/**
+ * A redirect response that will perform a `history.replaceState` instead of a
+ * `history.pushState` for client-side navigation redirects.
+ * Sets the status code and the `Location` header.
+ * Defaults to "302 Found".
+ */
+export declare const replace: RedirectFunction;
 export type ErrorResponse = {
     status: number;
     statusText: string;

package/index.ts

@@ -33,10 +33,12 @@ export type {
   TrackedPromise,
   UIMatch,
   V7_FormMethod,
+  DataWithResponseInit as UNSAFE_DataWithResponseInit,
 } from "./utils";
 
 export {
   AbortedDeferredError,
+  data as unstable_data,
   defer,
   generatePath,
   getToPathname,
@@ -48,6 +50,7 @@ export {
   normalizePathname,
   redirect,
   redirectDocument,
+  replace,
   resolvePath,
   resolveTo,
   stripBasename,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.18.0",
+  "version": "1.19.0-pre.1",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",

package/router.ts

@@ -36,6 +36,7 @@ import type {
   V7_FormMethod,
   V7_MutationFormMethod,
   AgnosticPatchRoutesOnMissFunction,
+  DataWithResponseInit,
 } from "./utils";
 import {
   ErrorResponseImpl,
@@ -847,7 +848,7 @@ export function createRouter(init: RouterInit): Router {
   // In SSR apps (with `hydrationData`), we expect that the server will send
   // up the proper matched routes so we don't want to run lazy discovery on
   // initial hydration and want to hydrate into the splat route.
-  if (initialMatches && patchRoutesOnMissImpl && !init.hydrationData) {
+  if (initialMatches && !init.hydrationData) {
     let fogOfWar = checkFogOfWar(
       initialMatches,
       dataRoutes,
@@ -860,9 +861,22 @@ export function createRouter(init: RouterInit): Router {
 
   let initialized: boolean;
   if (!initialMatches) {
-    // We need to run patchRoutesOnMiss in initialize()
     initialized = false;
     initialMatches = [];
+
+    // If partial hydration and fog of war is enabled, we will be running
+    // `patchRoutesOnMiss` during hydration so include any partial matches as
+    // the initial matches so we can properly render `HydrateFallback`'s
+    if (future.v7_partialHydration) {
+      let fogOfWar = checkFogOfWar(
+        null,
+        dataRoutes,
+        init.history.location.pathname
+      );
+      if (fogOfWar.active && fogOfWar.matches) {
+        initialMatches = fogOfWar.matches;
+      }
+    }
   } else if (initialMatches.some((m) => m.route.lazy)) {
     // All initialMatches need to be loaded before we're ready.  If we have lazy
     // functions around still then we'll need to run them in initialize()
@@ -967,7 +981,7 @@ export function createRouter(init: RouterInit): Router {
 
   // Use this internal array to capture fetcher loads that were cancelled by an
   // action navigation and require revalidation
-  let cancelledFetcherLoads: string[] = [];
+  let cancelledFetcherLoads: Set<string> = new Set();
 
   // AbortControllers for any in-flight fetchers
   let fetchControllers = new Map<string, AbortController>();
@@ -1320,7 +1334,6 @@ export function createRouter(init: RouterInit): Router {
     isUninterruptedRevalidation = false;
     isRevalidationRequired = false;
     cancelledDeferredRoutes = [];
-    cancelledFetcherLoads = [];
   }
 
   // Trigger a navigation event, which can either be a numerical POP or a PUSH
@@ -2683,7 +2696,9 @@ export function createRouter(init: RouterInit): Router {
     pendingNavigationController = null;
 
     let redirectHistoryAction =
-      replace === true ? HistoryAction.Replace : HistoryAction.Push;
+      replace === true || redirect.response.headers.has("X-Remix-Replace")
+        ? HistoryAction.Replace
+        : HistoryAction.Push;
 
     // Use the incoming submission if provided, fallback on the active one in
     // state.navigation
@@ -2851,7 +2866,7 @@ export function createRouter(init: RouterInit): Router {
     // Abort in-flight fetcher loads
     fetchLoadMatches.forEach((_, key) => {
       if (fetchControllers.has(key)) {
-        cancelledFetcherLoads.push(key);
+        cancelledFetcherLoads.add(key);
         abortFetcher(key);
       }
     });
@@ -2915,6 +2930,7 @@ export function createRouter(init: RouterInit): Router {
     fetchReloadIds.delete(key);
     fetchRedirectIds.delete(key);
     deletedFetchers.delete(key);
+    cancelledFetcherLoads.delete(key);
     state.fetchers.delete(key);
   }
 
@@ -4308,7 +4324,7 @@ function getMatchesToLoad(
   skipActionErrorRevalidation: boolean,
   isRevalidationRequired: boolean,
   cancelledDeferredRoutes: string[],
-  cancelledFetcherLoads: string[],
+  cancelledFetcherLoads: Set<string>,
   deletedFetchers: Set<string>,
   fetchLoadMatches: Map<string, FetchLoadMatch>,
   fetchRedirectIds: Set<string>,
@@ -4443,8 +4459,9 @@ function getMatchesToLoad(
     if (fetchRedirectIds.has(key)) {
       // Never trigger a revalidation of an actively redirecting fetcher
       shouldRevalidate = false;
-    } else if (cancelledFetcherLoads.includes(key)) {
-      // Always revalidate if the fetcher was cancelled
+    } else if (cancelledFetcherLoads.has(key)) {
+      // Always mark for revalidation if the fetcher was cancelled
+      cancelledFetcherLoads.delete(key);
       shouldRevalidate = true;
     } else if (
       fetcher &&
@@ -4904,7 +4921,7 @@ async function callLoaderOrAction(
 async function convertHandlerResultToDataResult(
   handlerResult: HandlerResult
 ): Promise<DataResult> {
-  let { result, type, status } = handlerResult;
+  let { result, type } = handlerResult;
 
   if (isResponse(result)) {
     let data: any;
@@ -4944,10 +4961,26 @@ async function convertHandlerResultToDataResult(
   }
 
   if (type === ResultType.error) {
+    if (isDataWithResponseInit(result)) {
+      if (result.data instanceof Error) {
+        return {
+          type: ResultType.error,
+          error: result.data,
+          statusCode: result.init?.status,
+        };
+      }
+
+      // Convert thrown unstable_data() to ErrorResponse instances
+      result = new ErrorResponseImpl(
+        result.init?.status || 500,
+        undefined,
+        result.data
+      );
+    }
     return {
       type: ResultType.error,
       error: result,
-      statusCode: isRouteErrorResponse(result) ? result.status : status,
+      statusCode: isRouteErrorResponse(result) ? result.status : undefined,
     };
   }
 
@@ -4960,7 +4993,18 @@ async function convertHandlerResultToDataResult(
     };
   }
 
-  return { type: ResultType.data, data: result, statusCode: status };
+  if (isDataWithResponseInit(result)) {
+    return {
+      type: ResultType.data,
+      data: result.data,
+      statusCode: result.init?.status,
+      headers: result.init?.headers
+        ? new Headers(result.init.headers)
+        : undefined,
+    };
+  }
+
+  return { type: ResultType.data, data: result };
 }
 
 // Support relative routing in internal redirects
@@ -5474,6 +5518,19 @@ function isRedirectResult(result?: DataResult): result is RedirectResult {
   return (result && result.type) === ResultType.redirect;
 }
 
+export function isDataWithResponseInit(
+  value: any
+): value is DataWithResponseInit<unknown> {
+  return (
+    typeof value === "object" &&
+    value != null &&
+    "type" in value &&
+    "data" in value &&
+    "init" in value &&
+    value.type === "DataWithResponseInit"
+  );
+}
+
 export function isDeferredData(value: any): value is DeferredData {
   let deferred: DeferredData = value;
   return (

package/utils.ts

@@ -68,8 +68,7 @@ export type DataResult =
  */
 export interface HandlerResult {
   type: "data" | "error";
-  result: unknown; // data, Error, Response, DeferredData
-  status?: number;
+  result: unknown; // data, Error, Response, DeferredData, DataWithResponseInit
 }
 
 type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete";
@@ -1375,6 +1374,28 @@ export const json: JsonFunction = (data, init = {}) => {
   });
 };
 
+export class DataWithResponseInit<D> {
+  type: string = "DataWithResponseInit";
+  data: D;
+  init: ResponseInit | null;
+
+  constructor(data: D, init?: ResponseInit) {
+    this.data = data;
+    this.init = init || null;
+  }
+}
+
+/**
+ * Create "responses" that contain `status`/`headers` without forcing
+ * serialization into an actual `Response` - used by Remix single fetch
+ */
+export function data<D>(data: D, init?: number | ResponseInit) {
+  return new DataWithResponseInit(
+    data,
+    typeof init === "number" ? { status: init } : init
+  );
+}
+
 export interface TrackedPromise extends Promise<any> {
   _tracked?: boolean;
   _data?: any;
@@ -1619,6 +1640,18 @@ export const redirectDocument: RedirectFunction = (url, init) => {
   return response;
 };
 
+/**
+ * A redirect response that will perform a `history.replaceState` instead of a
+ * `history.pushState` for client-side navigation redirects.
+ * Sets the status code and the `Location` header.
+ * Defaults to "302 Found".
+ */
+export const replace: RedirectFunction = (url, init) => {
+  let response = redirect(url, init);
+  response.headers.set("X-Remix-Replace", "true");
+  return response;
+};
+
 export type ErrorResponse = {
   status: number;
   statusText: string;