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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `@remix-run/router`
 
+## 1.11.0-pre.1
+
+### Minor Changes
+
+- When `v7_fetcherPersist` is enabled, the router now performs ref-counting on fetcher keys via `getFetcher`/`deleteFetcher` so it knows when a given fetcher is totally unmounted from the UI ([#10977](https://github.com/remix-run/react-router/pull/10977))
+
+  - Once a fetcher has been totally unmounted, we can ignore post-processing of a persisted fetcher result such as a redirect or an error
+  - The router will also pass a new `deletedFetchers` array to the subscriber callbacks so that the UI layer can remove associated fetcher data
+
 ## 1.11.0-pre.0
 
 ### Minor Changes

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.11.0-pre.0
+ * @remix-run/router v1.11.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1783,6 +1783,9 @@ function createRouter(init) {
   // 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();
@@ -1899,27 +1902,35 @@ function createRouter(init) {
   // Update our state and notify the calling context of the change
   function updateState(newState, viewTransitionOpts) {
     state = _extends({}, state, newState);
-    subscribers.forEach(subscriber => subscriber(state, {
-      unstable_viewTransitionOpts: viewTransitionOpts
-    }));
 
-    // Remove idle fetchers from state since we only care about in-flight fetchers.
+    // 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)) {
-            // If the fetcher has unmounted and called router.deleteFetcher(),
-            // we can totally delete the fetcher
-            deleteFetcher(key);
+            // Unmounted from the UI and can be totally removed
+            deletedFetchersKeys.push(key);
           } else {
-            // Otherwise, it must still be mounted in the UI so we just remove
-            // it from state now that we've handed off the data to the React
-            // layer.  Things such as fetchLoadMatches remain for revalidation.
-            state.fetchers.delete(key);
+            // 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
@@ -2472,6 +2483,14 @@ function createRouter(init) {
     } : {});
   }
   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;
   }
 
@@ -2545,13 +2564,20 @@ function createRouter(init) {
     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) {
@@ -2721,6 +2747,13 @@ function createRouter(init) {
     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)) {
@@ -2742,17 +2775,7 @@ function createRouter(init) {
 
     // 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");
@@ -2929,7 +2952,13 @@ function createRouter(init) {
   }
   function deleteFetcherAndUpdateState(key) {
     if (future.v7_fetcherPersist) {
-      deletedFetchers.add(key);
+      let count = (activeFetchers.get(key) || 0) - 1;
+      if (count <= 0) {
+        activeFetchers.delete(key);
+        deletedFetchers.add(key);
+      } else {
+        activeFetchers.set(key, count);
+      }
     } else {
       deleteFetcher(key);
     }