@remix-run/router 0.0.0-experimental-a077dc2d → 0.0.0-experimental-e192105b

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-a077dc2d
+ * @remix-run/router v0.0.0-experimental-e192105b
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1741,6 +1741,9 @@
     // Should the current navigation enable document.startViewTransition?
     let pendingViewTransitionEnabled = false;
 
+    // Should the current navigation use flushSync for state updates?
+    let pendingFlushSync = false;
+
     // Store applied view transitions so we can apply them on POP
     let appliedViewTransitions = new Map();
 
@@ -1785,6 +1788,9 @@
     // 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();
@@ -1851,6 +1857,8 @@
               blockers.set(blockerKey, IDLE_BLOCKER);
               updateState({
                 blockers
+              }, {
+                flushSync: false
               });
             }
           });
@@ -1899,29 +1907,42 @@
     }
 
     // Update our state and notify the calling context of the change
-    function updateState(newState, viewTransitionOpts) {
+    function updateState(newState, opts) {
       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);
             }
           }
         });
       }
+
+      // Iterate over a local copy so that if flushSync is used and we end up
+      // removing and adding a new subscriber due to the useCallback dependencies,
+      // we don't get ourselves into a loop calling the new subscriber immediately
+      [...subscribers].forEach(subscriber => subscriber(state, {
+        deletedFetchers: deletedFetchersKeys,
+        unstable_viewTransitionOpts: opts.viewTransitionOpts,
+        unstable_flushSync: opts.flushSync
+      }));
+
+      // 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
@@ -2021,12 +2042,16 @@
         restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
         preventScrollReset,
         blockers
-      }), viewTransitionOpts);
+      }), {
+        viewTransitionOpts,
+        flushSync: pendingFlushSync
+      });
 
       // Reset stateful navigation vars
       pendingAction = Action.Pop;
       pendingPreventScrollReset = false;
       pendingViewTransitionEnabled = false;
+      pendingFlushSync = false;
       isUninterruptedRevalidation = false;
       isRevalidationRequired = false;
       cancelledDeferredRoutes = [];
@@ -2067,6 +2092,7 @@
         historyAction = Action.Replace;
       }
       let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
+      let flushSync = (opts && opts.unstable_flushSync) === true;
       let blockerKey = shouldBlockNavigation({
         currentLocation,
         nextLocation,
@@ -2092,6 +2118,8 @@
             blockers.set(blockerKey, IDLE_BLOCKER);
             updateState({
               blockers
+            }, {
+              flushSync
             });
           }
         });
@@ -2104,7 +2132,8 @@
         pendingError: error,
         preventScrollReset,
         replace: opts && opts.replace,
-        enableViewTransition: opts && opts.unstable_viewTransition
+        enableViewTransition: opts && opts.unstable_viewTransition,
+        flushSync
       });
     }
 
@@ -2115,6 +2144,8 @@
       interruptActiveLoads();
       updateState({
         revalidation: "loading"
+      }, {
+        flushSync: false
       });
 
       // If we're currently submitting an action, we don't need to start a new
@@ -2158,6 +2189,7 @@
       saveScrollPosition(state.location, state.matches);
       pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
       pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
+      pendingFlushSync = (opts && opts.flushSync) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let loadingNavigation = opts && opts.overrideNavigation;
       let matches = matchRoutes(routesToUse, location, basename);
@@ -2263,6 +2295,8 @@
       let navigation = getSubmittingNavigation(location, submission);
       updateState({
         navigation
+      }, {
+        flushSync: pendingFlushSync
       });
 
       // Call our action and get the result
@@ -2390,7 +2424,9 @@
           actionData
         } : {}, revalidatingFetchers.length > 0 ? {
           fetchers: new Map(state.fetchers)
-        } : {}));
+        } : {}), {
+          flushSync: pendingFlushSync
+        });
       }
       revalidatingFetchers.forEach(rf => {
         if (fetchControllers.has(rf.key)) {
@@ -2473,9 +2509,6 @@
         fetchers: new Map(state.fetchers)
       } : {});
     }
-    function getFetcher(key) {
-      return state.fetchers.get(key) || IDLE_FETCHER;
-    }
 
     // Trigger a fetcher load/submit for the given fetcher key
     function fetch(key, routeId, href, opts) {
@@ -2483,13 +2516,16 @@
         throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
       }
       if (fetchControllers.has(key)) abortFetcher(key);
+      let flushSync = (opts && opts.unstable_flushSync) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, routeId, opts == null ? void 0 : opts.relative);
       let matches = matchRoutes(routesToUse, normalizedPath, basename);
       if (!matches) {
         setFetcherError(key, routeId, getInternalRouterError(404, {
           pathname: normalizedPath
-        }));
+        }), {
+          flushSync
+        });
         return;
       }
       let {
@@ -2498,13 +2534,15 @@
         error
       } = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
       if (error) {
-        setFetcherError(key, routeId, error);
+        setFetcherError(key, routeId, error, {
+          flushSync
+        });
         return;
       }
       let match = getTargetMatch(matches, path);
       pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
       if (submission && isMutationMethod(submission.formMethod)) {
-        handleFetcherAction(key, routeId, path, match, matches, submission);
+        handleFetcherAction(key, routeId, path, match, matches, flushSync, submission);
         return;
       }
 
@@ -2514,12 +2552,12 @@
         routeId,
         path
       });
-      handleFetcherLoader(key, routeId, path, match, matches, submission);
+      handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission);
     }
 
     // Call the action for the matched fetcher.submit(), and then handle redirects,
     // errors, and revalidation
-    async function handleFetcherAction(key, routeId, path, match, requestMatches, submission) {
+    async function handleFetcherAction(key, routeId, path, match, requestMatches, flushSync, submission) {
       interruptActiveLoads();
       fetchLoadMatches.delete(key);
       if (!match.route.action && !match.route.lazy) {
@@ -2528,16 +2566,16 @@
           pathname: path,
           routeId: routeId
         });
-        setFetcherError(key, routeId, error);
+        setFetcherError(key, routeId, error, {
+          flushSync
+        });
         return;
       }
 
       // Put this fetcher into it's submitting state
       let existingFetcher = state.fetchers.get(key);
-      let fetcher = getSubmittingFetcher(submission, existingFetcher);
-      state.fetchers.set(key, fetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
+      updateFetcherState(key, getSubmittingFetcher(submission, existingFetcher), {
+        flushSync
       });
 
       // Call the action for the fetcher
@@ -2547,13 +2585,19 @@
       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)) {
+        updateFetcherState(key, getDoneFetcher(undefined), {
+          flushSync
+        });
+        return;
+      }
       if (isRedirectResult(actionResult)) {
         fetchControllers.delete(key);
         if (pendingNavigationLoadId > originatingLoadId) {
@@ -2561,18 +2605,14 @@
           // should take precedence over this redirect navigation.  We already
           // set isRevalidationRequired so all loaders for the new route should
           // fire unless opted out via shouldRevalidate
-          let doneFetcher = getDoneFetcher(undefined);
-          state.fetchers.set(key, doneFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
+          updateFetcherState(key, getDoneFetcher(undefined), {
+            flushSync
           });
           return;
         } else {
           fetchRedirectIds.add(key);
-          let loadingFetcher = getLoadingFetcher(submission);
-          state.fetchers.set(key, loadingFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
+          updateFetcherState(key, getLoadingFetcher(submission), {
+            flushSync
           });
           return startRedirectNavigation(state, actionResult, {
             fetcherSubmission: submission
@@ -2582,7 +2622,9 @@
 
       // Process any non-redirect errors thrown
       if (isErrorResult(actionResult)) {
-        setFetcherError(key, routeId, actionResult.error);
+        setFetcherError(key, routeId, actionResult.error, {
+          flushSync
+        });
         return;
       }
       if (isDeferredResult(actionResult)) {
@@ -2624,6 +2666,8 @@
       });
       updateState({
         fetchers: new Map(state.fetchers)
+      }, {
+        flushSync
       });
       let abortPendingFetchRevalidations = () => revalidatingFetchers.forEach(rf => abortFetcher(rf.key));
       abortController.signal.addEventListener("abort", abortPendingFetchRevalidations);
@@ -2685,19 +2729,18 @@
           errors,
           loaderData: mergeLoaderData(state.loaderData, loaderData, matches, errors),
           fetchers: new Map(state.fetchers)
+        }, {
+          flushSync
         });
         isRevalidationRequired = false;
       }
     }
 
     // Call the matched loader for fetcher.load(), handling redirects, errors, etc.
-    async function handleFetcherLoader(key, routeId, path, match, matches, submission) {
+    async function handleFetcherLoader(key, routeId, path, match, matches, flushSync, submission) {
       let existingFetcher = state.fetchers.get(key);
-      // Put this fetcher into it's loading state
-      let loadingFetcher = getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined);
-      state.fetchers.set(key, loadingFetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
+      updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
+        flushSync
       });
 
       // Call the loader for this fetcher route match
@@ -2723,16 +2766,20 @@
       if (fetchRequest.signal.aborted) {
         return;
       }
+      if (deletedFetchers.has(key)) {
+        updateFetcherState(key, getDoneFetcher(undefined), {
+          flushSync
+        });
+        return;
+      }
 
       // If the loader threw a redirect Response, start a new REPLACE navigation
       if (isRedirectResult(result)) {
         if (pendingNavigationLoadId > originatingLoadId) {
           // A new navigation was kicked off after our loader started, so that
           // should take precedence over this redirect navigation
-          let doneFetcher = getDoneFetcher(undefined);
-          state.fetchers.set(key, doneFetcher);
-          updateState({
-            fetchers: new Map(state.fetchers)
+          updateFetcherState(key, getDoneFetcher(undefined), {
+            flushSync
           });
           return;
         } else {
@@ -2744,26 +2791,16 @@
 
       // 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, {
+          flushSync
         });
         return;
       }
       invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
 
       // Put the fetcher back into an idle state
-      let doneFetcher = getDoneFetcher(result.data);
-      state.fetchers.set(key, doneFetcher);
-      updateState({
-        fetchers: new Map(state.fetchers)
+      updateFetcherState(key, getDoneFetcher(result.data), {
+        flushSync
       });
     }
 
@@ -2905,7 +2942,15 @@
         }
       });
     }
-    function setFetcherError(key, routeId, error) {
+    function updateFetcherState(key, fetcher, opts) {
+      state.fetchers.set(key, fetcher);
+      updateState({
+        fetchers: new Map(state.fetchers)
+      }, {
+        flushSync: opts.flushSync
+      });
+    }
+    function setFetcherError(key, routeId, error, opts) {
       let boundaryMatch = findNearestBoundary(state.matches, routeId);
       deleteFetcher(key);
       updateState({
@@ -2913,8 +2958,21 @@
           [boundaryMatch.route.id]: error
         },
         fetchers: new Map(state.fetchers)
+      }, {
+        flushSync: opts.flushSync
       });
     }
+    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;
+    }
     function deleteFetcher(key) {
       let fetcher = state.fetchers.get(key);
       // Don't abort the controller if this is a deletion of a fetcher.submit()
@@ -2931,12 +2989,20 @@
     }
     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);
       }
       updateState({
         fetchers: new Map(state.fetchers)
+      }, {
+        flushSync: false
       });
     }
     function abortFetcher(key) {
@@ -3006,6 +3072,8 @@
       blockers.set(key, newBlocker);
       updateState({
         blockers
+      }, {
+        flushSync: false
       });
     }
     function shouldBlockNavigation(_ref2) {
@@ -3073,6 +3141,8 @@
         if (y != null) {
           updateState({
             restoreScrollPosition: y
+          }, {
+            flushSync: false
           });
         }
       }