@remix-run/router 1.9.0 → 1.10.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # `@remix-run/router`
 
+## 1.10.0-pre.0
+
+### Minor Changes
+
+- Add support for the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) via `document.startViewTransition` to enable CSS animated transitions on SPA navigations in your application. ([#10916](https://github.com/remix-run/react-router/pull/10916))
+
+  The simplest approach to enabling a View Transition in your React Router app is via the new `<Link unstable_viewTransition>` prop. This will cause the navigation DOM update to be wrapped in `document.startViewTransition` which will enable transitions for the DOM update. Without any additional CSS styles, you'll get a basic cross-fade animation for your page.
+
+  If you need to apply more fine-grained styles for your animations, you can leverage the `unstable_useViewTransitionState` hook which will tell you when a transition is in progress and you can use that to apply classes or styles:
+
+  ```jsx
+  function ImageLink(to, src, alt) {
+    let isTransitioning = unstable_useViewTransitionState(to);
+    return (
+      <Link to={to} unstable_viewTransition>
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            viewTransitionName: isTransitioning ? "image-expand" : "",
+          }}
+        />
+      </Link>
+    );
+  }
+  ```
+
+  You can also use the `<NavLink unstable_viewTransition>` shorthand which will manage the hook usage for you and automatically add a `transitioning` class to the `<a>` during the transition:
+
+  ```css
+  a.transitioning img {
+    view-transition-name: "image-expand";
+  }
+  ```
+
+  ```jsx
+  <NavLink to={to} unstable_viewTransition>
+    <img src={src} alt={alt} />
+  </NavLink>
+  ```
+
+  For an example usage of View Transitions with React Router, check out [our fork](https://github.com/brophdawg11/react-router-records) of the [Astro Records](https://github.com/Charca/astro-records) demo.
+
+  For more information on using the View Transitions API, please refer to the [Smooth and simple transitions with the View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) guide from the Google Chrome team.
+
+### Patch Changes
+
+- Allow 404 detection to leverage root route error boundary if path contains a URL segment ([#10852](https://github.com/remix-run/react-router/pull/10852))
+- Fix `ErrorResponse` type to avoid leaking internal field ([#10876](https://github.com/remix-run/react-router/pull/10876))
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.9.0
+ * @remix-run/router v1.10.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -574,8 +574,8 @@ let ResultType = /*#__PURE__*/function (ResultType) {
  */
 
 /**
- * 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.
  */
 
 /**
@@ -1468,10 +1468,13 @@ const redirectDocument = (url, init) => {
   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) {
@@ -1490,9 +1493,6 @@ class ErrorResponseImpl {
   }
 }
 
-// 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
@@ -1612,6 +1612,7 @@ const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 const defaultMapRouteProperties = route => ({
   hasErrorBoundary: Boolean(route.hasErrorBoundary)
 });
+const TRANSITIONS_STORAGE_KEY = "remix-router-transitions";
 
 //#endregion
 
@@ -1720,6 +1721,15 @@ function createRouter(init) {
   // 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;
@@ -1827,6 +1837,14 @@ function createRouter(init) {
       }
       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
@@ -1844,6 +1862,9 @@ function createRouter(init) {
     if (unlistenHistory) {
       unlistenHistory();
     }
+    if (removePageHideEventListener) {
+      removePageHideEventListener();
+    }
     subscribers.clear();
     pendingNavigationController && pendingNavigationController.abort();
     state.fetchers.forEach((_, key) => deleteFetcher(key));
@@ -1857,9 +1878,11 @@ function createRouter(init) {
   }
 
   // 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
@@ -1914,6 +1937,39 @@ function createRouter(init) {
     } 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,
@@ -1926,11 +1982,12 @@ function createRouter(init) {
       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 = [];
@@ -2007,7 +2064,8 @@ function createRouter(init) {
       // 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
     });
   }
 
@@ -2060,6 +2118,7 @@ function createRouter(init) {
     // 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);
@@ -3011,6 +3070,9 @@ function createRouter(init) {
     get routes() {
       return dataRoutes;
     },
+    get window() {
+      return routerWindow;
+    },
     initialize,
     subscribe,
     enableScrollRestoration,
@@ -4207,7 +4269,7 @@ function findNearestBoundary(matches, routeId) {
 }
 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 {
@@ -4526,6 +4588,35 @@ function getDoneFetcher(data) {
   };
   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;