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

package/dist/router.umd.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.
  *
@@ -891,7 +891,7 @@
     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;
@@ -981,7 +981,7 @@
         // 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];
@@ -1063,7 +1063,7 @@
     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
@@ -1656,6 +1656,8 @@
     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;
@@ -1717,28 +1719,18 @@
         [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,
@@ -1905,7 +1897,7 @@
       // 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
         });
@@ -2484,10 +2476,9 @@
         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
@@ -2503,7 +2494,7 @@
       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
@@ -2708,10 +2699,9 @@
       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;
       }
@@ -2719,7 +2709,7 @@
       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
@@ -2929,28 +2919,36 @@
         });
       }
     }
-    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
       };
@@ -3261,6 +3259,8 @@
 
   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;
@@ -3277,8 +3277,7 @@
     }
     // 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);
 
@@ -3501,7 +3500,8 @@
           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)) {
@@ -3613,13 +3613,21 @@
           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
@@ -3651,6 +3659,14 @@
   //#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
@@ -3664,13 +3680,6 @@
     });
     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);
   }
@@ -3755,8 +3764,8 @@
         }
         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 {
@@ -3867,24 +3876,18 @@
     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)) {
@@ -3986,6 +3989,20 @@
     });
     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]
@@ -4027,7 +4044,7 @@
    */
   async function loadLazyRouteModule(route, mapRouteProperties, manifest) {
     if (!route.lazy) {
-      return;
+      return route;
     }
     let lazyRoute = await route.lazy();
 
@@ -4035,7 +4052,7 @@
     // 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");
@@ -4071,8 +4088,42 @@
     Object.assign(routeToUpdate, _extends({}, mapRouteProperties(routeToUpdate), {
       lazy: undefined
     }));
+    return routeToUpdate;
+  }
+  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;
+    };
   }
-  async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, v7_relativeSplatPath, opts) {
+  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 = {};
     }
@@ -4103,15 +4154,15 @@
           // 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
@@ -4162,7 +4213,7 @@
 
         // 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
@@ -4208,11 +4259,7 @@
         // 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();
         }
@@ -4814,6 +4861,7 @@
   exports.IDLE_BLOCKER = IDLE_BLOCKER;
   exports.IDLE_FETCHER = IDLE_FETCHER;
   exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
+  exports.ResultType = ResultType;
   exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;
   exports.UNSAFE_DeferredData = DeferredData;
   exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;