@remix-run/router 0.0.0-experimental-e7e9ce6e → 0.0.0-experimental-91f2bf54

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-e7e9ce6e
+ * @remix-run/router v0.0.0-experimental-91f2bf54
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -94,7 +94,7 @@
       }
 
       let location = createLocation(entries ? getCurrentLocation().pathname : "/", to, state, key);
-      warning$1(location.pathname.charAt(0) === "/", "relative pathnames are not supported in memory history: " + JSON.stringify(to));
+      warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in memory history: " + JSON.stringify(to));
       return location;
     }
 
@@ -285,7 +285,7 @@
     }
 
     function validateHashLocation(location, to) {
-      warning$1(location.pathname.charAt(0) === "/", "relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")");
+      warning(location.pathname.charAt(0) === "/", "relative pathnames are not supported in hash history.push(" + JSON.stringify(to) + ")");
     }
 
     return getUrlBasedHistory(createHashLocation, createHashHref, validateHashLocation, options);
@@ -303,8 +303,7 @@
       throw new Error(message);
     }
   }
-
-  function warning$1(cond, message) {
+  function warning(cond, message) {
     if (!cond) {
       // eslint-disable-next-line no-console
       if (typeof console !== "undefined") console.warn(message);
@@ -567,40 +566,54 @@
     ResultType["error"] = "error";
   })(ResultType || (ResultType = {}));
 
+  const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "index", "children"]);
+  /**
+   * lazy() function to load a route definition, which can add non-matching
+   * related properties to a route
+   */
+
   function isIndexRoute(route) {
     return route.index === true;
   } // Walk the route tree generating unique IDs where necessary so we are working
   // solely with AgnosticDataRouteObject's within the Router
 
 
-  function convertRoutesToDataRoutes(routes, parentPath, allIds) {
+  function convertRoutesToDataRoutes(routes, detectErrorBoundary, parentPath, manifest) {
     if (parentPath === void 0) {
       parentPath = [];
     }
 
-    if (allIds === void 0) {
-      allIds = new Set();
+    if (manifest === void 0) {
+      manifest = {};
     }
 
     return routes.map((route, index) => {
       let treePath = [...parentPath, index];
       let id = typeof route.id === "string" ? route.id : treePath.join("-");
       invariant(route.index !== true || !route.children, "Cannot specify children on an index route");
-      invariant(!allIds.has(id), "Found a route id collision on id \"" + id + "\".  Route " + "id's must be globally unique within Data Router usages");
-      allIds.add(id);
+      invariant(!manifest[id], "Found a route id collision on id \"" + id + "\".  Route " + "id's must be globally unique within Data Router usages");
 
       if (isIndexRoute(route)) {
         let indexRoute = _extends({}, route, {
+          hasErrorBoundary: detectErrorBoundary(route),
           id
         });
 
+        manifest[id] = indexRoute;
         return indexRoute;
       } else {
         let pathOrLayoutRoute = _extends({}, route, {
           id,
-          children: route.children ? convertRoutesToDataRoutes(route.children, treePath, allIds) : undefined
+          hasErrorBoundary: detectErrorBoundary(route),
+          children: undefined
         });
 
+        manifest[id] = pathOrLayoutRoute;
+
+        if (route.children) {
+          pathOrLayoutRoute.children = convertRoutesToDataRoutes(route.children, detectErrorBoundary, treePath, manifest);
+        }
+
         return pathOrLayoutRoute;
       }
     });
@@ -847,45 +860,42 @@
     if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) {
       warning(false, "Route path \"" + path + "\" will be treated as if it were " + ("\"" + path.replace(/\*$/, "/*") + "\" because the `*` character must ") + "always follow a `/` in the pattern. To get rid of this warning, " + ("please change the route path to \"" + path.replace(/\*$/, "/*") + "\"."));
       path = path.replace(/\*$/, "/*");
-    }
+    } // ensure `/` is added at the beginning if the path is absolute
 
-    return path.replace(/^:(\w+)(\??)/g, (_, key, optional) => {
-      let param = params[key];
 
-      if (optional === "?") {
-        return param == null ? "" : param;
-      }
+    const prefix = path.startsWith("/") ? "/" : "";
+    const segments = path.split(/\/+/).map((segment, index, array) => {
+      const isLastSegment = index === array.length - 1; // only apply the splat if it's the last segment
+
+      if (isLastSegment && segment === "*") {
+        const star = "*";
+        const starParam = params[star]; // Apply the splat
 
-      if (param == null) {
-        invariant(false, "Missing \":" + key + "\" param");
+        return starParam;
       }
 
-      return param;
-    }).replace(/\/:(\w+)(\??)/g, (_, key, optional) => {
-      let param = params[key];
+      const keyMatch = segment.match(/^:(\w+)(\??)$/);
 
-      if (optional === "?") {
-        return param == null ? "" : "/" + param;
-      }
+      if (keyMatch) {
+        const [, key, optional] = keyMatch;
+        let param = params[key];
 
-      if (param == null) {
-        invariant(false, "Missing \":" + key + "\" param");
-      }
+        if (optional === "?") {
+          return param == null ? "" : param;
+        }
 
-      return "/" + param;
-    }) // Remove any optional markers from optional static segments
-    .replace(/\?/g, "").replace(/(\/?)\*/, (_, prefix, __, str) => {
-      const star = "*";
+        if (param == null) {
+          invariant(false, "Missing \":" + key + "\" param");
+        }
 
-      if (params[star] == null) {
-        // If no splat was provided, trim the trailing slash _unless_ it's
-        // the entire path
-        return str === "/*" ? "/" : "";
-      } // Apply the splat
+        return param;
+      } // Remove any optional markers from optional static segments
 
 
-      return "" + prefix + params[star];
-    });
+      return segment.replace(/\?$/g, "");
+    }) // Remove empty segments
+    .filter(segment => !!segment);
+    return prefix + segments.join("/");
   }
   /**
    * A PathPattern is used to match on some portion of a URL pathname.
@@ -1013,25 +1023,6 @@
 
     return pathname.slice(startIndex) || "/";
   }
-  /**
-   * @private
-   */
-
-  function warning(cond, message) {
-    if (!cond) {
-      // eslint-disable-next-line no-console
-      if (typeof console !== "undefined") console.warn(message);
-
-      try {
-        // Welcome to debugging @remix-run/router!
-        //
-        // This error is thrown as a convenience so you can more easily
-        // find the source for a warning that appears in the console by
-        // enabling "pause on exceptions" in your JavaScript debugger.
-        throw new Error(message); // eslint-disable-next-line no-empty
-      } catch (e) {}
-    }
-  }
   /**
    * Returns a resolved path object relative to the given pathname.
    *
@@ -1480,7 +1471,9 @@
   };
   const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
   const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
-  const isServer = !isBrowser; //#endregion
+  const isServer = !isBrowser;
+
+  const defaultDetectErrorBoundary = route => Boolean(route.hasErrorBoundary); //#endregion
   ////////////////////////////////////////////////////////////////////////////////
   //#region createRouter
   ////////////////////////////////////////////////////////////////////////////////
@@ -1489,9 +1482,14 @@
    * Create a router and listen to history POP navigations
    */
 
+
   function createRouter(init) {
     invariant(init.routes.length > 0, "You must provide a non-empty routes array to createRouter");
-    let dataRoutes = convertRoutesToDataRoutes(init.routes);
+    let detectErrorBoundary = init.detectErrorBoundary || defaultDetectErrorBoundary; // Routes keyed by ID
+
+    let manifest = {}; // Routes in tree format for matching
+
+    let dataRoutes = convertRoutesToDataRoutes(init.routes, detectErrorBoundary, undefined, manifest);
     let inFlightDataRoutes; // Cleanup function for history
 
     let unlistenHistory = null; // Externally-provided functions to call on all state changes
@@ -1529,7 +1527,10 @@
       };
     }
 
-    let initialized = !initialMatches.some(m => m.route.loader) || init.hydrationData != null;
+    let initialized = // 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,
@@ -1653,12 +1654,35 @@
         }
 
         return startNavigation(historyAction, location);
-      }); // Kick off initial data load if needed.  Use Pop to avoid modifying history
+      });
 
-      if (!state.initialized) {
-        startNavigation(exports.Action.Pop, state.location);
+      if (state.initialized) {
+        return router;
       }
 
+      let lazyMatches = state.matches.filter(m => m.route.lazy);
+
+      if (lazyMatches.length === 0) {
+        // Kick off initial data load if needed.  Use Pop to avoid modifying history
+        startNavigation(exports.Action.Pop, state.location);
+        return router;
+      } // Load lazy modules, then kick off initial data load if needed
+
+
+      let lazyPromises = lazyMatches.map(m => loadLazyRouteModule(m.route, detectErrorBoundary, manifest));
+      Promise.all(lazyPromises).then(() => {
+        let initialized = !state.matches.some(m => m.route.loader) || init.hydrationData != null;
+
+        if (initialized) {
+          // We already have required loaderData so we can just set initialized
+          updateState({
+            initialized: true
+          });
+        } else {
+          // We still need to kick off initial data loads
+          startNavigation(exports.Action.Pop, state.location);
+        }
+      });
       return router;
     } // Clean up a router and it's side effects
 
@@ -1684,6 +1708,16 @@
     function updateState(newState) {
       state = _extends({}, state, newState);
       subscribers.forEach(subscriber => subscriber(state));
+    }
+
+    function completeNavigation(location, newState) {
+      // @ts-expect-error
+      if (typeof document !== "undefined" && document.startViewTransition) {
+        // @ts-expect-error
+        document.startViewTransition(() => completeNavigationForRealz(location, newState));
+      } else {
+        completeNavigationForRealz(location, newState);
+      }
     } // Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
     // and setting state.[historyAction/location/matches] to the new route.
     // - Location is a required param
@@ -1691,7 +1725,7 @@
     // - Can pass any other state in newState
 
 
-    function completeNavigation(location, newState) {
+    function completeNavigationForRealz(location, newState) {
       var _location$state, _location$state2;
 
       // Deduce if we're in a loading/actionReload state:
@@ -2004,7 +2038,7 @@
       let result;
       let actionMatch = getTargetMatch(matches, location);
 
-      if (!actionMatch.route.action) {
+      if (!actionMatch.route.action && !actionMatch.route.lazy) {
         result = {
           type: ResultType.error,
           error: getInternalRouterError(405, {
@@ -2014,7 +2048,7 @@
           })
         };
       } else {
-        result = await callLoaderOrAction("action", request, actionMatch, matches, router.basename);
+        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, detectErrorBoundary, router.basename);
 
         if (request.signal.aborted) {
           return {
@@ -2260,7 +2294,7 @@
       interruptActiveLoads();
       fetchLoadMatches.delete(key);
 
-      if (!match.route.action) {
+      if (!match.route.action && !match.route.lazy) {
         let error = getInternalRouterError(405, {
           method: submission.formMethod,
           pathname: path,
@@ -2288,7 +2322,7 @@
       let abortController = new AbortController();
       let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
       fetchControllers.set(key, abortController);
-      let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, router.basename);
+      let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, detectErrorBoundary, router.basename);
 
       if (fetchRequest.signal.aborted) {
         // We can delete this so long as we weren't aborted by ou our own fetcher
@@ -2459,7 +2493,7 @@
       let abortController = new AbortController();
       let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
       fetchControllers.set(key, abortController);
-      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, router.basename); // Deferred isn't supported for fetcher loads, await everything and treat it
+      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, manifest, detectErrorBoundary, router.basename); // 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
@@ -2628,9 +2662,9 @@
       // 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, router.basename)), ...fetchersToLoad.map(f => {
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, detectErrorBoundary, router.basename)), ...fetchersToLoad.map(f => {
         if (f.matches && f.match) {
-          return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, request.signal), f.match, f.matches, router.basename);
+          return callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, request.signal), f.match, f.matches, manifest, detectErrorBoundary, router.basename);
         } else {
           let error = {
             type: ResultType.error,
@@ -2922,7 +2956,9 @@
   const UNSAFE_DEFERRED_SYMBOL = Symbol("deferred");
   function createStaticHandler(routes, opts) {
     invariant(routes.length > 0, "You must provide a non-empty routes array to createStaticHandler");
-    let dataRoutes = convertRoutesToDataRoutes(routes);
+    let manifest = {};
+    let detectErrorBoundary = (opts == null ? void 0 : opts.detectErrorBoundary) || defaultDetectErrorBoundary;
+    let dataRoutes = convertRoutesToDataRoutes(routes, detectErrorBoundary, undefined, manifest);
     let basename = (opts ? opts.basename : null) || "/";
     /**
      * The query() method is intended for document requests, in which we want to
@@ -3144,7 +3180,7 @@
     async function submit(request, matches, actionMatch, requestContext, isRouteRequest) {
       let result;
 
-      if (!actionMatch.route.action) {
+      if (!actionMatch.route.action && !actionMatch.route.lazy) {
         let error = getInternalRouterError(405, {
           method: request.method,
           pathname: new URL(request.url).pathname,
@@ -3160,7 +3196,7 @@
           error
         };
       } else {
-        result = await callLoaderOrAction("action", request, actionMatch, matches, basename, true, isRouteRequest, requestContext);
+        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, detectErrorBoundary, basename, true, isRouteRequest, requestContext);
 
         if (request.signal.aborted) {
           let method = isRouteRequest ? "queryRoute" : "query";
@@ -3258,7 +3294,7 @@
     async function loadRouteData(request, matches, requestContext, routeMatch, pendingActionError) {
       let isRouteRequest = routeMatch != null; // Short circuit if we have no loaders to run (queryRoute())
 
-      if (isRouteRequest && !(routeMatch != null && routeMatch.route.loader)) {
+      if (isRouteRequest && !(routeMatch != null && routeMatch.route.loader) && !(routeMatch != null && routeMatch.route.lazy)) {
         throw getInternalRouterError(400, {
           method: request.method,
           pathname: new URL(request.url).pathname,
@@ -3267,7 +3303,7 @@
       }
 
       let requestMatches = routeMatch ? [routeMatch] : getLoaderMatchesUntilBoundary(matches, Object.keys(pendingActionError || {})[0]);
-      let matchesToLoad = requestMatches.filter(m => m.route.loader); // Short circuit if we have no loaders to run (query())
+      let matchesToLoad = requestMatches.filter(m => m.route.loader || m.route.lazy); // Short circuit if we have no loaders to run (query())
 
       if (matchesToLoad.length === 0) {
         return {
@@ -3283,7 +3319,7 @@
         };
       }
 
-      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, basename, true, isRouteRequest, requestContext))]);
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, detectErrorBoundary, basename, true, isRouteRequest, requestContext))]);
 
       if (request.signal.aborted) {
         let method = isRouteRequest ? "queryRoute" : "query";
@@ -3424,6 +3460,11 @@
     let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
     let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
     let navigationMatches = boundaryMatches.filter((match, index) => {
+      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 (match.route.loader == null) {
         return false;
       } // Always call the loader on new route instances and pending defer cancellations
@@ -3537,8 +3578,66 @@
 
     return arg.defaultShouldRevalidate;
   }
+  /**
+   * Execute route.lazy() methods to lazily load route modules (loader, action,
+   * shouldRevalidate) and update the routeManifest in place which shares objects
+   * with dataRoutes so those get updated as well.
+   */
+
+
+  async function loadLazyRouteModule(route, detectErrorBoundary, manifest) {
+    if (!route.lazy) {
+      return;
+    }
+
+    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;
+    }
+
+    let routeToUpdate = manifest[route.id];
+    invariant(routeToUpdate, "No route found in manifest"); // Update the route in place.  This should be safe because there's no way
+    // we could yet be sitting on this route as we can't get there without
+    // resolving lazy() first.
+    //
+    // This is different than the HMR "update" use-case where we may actively be
+    // on the route being updated.  The main concern boils down to "does this
+    // mutation affect any ongoing navigations or any current state.matches
+    // values?".  If not, it should be safe to update in place.
+
+    let routeUpdates = {};
+
+    for (let lazyRouteProperty in lazyRoute) {
+      let staticRouteValue = routeToUpdate[lazyRouteProperty];
+      let isPropertyStaticallyDefined = staticRouteValue !== undefined && // This property isn't static since it should always be updated based
+      // on the route updates
+      lazyRouteProperty !== "hasErrorBoundary";
+      warning(!isPropertyStaticallyDefined, "Route \"" + routeToUpdate.id + "\" has a static property \"" + lazyRouteProperty + "\" " + "defined but its lazy function is also returning a value for this property. " + ("The lazy route property \"" + lazyRouteProperty + "\" will be ignored."));
+
+      if (!isPropertyStaticallyDefined && !immutableRouteKeys.has(lazyRouteProperty)) {
+        routeUpdates[lazyRouteProperty] = lazyRoute[lazyRouteProperty];
+      }
+    } // Mutate the route with the provided updates.  Do this first so we pass
+    // the updated version to detectErrorBoundary
+
+
+    Object.assign(routeToUpdate, routeUpdates); // Mutate the `hasErrorBoundary` property on the route based on the route
+    // updates and remove the `lazy` function so we don't resolve the lazy
+    // route again.
+
+    Object.assign(routeToUpdate, {
+      // To keep things framework agnostic, we use the provided
+      // `detectErrorBoundary` function to set the `hasErrorBoundary` route
+      // property since the logic will differ between frameworks.
+      hasErrorBoundary: detectErrorBoundary(_extends({}, routeToUpdate)),
+      lazy: undefined
+    });
+  }
 
-  async function callLoaderOrAction(type, request, match, matches, basename, isStaticRequest, isRouteRequest, requestContext) {
+  async function callLoaderOrAction(type, request, match, matches, manifest, detectErrorBoundary, basename, isStaticRequest, isRouteRequest, requestContext) {
     if (basename === void 0) {
       basename = "/";
     }
@@ -3552,29 +3651,70 @@
     }
 
     let resultType;
-    let result; // Setup a promise we can race against so that abort signals short circuit
+    let result;
+    let onReject;
 
-    let reject;
-    let abortPromise = new Promise((_, r) => reject = r);
-
-    let onReject = () => reject();
+    let runHandler = handler => {
+      // Setup a promise we can race against so that abort signals short circuit
+      let reject;
+      let abortPromise = new Promise((_, r) => reject = r);
 
-    request.signal.addEventListener("abort", onReject);
+      onReject = () => reject();
 
-    try {
-      let handler = match.route[type];
-      invariant(handler, "Could not find the " + type + " to run on the \"" + match.route.id + "\" route");
-      result = await Promise.race([handler({
+      request.signal.addEventListener("abort", onReject);
+      return Promise.race([handler({
         request,
         params: match.params,
         context: requestContext
       }), abortPromise]);
+    };
+
+    try {
+      let handler = match.route[type];
+
+      if (match.route.lazy) {
+        if (handler) {
+          // Run statically defined handler in parallel with lazy()
+          let values = await Promise.all([runHandler(handler), loadLazyRouteModule(match.route, detectErrorBoundary, manifest)]);
+          result = values[0];
+        } else {
+          // Load lazy route module, then run any returned handler
+          await loadLazyRouteModule(match.route, detectErrorBoundary, manifest);
+          handler = match.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
+            // previously-lazy-loaded routes
+            result = await runHandler(handler);
+          } else if (type === "action") {
+            throw getInternalRouterError(405, {
+              method: request.method,
+              pathname: new URL(request.url).pathname,
+              routeId: match.route.id
+            });
+          } else {
+            // lazy() route has no loader to run.  Short circuit here so we don't
+            // hit the invariant below that errors on returning undefined.
+            return {
+              type: ResultType.data,
+              data: undefined
+            };
+          }
+        }
+      } else {
+        invariant(handler, "Could not find the " + type + " to run on the \"" + match.route.id + "\" route");
+        result = await runHandler(handler);
+      }
+
       invariant(result !== undefined, "You defined " + (type === "action" ? "an action" : "a loader") + " for route " + ("\"" + match.route.id + "\" but didn't return anything from your `" + type + "` ") + "function. Please return a value or `null`.");
     } catch (e) {
       resultType = ResultType.error;
       result = e;
     } finally {
-      request.signal.removeEventListener("abort", onReject);
+      if (onReject) {
+        request.signal.removeEventListener("abort", onReject);
+      }
     }
 
     if (isResponse(result)) {
@@ -4101,6 +4241,7 @@
   exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
   exports.UNSAFE_getPathContributingMatches = getPathContributingMatches;
   exports.UNSAFE_invariant = invariant;
+  exports.UNSAFE_warning = warning;
   exports.createBrowserHistory = createBrowserHistory;
   exports.createHashHistory = createHashHistory;
   exports.createMemoryHistory = createMemoryHistory;
@@ -4122,7 +4263,6 @@
   exports.resolvePath = resolvePath;
   exports.resolveTo = resolveTo;
   exports.stripBasename = stripBasename;
-  exports.warning = warning;
 
   Object.defineProperty(exports, '__esModule', { value: true });