@remix-run/router 0.0.0-experimental-c9f8a7b2 → 0.0.0-experimental-e960cf1a

package/dist/utils.d.ts

@@ -182,6 +182,15 @@ export interface ShouldRevalidateFunction {
 export interface DetectErrorBoundaryFunction {
     (route: AgnosticRouteObject): boolean;
 }
+export interface DataStrategyFunctionArgs {
+    request: Request;
+    matches: AgnosticDataStrategyMatch[];
+    type: "loader" | "action";
+    defaultStrategy(match: AgnosticDataStrategyMatch): Promise<DataResult>;
+}
+export interface DataStrategyFunction {
+    (args: DataStrategyFunctionArgs): Promise<DataResult[]>;
+}
 /**
  * Function provided by the framework-aware layers to set any framework-specific
  * properties from framework-agnostic properties
@@ -296,6 +305,10 @@ export interface AgnosticRouteMatch<ParamKey extends string = string, RouteObjec
 }
 export interface AgnosticDataRouteMatch extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {
 }
+export type LazyRoutePromise = PromiseLike<AgnosticDataRouteObject> & AgnosticDataRouteObject;
+export interface AgnosticDataStrategyMatch extends Omit<AgnosticRouteMatch<string, AgnosticDataRouteObject>, "route"> {
+    route: LazyRoutePromise;
+}
 export declare function convertRoutesToDataRoutes(routes: AgnosticRouteObject[], mapRouteProperties: MapRoutePropertiesFunction, parentPath?: number[], manifest?: RouteManifest): AgnosticDataRouteObject[];
 /**
  * Matches the given routes to a location and returns the match data.

package/index.ts

@@ -5,10 +5,14 @@ export type {
   AgnosticDataNonIndexRouteObject,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
+  AgnosticDataStrategyMatch,
   AgnosticIndexRouteObject,
   AgnosticNonIndexRouteObject,
   AgnosticRouteMatch,
   AgnosticRouteObject,
+  DataResult,
+  DataStrategyFunction,
+  DataStrategyFunctionArgs,
   ErrorResponse,
   FormEncType,
   FormMethod,
@@ -45,6 +49,7 @@ export {
   redirectDocument,
   resolvePath,
   resolveTo,
+  ResultType,
   stripBasename,
 } from "./utils";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "0.0.0-experimental-c9f8a7b2",
+  "version": "0.0.0-experimental-e960cf1a",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",

package/router.ts

@@ -11,8 +11,11 @@ import type {
   ActionFunction,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
+  AgnosticDataStrategyMatch,
   AgnosticRouteObject,
   DataResult,
+  DataStrategyFunction,
+  DataStrategyFunctionArgs,
   DeferredData,
   DeferredResult,
   DetectErrorBoundaryFunction,
@@ -21,6 +24,7 @@ import type {
   FormMethod,
   HTMLFormMethod,
   ImmutableRouteKey,
+  LazyRoutePromise,
   LoaderFunction,
   MapRoutePropertiesFunction,
   MutationFormMethod,
@@ -374,6 +378,7 @@ export interface RouterInit {
   future?: Partial<FutureConfig>;
   hydrationData?: HydrationState;
   window?: Window;
+  unstable_dataStrategy?: DataStrategyFunction;
 }
 
 /**
@@ -752,6 +757,9 @@ export function createRouter(init: RouterInit): Router {
     "You must provide a non-empty routes array to createRouter"
   );
 
+  const dataStrategy = init.unstable_dataStrategy || defaultDataStrategy;
+  const callLoaderOrAction = createCallLoaderOrAction(dataStrategy);
+
   let mapRouteProperties: MapRoutePropertiesFunction;
   if (init.mapRouteProperties) {
     mapRouteProperties = init.mapRouteProperties;
@@ -817,34 +825,19 @@ export function createRouter(init: RouterInit): Router {
     initialErrors = { [route.id]: error };
   }
 
-  let initialized: boolean;
-  let hasLazyRoutes = initialMatches.some((m) => m.route.lazy);
-  let hasLoaders = initialMatches.some((m) => m.route.loader);
-  if (hasLazyRoutes) {
+  // "Initialized" here really means "Can `RouterProvider` render my route tree?"
+  // Prior to `route.HydrateFallback`, we only had a root `fallbackElement` so we used
+  // `state.initialized` to render that instead of `<DataRoutes>`.  Now that we
+  // support route level fallbacks we can always render and we'll just render
+  // as deep as we have data for and detect the nearest ancestor HydrateFallback
+  let initialized =
+    future.v7_partialHydration ||
     // 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()
-    initialized = false;
-  } else if (!hasLoaders) {
-    // If we've got no loaders to run, then we're good to go
-    initialized = true;
-  } else if (future.v7_partialHydration) {
-    // If partial hydration is enabled, we're initialized so long as we were
-    // provided with hydrationData for every route with a loader, and no loaders
-    // were marked for explicit hydration
-    let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
-    let errors = init.hydrationData ? init.hydrationData.errors : null;
-    initialized = initialMatches.every(
-      (m) =>
-        m.route.loader &&
-        m.route.loader.hydrate !== true &&
-        ((loaderData && loaderData[m.route.id] !== undefined) ||
-          (errors && errors[m.route.id] !== undefined))
-    );
-  } else {
-    // Without partial hydration - we're initialized if we were provided any
-    // hydrationData - which is expected to be complete
-    initialized = init.hydrationData != null;
-  }
+    (!initialMatches.some((m) => m.route.lazy) &&
+      // And we have to either have no loaders or have been provided hydrationData
+      (!initialMatches.some((m) => m.route.loader) ||
+        init.hydrationData != null));
 
   let router: Router;
   let state: RouterState = {
@@ -1025,7 +1018,11 @@ export function createRouter(init: RouterInit): Router {
     // in the normal navigation flow.  For SSR it's expected that lazy modules are
     // resolved prior to router creation since we can't go into a fallbackElement
     // UI for SSR'd apps
-    if (!state.initialized) {
+    if (
+      !state.initialized ||
+      (future.v7_partialHydration &&
+        state.matches.some((m) => isUnhydratedRoute(state, m.route)))
+    ) {
       startNavigation(HistoryAction.Pop, state.location, {
         initialHydration: true,
       });
@@ -1772,8 +1769,8 @@ export function createRouter(init: RouterInit): Router {
       );
     }
 
-    let { results, loaderResults, fetcherResults } =
-      await callLoadersAndMaybeResolveData(
+    let { loaderResults, fetcherResults } =
+      await loadDataAndMaybeResolveDeferred(
         state.matches,
         matches,
         matchesToLoad,
@@ -1797,7 +1794,7 @@ export function createRouter(init: RouterInit): Router {
     revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
 
     // If any loaders returned a redirect Response, start a new REPLACE navigation
-    let redirect = findRedirect(results);
+    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
     if (redirect) {
       if (redirect.idx >= matchesToLoad.length) {
         // If this redirect came from a fetcher make sure we mark it in
@@ -2103,8 +2100,8 @@ export function createRouter(init: RouterInit): Router {
       abortPendingFetchRevalidations
     );
 
-    let { results, loaderResults, fetcherResults } =
-      await callLoadersAndMaybeResolveData(
+    let { loaderResults, fetcherResults } =
+      await loadDataAndMaybeResolveDeferred(
         state.matches,
         matches,
         matchesToLoad,
@@ -2125,7 +2122,7 @@ export function createRouter(init: RouterInit): Router {
     fetchControllers.delete(key);
     revalidatingFetchers.forEach((r) => fetchControllers.delete(r.key));
 
-    let redirect = findRedirect(results);
+    let redirect = findRedirect([...loaderResults, ...fetcherResults]);
     if (redirect) {
       if (redirect.idx >= matchesToLoad.length) {
         // If this redirect came from a fetcher make sure we mark it in
@@ -2410,52 +2407,83 @@ export function createRouter(init: RouterInit): Router {
     }
   }
 
-  async function callLoadersAndMaybeResolveData(
+  async function loadDataAndMaybeResolveDeferred(
     currentMatches: AgnosticDataRouteMatch[],
     matches: AgnosticDataRouteMatch[],
     matchesToLoad: AgnosticDataRouteMatch[],
     fetchersToLoad: RevalidatingFetcher[],
     request: Request
   ) {
-    // Call all navigation loaders and revalidating fetcher loaders in parallel,
-    // then slice off the results into separate arrays so we can handle them
-    // accordingly
-    let results = await Promise.all([
-      ...matchesToLoad.map((match) =>
-        callLoaderOrAction(
-          "loader",
-          request,
-          match,
-          matches,
-          manifest,
-          mapRouteProperties,
-          basename,
-          future.v7_relativeSplatPath
-        )
-      ),
+    let [loaderResults, ...fetcherResults] = await Promise.all([
+      matchesToLoad.length
+        ? dataStrategy({
+            matches: matchesToLoad.map((m) =>
+              finesseToAgnosticDataStrategyMatch(
+                m,
+                mapRouteProperties,
+                manifest
+              )
+            ),
+            request,
+            type: "loader",
+            defaultStrategy(match) {
+              return callLoaderOrActionImplementation(
+                "loader",
+                request,
+                match,
+                matches,
+                basename,
+                future.v7_relativeSplatPath
+              );
+            },
+          })
+        : [],
       ...fetchersToLoad.map((f) => {
-        if (f.matches && f.match && f.controller) {
-          return callLoaderOrAction(
-            "loader",
-            createClientSideRequest(init.history, f.path, f.controller.signal),
-            f.match,
-            f.matches,
-            manifest,
-            mapRouteProperties,
-            basename,
-            future.v7_relativeSplatPath
-          );
-        } else {
-          let error: ErrorResult = {
+        if (!f.matches || !f.match || !f.controller) {
+          return Promise.resolve<DataResult>({
             type: ResultType.error,
-            error: getInternalRouterError(404, { pathname: f.path }),
-          };
-          return error;
+            error: getInternalRouterError(404, {
+              pathname: f.path,
+            }),
+          });
         }
+
+        return dataStrategy({
+          matches: [
+            finesseToAgnosticDataStrategyMatch(
+              f.match!,
+              mapRouteProperties,
+              manifest
+            ),
+          ],
+          request,
+          type: "loader",
+          defaultStrategy(match) {
+            invariant(
+              f.controller,
+              "Expected controller for fetcher in defaultStrategy"
+            );
+            invariant(
+              f.matches,
+              "Expected matches for fetcher in defaultStrategy"
+            );
+
+            return callLoaderOrActionImplementation(
+              "loader",
+              createClientSideRequest(
+                init.history,
+                f.path,
+                f.controller.signal
+              ),
+              match,
+              f.matches,
+              basename,
+              future.v7_relativeSplatPath
+            );
+          },
+        }).then((r) => r[0]);
       }),
     ]);
-    let loaderResults = results.slice(0, matchesToLoad.length);
-    let fetcherResults = results.slice(matchesToLoad.length);
 
     await Promise.all([
       resolveDeferredResults(
@@ -2475,7 +2503,10 @@ export function createRouter(init: RouterInit): Router {
       ),
     ]);
 
-    return { results, loaderResults, fetcherResults };
+    return {
+      loaderResults,
+      fetcherResults,
+    };
   }
 
   function interruptActiveLoads() {
@@ -2834,7 +2865,6 @@ export const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
  */
 export interface StaticHandlerFutureConfig {
   v7_relativeSplatPath: boolean;
-  v7_throwAbortReason: boolean;
 }
 
 export interface CreateStaticHandlerOptions {
@@ -2843,6 +2873,7 @@ export interface CreateStaticHandlerOptions {
    * @deprecated Use `mapRouteProperties` instead
    */
   detectErrorBoundary?: DetectErrorBoundaryFunction;
+  dataStrategy?: DataStrategyFunction;
   mapRouteProperties?: MapRoutePropertiesFunction;
   future?: Partial<StaticHandlerFutureConfig>;
 }
@@ -2856,6 +2887,9 @@ export function createStaticHandler(
     "You must provide a non-empty routes array to createStaticHandler"
   );
 
+  const dataStrategy = opts?.dataStrategy || defaultDataStrategy;
+  const callLoaderOrAction = createCallLoaderOrAction(dataStrategy);
+
   let manifest: RouteManifest = {};
   let basename = (opts ? opts.basename : null) || "/";
   let mapRouteProperties: MapRoutePropertiesFunction;
@@ -2873,7 +2907,6 @@ export function createStaticHandler(
   // Config driven behavior flags
   let future: StaticHandlerFutureConfig = {
     v7_relativeSplatPath: false,
-    v7_throwAbortReason: false,
     ...(opts ? opts.future : null),
   };
 
@@ -3143,7 +3176,10 @@ export function createStaticHandler(
       );
 
       if (request.signal.aborted) {
-        throwStaticHandlerAbortedError(request, isRouteRequest, future);
+        let method = isRouteRequest ? "queryRoute" : "query";
+        throw new Error(
+          `${method}() call aborted: ${request.method} ${request.url}`
+        );
       }
     }
 
@@ -3294,24 +3330,30 @@ export function createStaticHandler(
       };
     }
 
-    let results = await Promise.all([
-      ...matchesToLoad.map((match) =>
-        callLoaderOrAction(
+    let results = await dataStrategy({
+      matches: matchesToLoad.map((m) =>
+        finesseToAgnosticDataStrategyMatch(m, mapRouteProperties, manifest)
+      ),
+      request,
+      type: "loader",
+      defaultStrategy(match) {
+        return callLoaderOrActionImplementation(
           "loader",
           request,
           match,
           matches,
-          manifest,
-          mapRouteProperties,
           basename,
           future.v7_relativeSplatPath,
           { isStaticRequest: true, isRouteRequest, requestContext }
-        )
-      ),
-    ]);
+        );
+      },
+    });
 
     if (request.signal.aborted) {
-      throwStaticHandlerAbortedError(request, isRouteRequest, future);
+      let method = isRouteRequest ? "queryRoute" : "query";
+      throw new Error(
+        `${method}() call aborted: ${request.method} ${request.url}`
+      );
     }
 
     // Process and commit output from loaders
@@ -3357,6 +3399,13 @@ export function createStaticHandler(
 //#region Helpers
 ////////////////////////////////////////////////////////////////////////////////
 
+function defaultDataStrategy({
+  defaultStrategy,
+  matches,
+}: DataStrategyFunctionArgs) {
+  return Promise.all(matches.map((match) => defaultStrategy(match)));
+}
+
 /**
  * Given an existing StaticHandlerContext and an error thrown at render time,
  * provide an updated StaticHandlerContext suitable for a second SSR render
@@ -3376,19 +3425,6 @@ export function getStaticContextFromError(
   return newContext;
 }
 
-function throwStaticHandlerAbortedError(
-  request: Request,
-  isRouteRequest: boolean,
-  future: StaticHandlerFutureConfig
-) {
-  if (future.v7_throwAbortReason && request.signal.reason !== undefined) {
-    throw request.signal.reason;
-  }
-
-  let method = isRouteRequest ? "queryRoute" : "query";
-  throw new Error(`${method}() call aborted: ${request.method} ${request.url}`);
-}
-
 function isSubmissionNavigation(
   opts: BaseNavigateOrFetchOptions
 ): opts is SubmissionNavigateOptions {
@@ -3664,27 +3700,21 @@ function getMatchesToLoad(
   let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
 
   let navigationMatches = boundaryMatches.filter((match, index) => {
-    let { route } = match;
-    if (route.lazy) {
+    if (isInitialLoad) {
+      // On initial hydration we don't do any shouldRevalidate stuff - we just
+      // call the unhydrated loaders
+      return isUnhydratedRoute(state, match.route);
+    }
+
+    if (match.route.lazy) {
       // We haven't loaded this route yet so we don't know if it's got a loader!
       return true;
     }
 
-    if (route.loader == null) {
+    if (match.route.loader == null) {
       return false;
     }
 
-    if (isInitialLoad) {
-      if (route.loader.hydrate) {
-        return true;
-      }
-      return (
-        state.loaderData[route.id] === undefined &&
-        // Don't re-run if the loader ran and threw an error
-        (!state.errors || state.errors[route.id] === undefined)
-      );
-    }
-
     // Always call the loader on new route instances and pending defer cancellations
     if (
       isNewLoader(state.loaderData, state.matches[index], match) ||
@@ -3804,6 +3834,23 @@ function getMatchesToLoad(
   return [navigationMatches, revalidatingFetchers];
 }
 
+// Is this route unhydrated (when v7_partialHydration=true) such that we need
+// to call it's loader on the initial router creation
+function isUnhydratedRoute(state: RouterState, route: AgnosticDataRouteObject) {
+  if (!route.loader) {
+    return false;
+  }
+  if (route.loader.hydrate) {
+    return true;
+  }
+  return (
+    state.loaderData[route.id] === undefined &&
+    (!state.errors ||
+      // Loader ran but errored - don't re-run
+      state.errors[route.id] === undefined)
+  );
+}
+
 function isNewLoader(
   currentLoaderData: RouteData,
   currentMatch: AgnosticDataRouteMatch,
@@ -3862,9 +3909,9 @@ async function loadLazyRouteModule(
   route: AgnosticDataRouteObject,
   mapRouteProperties: MapRoutePropertiesFunction,
   manifest: RouteManifest
-) {
+): Promise<AgnosticDataRouteObject> {
   if (!route.lazy) {
-    return;
+    return route;
   }
 
   let lazyRoute = await route.lazy();
@@ -3873,7 +3920,7 @@ async function loadLazyRouteModule(
   // call then we can return - first lazy() to finish wins because the return
   // value of lazy is expected to be static
   if (!route.lazy) {
-    return;
+    return route;
   }
 
   let routeToUpdate = manifest[route.id];
@@ -3929,15 +3976,88 @@ async function loadLazyRouteModule(
     ...mapRouteProperties(routeToUpdate),
     lazy: undefined,
   });
+
+  return routeToUpdate;
+}
+
+function createCallLoaderOrAction(dataStrategy: DataStrategyFunction) {
+  return async (
+    type: "loader" | "action",
+    request: Request,
+    match: AgnosticDataRouteMatch,
+    matches: AgnosticDataRouteMatch[],
+    manifest: RouteManifest,
+    mapRouteProperties: MapRoutePropertiesFunction,
+    basename: string,
+    v7_relativeSplatPath: boolean,
+    opts: {
+      isStaticRequest?: boolean;
+      isRouteRequest?: boolean;
+      requestContext?: unknown;
+    } = {}
+  ): Promise<DataResult> => {
+    let [result] = await dataStrategy({
+      matches: [
+        finesseToAgnosticDataStrategyMatch(match, mapRouteProperties, manifest),
+      ],
+      request,
+      type,
+      defaultStrategy(match) {
+        return callLoaderOrActionImplementation(
+          type,
+          request,
+          match,
+          matches,
+          basename,
+          v7_relativeSplatPath,
+          opts
+        );
+      },
+    });
+
+    return result;
+  };
+}
+
+function finesseToAgnosticDataStrategyMatch(
+  match: AgnosticDataRouteMatch,
+  mapRouteProperties: MapRoutePropertiesFunction,
+  manifest: RouteManifest
+): AgnosticDataStrategyMatch {
+  let loadRoutePromise: Promise<AgnosticDataRouteObject> | undefined;
+
+  if (match.route.lazy) {
+    try {
+      loadRoutePromise = loadLazyRouteModule(
+        match.route,
+        mapRouteProperties,
+        manifest
+      );
+    } catch (error) {
+      loadRoutePromise = Promise.reject(error);
+    }
+  }
+
+  if (!loadRoutePromise) {
+    loadRoutePromise = Promise.resolve(match.route);
+  }
+
+  loadRoutePromise.catch(() => {});
+
+  return {
+    ...match,
+    route: Object.assign(
+      loadRoutePromise,
+      match.route
+    ) as unknown as LazyRoutePromise,
+  };
 }
 
-async function callLoaderOrAction(
+async function callLoaderOrActionImplementation(
   type: "loader" | "action",
   request: Request,
-  match: AgnosticDataRouteMatch,
+  match: AgnosticDataStrategyMatch,
   matches: AgnosticDataRouteMatch[],
-  manifest: RouteManifest,
-  mapRouteProperties: MapRoutePropertiesFunction,
   basename: string,
   v7_relativeSplatPath: boolean,
   opts: {
@@ -3980,7 +4100,7 @@ async function callLoaderOrAction(
           runHandler(handler).catch((e) => {
             handlerError = e;
           }),
-          loadLazyRouteModule(match.route, mapRouteProperties, manifest),
+          match.route,
         ]);
         if (handlerError) {
           throw handlerError;
@@ -3988,9 +4108,9 @@ async function callLoaderOrAction(
         result = values[0];
       } else {
         // Load lazy route module, then run any returned handler
-        await loadLazyRouteModule(match.route, mapRouteProperties, manifest);
+        let route = await match.route;
 
-        handler = match.route[type];
+        handler = route[type];
         if (handler) {
           // Handler still run even if we got interrupted to maintain consistency
           // with un-abortable behavior of handler execution on non-lazy or
@@ -4050,7 +4170,10 @@ async function callLoaderOrAction(
       if (!ABSOLUTE_URL_REGEX.test(location)) {
         location = normalizeTo(
           new URL(request.url),
-          matches.slice(0, matches.indexOf(match) + 1),
+          matches.slice(
+            0,
+            matches.findIndex((m) => m.route.id === match.route.id) + 1
+          ),
           basename,
           true,
           location,
@@ -4107,11 +4230,7 @@ async function callLoaderOrAction(
       // 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)) {
-        if (result.body == null) {
-          data = null;
-        } else {
-          data = await result.json();
-        }
+        data = await result.json();
       } else {
         data = await result.text();
       }