@remix-run/router 1.9.0 → 1.10.0

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.9.0
+ * @remix-run/router v1.10.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -576,8 +576,8 @@
    */
 
   /**
-   * Users can specify either lowercase or uppercase form methods on <Form>,
-   * useSubmit(), <fetcher.Form>, etc.
+   * Users can specify either lowercase or uppercase form methods on `<Form>`,
+   * useSubmit(), `<fetcher.Form>`, etc.
    */
 
   /**
@@ -1470,10 +1470,13 @@
     response.headers.set("X-Remix-Reload-Document", "true");
     return response;
   };
-
   /**
    * @private
    * Utility class we use to hold auto-unwrapped 4xx/5xx Response bodies
+   *
+   * We don't export the class for public use since it's an implementation
+   * detail, but we export the interface above so folks can build their own
+   * abstractions around instances via isRouteErrorResponse()
    */
   class ErrorResponseImpl {
     constructor(status, statusText, data, internal) {
@@ -1492,9 +1495,6 @@
     }
   }
 
-  // We don't want the class exported since usage of it at runtime is an
-  // implementation detail, but we do want to export the shape so folks can
-  // build their own abstractions around instances via isRouteErrorResponse()
   /**
    * Check if the given error is an ErrorResponse generated from a 4xx/5xx
    * Response thrown from an action/loader
@@ -1614,6 +1614,7 @@
   const defaultMapRouteProperties = route => ({
     hasErrorBoundary: Boolean(route.hasErrorBoundary)
   });
+  const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
 
   //#endregion
 
@@ -1722,6 +1723,15 @@
     // AbortController for the active navigation
     let pendingNavigationController;
 
+    // Should the current navigation enable document.startViewTransition?
+    let pendingViewTransitionEnabled = false;
+
+    // Store applied view transitions so we can apply them on POP
+    let appliedViewTransitions = new Map();
+
+    // Cleanup function for persisting applied transitions to sessionStorage
+    let removePageHideEventListener = null;
+
     // We use this to avoid touching history in completeNavigation if a
     // revalidation is entirely uninterrupted
     let isUninterruptedRevalidation = false;
@@ -1829,6 +1839,14 @@
         }
         return startNavigation(historyAction, location);
       });
+      if (isBrowser) {
+        // FIXME: This feels gross.  How can we cleanup the lines between
+        // scrollRestoration/appliedTransitions persistance?
+        restoreAppliedTransitions(routerWindow, appliedViewTransitions);
+        let _saveAppliedTransitions = () => persistAppliedTransitions(routerWindow, appliedViewTransitions);
+        routerWindow.addEventListener("pagehide", _saveAppliedTransitions);
+        removePageHideEventListener = () => routerWindow.removeEventListener("pagehide", _saveAppliedTransitions);
+      }
 
       // Kick off initial data load if needed.  Use Pop to avoid modifying history
       // Note we don't do any handling of lazy here.  For SPA's it'll get handled
@@ -1846,6 +1864,9 @@
       if (unlistenHistory) {
         unlistenHistory();
       }
+      if (removePageHideEventListener) {
+        removePageHideEventListener();
+      }
       subscribers.clear();
       pendingNavigationController && pendingNavigationController.abort();
       state.fetchers.forEach((_, key) => deleteFetcher(key));
@@ -1859,9 +1880,11 @@
     }
 
     // Update our state and notify the calling context of the change
-    function updateState(newState) {
+    function updateState(newState, viewTransitionOpts) {
       state = _extends({}, state, newState);
-      subscribers.forEach(subscriber => subscriber(state));
+      subscribers.forEach(subscriber => subscriber(state, {
+        unstable_viewTransitionOpts: viewTransitionOpts
+      }));
     }
 
     // Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
@@ -1916,6 +1939,39 @@
       } else if (pendingAction === Action.Replace) {
         init.history.replace(location, location.state);
       }
+      let viewTransitionOpts;
+
+      // On POP, enable transitions if they were enabled on the original navigation
+      if (pendingAction === Action.Pop) {
+        // Forward takes precedence so they behave like the original navigation
+        let priorPaths = appliedViewTransitions.get(state.location.pathname);
+        if (priorPaths && priorPaths.has(location.pathname)) {
+          viewTransitionOpts = {
+            currentLocation: state.location,
+            nextLocation: location
+          };
+        } else if (appliedViewTransitions.has(location.pathname)) {
+          // If we don't have a previous forward nav, assume we're popping back to
+          // the new location and enable if that location previously enabled
+          viewTransitionOpts = {
+            currentLocation: location,
+            nextLocation: state.location
+          };
+        }
+      } else if (pendingViewTransitionEnabled) {
+        // Store the applied transition on PUSH/REPLACE
+        let toPaths = appliedViewTransitions.get(state.location.pathname);
+        if (toPaths) {
+          toPaths.add(location.pathname);
+        } else {
+          toPaths = new Set([location.pathname]);
+          appliedViewTransitions.set(state.location.pathname, toPaths);
+        }
+        viewTransitionOpts = {
+          currentLocation: state.location,
+          nextLocation: location
+        };
+      }
       updateState(_extends({}, newState, {
         // matches, errors, fetchers go through as-is
         actionData,
@@ -1928,11 +1984,12 @@
         restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
         preventScrollReset,
         blockers
-      }));
+      }), viewTransitionOpts);
 
       // Reset stateful navigation vars
       pendingAction = Action.Pop;
       pendingPreventScrollReset = false;
+      pendingViewTransitionEnabled = false;
       isUninterruptedRevalidation = false;
       isRevalidationRequired = false;
       cancelledDeferredRoutes = [];
@@ -2009,7 +2066,8 @@
         // render at the right error boundary after we match routes
         pendingError: error,
         preventScrollReset,
-        replace: opts && opts.replace
+        replace: opts && opts.replace,
+        enableViewTransition: opts && opts.unstable_viewTransition
       });
     }
 
@@ -2062,6 +2120,7 @@
       // and track whether we should reset scroll on completion
       saveScrollPosition(state.location, state.matches);
       pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
+      pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let loadingNavigation = opts && opts.overrideNavigation;
       let matches = matchRoutes(routesToUse, location, basename);
@@ -3013,6 +3072,9 @@
       get routes() {
         return dataRoutes;
       },
+      get window() {
+        return routerWindow;
+      },
       initialize,
       subscribe,
       enableScrollRestoration,
@@ -4209,7 +4271,7 @@
   }
   function getShortCircuitMatches(routes) {
     // Prefer a root layout route if present, otherwise shim in a route object
-    let route = routes.find(r => r.index || !r.path || r.path === "/") || {
+    let route = routes.length === 1 ? routes[0] : routes.find(r => r.index || !r.path || r.path === "/") || {
       id: "__shim-error-route__"
     };
     return {
@@ -4528,6 +4590,35 @@
     };
     return fetcher;
   }
+  function restoreAppliedTransitions(_window, transitions) {
+    try {
+      let sessionPositions = _window.sessionStorage.getItem(TRANSITIONS_STORAGE_KEY);
+      if (sessionPositions) {
+        let json = JSON.parse(sessionPositions);
+        for (let [k, v] of Object.entries(json || {})) {
+          if (v && Array.isArray(v)) {
+            transitions.set(k, new Set(v || []));
+          }
+        }
+      }
+    } catch (e) {
+      // no-op, use default empty object
+    }
+  }
+  function persistAppliedTransitions(_window, transitions) {
+    if (transitions.size > 0) {
+      let json = {};
+      for (let [k, v] of transitions) {
+        json[k] = [...v];
+      }
+      try {
+        _window.sessionStorage.setItem(TRANSITIONS_STORAGE_KEY, JSON.stringify(json));
+      } catch (error) {
+        warning(false, "Failed to save applied view transitions in sessionStorage (" + error + ").");
+      }
+    }
+  }
+
   //#endregion
 
   exports.AbortedDeferredError = AbortedDeferredError;