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

package/dist/utils.d.ts

@@ -111,20 +111,20 @@ export type Submission = {
  * Arguments passed to route loader/action functions.  Same for now but we keep
  * this as a private implementation detail in case they diverge in the future.
  */
-interface DataFunctionArgs {
+interface DataFunctionArgs<Context> {
     request: Request;
     params: Params;
-    context?: any;
+    context?: Context;
 }
 /**
  * Arguments passed to loader functions
  */
-export interface LoaderFunctionArgs extends DataFunctionArgs {
+export interface LoaderFunctionArgs<Context = any> extends DataFunctionArgs<Context> {
 }
 /**
  * Arguments passed to action functions
  */
-export interface ActionFunctionArgs extends DataFunctionArgs {
+export interface ActionFunctionArgs<Context = any> extends DataFunctionArgs<Context> {
 }
 /**
  * Loaders and actions can return anything except `undefined` (`null` is a
@@ -135,14 +135,14 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction {
-    (args: LoaderFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface LoaderFunction<Context = any> {
+    (args: LoaderFunctionArgs<Context>): Promise<DataFunctionValue> | DataFunctionValue;
 }
 /**
  * Route action function signature
  */
-export interface ActionFunction {
-    (args: ActionFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface ActionFunction<Context = any> {
+    (args: ActionFunctionArgs<Context>): Promise<DataFunctionValue> | DataFunctionValue;
 }
 /**
  * Arguments passed to shouldRevalidate function
@@ -301,6 +301,14 @@ export declare function convertRoutesToDataRoutes(routes: AgnosticRouteObject[],
  * @see https://reactrouter.com/utils/match-routes
  */
 export declare function matchRoutes<RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject>(routes: RouteObjectType[], locationArg: Partial<Location> | string, basename?: string): AgnosticRouteMatch<string, RouteObjectType>[] | null;
+export interface UIMatch<Data = unknown, Handle = unknown> {
+    id: string;
+    pathname: string;
+    params: AgnosticRouteMatch["params"];
+    data: Data;
+    handle: Handle;
+}
+export declare function convertRouteMatchToUiMatch(match: AgnosticDataRouteMatch, loaderData: RouteData): UIMatch;
 /**
  * Returns a path with params interpolated.
  *

package/history.ts

@@ -49,15 +49,18 @@ export interface Path {
   hash: string;
 }
 
+// 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.
  */
-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
@@ -97,8 +100,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>;
 
@@ -500,7 +503,7 @@ export function warning(cond: any, message: string) {
     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);

package/index.ts

@@ -25,6 +25,7 @@ export type {
   ShouldRevalidateFunction,
   ShouldRevalidateFunctionArgs,
   TrackedPromise,
+  UIMatch,
   V7_FormMethod,
 } from "./utils";
 
@@ -84,6 +85,7 @@ export {
   DeferredData as UNSAFE_DeferredData,
   ErrorResponseImpl as UNSAFE_ErrorResponseImpl,
   convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes,
+  convertRouteMatchToUiMatch as UNSAFE_convertRouteMatchToUiMatch,
   getPathContributingMatches as UNSAFE_getPathContributingMatches,
 } from "./utils";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/router",
-  "version": "1.9.0-pre.0",
+  "version": "1.9.0-pre.2",
   "description": "Nested/Data-driven/Framework-agnostic Routing",
   "keywords": [
     "remix",

package/router.ts

@@ -11,7 +11,6 @@ import type {
   ActionFunction,
   AgnosticDataRouteMatch,
   AgnosticDataRouteObject,
-  AgnosticRouteMatch,
   AgnosticRouteObject,
   DataResult,
   DeferredData,
@@ -31,12 +30,14 @@ import type {
   ShouldRevalidateFunctionArgs,
   Submission,
   SuccessResult,
+  UIMatch,
   V7_FormMethod,
   V7_MutationFormMethod,
 } from "./utils";
 import {
   ErrorResponseImpl,
   ResultType,
+  convertRouteMatchToUiMatch,
   convertRoutesToDataRoutes,
   getPathContributingMatches,
   immutableRouteKeys,
@@ -394,20 +395,12 @@ export interface RouterSubscriber {
   (state: RouterState): void;
 }
 
-interface UseMatchesMatch {
-  id: string;
-  pathname: string;
-  params: AgnosticRouteMatch["params"];
-  data: unknown;
-  handle: unknown;
-}
-
 /**
  * Function signature for determining the key to be used in scroll restoration
  * for a given location
  */
 export interface GetScrollRestorationKeyFunction {
-  (location: Location, matches: UseMatchesMatch[]): string | null;
+  (location: Location, matches: UIMatch[]): string | null;
 }
 
 /**
@@ -2461,7 +2454,7 @@ export function createRouter(init: RouterInit): Router {
     if (getScrollRestorationKey) {
       let key = getScrollRestorationKey(
         location,
-        matches.map((m) => createUseMatchesMatch(m, state.loaderData))
+        matches.map((m) => convertRouteMatchToUiMatch(m, state.loaderData))
       );
       return key || location.key;
     }
@@ -4332,22 +4325,6 @@ function hasNakedIndexQuery(search: string): boolean {
   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: AgnosticDataRouteMatch,
-  loaderData: RouteData
-): UseMatchesMatch {
-  let { route, pathname, params } = match;
-  return {
-    id: route.id,
-    pathname,
-    params,
-    data: loaderData[route.id] as unknown,
-    handle: route.handle as unknown,
-  };
-}
-
 function getTargetMatch(
   matches: AgnosticDataRouteMatch[],
   location: Location | string

package/utils.ts

@@ -137,21 +137,27 @@ export type Submission =
  * Arguments passed to route loader/action functions.  Same for now but we keep
  * this as a private implementation detail in case they diverge in the future.
  */
-interface DataFunctionArgs {
+interface DataFunctionArgs<Context> {
   request: Request;
   params: Params;
-  context?: any;
+  context?: Context;
 }
 
+// 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
  */
-export interface LoaderFunctionArgs extends DataFunctionArgs {}
+export interface LoaderFunctionArgs<Context = any>
+  extends DataFunctionArgs<Context> {}
 
 /**
  * Arguments passed to action functions
  */
-export interface ActionFunctionArgs extends DataFunctionArgs {}
+export interface ActionFunctionArgs<Context = any>
+  extends DataFunctionArgs<Context> {}
 
 /**
  * Loaders and actions can return anything except `undefined` (`null` is a
@@ -163,15 +169,19 @@ type DataFunctionValue = Response | NonNullable<unknown> | null;
 /**
  * Route loader function signature
  */
-export interface LoaderFunction {
-  (args: LoaderFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface LoaderFunction<Context = any> {
+  (args: LoaderFunctionArgs<Context>):
+    | Promise<DataFunctionValue>
+    | DataFunctionValue;
 }
 
 /**
  * Route action function signature
  */
-export interface ActionFunction {
-  (args: ActionFunctionArgs): Promise<DataFunctionValue> | DataFunctionValue;
+export interface ActionFunction<Context = any> {
+  (args: ActionFunctionArgs<Context>):
+    | Promise<DataFunctionValue>
+    | DataFunctionValue;
 }
 
 /**
@@ -350,10 +360,10 @@ type PathParam<Path extends string> =
       _PathParam<Path>;
 
 // 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.
 export type ParamParseKey<Segment extends string> =
-  // if could not find path params, fallback to `string`
+  // if you could not find path params, fallback to `string`
   [PathParam<Segment>] extends [never] ? string : PathParam<Segment>;
 
 /**
@@ -397,7 +407,7 @@ function isIndexRoute(
   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
 export function convertRoutesToDataRoutes(
   routes: AgnosticRouteObject[],
@@ -490,6 +500,28 @@ export function matchRoutes<
   return matches;
 }
 
+export interface UIMatch<Data = unknown, Handle = unknown> {
+  id: string;
+  pathname: string;
+  params: AgnosticRouteMatch["params"];
+  data: Data;
+  handle: Handle;
+}
+
+export function convertRouteMatchToUiMatch(
+  match: AgnosticDataRouteMatch,
+  loaderData: RouteData
+): UIMatch {
+  let { route, pathname, params } = match;
+  return {
+    id: route.id,
+    pathname,
+    params,
+    data: loaderData[route.id],
+    handle: route.handle,
+  };
+}
+
 interface RouteMeta<
   RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject
 > {
@@ -542,7 +574,7 @@ function flattenRoutes<
     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) {
@@ -619,10 +651,10 @@ function explodeOptionalSegments(path: string): string[] {
   let result: string[] = [];
 
   // 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(
@@ -631,7 +663,7 @@ function explodeOptionalSegments(path: string): string[] {
     )
   );
 
-  // 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);
   }
@@ -947,7 +979,7 @@ function compilePath(
     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