@remix-run/router 1.8.0 → 1.9.0-pre.1

package/dist/utils.d.ts

@@ -111,20 +111,20 @@ export type Submission = {
  * Arguments passed to route loader/action functions.  Same for now but we keep
  * this as a private implementation detail in case they diverge in the future.
  */
-interface DataFunctionArgs {
+interface DataFunctionArgs<Context> {
     request: Request;
     params: Params;
-    context?: any;
+    context?: Context;
 }
 /**
  * Arguments passed to loader functions
  */
-export interface LoaderFunctionArgs extends DataFunctionArgs {
+export interface LoaderFunctionArgs<C = any> extends DataFunctionArgs<C> {
 }
 /**
  * Arguments passed to action functions
  */
-export interface ActionFunctionArgs extends DataFunctionArgs {
+export interface ActionFunctionArgs<C = any> extends DataFunctionArgs<C> {
 }
 /**
  * Loaders and actions can return anything except `undefined` (`null` is a
@@ -135,14 +135,31 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction {
-    (args: LoaderFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface LoaderFunction<C = any> {
+    (args: LoaderFunctionArgs<C>): Promise<DataFunctionValue> | DataFunctionValue;
 }
 /**
  * Route action function signature
  */
-export interface ActionFunction {
-    (args: ActionFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface ActionFunction<C = any> {
+    (args: ActionFunctionArgs<C>): Promise<DataFunctionValue> | DataFunctionValue;
+}
+/**
+ * Arguments passed to shouldRevalidate function
+ */
+export interface ShouldRevalidateFunctionArgs {
+    currentUrl: URL;
+    currentParams: AgnosticDataRouteMatch["params"];
+    nextUrl: URL;
+    nextParams: AgnosticDataRouteMatch["params"];
+    formMethod?: Submission["formMethod"];
+    formAction?: Submission["formAction"];
+    formEncType?: Submission["formEncType"];
+    text?: Submission["text"];
+    formData?: Submission["formData"];
+    json?: Submission["json"];
+    actionResult?: any;
+    defaultShouldRevalidate: boolean;
 }
 /**
  * Route shouldRevalidate function signature.  This runs after any submission
@@ -152,20 +169,7 @@ export interface ActionFunction {
  * have to re-run based on the data models that were potentially mutated.
  */
 export interface ShouldRevalidateFunction {
-    (args: {
-        currentUrl: URL;
-        currentParams: AgnosticDataRouteMatch["params"];
-        nextUrl: URL;
-        nextParams: AgnosticDataRouteMatch["params"];
-        formMethod?: Submission["formMethod"];
-        formAction?: Submission["formAction"];
-        formEncType?: Submission["formEncType"];
-        text?: Submission["text"];
-        formData?: Submission["formData"];
-        json?: Submission["json"];
-        actionResult?: DataResult;
-        defaultShouldRevalidate: boolean;
-    }): boolean;
+    (args: ShouldRevalidateFunctionArgs): boolean;
 }
 /**
  * Function provided by the framework-aware layers to set `hasErrorBoundary`
@@ -297,6 +301,14 @@ export declare function convertRoutesToDataRoutes(routes: AgnosticRouteObject[],
  * @see https://reactrouter.com/utils/match-routes
  */
 export declare function matchRoutes<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename?: string): AgnosticRouteMatch<string, RouteObjectType>[] | null;
+export interface UIMatch<D = unknown, H = unknown> {
+    id: string;
+    pathname: string;
+    params: AgnosticRouteMatch["params"];
+    data: D;
+    handle: H;
+}
+export declare function convertRouteMatchToUiMatch(match: AgnosticDataRouteMatch, loaderData: RouteData): UIMatch;
 /**
  * Returns a path with params interpolated.
  *
@@ -462,14 +474,15 @@ export declare const redirectDocument: RedirectFunction;
  * @private
  * Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
  */
-export declare class ErrorResponse {
+export declare class ErrorResponseImpl {
     status: number;
     statusText: string;
     data: any;
-    error?: Error;
-    internal: boolean;
+    private error?;
+    private internal;
     constructor(status: number, statusText: string | undefined, data: any, internal?: boolean);
 }
+export type ErrorResponse = InstanceType<typeof ErrorResponseImpl>;
 /**
  * Check if the given error is an ErrorResponse generated from a 4xx/5xx
  * Response thrown from an action/loader

package/history.ts

@@ -49,15 +49,18 @@ export interface Path {
   hash: string;
 }
 
+// TODO: (v7) Change the Location generic default from `any` to `unknown` and
+// remove Remix `useLocation` wrapper.
+
 /**
  * An entry in a history stack. A location contains information about the
  * URL path, as well as possibly some arbitrary state and a key.
  */
-export interface Location extends Path {
+export interface Location<S = any> extends Path {
   /**
    * A value of arbitrary data associated with this location.
    */
-  state: any;
+  state: S;
 
   /**
    * A unique string associated with this location. May be used to safely store

package/index.ts

@@ -9,12 +9,12 @@ export type {
   AgnosticNonIndexRouteObject,
   AgnosticRouteMatch,
   AgnosticRouteObject,
-  LazyRouteFunction,
-  TrackedPromise,
+  ErrorResponse,
   FormEncType,
   FormMethod,
   HTMLFormMethod,
   JsonFunction,
+  LazyRouteFunction,
   LoaderFunction,
   LoaderFunctionArgs,
   ParamParseKey,
@@ -23,12 +23,14 @@ export type {
   PathPattern,
   RedirectFunction,
   ShouldRevalidateFunction,
+  ShouldRevalidateFunctionArgs,
+  TrackedPromise,
+  UIMatch,
   V7_FormMethod,
 } from "./utils";
 
 export {
   AbortedDeferredError,
-  ErrorResponse,
   defer,
   generatePath,
   getToPathname,
@@ -62,9 +64,9 @@ export type {
 export {
   Action,
   createBrowserHistory,
-  createPath,
   createHashHistory,
   createMemoryHistory,
+  createPath,
   parsePath,
 } from "./history";
 
@@ -81,7 +83,9 @@ export * from "./router";
 export type { RouteManifest as UNSAFE_RouteManifest } from "./utils";
 export {
   DeferredData as UNSAFE_DeferredData,
+  ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
+  convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
   getPathContributingMatches as UNSAFE_getPathContributingMatches,
 } from "./utils";
 

package/package.json

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

package/router.ts

@@ -8,35 +8,36 @@ import {
   warning,
 } from "./history";
 import type {
-  DataResult,
-  DeferredData,
+  ActionFunction,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
+  AgnosticRouteObject,
+  DataResult,
+  DeferredData,
   DeferredResult,
+  DetectErrorBoundaryFunction,
   ErrorResult,
   FormEncType,
   FormMethod,
-  DetectErrorBoundaryFunction,
+  HTMLFormMethod,
+  ImmutableRouteKey,
+  LoaderFunction,
+  MapRoutePropertiesFunction,
+  MutationFormMethod,
   RedirectResult,
   RouteData,
-  AgnosticRouteObject,
+  RouteManifest,
+  ShouldRevalidateFunctionArgs,
   Submission,
   SuccessResult,
-  AgnosticRouteMatch,
-  ShouldRevalidateFunction,
-  RouteManifest,
-  ImmutableRouteKey,
-  ActionFunction,
-  LoaderFunction,
-  V7_MutationFormMethod,
+  UIMatch,
   V7_FormMethod,
-  HTMLFormMethod,
-  MutationFormMethod,
-  MapRoutePropertiesFunction,
+  V7_MutationFormMethod,
 } from "./utils";
 import {
-  ErrorResponse,
+  ErrorResponseImpl,
   ResultType,
+  convertRouteMatchToUiMatch,
   convertRoutesToDataRoutes,
   getPathContributingMatches,
   immutableRouteKeys,
@@ -394,20 +395,12 @@ export interface RouterSubscriber {
   (state: RouterState): void;
 }
 
-interface UseMatchesMatch {
-  id: string;
-  pathname: string;
-  params: AgnosticRouteMatch["params"];
-  data: unknown;
-  handle: unknown;
-}
-
 /**
  * Function signature for determining the key to be used in scroll restoration
  * for a given location
  */
 export interface GetScrollRestorationKeyFunction {
-  (location: Location, matches: UseMatchesMatch[]): string | null;
+  (location: Location, matches: UIMatch[]): string | null;
 }
 
 /**
@@ -526,7 +519,6 @@ type FetcherStates<TData = any> = {
     formData: undefined;
     json: undefined;
     data: TData | undefined;
-    " _hasFetcherDoneAnything "?: boolean;
   };
   Loading: {
     state: "loading";
@@ -537,7 +529,6 @@ type FetcherStates<TData = any> = {
     formData: Submission["formData"] | undefined;
     json: Submission["json"] | undefined;
     data: TData | undefined;
-    " _hasFetcherDoneAnything "?: boolean;
   };
   Submitting: {
     state: "submitting";
@@ -548,7 +539,6 @@ type FetcherStates<TData = any> = {
     formData: Submission["formData"];
     json: Submission["json"];
     data: TData | undefined;
-    " _hasFetcherDoneAnything "?: boolean;
   };
 };
 
@@ -1229,7 +1219,7 @@ export function createRouter(init: RouterInit): Router {
       submission?: Submission;
       fetcherSubmission?: Submission;
       overrideNavigation?: Navigation;
-      pendingError?: ErrorResponse;
+      pendingError?: ErrorResponseImpl;
       startUninterruptedRevalidation?: boolean;
       preventScrollReset?: boolean;
       replace?: boolean;
@@ -1786,8 +1776,7 @@ export function createRouter(init: RouterInit): Router {
         updateState({ fetchers: new Map(state.fetchers) });
 
         return startRedirectNavigation(state, actionResult, {
-          submission,
-          isFetchActionRedirect: true,
+          fetcherSubmission: submission,
         });
       }
     }
@@ -2086,27 +2075,21 @@ export function createRouter(init: RouterInit): Router {
     redirect: RedirectResult,
     {
       submission,
+      fetcherSubmission,
       replace,
-      isFetchActionRedirect,
     }: {
       submission?: Submission;
+      fetcherSubmission?: Submission;
       replace?: boolean;
-      isFetchActionRedirect?: boolean;
     } = {}
   ) {
     if (redirect.revalidate) {
       isRevalidationRequired = true;
     }
 
-    let redirectLocation = createLocation(
-      state.location,
-      redirect.location,
-      // TODO: This can be removed once we get rid of useTransition in Remix v2
-      {
-        _isRedirect: true,
-        ...(isFetchActionRedirect ? { _isFetchActionRedirect: true } : {}),
-      }
-    );
+    let redirectLocation = createLocation(state.location, redirect.location, {
+      _isRedirect: true,
+    });
     invariant(
       redirectLocation,
       "Expected a location on the redirect navigation"
@@ -2146,12 +2129,21 @@ export function createRouter(init: RouterInit): Router {
 
     // Use the incoming submission if provided, fallback on the active one in
     // state.navigation
-    let activeSubmission =
-      submission || getSubmissionFromNavigation(state.navigation);
+    let { formMethod, formAction, formEncType } = state.navigation;
+    if (
+      !submission &&
+      !fetcherSubmission &&
+      formMethod &&
+      formAction &&
+      formEncType
+    ) {
+      submission = getSubmissionFromNavigation(state.navigation);
+    }
 
     // If this was a 307/308 submission we want to preserve the HTTP method and
     // re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
     // redirected location
+    let activeSubmission = submission || fetcherSubmission;
     if (
       redirectPreserveMethodStatusCodes.has(redirect.status) &&
       activeSubmission &&
@@ -2165,23 +2157,17 @@ export function createRouter(init: RouterInit): Router {
         // Preserve this flag across redirects
         preventScrollReset: pendingPreventScrollReset,
       });
-    } else if (isFetchActionRedirect) {
-      // For a fetch action redirect, we kick off a new loading navigation
-      // without the fetcher submission, but we send it along for shouldRevalidate
-      await startNavigation(redirectHistoryAction, redirectLocation, {
-        overrideNavigation: getLoadingNavigation(redirectLocation),
-        fetcherSubmission: activeSubmission,
-        // Preserve this flag across redirects
-        preventScrollReset: pendingPreventScrollReset,
-      });
     } else {
-      // If we have a submission, we will preserve it through the redirect navigation
+      // If we have a navigation submission, we will preserve it through the
+      // redirect navigation
       let overrideNavigation = getLoadingNavigation(
         redirectLocation,
-        activeSubmission
+        submission
       );
       await startNavigation(redirectHistoryAction, redirectLocation, {
         overrideNavigation,
+        // Send fetcher submissions through for shouldRevalidate
+        fetcherSubmission,
         // Preserve this flag across redirects
         preventScrollReset: pendingPreventScrollReset,
       });
@@ -2468,7 +2454,7 @@ export function createRouter(init: RouterInit): Router {
     if (getScrollRestorationKey) {
       let key = getScrollRestorationKey(
         location,
-        matches.map((m) => createUseMatchesMatch(m, state.loaderData))
+        matches.map((m) => convertRouteMatchToUiMatch(m, state.loaderData))
       );
       return key || location.key;
     }
@@ -2850,7 +2836,9 @@ export function createStaticHandler(
 
       if (request.signal.aborted) {
         let method = isRouteRequest ? "queryRoute" : "query";
-        throw new Error(`${method}() call aborted`);
+        throw new Error(
+          `${method}() call aborted: ${request.method} ${request.url}`
+        );
       }
     }
 
@@ -3018,7 +3006,9 @@ export function createStaticHandler(
 
     if (request.signal.aborted) {
       let method = isRouteRequest ? "queryRoute" : "query";
-      throw new Error(`${method}() call aborted`);
+      throw new Error(
+        `${method}() call aborted: ${request.method} ${request.url}`
+      );
     }
 
     // Process and commit output from loaders
@@ -3172,7 +3162,7 @@ function normalizeNavigateOptions(
 ): {
   path: string;
   submission?: Submission;
-  error?: ErrorResponse;
+  error?: ErrorResponseImpl;
 } {
   // Return location verbatim on non-submission navigations
   if (!opts || !isSubmissionNavigation(opts)) {
@@ -3513,7 +3503,7 @@ function isNewRouteInstance(
 
 function shouldRevalidateLoader(
   loaderMatch: AgnosticDataRouteMatch,
-  arg: Parameters<ShouldRevalidateFunction>[0]
+  arg: ShouldRevalidateFunctionArgs
 ) {
   if (loaderMatch.route.shouldRevalidate) {
     let routeChoice = loaderMatch.route.shouldRevalidate(arg);
@@ -3643,10 +3633,19 @@ async function callLoaderOrAction(
     if (match.route.lazy) {
       if (handler) {
         // Run statically defined handler in parallel with lazy()
+        let handlerError;
         let values = await Promise.all([
-          runHandler(handler),
+          // If the handler throws, don't let it immediately bubble out,
+          // since we need to let the lazy() execution finish so we know if this
+          // route has a boundary that can handle the error
+          runHandler(handler).catch((e) => {
+            handlerError = e;
+          }),
           loadLazyRouteModule(match.route, mapRouteProperties, manifest),
         ]);
+        if (handlerError) {
+          throw handlerError;
+        }
         result = values[0];
       } else {
         // Load lazy route module, then run any returned handler
@@ -3774,7 +3773,7 @@ async function callLoaderOrAction(
     if (resultType === ResultType.error) {
       return {
         type: resultType,
-        error: new ErrorResponse(status, result.statusText, data),
+        error: new ErrorResponseImpl(status, result.statusText, data),
         headers: result.headers,
       };
     }
@@ -4139,7 +4138,7 @@ function getInternalRouterError(
     }
   }
 
-  return new ErrorResponse(
+  return new ErrorResponseImpl(
     status || 500,
     statusText,
     new Error(errorMessage),
@@ -4326,22 +4325,6 @@ function hasNakedIndexQuery(search: string): boolean {
   return new URLSearchParams(search).getAll("index").some((v) => v === "");
 }
 
-// Note: This should match the format exported by useMatches, so if you change
-// this please also change that :)  Eventually we'll DRY this up
-function createUseMatchesMatch(
-  match: AgnosticDataRouteMatch,
-  loaderData: RouteData
-): UseMatchesMatch {
-  let { route, pathname, params } = match;
-  return {
-    id: route.id,
-    pathname,
-    params,
-    data: loaderData[route.id] as unknown,
-    handle: route.handle as unknown,
-  };
-}
-
 function getTargetMatch(
   matches: AgnosticDataRouteMatch[],
   location: Location | string
@@ -4462,7 +4445,6 @@ function getLoadingFetcher(
       json: submission.json,
       text: submission.text,
       data,
-      " _hasFetcherDoneAnything ": true,
     };
     return fetcher;
   } else {
@@ -4475,7 +4457,6 @@ function getLoadingFetcher(
       json: undefined,
       text: undefined,
       data,
-      " _hasFetcherDoneAnything ": true,
     };
     return fetcher;
   }
@@ -4494,7 +4475,6 @@ function getSubmittingFetcher(
     json: submission.json,
     text: submission.text,
     data: existingFetcher ? existingFetcher.data : undefined,
-    " _hasFetcherDoneAnything ": true,
   };
   return fetcher;
 }
@@ -4509,7 +4489,6 @@ function getDoneFetcher(data: Fetcher["data"]): FetcherStates["Idle"] {
     json: undefined,
     text: undefined,
     data,
-    " _hasFetcherDoneAnything ": true,
   };
   return fetcher;
 }

package/utils.ts

@@ -1,5 +1,5 @@
 import type { Location, Path, To } from "./history";
-import { warning, invariant, parsePath } from "./history";
+import { invariant, parsePath, warning } from "./history";
 
 /**
  * Map of routeId -> data returned from a loader/action/error
@@ -137,21 +137,24 @@ export type Submission =
  * Arguments passed to route loader/action functions.  Same for now but we keep
  * this as a private implementation detail in case they diverge in the future.
  */
-interface DataFunctionArgs {
+interface DataFunctionArgs<Context> {
   request: Request;
   params: Params;
-  context?: any;
+  context?: Context;
 }
 
+// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
+//   ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
+
 /**
  * Arguments passed to loader functions
  */
-export interface LoaderFunctionArgs extends DataFunctionArgs {}
+export interface LoaderFunctionArgs<C = any> extends DataFunctionArgs<C> {}
 
 /**
  * Arguments passed to action functions
  */
-export interface ActionFunctionArgs extends DataFunctionArgs {}
+export interface ActionFunctionArgs<C = any> extends DataFunctionArgs<C> {}
 
 /**
  * Loaders and actions can return anything except `undefined` (`null` is a
@@ -163,15 +166,33 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction {
-  (args: LoaderFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface LoaderFunction<C = any> {
+  (args: LoaderFunctionArgs<C>): Promise<DataFunctionValue> | DataFunctionValue;
 }
 
 /**
  * Route action function signature
  */
-export interface ActionFunction {
-  (args: ActionFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface ActionFunction<C = any> {
+  (args: ActionFunctionArgs<C>): Promise<DataFunctionValue> | DataFunctionValue;
+}
+
+/**
+ * Arguments passed to shouldRevalidate function
+ */
+export interface ShouldRevalidateFunctionArgs {
+  currentUrl: URL;
+  currentParams: AgnosticDataRouteMatch["params"];
+  nextUrl: URL;
+  nextParams: AgnosticDataRouteMatch["params"];
+  formMethod?: Submission["formMethod"];
+  formAction?: Submission["formAction"];
+  formEncType?: Submission["formEncType"];
+  text?: Submission["text"];
+  formData?: Submission["formData"];
+  json?: Submission["json"];
+  actionResult?: any;
+  defaultShouldRevalidate: boolean;
 }
 
 /**
@@ -182,20 +203,7 @@ export interface ActionFunction {
  * have to re-run based on the data models that were potentially mutated.
  */
 export interface ShouldRevalidateFunction {
-  (args: {
-    currentUrl: URL;
-    currentParams: AgnosticDataRouteMatch["params"];
-    nextUrl: URL;
-    nextParams: AgnosticDataRouteMatch["params"];
-    formMethod?: Submission["formMethod"];
-    formAction?: Submission["formAction"];
-    formEncType?: Submission["formEncType"];
-    text?: Submission["text"];
-    formData?: Submission["formData"];
-    json?: Submission["json"];
-    actionResult?: DataResult;
-    defaultShouldRevalidate: boolean;
-  }): boolean;
+  (args: ShouldRevalidateFunctionArgs): boolean;
 }
 
 /**
@@ -485,6 +493,28 @@ export function matchRoutes<
   return matches;
 }
 
+export interface UIMatch<D = unknown, H = unknown> {
+  id: string;
+  pathname: string;
+  params: AgnosticRouteMatch["params"];
+  data: D;
+  handle: H;
+}
+
+export function convertRouteMatchToUiMatch(
+  match: AgnosticDataRouteMatch,
+  loaderData: RouteData
+): UIMatch {
+  let { route, pathname, params } = match;
+  return {
+    id: route.id,
+    pathname,
+    params,
+    data: loaderData[route.id],
+    handle: route.handle,
+  };
+}
+
 interface RouteMeta<
   RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
 > {
@@ -1500,12 +1530,12 @@ export const redirectDocument: RedirectFunction = (url, init) => {
  * @private
  * Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
  */
-export class ErrorResponse {
+export class ErrorResponseImpl {
   status: number;
   statusText: string;
   data: any;
-  error?: Error;
-  internal: boolean;
+  private error?: Error;
+  private internal: boolean;
 
   constructor(
     status: number,
@@ -1525,6 +1555,11 @@ export class ErrorResponse {
   }
 }
 
+// We don't want the class exported since usage of it at runtime is an
+// implementation detail, but we do want to export the shape so folks can
+// build their own abstractions around instances via isRouteErrorResponse()
+export type ErrorResponse = InstanceType<typeof ErrorResponseImpl>;
+
 /**
  * Check if the given error is an ErrorResponse generated from a 4xx/5xx
  * Response thrown from an action/loader