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

package/dist/router.d.ts

@@ -1,6 +1,6 @@
 import type { History, Location, Path, To } from "./history";
 import { Action as HistoryAction } from "./history";
-import type { AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticRouteObject, DeferredData, DetectErrorBoundaryFunction, FormEncType, HTMLFormMethod, MapRoutePropertiesFunction, RouteData, Submission, UIMatch } from "./utils";
+import type { AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticRouteObject, DataStrategyFunction, DeferredData, DetectErrorBoundaryFunction, FormEncType, HTMLFormMethod, MapRoutePropertiesFunction, RouteData, Submission, UIMatch } from "./utils";
 /**
  * A Router instance manages all navigation and data loading/mutations
  */
@@ -274,6 +274,7 @@ export interface RouterInit {
     future?: Partial<FutureConfig>;
     hydrationData?: HydrationState;
     window?: Window;
+    unstable_dataStrategy?: DataStrategyFunction;
 }
 /**
  * State returned from a server-side query() call
@@ -487,7 +488,6 @@ export declare const UNSAFE_DEFERRED_SYMBOL: unique symbol;
  */
 export interface StaticHandlerFutureConfig {
     v7_relativeSplatPath: boolean;
-    v7_throwAbortReason: boolean;
 }
 export interface CreateStaticHandlerOptions {
     basename?: string;
@@ -495,6 +495,7 @@ export interface CreateStaticHandlerOptions {
      * @deprecated Use `mapRouteProperties` instead
      */
     detectErrorBoundary?: DetectErrorBoundaryFunction;
+    dataStrategy?: DataStrategyFunction;
     mapRouteProperties?: MapRoutePropertiesFunction;
     future?: Partial<StaticHandlerFutureConfig>;
 }

package/dist/router.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-c9f8a7b2
+ * @remix-run/router v0.0.0-experimental-e960cf1a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -653,7 +653,7 @@ function rankRouteBranches(branches) {
   branches.sort((a, b) => a.score !== b.score ? b.score - a.score // Higher score first
   : compareIndexes(a.routesMeta.map(meta => meta.childrenIndex), b.routesMeta.map(meta => meta.childrenIndex)));
 }
-const paramRe = /^:[\w-]+$/;
+const paramRe = /^:\w+$/;
 const dynamicSegmentValue = 3;
 const indexRouteValue = 2;
 const emptySegmentValue = 1;
@@ -740,7 +740,7 @@ function generatePath(originalPath, params) {
       // Apply the splat
       return stringify(params[star]);
     }
-    const keyMatch = segment.match(/^:([\w-]+)(\??)$/);
+    const keyMatch = segment.match(/^:(\w+)(\??)$/);
     if (keyMatch) {
       const [, key, optional] = keyMatch;
       let param = params[key];
@@ -812,7 +812,7 @@ function compilePath(path, caseSensitive, end) {
   let regexpSource = "^" + path.replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below
   .replace(/^\/*/, "/") // Make sure it has a leading /
   .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
-  .replace(/\/:([\w-]+)(\?)?/g, (_, paramName, isOptional) => {
+  .replace(/\/:(\w+)(\?)?/g, (_, paramName, isOptional) => {
     params.push({
       paramName,
       isOptional: isOptional != null
@@ -1306,6 +1306,8 @@ function createRouter(init) {
   const isBrowser = typeof routerWindow !== "undefined" && typeof routerWindow.document !== "undefined" && typeof routerWindow.document.createElement !== "undefined";
   const isServer = !isBrowser;
   invariant(init.routes.length > 0, "You must provide a non-empty routes array to createRouter");
+  const dataStrategy = init.unstable_dataStrategy || defaultDataStrategy;
+  const callLoaderOrAction = createCallLoaderOrAction(dataStrategy);
   let mapRouteProperties;
   if (init.mapRouteProperties) {
     mapRouteProperties = init.mapRouteProperties;
@@ -1366,28 +1368,17 @@ function createRouter(init) {
       [route.id]: error
     };
   }
-  let initialized;
-  let hasLazyRoutes = initialMatches.some(m => m.route.lazy);
-  let hasLoaders = initialMatches.some(m => m.route.loader);
-  if (hasLazyRoutes) {
-    // 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;
-  }
+  // "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()
+  !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;
   let state = {
     historyAction: init.history.action,
@@ -1530,7 +1521,7 @@ function createRouter(init) {
     // 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(Action.Pop, state.location, {
         initialHydration: true
       });
@@ -2072,10 +2063,9 @@ function createRouter(init) {
       pendingNavigationController.signal.addEventListener("abort", abortPendingFetchRevalidations);
     }
     let {
-      results,
       loaderResults,
       fetcherResults
-    } = await callLoadersAndMaybeResolveData(state.matches, matches, matchesToLoad, revalidatingFetchers, request);
+    } = await loadDataAndMaybeResolveDeferred(state.matches, matches, matchesToLoad, revalidatingFetchers, request);
     if (request.signal.aborted) {
       return {
         shortCircuited: true
@@ -2089,7 +2079,7 @@ function createRouter(init) {
     }
     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
@@ -2283,10 +2273,9 @@ function createRouter(init) {
     let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
     abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
     let {
-      results,
       loaderResults,
       fetcherResults
-    } = await callLoadersAndMaybeResolveData(state.matches, matches, matchesToLoad, revalidatingFetchers, revalidationRequest);
+    } = await loadDataAndMaybeResolveDeferred(state.matches, matches, matchesToLoad, revalidatingFetchers, revalidationRequest);
     if (abortController.signal.aborted) {
       return;
     }
@@ -2294,7 +2283,7 @@ function createRouter(init) {
     fetchReloadIds.delete(key);
     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
@@ -2489,28 +2478,36 @@ function createRouter(init) {
       });
     }
   }
-  async function callLoadersAndMaybeResolveData(currentMatches, matches, matchesToLoad, fetchersToLoad, 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)), ...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 = {
+  async function loadDataAndMaybeResolveDeferred(currentMatches, matches, matchesToLoad, fetchersToLoad, request) {
+    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 Promise.resolve({
           type: ResultType.error,
           error: getInternalRouterError(404, {
             pathname: f.path
           })
-        };
-        return error;
+        });
       }
+      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(currentMatches, matchesToLoad, loaderResults, loaderResults.map(() => request.signal), false, state.loaderData), resolveDeferredResults(currentMatches, fetchersToLoad.map(f => f.match), fetcherResults, fetchersToLoad.map(f => f.controller ? f.controller.signal : null), true)]);
     return {
-      results,
       loaderResults,
       fetcherResults
     };
@@ -2806,6 +2803,8 @@ function createRouter(init) {
 const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
 function createStaticHandler(routes, opts) {
   invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
+  const dataStrategy = (opts == null ? void 0 : opts.dataStrategy) || defaultDataStrategy;
+  const callLoaderOrAction = createCallLoaderOrAction(dataStrategy);
   let manifest = {};
   let basename = (opts ? opts.basename : null) || "/";
   let mapRouteProperties;
@@ -2822,8 +2821,7 @@ function createStaticHandler(routes, opts) {
   }
   // Config driven behavior flags
   let future = _extends({
-    v7_relativeSplatPath: false,
-    v7_throwAbortReason: false
+    v7_relativeSplatPath: false
   }, opts ? opts.future : null);
   let dataRoutes = convertRoutesToDataRoutes(routes, mapRouteProperties, undefined, manifest);
   /**
@@ -3040,7 +3038,8 @@ function createStaticHandler(routes, opts) {
         requestContext
       });
       if (request.signal.aborted) {
-        throwStaticHandlerAbortedError(request, isRouteRequest, future);
+        let method = isRouteRequest ? "queryRoute" : "query";
+        throw new Error(method + "() call aborted: " + request.method + " " + request.url);
       }
     }
     if (isRedirectResult(result)) {
@@ -3148,13 +3147,21 @@ function createStaticHandler(routes, opts) {
         activeDeferreds: null
       };
     }
-    let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, future.v7_relativeSplatPath, {
-      isStaticRequest: true,
-      isRouteRequest,
-      requestContext
-    }))]);
+    let results = await dataStrategy({
+      matches: matchesToLoad.map(m => finesseToAgnosticDataStrategyMatch(m, mapRouteProperties, manifest)),
+      request,
+      type: "loader",
+      defaultStrategy(match) {
+        return callLoaderOrActionImplementation("loader", request, match, matches, 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
     let activeDeferreds = new Map();
@@ -3181,6 +3188,13 @@ function createStaticHandler(routes, opts) {
 ////////////////////////////////////////////////////////////////////////////////
 //#region Helpers
 ////////////////////////////////////////////////////////////////////////////////
+function defaultDataStrategy(_ref3) {
+  let {
+    defaultStrategy,
+    matches
+  } = _ref3;
+  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
@@ -3194,13 +3208,6 @@ function getStaticContextFromError(routes, context, error) {
   });
   return newContext;
 }
-function throwStaticHandlerAbortedError(request, isRouteRequest, future) {
-  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) {
   return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
 }
@@ -3279,8 +3286,8 @@ function normalizeNavigateOptions(normalizeFormMethod, isFetcher, path, opts) {
       }
       let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
       // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
-      Array.from(opts.body.entries()).reduce((acc, _ref3) => {
-        let [name, value] = _ref3;
+      Array.from(opts.body.entries()).reduce((acc, _ref4) => {
+        let [name, value] = _ref4;
         return "" + acc + name + "=" + value + "\n";
       }, "") : String(opts.body);
       return {
@@ -3388,24 +3395,18 @@ function getMatchesToLoad(history, state, matches, submission, location, isIniti
   let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
   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) || cancelledDeferredRoutes.some(id => id === match.route.id)) {
       return true;
@@ -3502,6 +3503,19 @@ function getMatchesToLoad(history, state, matches, submission, location, isIniti
   });
   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, route) {
+  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, currentMatch, match) {
   let isNew =
   // [a] -> [a, b]
@@ -3540,14 +3554,14 @@ function shouldRevalidateLoader(loaderMatch, arg) {
  */
 async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
   if (!route.lazy) {
-    return;
+    return route;
   }
   let lazyRoute = await route.lazy();
   // If the lazy route function was executed and removed by another parallel
   // 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];
   invariant(routeToUpdate, "No route found in manifest");
@@ -3580,8 +3594,42 @@ async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
   Object.assign(routeToUpdate, _extends({}, mapRouteProperties(routeToUpdate), {
     lazy: undefined
   }));
+  return routeToUpdate;
 }
-async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, v7_relativeSplatPath, opts) {
+function createCallLoaderOrAction(dataStrategy) {
+  return async function (type, request, match, matches, manifest, mapRouteProperties, basename, v7_relativeSplatPath, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
+    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, mapRouteProperties, manifest) {
+  let loadRoutePromise;
+  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 _extends({}, match, {
+    route: Object.assign(loadRoutePromise, match.route)
+  });
+}
+async function callLoaderOrActionImplementation(type, request, match, matches, basename, v7_relativeSplatPath, opts) {
   if (opts === void 0) {
     opts = {};
   }
@@ -3612,15 +3660,15 @@ async function callLoaderOrAction(type, request, match, matches, manifest, mapRo
         // route has a boundary that can handle the error
         runHandler(handler).catch(e => {
           handlerError = e;
-        }), loadLazyRouteModule(match.route, mapRouteProperties, manifest)]);
+        }), match.route]);
         if (handlerError) {
           throw handlerError;
         }
         result = values[0];
       } else {
         // Load lazy route module, then run any returned handler
-        await loadLazyRouteModule(match.route, mapRouteProperties, manifest);
-        handler = match.route[type];
+        let route = await match.route;
+        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
@@ -3669,7 +3717,7 @@ async function callLoaderOrAction(type, request, match, matches, manifest, mapRo
       invariant(location, "Redirects returned/thrown from loaders/actions must have a Location header");
       // Support relative routing in internal redirects
       if (!ABSOLUTE_URL_REGEX.test(location)) {
-        location = normalizeTo(new URL(request.url), matches.slice(0, matches.indexOf(match) + 1), basename, true, location, v7_relativeSplatPath);
+        location = normalizeTo(new URL(request.url), matches.slice(0, matches.findIndex(m => m.route.id === match.route.id) + 1), basename, true, location, v7_relativeSplatPath);
       } else if (!opts.isStaticRequest) {
         // Strip off the protocol+origin for same-origin + same-basename absolute
         // redirects. If this is a static request, we can let it go back to the
@@ -3713,11 +3761,7 @@ async function callLoaderOrAction(type, request, match, matches, manifest, mapRo
       // 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();
       }
@@ -4301,5 +4345,5 @@ function persistAppliedTransitions(_window, transitions) {
 }
 //#endregion
 
-export { AbortedDeferredError, Action, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getResolveToMatches as UNSAFE_getResolveToMatches, invariant as UNSAFE_invariant, warning as UNSAFE_warning, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, isDeferredData, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, redirectDocument, resolvePath, resolveTo, stripBasename };
+export { AbortedDeferredError, Action, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, ResultType, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getResolveToMatches as UNSAFE_getResolveToMatches, invariant as UNSAFE_invariant, warning as UNSAFE_warning, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, isDeferredData, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, redirectDocument, resolvePath, resolveTo, stripBasename };
 //# sourceMappingURL=router.js.map