@remix-run/router 1.2.1 → 1.3.0-pre.0

package/dist/utils.d.ts

@@ -26,6 +26,8 @@ export interface SuccessResult {
 export interface DeferredResult {
     type: ResultType.deferred;
     deferredData: DeferredData;
+    statusCode?: number;
+    headers?: Headers;
 }
 /**
  * Redirect result from a loader or action
@@ -158,7 +160,7 @@ export declare type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObjec
  * A data route object, which is just a RouteObject with a required unique ID
  */
 export declare type AgnosticDataRouteObject = AgnosticDataIndexRouteObject | AgnosticDataNonIndexRouteObject;
-declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param : never;
+declare type _PathParam<Path extends string> = Path extends `${infer L}/${infer R}` ? _PathParam<L> | _PathParam<R> : Path extends `:${infer Param}` ? Param extends `${infer Optional}?` ? Optional : Param : never;
 /**
  * Examples:
  * "/a/b/*" -> "*"
@@ -214,7 +216,7 @@ export declare function matchRoutes<RouteObjectType extends AgnosticRouteObject
  * @see https://reactrouter.com/utils/generate-path
  */
 export declare function generatePath<Path extends string>(originalPath: Path, params?: {
-    [key in PathParam<Path>]: string;
+    [key in PathParam<Path>]: string | null;
 }): string;
 /**
  * A PathPattern is used to match on some portion of a URL pathname.
@@ -340,22 +342,27 @@ export interface TrackedPromise extends Promise<any> {
 export declare class AbortedDeferredError extends Error {
 }
 export declare class DeferredData {
-    private pendingKeys;
+    private pendingKeysSet;
     private controller;
     private abortPromise;
     private unlistenAbortSignal;
-    private subscriber?;
+    private subscribers;
     data: Record<string, unknown>;
-    constructor(data: Record<string, unknown>);
+    init?: ResponseInit;
+    deferredKeys: string[];
+    constructor(data: Record<string, unknown>, responseInit?: ResponseInit);
     private trackPromise;
     private onSettle;
-    subscribe(fn: (aborted: boolean) => void): void;
+    private emit;
+    subscribe(fn: (aborted: boolean, settledKey?: string) => void): () => boolean;
     cancel(): void;
     resolveData(signal: AbortSignal): Promise<boolean>;
     get done(): boolean;
     get unwrappedData(): {};
+    get pendingKeys(): string[];
 }
-export declare function defer(data: Record<string, unknown>): DeferredData;
+export declare type DeferFunction = (data: Record<string, unknown>, init?: number | ResponseInit) => DeferredData;
+export declare const defer: DeferFunction;
 export declare type RedirectFunction = (url: string, init?: number | ResponseInit) => Response;
 /**
  * A redirect response. Sets the status code and the `Location` header.

package/history.ts

@@ -125,6 +125,13 @@ export interface History {
    */
   createHref(to: To): string;
 
+  /**
+   * Returns a URL for the given `to` value
+   *
+   * @param to - The destination URL
+   */
+  createURL(to: To): URL;
+
   /**
    * Encode a location the same way window.history would do (no-op for memory
    * history) so we ensure our PUSH/REPLACE navigations for data routers
@@ -255,6 +262,10 @@ export function createMemoryHistory(
     return location;
   }
 
+  function createHref(to: To) {
+    return typeof to === "string" ? to : createPath(to);
+  }
+
   let history: MemoryHistory = {
     get index() {
       return index;
@@ -265,8 +276,9 @@ export function createMemoryHistory(
     get location() {
       return getCurrentLocation();
     },
-    createHref(to) {
-      return typeof to === "string" ? to : createPath(to);
+    createHref,
+    createURL(to) {
+      return new URL(createHref(to), "http://localhost");
     },
     encodeLocation(to: To) {
       let path = typeof to === "string" ? parsePath(to) : to;
@@ -558,24 +570,6 @@ export function parsePath(path: string): Partial<Path> {
   return parsedPath;
 }
 
-export function createClientSideURL(location: Location | string): URL {
-  // window.location.origin is "null" (the literal string value) in Firefox
-  // under certain conditions, notably when serving from a local HTML file
-  // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
-  let base =
-    typeof window !== "undefined" &&
-    typeof window.location !== "undefined" &&
-    window.location.origin !== "null"
-      ? window.location.origin
-      : window.location.href;
-  let href = typeof location === "string" ? location : createPath(location);
-  invariant(
-    base,
-    `No window.location.(origin|href) available to create URL for href: ${href}`
-  );
-  return new URL(href, base);
-}
-
 export interface UrlHistory extends History {}
 
 export type UrlHistoryOptions = {
@@ -637,6 +631,23 @@ function getUrlBasedHistory(
     }
   }
 
+  function createURL(to: To): URL {
+    // window.location.origin is "null" (the literal string value) in Firefox
+    // under certain conditions, notably when serving from a local HTML file
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
+    let base =
+      window.location.origin !== "null"
+        ? window.location.origin
+        : window.location.href;
+
+    let href = typeof to === "string" ? to : createPath(to);
+    invariant(
+      base,
+      `No window.location.(origin|href) available to create URL for href: ${href}`
+    );
+    return new URL(href, base);
+  }
+
   let history: History = {
     get action() {
       return action;
@@ -659,11 +670,10 @@ function getUrlBasedHistory(
     createHref(to) {
       return createHref(window, to);
     },
+    createURL,
     encodeLocation(to) {
       // Encode a Location the same way window.location would
-      let url = createClientSideURL(
-        typeof to === "string" ? to : createPath(to)
-      );
+      let url = createURL(to);
       return {
         pathname: url.pathname,
         search: url.search,

package/index.ts

@@ -1,5 +1,3 @@
-import { convertRoutesToDataRoutes, getPathContributingMatches } from "./utils";
-
 export type {
   ActionFunction,
   ActionFunctionArgs,
@@ -58,6 +56,7 @@ export type {
   Path,
   To,
 } from "./history";
+
 export {
   Action,
   createBrowserHistory,
@@ -79,6 +78,7 @@ export * from "./router";
 
 /** @internal */
 export {
+  DeferredData as UNSAFE_DeferredData,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
   getPathContributingMatches as UNSAFE_getPathContributingMatches,
-};
+} from "./utils";

package/package.json

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

package/router.ts

@@ -3,7 +3,6 @@ import {
   Action as HistoryAction,
   createLocation,
   createPath,
-  createClientSideURL,
   invariant,
   parsePath,
 } from "./history";
@@ -308,6 +307,7 @@ export interface StaticHandlerContext {
   statusCode: number;
   loaderHeaders: Record<string, Headers>;
   actionHeaders: Record<string, Headers>;
+  activeDeferreds: Record<string, DeferredData> | null;
   _deepestRenderedBoundaryId?: string | null;
 }
 
@@ -957,6 +957,7 @@ export function createRouter(init: RouterInit): Router {
     // Create a controller/Request for this navigation
     pendingNavigationController = new AbortController();
     let request = createClientSideRequest(
+      init.history,
       location,
       pendingNavigationController.signal,
       opts && opts.submission
@@ -1115,7 +1116,7 @@ export function createRouter(init: RouterInit): Router {
     }
 
     if (isDeferredResult(result)) {
-      throw new Error("defer() is not supported in actions");
+      throw getInternalRouterError(400, { type: "defer-action" });
     }
 
     return {
@@ -1167,6 +1168,7 @@ export function createRouter(init: RouterInit): Router {
       : undefined;
 
     let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
+      init.history,
       state,
       matches,
       activeSubmission,
@@ -1380,6 +1382,7 @@ export function createRouter(init: RouterInit): Router {
     // Call the action for the fetcher
     let abortController = new AbortController();
     let fetchRequest = createClientSideRequest(
+      init.history,
       path,
       abortController.signal,
       submission
@@ -1427,13 +1430,15 @@ export function createRouter(init: RouterInit): Router {
     }
 
     if (isDeferredResult(actionResult)) {
-      invariant(false, "defer() is not supported in actions");
+      throw getInternalRouterError(400, { type: "defer-action" });
     }
 
     // Start the data load for current matches, or the next location if we're
     // in the middle of a navigation
     let nextLocation = state.navigation.location || state.location;
     let revalidationRequest = createClientSideRequest(
+      init.history,
+
       nextLocation,
       abortController.signal
     );
@@ -1456,6 +1461,7 @@ export function createRouter(init: RouterInit): Router {
     state.fetchers.set(key, loadFetcher);
 
     let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(
+      init.history,
       state,
       matches,
       submission,
@@ -1599,7 +1605,11 @@ export function createRouter(init: RouterInit): Router {
 
     // Call the loader for this fetcher route match
     let abortController = new AbortController();
-    let fetchRequest = createClientSideRequest(path, abortController.signal);
+    let fetchRequest = createClientSideRequest(
+      init.history,
+      path,
+      abortController.signal
+    );
     fetchControllers.set(key, abortController);
     let result: DataResult = await callLoaderOrAction(
       "loader",
@@ -1609,7 +1619,7 @@ export function createRouter(init: RouterInit): Router {
       router.basename
     );
 
-    // Deferred isn't supported or fetcher loads, await everything and treat it
+    // Deferred isn't supported for fetcher loads, await everything and treat it
     // as a normal load.  resolveDeferredData will return undefined if this
     // fetcher gets aborted, so we just leave result untouched and short circuit
     // below if that happens
@@ -1719,7 +1729,7 @@ export function createRouter(init: RouterInit): Router {
 
     // Check if this an external redirect that goes to a new origin
     if (typeof window?.location !== "undefined") {
-      let newOrigin = createClientSideURL(redirect.location).origin;
+      let newOrigin = init.history.createURL(redirect.location).origin;
       if (window.location.origin !== newOrigin) {
         if (replace) {
           window.location.replace(redirect.location);
@@ -1796,7 +1806,7 @@ export function createRouter(init: RouterInit): Router {
       ...fetchersToLoad.map(([, href, match, fetchMatches]) =>
         callLoaderOrAction(
           "loader",
-          createClientSideRequest(href, request.signal),
+          createClientSideRequest(init.history, href, request.signal),
           match,
           fetchMatches,
           router.basename
@@ -2027,6 +2037,8 @@ export function createRouter(init: RouterInit): Router {
 //#region createStaticHandler
 ////////////////////////////////////////////////////////////////////////////////
 
+export const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
+
 export function createStaticHandler(
   routes: AgnosticRouteObject[],
   opts?: {
@@ -2086,6 +2098,7 @@ export function createStaticHandler(
         statusCode: error.status,
         loaderHeaders: {},
         actionHeaders: {},
+        activeDeferreds: null,
       };
     } else if (!matches) {
       let error = getInternalRouterError(404, { pathname: location.pathname });
@@ -2103,6 +2116,7 @@ export function createStaticHandler(
         statusCode: error.status,
         loaderHeaders: {},
         actionHeaders: {},
+        activeDeferreds: null,
       };
     }
 
@@ -2191,8 +2205,19 @@ export function createStaticHandler(
     }
 
     // Pick off the right state value to return
-    let routeData = [result.actionData, result.loaderData].find((v) => v);
-    return Object.values(routeData || {})[0];
+    if (result.actionData) {
+      return Object.values(result.actionData)[0];
+    }
+
+    if (result.loaderData) {
+      let data = Object.values(result.loaderData)[0];
+      if (result.activeDeferreds?.[match.route.id]) {
+        data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
+      }
+      return data;
+    }
+
+    return undefined;
   }
 
   async function queryImpl(
@@ -2305,7 +2330,14 @@ export function createStaticHandler(
     }
 
     if (isDeferredResult(result)) {
-      throw new Error("defer() is not supported in actions");
+      let error = getInternalRouterError(400, { type: "defer-action" });
+      if (isRouteRequest) {
+        throw error;
+      }
+      result = {
+        type: ResultType.error,
+        error,
+      };
     }
 
     if (isRouteRequest) {
@@ -2325,6 +2357,7 @@ export function createStaticHandler(
         statusCode: 200,
         loaderHeaders: {},
         actionHeaders: {},
+        activeDeferreds: null,
       };
     }
 
@@ -2420,6 +2453,7 @@ export function createStaticHandler(
         errors: pendingActionError || null,
         statusCode: 200,
         loaderHeaders: {},
+        activeDeferreds: null,
       };
     }
 
@@ -2443,25 +2477,20 @@ export function createStaticHandler(
       throw new Error(`${method}() call aborted`);
     }
 
-    let executedLoaders = new Set<string>();
-    results.forEach((result, i) => {
-      executedLoaders.add(matchesToLoad[i].route.id);
-      // Can't do anything with these without the Remix side of things, so just
-      // cancel them for now
-      if (isDeferredResult(result)) {
-        result.deferredData.cancel();
-      }
-    });
-
     // Process and commit output from loaders
+    let activeDeferreds = new Map<string, DeferredData>();
     let context = processRouteLoaderData(
       matches,
       matchesToLoad,
       results,
-      pendingActionError
+      pendingActionError,
+      activeDeferreds
     );
 
     // Add a null for any non-loader matches for proper revalidation on the client
+    let executedLoaders = new Set<string>(
+      matchesToLoad.map((match) => match.route.id)
+    );
     matches.forEach((match) => {
       if (!executedLoaders.has(match.route.id)) {
         context.loaderData[match.route.id] = null;
@@ -2471,6 +2500,10 @@ export function createStaticHandler(
     return {
       ...context,
       matches,
+      activeDeferreds:
+        activeDeferreds.size > 0
+          ? Object.fromEntries(activeDeferreds.entries())
+          : null,
     };
   }
 
@@ -2595,6 +2628,7 @@ function getLoaderMatchesUntilBoundary(
 }
 
 function getMatchesToLoad(
+  history: History,
   state: RouterState,
   matches: AgnosticDataRouteMatch[],
   submission: Submission | undefined,
@@ -2622,6 +2656,7 @@ function getMatchesToLoad(
         // If this route had a pending deferred cancelled it must be revalidated
         cancelledDeferredRoutes.some((id) => id === match.route.id) ||
         shouldRevalidateLoader(
+          history,
           state.location,
           state.matches[index],
           submission,
@@ -2641,6 +2676,7 @@ function getMatchesToLoad(
         revalidatingFetchers.push([key, href, match, fetchMatches]);
       } else if (isRevalidationRequired) {
         let shouldRevalidate = shouldRevalidateLoader(
+          history,
           href,
           match,
           submission,
@@ -2694,6 +2730,7 @@ function isNewRouteInstance(
 }
 
 function shouldRevalidateLoader(
+  history: History,
   currentLocation: string | Location,
   currentMatch: AgnosticDataRouteMatch,
   submission: Submission | undefined,
@@ -2702,9 +2739,9 @@ function shouldRevalidateLoader(
   isRevalidationRequired: boolean,
   actionResult: DataResult | undefined
 ) {
-  let currentUrl = createClientSideURL(currentLocation);
+  let currentUrl = history.createURL(currentLocation);
   let currentParams = currentMatch.params;
-  let nextUrl = createClientSideURL(location);
+  let nextUrl = history.createURL(location);
   let nextParams = match.params;
 
   // This is the default implementation as to when we revalidate.  If the route
@@ -2795,8 +2832,7 @@ async function callLoaderOrAction(
         "Redirects returned/thrown from loaders/actions must have a Location header"
       );
 
-      let isAbsolute =
-        /^[a-z+]+:\/\//i.test(location) || location.startsWith("//");
+      let isAbsolute = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(location);
 
       // Support relative routing in internal redirects
       if (!isAbsolute) {
@@ -2893,11 +2929,12 @@ async function callLoaderOrAction(
 // client-side navigations and fetches.  During SSR we will always have a
 // Request instance from the static handler (query/queryRoute)
 function createClientSideRequest(
+  history: History,
   location: string | Location,
   signal: AbortSignal,
   submission?: Submission
 ): Request {
-  let url = createClientSideURL(stripHashFromPath(location)).toString();
+  let url = history.createURL(stripHashFromPath(location)).toString();
   let init: RequestInit = { signal };
 
   if (submission && isMutationMethod(submission.formMethod)) {
@@ -2933,7 +2970,7 @@ function processRouteLoaderData(
   matchesToLoad: AgnosticDataRouteMatch[],
   results: DataResult[],
   pendingError: RouteData | undefined,
-  activeDeferreds?: Map<string, DeferredData>
+  activeDeferreds: Map<string, DeferredData>
 ): {
   loaderData: RouterState["loaderData"];
   errors: RouterState["errors"] | null;
@@ -2988,12 +3025,14 @@ function processRouteLoaderData(
       if (result.headers) {
         loaderHeaders[id] = result.headers;
       }
-    } else if (isDeferredResult(result)) {
-      activeDeferreds && activeDeferreds.set(id, result.deferredData);
-      loaderData[id] = result.deferredData.data;
-      // TODO: Add statusCode/headers once we wire up streaming in Remix
     } else {
-      loaderData[id] = result.data;
+      if (isDeferredResult(result)) {
+        activeDeferreds.set(id, result.deferredData);
+        loaderData[id] = result.deferredData.data;
+      } else {
+        loaderData[id] = result.data;
+      }
+
       // Error status codes always override success status codes, but if all
       // loaders are successful we take the deepest status code.
       if (
@@ -3068,11 +3107,11 @@ function processLoaderData(
     } else if (isRedirectResult(result)) {
       // Should never get here, redirects should get processed above, but we
       // keep this to type narrow to a success result in the else
-      throw new Error("Unhandled fetcher revalidation redirect");
+      invariant(false, "Unhandled fetcher revalidation redirect");
     } else if (isDeferredResult(result)) {
       // Should never get here, deferred data should be awaited for fetchers
       // in resolveDeferredResults
-      throw new Error("Unhandled fetcher deferred data");
+      invariant(false, "Unhandled fetcher deferred data");
     } else {
       let doneFetcher: FetcherStates["Idle"] = {
         state: "idle",
@@ -3163,10 +3202,12 @@ function getInternalRouterError(
     pathname,
     routeId,
     method,
+    type,
   }: {
     pathname?: string;
     routeId?: string;
     method?: string;
+    type?: "defer-action";
   } = {}
 ) {
   let statusText = "Unknown Server Error";
@@ -3179,6 +3220,8 @@ function getInternalRouterError(
         `You made a ${method} request to "${pathname}" but ` +
         `did not provide a \`loader\` for route "${routeId}", ` +
         `so there is no way to handle the request.`;
+    } else if (type === "defer-action") {
+      errorMessage = "defer() is not supported in actions";
     } else {
       errorMessage = "Cannot submit binary form data using GET";
     }