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

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.2.1
+ * @remix-run/router v1.3.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -98,6 +98,10 @@
       return location;
     }
 
+    function createHref(to) {
+      return typeof to === "string" ? to : createPath(to);
+    }
+
     let history = {
       get index() {
         return index;
@@ -111,8 +115,10 @@
         return getCurrentLocation();
       },
 
-      createHref(to) {
-        return typeof to === "string" ? to : createPath(to);
+      createHref,
+
+      createURL(to) {
+        return new URL(createHref(to), "http://localhost");
       },
 
       encodeLocation(to) {
@@ -391,15 +397,6 @@
 
     return parsedPath;
   }
-  function createClientSideURL(location) {
-    // window.location.origin is "null" (the literal string value) in Firefox
-    // under certain conditions, notably when serving from a local HTML file
-    // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
-    let base = typeof window !== "undefined" && typeof window.location !== "undefined" && window.location.origin !== "null" ? window.location.origin : window.location.href;
-    let href = typeof location === "string" ? location : createPath(location);
-    invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
-    return new URL(href, base);
-  }
 
   function getUrlBasedHistory(getLocation, createHref, validateLocation, options) {
     if (options === void 0) {
@@ -464,6 +461,16 @@
       }
     }
 
+    function createURL(to) {
+      // window.location.origin is "null" (the literal string value) in Firefox
+      // under certain conditions, notably when serving from a local HTML file
+      // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
+      let base = window.location.origin !== "null" ? window.location.origin : window.location.href;
+      let href = typeof to === "string" ? to : createPath(to);
+      invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
+      return new URL(href, base);
+    }
+
     let history = {
       get action() {
         return action;
@@ -490,9 +497,11 @@
         return createHref(window, to);
       },
 
+      createURL,
+
       encodeLocation(to) {
         // Encode a Location the same way window.location would
-        let url = createClientSideURL(typeof to === "string" ? to : createPath(to));
+        let url = createURL(to);
         return {
           pathname: url.pathname,
           search: url.search,
@@ -809,13 +818,32 @@
       path = path.replace(/\*$/, "/*");
     }
 
-    return path.replace(/^:(\w+)/g, (_, key) => {
-      invariant(params[key] != null, "Missing \":" + key + "\" param");
-      return params[key];
-    }).replace(/\/:(\w+)/g, (_, key) => {
-      invariant(params[key] != null, "Missing \":" + key + "\" param");
-      return "/" + params[key];
-    }).replace(/(\/?)\*/, (_, prefix, __, str) => {
+    return path.replace(/^:(\w+)(\??)/g, (_, key, optional) => {
+      let param = params[key];
+
+      if (optional === "?") {
+        return param == null ? "" : param;
+      }
+
+      if (param == null) {
+        invariant(false, "Missing \":" + key + "\" param");
+      }
+
+      return param;
+    }).replace(/\/:(\w+)(\??)/g, (_, key, optional) => {
+      let param = params[key];
+
+      if (optional === "?") {
+        return param == null ? "" : "/" + param;
+      }
+
+      if (param == null) {
+        invariant(false, "Missing \":" + key + "\" param");
+      }
+
+      return "/" + param;
+    }) // Remove any optional markers from optional static segments
+    .replace(/\?/g, "").replace(/(\/?)\*/, (_, prefix, __, str) => {
       const star = "*";
 
       if (params[star] == null) {
@@ -1162,9 +1190,10 @@
   };
   class AbortedDeferredError extends Error {}
   class DeferredData {
-    constructor(data) {
-      this.pendingKeys = new Set();
-      this.subscriber = undefined;
+    constructor(data, responseInit) {
+      this.pendingKeysSet = new Set();
+      this.subscribers = new Set();
+      this.deferredKeys = [];
       invariant(data && typeof data === "object" && !Array.isArray(data), "defer() only accepts plain objects"); // Set up an AbortController + Promise we can race against to exit early
       // cancellation
 
@@ -1183,6 +1212,7 @@
           [key]: this.trackPromise(key, value)
         });
       }, {});
+      this.init = responseInit;
     }
 
     trackPromise(key, value) {
@@ -1190,7 +1220,8 @@
         return value;
       }
 
-      this.pendingKeys.add(key); // We store a little wrapper promise that will be extended with
+      this.deferredKeys.push(key);
+      this.pendingKeysSet.add(key); // We store a little wrapper promise that will be extended with
       // _data/_error props upon resolve/reject
 
       let promise = Promise.race([value, this.abortPromise]).then(data => this.onSettle(promise, key, null, data), error => this.onSettle(promise, key, error)); // Register rejection listeners to avoid uncaught promise rejections on
@@ -1212,39 +1243,41 @@
         return Promise.reject(error);
       }
 
-      this.pendingKeys.delete(key);
+      this.pendingKeysSet.delete(key);
 
       if (this.done) {
         // Nothing left to abort!
         this.unlistenAbortSignal();
       }
 
-      const subscriber = this.subscriber;
-
       if (error) {
         Object.defineProperty(promise, "_error", {
           get: () => error
         });
-        subscriber && subscriber(false);
+        this.emit(false, key);
         return Promise.reject(error);
       }
 
       Object.defineProperty(promise, "_data", {
         get: () => data
       });
-      subscriber && subscriber(false);
+      this.emit(false, key);
       return data;
     }
 
+    emit(aborted, settledKey) {
+      this.subscribers.forEach(subscriber => subscriber(aborted, settledKey));
+    }
+
     subscribe(fn) {
-      this.subscriber = fn;
+      this.subscribers.add(fn);
+      return () => this.subscribers.delete(fn);
     }
 
     cancel() {
       this.controller.abort();
-      this.pendingKeys.forEach((v, k) => this.pendingKeys.delete(k));
-      let subscriber = this.subscriber;
-      subscriber && subscriber(true);
+      this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k));
+      this.emit(true);
     }
 
     async resolveData(signal) {
@@ -1269,7 +1302,7 @@
     }
 
     get done() {
-      return this.pendingKeys.size === 0;
+      return this.pendingKeysSet.size === 0;
     }
 
     get unwrappedData() {
@@ -1282,6 +1315,10 @@
       }, {});
     }
 
+    get pendingKeys() {
+      return Array.from(this.pendingKeysSet);
+    }
+
   }
 
   function isTrackedPromise(value) {
@@ -1300,9 +1337,16 @@
     return value._data;
   }
 
-  function defer(data) {
-    return new DeferredData(data);
-  }
+  const defer = function defer(data, init) {
+    if (init === void 0) {
+      init = {};
+    }
+
+    let responseInit = typeof init === "number" ? {
+      status: init
+    } : init;
+    return new DeferredData(data, responseInit);
+  };
 
   /**
    * A redirect response. Sets the status code and the `Location` header.
@@ -1728,7 +1772,7 @@
 
 
       pendingNavigationController = new AbortController();
-      let request = createClientSideRequest(location, pendingNavigationController.signal, opts && opts.submission);
+      let request = createClientSideRequest(init.history, location, pendingNavigationController.signal, opts && opts.submission);
       let pendingActionData;
       let pendingError;
 
@@ -1869,7 +1913,9 @@
       }
 
       if (isDeferredResult(result)) {
-        throw new Error("defer() is not supported in actions");
+        throw getInternalRouterError(400, {
+          type: "defer-action"
+        });
       }
 
       return {
@@ -1906,7 +1952,7 @@
         formData: loadingNavigation.formData,
         formEncType: loadingNavigation.formEncType
       } : undefined;
-      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, pendingActionData, pendingError, fetchLoadMatches); // Cancel pending deferreds for no-longer-matched routes or routes we're
+      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, pendingActionData, pendingError, fetchLoadMatches); // Cancel pending deferreds for no-longer-matched routes or routes we're
       // about to reload.  Note that if this is an action reload we would have
       // already cancelled all pending deferreds so this would be a no-op
 
@@ -2088,7 +2134,7 @@
       }); // Call the action for the fetcher
 
       let abortController = new AbortController();
-      let fetchRequest = createClientSideRequest(path, abortController.signal, submission);
+      let fetchRequest = createClientSideRequest(init.history, path, abortController.signal, submission);
       fetchControllers.set(key, abortController);
       let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, router.basename);
 
@@ -2129,13 +2175,15 @@
       }
 
       if (isDeferredResult(actionResult)) {
-        invariant(false, "defer() is not supported in actions");
+        throw getInternalRouterError(400, {
+          type: "defer-action"
+        });
       } // Start the data load for current matches, or the next location if we're
       // in the middle of a navigation
 
 
       let nextLocation = state.navigation.location || state.location;
-      let revalidationRequest = createClientSideRequest(nextLocation, abortController.signal);
+      let revalidationRequest = createClientSideRequest(init.history, nextLocation, abortController.signal);
       let matches = state.navigation.state !== "idle" ? matchRoutes(dataRoutes, state.navigation.location, init.basename) : state.matches;
       invariant(matches, "Didn't find any matches after fetcher action");
       let loadId = ++incrementingLoadId;
@@ -2149,7 +2197,7 @@
       });
 
       state.fetchers.set(key, loadFetcher);
-      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, {
+      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, {
         [match.route.id]: actionResult.data
       }, undefined, // No need to send through errors since we short circuit above
       fetchLoadMatches); // Put all revalidating fetchers into the loading state, except for the
@@ -2262,9 +2310,9 @@
       }); // Call the loader for this fetcher route match
 
       let abortController = new AbortController();
-      let fetchRequest = createClientSideRequest(path, abortController.signal);
+      let fetchRequest = createClientSideRequest(init.history, path, abortController.signal);
       fetchControllers.set(key, abortController);
-      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, router.basename); // Deferred isn't supported or fetcher loads, await everything and treat it
+      let result = await callLoaderOrAction("loader", fetchRequest, match, matches, 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
@@ -2364,7 +2412,7 @@
       invariant(redirectLocation, "Expected a location on the redirect navigation"); // Check if this an external redirect that goes to a new origin
 
       if (typeof ((_window = window) == null ? void 0 : _window.location) !== "undefined") {
-        let newOrigin = createClientSideURL(redirect.location).origin;
+        let newOrigin = init.history.createURL(redirect.location).origin;
 
         if (window.location.origin !== newOrigin) {
           if (replace) {
@@ -2430,7 +2478,7 @@
       // accordingly
       let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, router.basename)), ...fetchersToLoad.map(_ref8 => {
         let [, href, match, fetchMatches] = _ref8;
-        return callLoaderOrAction("loader", createClientSideRequest(href, request.signal), match, fetchMatches, router.basename);
+        return callLoaderOrAction("loader", createClientSideRequest(init.history, href, request.signal), match, fetchMatches, router.basename);
       })]);
       let loaderResults = results.slice(0, matchesToLoad.length);
       let fetcherResults = results.slice(matchesToLoad.length);
@@ -2639,6 +2687,7 @@
   //#region createStaticHandler
   ////////////////////////////////////////////////////////////////////////////////
 
+  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);
@@ -2691,7 +2740,8 @@
           },
           statusCode: error.status,
           loaderHeaders: {},
-          actionHeaders: {}
+          actionHeaders: {},
+          activeDeferreds: null
         };
       } else if (!matches) {
         let error = getInternalRouterError(404, {
@@ -2712,7 +2762,8 @@
           },
           statusCode: error.status,
           loaderHeaders: {},
-          actionHeaders: {}
+          actionHeaders: {},
+          activeDeferreds: null
         };
       }
 
@@ -2803,8 +2854,23 @@
       } // Pick off the right state value to return
 
 
-      let routeData = [result.actionData, result.loaderData].find(v => v);
-      return Object.values(routeData || {})[0];
+      if (result.actionData) {
+        return Object.values(result.actionData)[0];
+      }
+
+      if (result.loaderData) {
+        var _result$activeDeferre;
+
+        let data = Object.values(result.loaderData)[0];
+
+        if ((_result$activeDeferre = result.activeDeferreds) != null && _result$activeDeferre[match.route.id]) {
+          data[UNSAFE_DEFERRED_SYMBOL] = result.activeDeferreds[match.route.id];
+        }
+
+        return data;
+      }
+
+      return undefined;
     }
 
     async function queryImpl(request, location, matches, requestContext, routeMatch) {
@@ -2884,7 +2950,18 @@
       }
 
       if (isDeferredResult(result)) {
-        throw new Error("defer() is not supported in actions");
+        let error = getInternalRouterError(400, {
+          type: "defer-action"
+        });
+
+        if (isRouteRequest) {
+          throw error;
+        }
+
+        result = {
+          type: ResultType.error,
+          error
+        };
       }
 
       if (isRouteRequest) {
@@ -2905,7 +2982,8 @@
           // return the raw Response or value
           statusCode: 200,
           loaderHeaders: {},
-          actionHeaders: {}
+          actionHeaders: {},
+          activeDeferreds: null
         };
       }
 
@@ -2968,7 +3046,8 @@
           }), {}),
           errors: pendingActionError || null,
           statusCode: 200,
-          loaderHeaders: {}
+          loaderHeaders: {},
+          activeDeferreds: null
         };
       }
 
@@ -2977,27 +3056,21 @@
       if (request.signal.aborted) {
         let method = isRouteRequest ? "queryRoute" : "query";
         throw new Error(method + "() call aborted");
-      }
+      } // Process and commit output from loaders
 
-      let executedLoaders = new Set();
-      results.forEach((result, i) => {
-        executedLoaders.add(matchesToLoad[i].route.id); // Can't do anything with these without the Remix side of things, so just
-        // cancel them for now
 
-        if (isDeferredResult(result)) {
-          result.deferredData.cancel();
-        }
-      }); // Process and commit output from loaders
-
-      let context = processRouteLoaderData(matches, matchesToLoad, results, pendingActionError); // Add a null for any non-loader matches for proper revalidation on the client
+      let activeDeferreds = new Map();
+      let context = processRouteLoaderData(matches, matchesToLoad, results, pendingActionError, activeDeferreds); // Add a null for any non-loader matches for proper revalidation on the client
 
+      let executedLoaders = new Set(matchesToLoad.map(match => match.route.id));
       matches.forEach(match => {
         if (!executedLoaders.has(match.route.id)) {
           context.loaderData[match.route.id] = null;
         }
       });
       return _extends({}, context, {
-        matches
+        matches,
+        activeDeferreds: activeDeferreds.size > 0 ? Object.fromEntries(activeDeferreds.entries()) : null
       });
     }
 
@@ -3116,13 +3189,13 @@
     return boundaryMatches;
   }
 
-  function getMatchesToLoad(state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, pendingActionData, pendingError, fetchLoadMatches) {
+  function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, pendingActionData, pendingError, fetchLoadMatches) {
     let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined; // Pick navigation matches that are net-new or qualify for revalidation
 
     let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
     let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
     let navigationMatches = boundaryMatches.filter((match, index) => match.route.loader != null && (isNewLoader(state.loaderData, state.matches[index], match) || // If this route had a pending deferred cancelled it must be revalidated
-    cancelledDeferredRoutes.some(id => id === match.route.id) || shouldRevalidateLoader(state.location, state.matches[index], submission, location, match, isRevalidationRequired, actionResult))); // Pick fetcher.loads that need to be revalidated
+    cancelledDeferredRoutes.some(id => id === match.route.id) || shouldRevalidateLoader(history, state.location, state.matches[index], submission, location, match, isRevalidationRequired, actionResult))); // Pick fetcher.loads that need to be revalidated
 
     let revalidatingFetchers = [];
     fetchLoadMatches && fetchLoadMatches.forEach((_ref10, key) => {
@@ -3132,7 +3205,7 @@
       if (cancelledFetcherLoads.includes(key)) {
         revalidatingFetchers.push([key, href, match, fetchMatches]);
       } else if (isRevalidationRequired) {
-        let shouldRevalidate = shouldRevalidateLoader(href, match, submission, href, match, isRevalidationRequired, actionResult);
+        let shouldRevalidate = shouldRevalidateLoader(history, href, match, submission, href, match, isRevalidationRequired, actionResult);
 
         if (shouldRevalidate) {
           revalidatingFetchers.push([key, href, match, fetchMatches]);
@@ -3162,10 +3235,10 @@
     );
   }
 
-  function shouldRevalidateLoader(currentLocation, currentMatch, submission, location, match, isRevalidationRequired, actionResult) {
-    let currentUrl = createClientSideURL(currentLocation);
+  function shouldRevalidateLoader(history, currentLocation, currentMatch, submission, location, match, isRevalidationRequired, actionResult) {
+    let currentUrl = history.createURL(currentLocation);
     let currentParams = currentMatch.params;
-    let nextUrl = createClientSideURL(location);
+    let nextUrl = history.createURL(location);
     let nextParams = match.params; // This is the default implementation as to when we revalidate.  If the route
     // provides it's own implementation, then we give them full control but
     // provide this value so they can leverage it if needed after they check
@@ -3242,7 +3315,7 @@
       if (redirectStatusCodes.has(status)) {
         let location = result.headers.get("Location");
         invariant(location, "Redirects returned/thrown from loaders/actions must have a Location header");
-        let isAbsolute = /^[a-z+]+:\/\//i.test(location) || location.startsWith("//"); // Support relative routing in internal redirects
+        let isAbsolute = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(location); // Support relative routing in internal redirects
 
         if (!isAbsolute) {
           let activeMatches = matches.slice(0, matches.indexOf(match) + 1);
@@ -3335,8 +3408,8 @@
   // Request instance from the static handler (query/queryRoute)
 
 
-  function createClientSideRequest(location, signal, submission) {
-    let url = createClientSideURL(stripHashFromPath(location)).toString();
+  function createClientSideRequest(history, location, signal, submission) {
+    let url = history.createURL(stripHashFromPath(location)).toString();
     let init = {
       signal
     };
@@ -3409,13 +3482,16 @@
         if (result.headers) {
           loaderHeaders[id] = result.headers;
         }
-      } else if (isDeferredResult(result)) {
-        activeDeferreds && activeDeferreds.set(id, result.deferredData);
-        loaderData[id] = result.deferredData.data; // TODO: Add statusCode/headers once we wire up streaming in Remix
       } else {
-        loaderData[id] = result.data; // Error status codes always override success status codes, but if all
+        if (isDeferredResult(result)) {
+          activeDeferreds.set(id, result.deferredData);
+          loaderData[id] = result.deferredData.data;
+        } else {
+          loaderData[id] = result.data;
+        } // Error status codes always override success status codes, but if all
         // loaders are successful we take the deepest status code.
 
+
         if (result.statusCode != null && result.statusCode !== 200 && !foundError) {
           statusCode = result.statusCode;
         }
@@ -3465,11 +3541,11 @@
       } else if (isRedirectResult(result)) {
         // Should never get here, redirects should get processed above, but we
         // keep this to type narrow to a success result in the else
-        throw new Error("Unhandled fetcher revalidation redirect");
+        invariant(false, "Unhandled fetcher revalidation redirect");
       } else if (isDeferredResult(result)) {
         // Should never get here, deferred data should be awaited for fetchers
         // in resolveDeferredResults
-        throw new Error("Unhandled fetcher deferred data");
+        invariant(false, "Unhandled fetcher deferred data");
       } else {
         let doneFetcher = {
           state: "idle",
@@ -3541,7 +3617,8 @@
     let {
       pathname,
       routeId,
-      method
+      method,
+      type
     } = _temp4 === void 0 ? {} : _temp4;
     let statusText = "Unknown Server Error";
     let errorMessage = "Unknown @remix-run/router error";
@@ -3551,6 +3628,8 @@
 
       if (method && pathname && routeId) {
         errorMessage = "You made a " + method + " request to \"" + pathname + "\" but " + ("did not provide a `loader` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
+      } else if (type === "defer-action") {
+        errorMessage = "defer() is not supported in actions";
       } else {
         errorMessage = "Cannot submit binary form data using GET";
       }
@@ -3724,6 +3803,8 @@
   exports.ErrorResponse = ErrorResponse;
   exports.IDLE_FETCHER = IDLE_FETCHER;
   exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
+  exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;
+  exports.UNSAFE_DeferredData = DeferredData;
   exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
   exports.UNSAFE_getPathContributingMatches = getPathContributingMatches;
   exports.createBrowserHistory = createBrowserHistory;