@remix-run/router 1.10.0 → 1.11.0-pre.1

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.10.0
+ * @remix-run/router v1.11.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1019,20 +1019,29 @@
         end: true
       };
     }
-    let [matcher, paramNames] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
+    let [matcher, compiledParams] = compilePath(pattern.path, pattern.caseSensitive, pattern.end);
     let match = pathname.match(matcher);
     if (!match) return null;
     let matchedPathname = match[0];
     let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
     let captureGroups = match.slice(1);
-    let params = paramNames.reduce((memo, paramName, index) => {
+    let params = compiledParams.reduce((memo, _ref, index) => {
+      let {
+        paramName,
+        isOptional
+      } = _ref;
       // We need to compute the pathnameBase here using the raw splat value
       // instead of using params["*"] later because it will be decoded then
       if (paramName === "*") {
         let splatValue = captureGroups[index] || "";
         pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
       }
-      memo[paramName] = safelyDecodeURIComponent(captureGroups[index] || "", paramName);
+      const value = captureGroups[index];
+      if (isOptional && !value) {
+        memo[paramName] = undefined;
+      } else {
+        memo[paramName] = safelyDecodeURIComponent(value || "", paramName);
+      }
       return memo;
     }, {});
     return {
@@ -1050,16 +1059,21 @@
       end = true;
     }
     warning(path === "*" || !path.endsWith("*") || path.endsWith("/*"), "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(/\*$/, "/*") + "\"."));
-    let paramNames = [];
+    let params = [];
     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) => {
-      paramNames.push(paramName);
-      return "/([^\\/]+)";
+    .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
+    .replace(/\/:(\w+)(\?)?/g, (_, paramName, isOptional) => {
+      params.push({
+        paramName,
+        isOptional: isOptional != null
+      });
+      return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
     });
     if (path.endsWith("*")) {
-      paramNames.push("*");
+      params.push({
+        paramName: "*"
+      });
       regexpSource += path === "*" || path === "/*" ? "(.*)$" // Already matched the initial /, just match the rest
       : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"]
     } else if (end) {
@@ -1076,7 +1090,7 @@
       regexpSource += "(?:(?=\\/|$))";
     } else ;
     let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
-    return [matcher, paramNames];
+    return [matcher, params];
   }
   function safelyDecodeURI(value) {
     try {
@@ -1304,8 +1318,8 @@
       let onAbort = () => reject(new AbortedDeferredError("Deferred data aborted"));
       this.unlistenAbortSignal = () => this.controller.signal.removeEventListener("abort", onAbort);
       this.controller.signal.addEventListener("abort", onAbort);
-      this.data = Object.entries(data).reduce((acc, _ref) => {
-        let [key, value] = _ref;
+      this.data = Object.entries(data).reduce((acc, _ref2) => {
+        let [key, value] = _ref2;
         return Object.assign(acc, {
           [key]: this.trackPromise(key, value)
         });
@@ -1405,8 +1419,8 @@
     }
     get unwrappedData() {
       invariant(this.data !== null && this.done, "Can only unwrap data on initialized and settled deferreds");
-      return Object.entries(this.data).reduce((acc, _ref2) => {
-        let [key, value] = _ref2;
+      return Object.entries(this.data).reduce((acc, _ref3) => {
+        let [key, value] = _ref3;
         return Object.assign(acc, {
           [key]: unwrapTrackedPromise(value)
         });
@@ -1651,6 +1665,7 @@
     let basename = init.basename || "/";
     // Config driven behavior flags
     let future = _extends({
+      v7_fetcherPersist: false,
       v7_normalizeFormMethod: false,
       v7_prependBasename: false
     }, init.future);
@@ -1770,6 +1785,13 @@
     // Most recent href/match for fetcher.load calls for fetchers
     let fetchLoadMatches = new Map();
 
+    // Ref-count mounted fetchers so we know when it's ok to clean them up
+    let activeFetchers = new Map();
+
+    // Fetchers that have requested a delete when using v7_fetcherPersist,
+    // they'll be officially removed after they return to idle
+    let deletedFetchers = new Set();
+
     // Store DeferredData instances for active route matches.  When a
     // route loader returns defer() we stick one in here.  Then, when a nested
     // promise resolves we update loaderData.  If a new navigation starts we
@@ -1882,9 +1904,35 @@
     // Update our state and notify the calling context of the change
     function updateState(newState, viewTransitionOpts) {
       state = _extends({}, state, newState);
+
+      // Prep fetcher cleanup so we can tell the UI which fetcher data entries
+      // can be removed
+      let completedFetchers = [];
+      let deletedFetchersKeys = [];
+      if (future.v7_fetcherPersist) {
+        state.fetchers.forEach((fetcher, key) => {
+          if (fetcher.state === "idle") {
+            if (deletedFetchers.has(key)) {
+              // Unmounted from the UI and can be totally removed
+              deletedFetchersKeys.push(key);
+            } else {
+              // Returned to idle but still mounted in the UI, so semi-remains for
+              // revalidations and such
+              completedFetchers.push(key);
+            }
+          }
+        });
+      }
       subscribers.forEach(subscriber => subscriber(state, {
+        deletedFetchers: deletedFetchersKeys,
         unstable_viewTransitionOpts: viewTransitionOpts
       }));
+
+      // Remove idle fetchers from state since we only care about in-flight fetchers.
+      if (future.v7_fetcherPersist) {
+        completedFetchers.forEach(key => state.fetchers.delete(key));
+        deletedFetchersKeys.forEach(key => deleteFetcher(key));
+      }
     }
 
     // Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
@@ -2437,6 +2485,14 @@
       } : {});
     }
     function getFetcher(key) {
+      if (future.v7_fetcherPersist) {
+        activeFetchers.set(key, (activeFetchers.get(key) || 0) + 1);
+        // If this fetcher was previously marked for deletion, unmark it since we
+        // have a new instance
+        if (deletedFetchers.has(key)) {
+          deletedFetchers.delete(key);
+        }
+      }
       return state.fetchers.get(key) || IDLE_FETCHER;
     }
 
@@ -2510,13 +2566,20 @@
       let originatingLoadId = incrementingLoadId;
       let actionResult = await callLoaderOrAction("action", fetchRequest, match, requestMatches, manifest, mapRouteProperties, basename);
       if (fetchRequest.signal.aborted) {
-        // We can delete this so long as we weren't aborted by ou our own fetcher
+        // We can delete this so long as we weren't aborted by our own fetcher
         // re-submit which would have put _new_ controller is in fetchControllers
         if (fetchControllers.get(key) === abortController) {
           fetchControllers.delete(key);
         }
         return;
       }
+      if (deletedFetchers.has(key)) {
+        state.fetchers.set(key, getDoneFetcher(undefined));
+        updateState({
+          fetchers: new Map(state.fetchers)
+        });
+        return;
+      }
       if (isRedirectResult(actionResult)) {
         fetchControllers.delete(key);
         if (pendingNavigationLoadId > originatingLoadId) {
@@ -2626,7 +2689,7 @@
         let doneFetcher = getDoneFetcher(actionResult.data);
         state.fetchers.set(key, doneFetcher);
       }
-      let didAbortFetchLoads = abortStaleFetchLoads(loadId);
+      abortStaleFetchLoads(loadId);
 
       // If we are currently in a navigation loading state and this fetcher is
       // more recent than the navigation, we want the newer data so abort the
@@ -2644,12 +2707,11 @@
         // otherwise just update with the fetcher data, preserving any existing
         // loaderData for loaders that did not need to reload.  We have to
         // manually merge here since we aren't going through completeNavigation
-        updateState(_extends({
+        updateState({
           errors,
-          loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors)
-        }, didAbortFetchLoads || revalidatingFetchers.length > 0 ? {
+          loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
           fetchers: new Map(state.fetchers)
-        } : {}));
+        });
         isRevalidationRequired = false;
       }
     }
@@ -2687,6 +2749,13 @@
       if (fetchRequest.signal.aborted) {
         return;
       }
+      if (deletedFetchers.has(key)) {
+        state.fetchers.set(key, getDoneFetcher(undefined));
+        updateState({
+          fetchers: new Map(state.fetchers)
+        });
+        return;
+      }
 
       // If the loader threw a redirect Response, start a new REPLACE navigation
       if (isRedirectResult(result)) {
@@ -2708,17 +2777,7 @@
 
       // Process any non-redirect errors thrown
       if (isErrorResult(result)) {
-        let boundaryMatch = findNearestBoundary(state.matches, routeId);
-        state.fetchers.delete(key);
-        // TODO: In remix, this would reset to IDLE_NAVIGATION if it was a catch -
-        // do we need to behave any differently with our non-redirect errors?
-        // What if it was a non-redirect Response?
-        updateState({
-          fetchers: new Map(state.fetchers),
-          errors: {
-            [boundaryMatch.route.id]: result.error
-          }
-        });
+        setFetcherError(key, routeId, result.error);
         return;
       }
       invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
@@ -2890,8 +2949,25 @@
       fetchLoadMatches.delete(key);
       fetchReloadIds.delete(key);
       fetchRedirectIds.delete(key);
+      deletedFetchers.delete(key);
       state.fetchers.delete(key);
     }
+    function deleteFetcherAndUpdateState(key) {
+      if (future.v7_fetcherPersist) {
+        let count = (activeFetchers.get(key) || 0) - 1;
+        if (count <= 0) {
+          activeFetchers.delete(key);
+          deletedFetchers.add(key);
+        } else {
+          activeFetchers.set(key, count);
+        }
+      } else {
+        deleteFetcher(key);
+      }
+      updateState({
+        fetchers: new Map(state.fetchers)
+      });
+    }
     function abortFetcher(key) {
       let controller = fetchControllers.get(key);
       invariant(controller, "Expected fetch controller: " + key);
@@ -3086,7 +3162,7 @@
       createHref: to => init.history.createHref(to),
       encodeLocation: to => init.history.encodeLocation(to),
       getFetcher,
-      deleteFetcher,
+      deleteFetcher: deleteFetcherAndUpdateState,
       dispose,
       getBlocker,
       deleteBlocker,