@remix-run/router 0.0.0-experimental-7b1bbb00 → 0.0.0-experimental-4a8a492a

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # `@remix-run/router`
 
+## 1.9.0
+
+### Minor Changes
+
+- In order to move towards stricter TypeScript support in the future, we're aiming to replace current usages of `any` with `unknown` on exposed typings for user-provided data. To do this in Remix v2 without introducing breaking changes in React Router v6, we have added generics to a number of shared types. These continue to default to `any` in React Router and are overridden with `unknown` in Remix. In React Router v7 we plan to move these to `unknown` as a breaking change. ([#10843](https://github.com/remix-run/react-router/pull/10843))
+  - `Location` now accepts a generic for the `location.state` value
+  - `ActionFunctionArgs`/`ActionFunction`/`LoaderFunctionArgs`/`LoaderFunction` now accept a generic for the `context` parameter (only used in SSR usages via `createStaticHandler`)
+  - The return type of `useMatches` (now exported as `UIMatch`) accepts generics for `match.data` and `match.handle` - both of which were already set to `unknown`
+- Move the `@private` class export `ErrorResponse` to an `UNSAFE_ErrorResponseImpl` export since it is an implementation detail and there should be no construction of `ErrorResponse` instances in userland. This frees us up to export a `type ErrorResponse` which correlates to an instance of the class via `InstanceType`. Userland code should only ever be using `ErrorResponse` as a type and should be type-narrowing via `isRouteErrorResponse`. ([#10811](https://github.com/remix-run/react-router/pull/10811))
+- Export `ShouldRevalidateFunctionArgs` interface ([#10797](https://github.com/remix-run/react-router/pull/10797))
+- Removed private/internal APIs only required for the Remix v1 backwards compatibility layer and no longer needed in Remix v2 (`_isFetchActionRedirect`, `_hasFetcherDoneAnything`) ([#10715](https://github.com/remix-run/react-router/pull/10715))
+
+### Patch Changes
+
+- Add method/url to error message on aborted `query`/`queryRoute` calls ([#10793](https://github.com/remix-run/react-router/pull/10793))
+- Fix a race-condition with loader/action-thrown errors on `route.lazy` routes ([#10778](https://github.com/remix-run/react-router/pull/10778))
+- Fix type for `actionResult` on the arguments object passed to `shouldRevalidate` ([#10779](https://github.com/remix-run/react-router/pull/10779))
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/history.d.ts

@@ -43,11 +43,11 @@ export interface Path {
  * An entry in a history stack. A location contains information about the
  * URL path, as well as possibly some arbitrary state and a key.
  */
-export interface Location extends Path {
+export interface Location<State = any> extends Path {
     /**
      * A value of arbitrary data associated with this location.
      */
-    state: any;
+    state: State;
     /**
      * A unique string associated with this location. May be used to safely store
      * and retrieve data in some other storage API, like `localStorage`.
@@ -81,8 +81,8 @@ export interface Listener {
 }
 /**
  * Describes a location that is the destination of some navigation, either via
- * `history.push` or `history.replace`. May be either a URL or the pieces of a
- * URL path.
+ * `history.push` or `history.replace`. This may be either a URL or the pieces
+ * of a URL path.
  */
 export type To = string | Partial<Path>;
 /**

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, V7_FormMethod, } from "./utils";
+export type { ActionFunction, ActionFunctionArgs, AgnosticDataIndexRouteObject, AgnosticDataNonIndexRouteObject, AgnosticDataRouteMatch, AgnosticDataRouteObject, AgnosticIndexRouteObject, AgnosticNonIndexRouteObject, AgnosticRouteMatch, AgnosticRouteObject, ErrorResponse, FormEncType, FormMethod, HTMLFormMethod, JsonFunction, LazyRouteFunction, LoaderFunction, LoaderFunctionArgs, ParamParseKey, Params, PathMatch, PathPattern, RedirectFunction, ShouldRevalidateFunction, ShouldRevalidateFunctionArgs, TrackedPromise, UIMatch, V7_FormMethod, } from "./utils";
 export { AbortedDeferredError, defer, generatePath, getToPathname, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, redirect, redirectDocument, resolvePath, resolveTo, stripBasename, } from "./utils";
 export type { BrowserHistory, BrowserHistoryOptions, HashHistory, HashHistoryOptions, History, InitialEntry, Location, MemoryHistory, MemoryHistoryOptions, Path, To, } from "./history";
 export { Action, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, parsePath, } from "./history";
 export * from "./router";
 /** @internal */
 export type { RouteManifest as UNSAFE_RouteManifest } from "./utils";
-export { DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getPathContributingMatches as UNSAFE_getPathContributingMatches, } from "./utils";
+export { DeferredData as UNSAFE_DeferredData, ErrorResponseImpl as UNSAFE_ErrorResponseImpl, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch, getPathContributingMatches as UNSAFE_getPathContributingMatches, } from "./utils";
 export { invariant as UNSAFE_invariant, warning as UNSAFE_warning, } from "./history";

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-7b1bbb00
+ * @remix-run/router v0.0.0-experimental-4a8a492a
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -45,25 +45,23 @@ let Action = /*#__PURE__*/function (Action) {
  * The pathname, search, and hash values of a URL.
  */
 
+// TODO: (v7) Change the Location generic default from `any` to `unknown` and
+// remove Remix `useLocation` wrapper.
 /**
  * An entry in a history stack. A location contains information about the
  * URL path, as well as possibly some arbitrary state and a key.
  */
-
 /**
  * A change to the current location.
  */
-
 /**
  * A function that receives notifications about location changes.
  */
-
 /**
  * Describes a location that is the destination of some navigation, either via
- * `history.push` or `history.replace`. May be either a URL or the pieces of a
- * URL path.
+ * `history.push` or `history.replace`. This may be either a URL or the pieces
+ * of a URL path.
  */
-
 /**
  * A history is an interface to the navigation stack. The history serves as the
  * source of truth for the current location, as well as provides a set of
@@ -72,7 +70,6 @@ let Action = /*#__PURE__*/function (Action) {
  * It is similar to the DOM's `window.history` object, but with a smaller, more
  * focused API.
  */
-
 const PopStateEventType = "popstate";
 //#endregion
 
@@ -325,7 +322,7 @@ function warning(cond, message) {
     try {
       // Welcome to debugging history!
       //
-      // This error is thrown as a convenience so you can more easily
+      // This error is thrown as a convenience, so you can more easily
       // find the source for a warning that appears in the console by
       // enabling "pause on exceptions" in your JavaScript debugger.
       throw new Error(message);
@@ -577,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.
  */
 
 /**
@@ -605,32 +602,29 @@ let ResultType = /*#__PURE__*/function (ResultType) {
  * this as a private implementation detail in case they diverge in the future.
  */
 
+// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
+//   ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
+//   Also, make them a type alias instead of an interface
 /**
  * Arguments passed to loader functions
  */
-
 /**
  * Arguments passed to action functions
  */
-
 /**
  * Loaders and actions can return anything except `undefined` (`null` is a
  * valid return value if there is no data to return).  Responses are preferred
  * and will ease any future migration to Remix
  */
-
 /**
  * Route loader function signature
  */
-
 /**
  * Route action function signature
  */
-
 /**
  * Arguments passed to shouldRevalidate function
  */
-
 /**
  * Route shouldRevalidate function signature.  This runs after any submission
  * (navigation or fetcher), so we flatten the navigation/fetcher submission
@@ -638,25 +632,21 @@ let ResultType = /*#__PURE__*/function (ResultType) {
  * or a fetcher, what really matters is the URLs and the formData since loaders
  * have to re-run based on the data models that were potentially mutated.
  */
-
 /**
  * Function provided by the framework-aware layers to set `hasErrorBoundary`
  * from the framework-aware `errorElement` prop
  *
  * @deprecated Use `mapRouteProperties` instead
  */
-
 /**
  * Function provided by the framework-aware layers to set any framework-specific
  * properties from framework-agnostic properties
  */
-
 /**
  * Keys we cannot change from within a lazy() function. We spread all other keys
  * onto the route. Either they're meaningful to the router, or they'll get
  * ignored.
  */
-
 const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "index", "children"]);
 
 /**
@@ -698,7 +688,7 @@ const immutableRouteKeys = new Set(["lazy", "caseSensitive", "path", "id", "inde
  */
 
 // Attempt to parse the given string segment. If it fails, then just return the
-// plain string type as a default fallback. Otherwise return the union of the
+// plain string type as a default fallback. Otherwise, return the union of the
 // parsed string literals that were referenced as dynamic segments in the route.
 /**
  * The parameters that were parsed from the URL path.
@@ -710,7 +700,7 @@ function isIndexRoute(route) {
   return route.index === true;
 }
 
-// Walk the route tree generating unique IDs where necessary so we are working
+// Walk the route tree generating unique IDs where necessary, so we are working
 // solely with AgnosticDataRouteObject's within the Router
 function convertRoutesToDataRoutes(routes, mapRouteProperties, parentPath, manifest) {
   if (parentPath === void 0) {
@@ -773,6 +763,20 @@ function matchRoutes(routes, locationArg, basename) {
   }
   return matches;
 }
+function convertRouteMatchToUiMatch(match, loaderData) {
+  let {
+    route,
+    pathname,
+    params
+  } = match;
+  return {
+    id: route.id,
+    pathname,
+    params,
+    data: loaderData[route.id],
+    handle: route.handle
+  };
+}
 function flattenRoutes(routes, branches, parentsMeta, parentPath) {
   if (branches === void 0) {
     branches = [];
@@ -797,7 +801,7 @@ function flattenRoutes(routes, branches, parentsMeta, parentPath) {
     let path = joinPaths([parentPath, meta.relativePath]);
     let routesMeta = parentsMeta.concat(meta);
 
-    // Add the children before adding this route to the array so we traverse the
+    // Add the children before adding this route to the array, so we traverse the
     // route tree depth-first and child routes appear before their parents in
     // the "flattened" version.
     if (route.children && route.children.length > 0) {
@@ -865,15 +869,15 @@ function explodeOptionalSegments(path) {
   let result = [];
 
   // All child paths with the prefix.  Do this for all children before the
-  // optional version for all children so we get consistent ordering where the
+  // optional version for all children, so we get consistent ordering where the
   // parent optional aspect is preferred as required.  Otherwise, we can get
   // child sections interspersed where deeper optional segments are higher than
-  // parent optional segments, where for example, /:two would explodes _earlier_
+  // parent optional segments, where for example, /:two would explode _earlier_
   // then /:one.  By always including the parent as required _for all children_
   // first, we avoid this issue
   result.push(...restExploded.map(subpath => subpath === "" ? required : [required, subpath].join("/")));
 
-  // Then if this is an optional value, add all child versions without
+  // Then, if this is an optional value, add all child versions without
   if (isOptional) {
     result.push(...restExploded);
   }
@@ -1061,7 +1065,7 @@ function compilePath(path, caseSensitive, end) {
     regexpSource += "\\/*$";
   } else if (path !== "" && path !== "/") {
     // If our path is non-empty and contains anything beyond an initial slash,
-    // then we have _some_ form of path in our regex so we should expect to
+    // then we have _some_ form of path in our regex, so we should expect to
     // match only if we find the end of this path segment.  Look for an optional
     // non-captured trailing slash (to match a portion of the URL) or the end
     // of the path (if we've matched to the end).  We used to do this with a
@@ -1464,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) {
@@ -1486,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
@@ -1608,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
 
@@ -1716,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;
@@ -1823,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
@@ -1840,6 +1862,9 @@ function createRouter(init) {
     if (unlistenHistory) {
       unlistenHistory();
     }
+    if (removePageHideEventListener) {
+      removePageHideEventListener();
+    }
     subscribers.clear();
     pendingNavigationController && pendingNavigationController.abort();
     state.fetchers.forEach((_, key) => deleteFetcher(key));
@@ -1853,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, {
+      viewTransitionOpts
+    }));
   }
 
   // Complete a navigation returning the state.navigation back to the IDLE_NAVIGATION
@@ -1910,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,
@@ -1922,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 = [];
@@ -2003,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
     });
   }
 
@@ -2056,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);
@@ -2972,7 +3035,7 @@ function createRouter(init) {
   }
   function getScrollKey(location, matches) {
     if (getScrollRestorationKey) {
-      let key = getScrollRestorationKey(location, matches.map(m => createUseMatchesMatch(m, state.loaderData)));
+      let key = getScrollRestorationKey(location, matches.map(m => convertRouteMatchToUiMatch(m, state.loaderData)));
       return key || location.key;
     }
     return location.key;
@@ -4377,23 +4440,6 @@ async function resolveDeferredData(result, signal, unwrap) {
 function hasNakedIndexQuery(search) {
   return new URLSearchParams(search).getAll("index").some(v => v === "");
 }
-
-// Note: This should match the format exported by useMatches, so if you change
-// this please also change that :)  Eventually we'll DRY this up
-function createUseMatchesMatch(match, loaderData) {
-  let {
-    route,
-    pathname,
-    params
-  } = match;
-  return {
-    id: route.id,
-    pathname,
-    params,
-    data: loaderData[route.id],
-    handle: route.handle
-  };
-}
 function getTargetMatch(matches, location) {
   let search = typeof location === "string" ? parsePath(location).search : location.search;
   if (matches[matches.length - 1].route.index && hasNakedIndexQuery(search || "")) {
@@ -4539,6 +4585,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;
@@ -4549,6 +4624,7 @@ exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
 exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;
 exports.UNSAFE_DeferredData = DeferredData;
 exports.UNSAFE_ErrorResponseImpl = ErrorResponseImpl;
+exports.UNSAFE_convertRouteMatchToUiMatch = convertRouteMatchToUiMatch;
 exports.UNSAFE_convertRoutesToDataRoutes = convertRoutesToDataRoutes;
 exports.UNSAFE_getPathContributingMatches = getPathContributingMatches;
 exports.UNSAFE_invariant = invariant;