Spaces:
Sleeping
Sleeping
| import type { Location, Path, To } from "./history"; | |
| import { invariant, parsePath, warning } from "./history"; | |
| /** | |
| * Map of routeId -> data returned from a loader/action/error | |
| */ | |
| export interface RouteData { | |
| [routeId: string]: any; | |
| } | |
| export enum ResultType { | |
| data = "data", | |
| deferred = "deferred", | |
| redirect = "redirect", | |
| error = "error", | |
| } | |
| /** | |
| * Successful result from a loader or action | |
| */ | |
| export interface SuccessResult { | |
| type: ResultType.data; | |
| data: unknown; | |
| statusCode?: number; | |
| headers?: Headers; | |
| } | |
| /** | |
| * Successful defer() result from a loader or action | |
| */ | |
| export interface DeferredResult { | |
| type: ResultType.deferred; | |
| deferredData: DeferredData; | |
| statusCode?: number; | |
| headers?: Headers; | |
| } | |
| /** | |
| * Redirect result from a loader or action | |
| */ | |
| export interface RedirectResult { | |
| type: ResultType.redirect; | |
| // We keep the raw Response for redirects so we can return it verbatim | |
| response: Response; | |
| } | |
| /** | |
| * Unsuccessful result from a loader or action | |
| */ | |
| export interface ErrorResult { | |
| type: ResultType.error; | |
| error: unknown; | |
| statusCode?: number; | |
| headers?: Headers; | |
| } | |
| /** | |
| * Result from a loader or action - potentially successful or unsuccessful | |
| */ | |
| export type DataResult = | |
| | SuccessResult | |
| | DeferredResult | |
| | RedirectResult | |
| | ErrorResult; | |
| type LowerCaseFormMethod = "get" | "post" | "put" | "patch" | "delete"; | |
| type UpperCaseFormMethod = Uppercase<LowerCaseFormMethod>; | |
| /** | |
| * Users can specify either lowercase or uppercase form methods on `<Form>`, | |
| * useSubmit(), `<fetcher.Form>`, etc. | |
| */ | |
| export type HTMLFormMethod = LowerCaseFormMethod | UpperCaseFormMethod; | |
| /** | |
| * Active navigation/fetcher form methods are exposed in lowercase on the | |
| * RouterState | |
| */ | |
| export type FormMethod = LowerCaseFormMethod; | |
| export type MutationFormMethod = Exclude<FormMethod, "get">; | |
| /** | |
| * In v7, active navigation/fetcher form methods are exposed in uppercase on the | |
| * RouterState. This is to align with the normalization done via fetch(). | |
| */ | |
| export type V7_FormMethod = UpperCaseFormMethod; | |
| export type V7_MutationFormMethod = Exclude<V7_FormMethod, "GET">; | |
| export type FormEncType = | |
| | "application/x-www-form-urlencoded" | |
| | "multipart/form-data" | |
| | "application/json" | |
| | "text/plain"; | |
| // Thanks https://github.com/sindresorhus/type-fest! | |
| type JsonObject = { [Key in string]: JsonValue } & { | |
| [Key in string]?: JsonValue | undefined; | |
| }; | |
| type JsonArray = JsonValue[] | readonly JsonValue[]; | |
| type JsonPrimitive = string | number | boolean | null; | |
| type JsonValue = JsonPrimitive | JsonObject | JsonArray; | |
| /** | |
| * @private | |
| * Internal interface to pass around for action submissions, not intended for | |
| * external consumption | |
| */ | |
| export type Submission = | |
| | { | |
| formMethod: FormMethod | V7_FormMethod; | |
| formAction: string; | |
| formEncType: FormEncType; | |
| formData: FormData; | |
| json: undefined; | |
| text: undefined; | |
| } | |
| | { | |
| formMethod: FormMethod | V7_FormMethod; | |
| formAction: string; | |
| formEncType: FormEncType; | |
| formData: undefined; | |
| json: JsonValue; | |
| text: undefined; | |
| } | |
| | { | |
| formMethod: FormMethod | V7_FormMethod; | |
| formAction: string; | |
| formEncType: FormEncType; | |
| formData: undefined; | |
| json: undefined; | |
| text: string; | |
| }; | |
| /** | |
| * @private | |
| * 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<Context> { | |
| request: Request; | |
| params: Params; | |
| 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<Context = any> | |
| extends DataFunctionArgs<Context> {} | |
| /** | |
| * Arguments passed to action functions | |
| */ | |
| export interface ActionFunctionArgs<Context = any> | |
| extends DataFunctionArgs<Context> {} | |
| /** | |
| * 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 | |
| */ | |
| type DataFunctionValue = Response | NonNullable<unknown> | null; | |
| type DataFunctionReturnValue = Promise<DataFunctionValue> | DataFunctionValue; | |
| /** | |
| * Route loader function signature | |
| */ | |
| export type LoaderFunction<Context = any> = { | |
| ( | |
| args: LoaderFunctionArgs<Context>, | |
| handlerCtx?: unknown | |
| ): DataFunctionReturnValue; | |
| } & { hydrate?: boolean }; | |
| /** | |
| * Route action function signature | |
| */ | |
| export interface ActionFunction<Context = any> { | |
| ( | |
| args: ActionFunctionArgs<Context>, | |
| handlerCtx?: unknown | |
| ): DataFunctionReturnValue; | |
| } | |
| /** | |
| * Arguments passed to shouldRevalidate function | |
| */ | |
| export interface ShouldRevalidateFunctionArgs { | |
| currentUrl: URL; | |
| currentParams: AgnosticDataRouteMatch["params"]; | |
| nextUrl: URL; | |
| nextParams: AgnosticDataRouteMatch["params"]; | |
| formMethod?: Submission["formMethod"]; | |
| formAction?: Submission["formAction"]; | |
| formEncType?: Submission["formEncType"]; | |
| text?: Submission["text"]; | |
| formData?: Submission["formData"]; | |
| json?: Submission["json"]; | |
| actionStatus?: number; | |
| actionResult?: any; | |
| defaultShouldRevalidate: boolean; | |
| } | |
| /** | |
| * Route shouldRevalidate function signature. This runs after any submission | |
| * (navigation or fetcher), so we flatten the navigation/fetcher submission | |
| * onto the arguments. It shouldn't matter whether it came from a navigation | |
| * 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. | |
| */ | |
| export interface ShouldRevalidateFunction { | |
| (args: ShouldRevalidateFunctionArgs): boolean; | |
| } | |
| /** | |
| * Function provided by the framework-aware layers to set `hasErrorBoundary` | |
| * from the framework-aware `errorElement` prop | |
| * | |
| * @deprecated Use `mapRouteProperties` instead | |
| */ | |
| export interface DetectErrorBoundaryFunction { | |
| (route: AgnosticRouteObject): boolean; | |
| } | |
| export interface DataStrategyMatch | |
| extends AgnosticRouteMatch<string, AgnosticDataRouteObject> { | |
| shouldLoad: boolean; | |
| resolve: ( | |
| handlerOverride?: ( | |
| handler: (ctx?: unknown) => DataFunctionReturnValue | |
| ) => DataFunctionReturnValue | |
| ) => Promise<DataStrategyResult>; | |
| } | |
| export interface DataStrategyFunctionArgs<Context = any> | |
| extends DataFunctionArgs<Context> { | |
| matches: DataStrategyMatch[]; | |
| fetcherKey: string | null; | |
| } | |
| /** | |
| * Result from a loader or action called via dataStrategy | |
| */ | |
| export interface DataStrategyResult { | |
| type: "data" | "error"; | |
| result: unknown; // data, Error, Response, DeferredData, DataWithResponseInit | |
| } | |
| export interface DataStrategyFunction { | |
| (args: DataStrategyFunctionArgs): Promise<Record<string, DataStrategyResult>>; | |
| } | |
| export type AgnosticPatchRoutesOnNavigationFunctionArgs< | |
| O extends AgnosticRouteObject = AgnosticRouteObject, | |
| M extends AgnosticRouteMatch = AgnosticRouteMatch | |
| > = { | |
| signal: AbortSignal; | |
| path: string; | |
| matches: M[]; | |
| fetcherKey: string | undefined; | |
| patch: (routeId: string | null, children: O[]) => void; | |
| }; | |
| export type AgnosticPatchRoutesOnNavigationFunction< | |
| O extends AgnosticRouteObject = AgnosticRouteObject, | |
| M extends AgnosticRouteMatch = AgnosticRouteMatch | |
| > = ( | |
| opts: AgnosticPatchRoutesOnNavigationFunctionArgs<O, M> | |
| ) => void | Promise<void>; | |
| /** | |
| * Function provided by the framework-aware layers to set any framework-specific | |
| * properties from framework-agnostic properties | |
| */ | |
| export interface MapRoutePropertiesFunction { | |
| (route: AgnosticRouteObject): { | |
| hasErrorBoundary: boolean; | |
| } & Record<string, any>; | |
| } | |
| /** | |
| * 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. | |
| */ | |
| export type ImmutableRouteKey = | |
| | "lazy" | |
| | "caseSensitive" | |
| | "path" | |
| | "id" | |
| | "index" | |
| | "children"; | |
| export const immutableRouteKeys = new Set<ImmutableRouteKey>([ | |
| "lazy", | |
| "caseSensitive", | |
| "path", | |
| "id", | |
| "index", | |
| "children", | |
| ]); | |
| type RequireOne<T, Key = keyof T> = Exclude< | |
| { | |
| [K in keyof T]: K extends Key ? Omit<T, K> & Required<Pick<T, K>> : never; | |
| }[keyof T], | |
| undefined | |
| >; | |
| /** | |
| * lazy() function to load a route definition, which can add non-matching | |
| * related properties to a route | |
| */ | |
| export interface LazyRouteFunction<R extends AgnosticRouteObject> { | |
| (): Promise<RequireOne<Omit<R, ImmutableRouteKey>>>; | |
| } | |
| /** | |
| * Base RouteObject with common props shared by all types of routes | |
| */ | |
| type AgnosticBaseRouteObject = { | |
| caseSensitive?: boolean; | |
| path?: string; | |
| id?: string; | |
| loader?: LoaderFunction | boolean; | |
| action?: ActionFunction | boolean; | |
| hasErrorBoundary?: boolean; | |
| shouldRevalidate?: ShouldRevalidateFunction; | |
| handle?: any; | |
| lazy?: LazyRouteFunction<AgnosticBaseRouteObject>; | |
| }; | |
| /** | |
| * Index routes must not have children | |
| */ | |
| export type AgnosticIndexRouteObject = AgnosticBaseRouteObject & { | |
| children?: undefined; | |
| index: true; | |
| }; | |
| /** | |
| * Non-index routes may have children, but cannot have index | |
| */ | |
| export type AgnosticNonIndexRouteObject = AgnosticBaseRouteObject & { | |
| children?: AgnosticRouteObject[]; | |
| index?: false; | |
| }; | |
| /** | |
| * A route object represents a logical route, with (optionally) its child | |
| * routes organized in a tree-like structure. | |
| */ | |
| export type AgnosticRouteObject = | |
| | AgnosticIndexRouteObject | |
| | AgnosticNonIndexRouteObject; | |
| export type AgnosticDataIndexRouteObject = AgnosticIndexRouteObject & { | |
| id: string; | |
| }; | |
| export type AgnosticDataNonIndexRouteObject = AgnosticNonIndexRouteObject & { | |
| children?: AgnosticDataRouteObject[]; | |
| id: string; | |
| }; | |
| /** | |
| * A data route object, which is just a RouteObject with a required unique ID | |
| */ | |
| export type AgnosticDataRouteObject = | |
| | AgnosticDataIndexRouteObject | |
| | AgnosticDataNonIndexRouteObject; | |
| export type RouteManifest = Record<string, AgnosticDataRouteObject | undefined>; | |
| // Recursive helper for finding path parameters in the absence of wildcards | |
| type _PathParam<Path extends string> = | |
| // split path into individual path segments | |
| Path extends `${infer L}/${infer R}` | |
| ? _PathParam<L> | _PathParam<R> | |
| : // find params after `:` | |
| Path extends `:${infer Param}` | |
| ? Param extends `${infer Optional}?` | |
| ? Optional | |
| : Param | |
| : // otherwise, there aren't any params present | |
| never; | |
| /** | |
| * Examples: | |
| * "/a/b/*" -> "*" | |
| * ":a" -> "a" | |
| * "/a/:b" -> "b" | |
| * "/a/blahblahblah:b" -> "b" | |
| * "/:a/:b" -> "a" | "b" | |
| * "/:a/b/:c/*" -> "a" | "c" | "*" | |
| */ | |
| export type PathParam<Path extends string> = | |
| // check if path is just a wildcard | |
| Path extends "*" | "/*" | |
| ? "*" | |
| : // look for wildcard at the end of the path | |
| Path extends `${infer Rest}/*` | |
| ? "*" | _PathParam<Rest> | |
| : // look for params in the absence of wildcards | |
| _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 | |
| // parsed string literals that were referenced as dynamic segments in the route. | |
| export type ParamParseKey<Segment extends string> = | |
| // if you could not find path params, fallback to `string` | |
| [PathParam<Segment>] extends [never] ? string : PathParam<Segment>; | |
| /** | |
| * The parameters that were parsed from the URL path. | |
| */ | |
| export type Params<Key extends string = string> = { | |
| readonly [key in Key]: string | undefined; | |
| }; | |
| /** | |
| * A RouteMatch contains info about how a route matched a URL. | |
| */ | |
| export interface AgnosticRouteMatch< | |
| ParamKey extends string = string, | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| > { | |
| /** | |
| * The names and values of dynamic parameters in the URL. | |
| */ | |
| params: Params<ParamKey>; | |
| /** | |
| * The portion of the URL pathname that was matched. | |
| */ | |
| pathname: string; | |
| /** | |
| * The portion of the URL pathname that was matched before child routes. | |
| */ | |
| pathnameBase: string; | |
| /** | |
| * The route object that was used to match. | |
| */ | |
| route: RouteObjectType; | |
| } | |
| export interface AgnosticDataRouteMatch | |
| extends AgnosticRouteMatch<string, AgnosticDataRouteObject> {} | |
| function isIndexRoute( | |
| route: AgnosticRouteObject | |
| ): route is AgnosticIndexRouteObject { | |
| return route.index === true; | |
| } | |
| // 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[], | |
| mapRouteProperties: MapRoutePropertiesFunction, | |
| parentPath: string[] = [], | |
| manifest: RouteManifest = {} | |
| ): AgnosticDataRouteObject[] { | |
| return routes.map((route, index) => { | |
| let treePath = [...parentPath, String(index)]; | |
| let id = typeof route.id === "string" ? route.id : treePath.join("-"); | |
| invariant( | |
| route.index !== true || !route.children, | |
| `Cannot specify children on an index route` | |
| ); | |
| invariant( | |
| !manifest[id], | |
| `Found a route id collision on id "${id}". Route ` + | |
| "id's must be globally unique within Data Router usages" | |
| ); | |
| if (isIndexRoute(route)) { | |
| let indexRoute: AgnosticDataIndexRouteObject = { | |
| ...route, | |
| ...mapRouteProperties(route), | |
| id, | |
| }; | |
| manifest[id] = indexRoute; | |
| return indexRoute; | |
| } else { | |
| let pathOrLayoutRoute: AgnosticDataNonIndexRouteObject = { | |
| ...route, | |
| ...mapRouteProperties(route), | |
| id, | |
| children: undefined, | |
| }; | |
| manifest[id] = pathOrLayoutRoute; | |
| if (route.children) { | |
| pathOrLayoutRoute.children = convertRoutesToDataRoutes( | |
| route.children, | |
| mapRouteProperties, | |
| treePath, | |
| manifest | |
| ); | |
| } | |
| return pathOrLayoutRoute; | |
| } | |
| }); | |
| } | |
| /** | |
| * Matches the given routes to a location and returns the match data. | |
| * | |
| * @see https://reactrouter.com/v6/utils/match-routes | |
| */ | |
| export function matchRoutes< | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| >( | |
| routes: RouteObjectType[], | |
| locationArg: Partial<Location> | string, | |
| basename = "/" | |
| ): AgnosticRouteMatch<string, RouteObjectType>[] | null { | |
| return matchRoutesImpl(routes, locationArg, basename, false); | |
| } | |
| export function matchRoutesImpl< | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| >( | |
| routes: RouteObjectType[], | |
| locationArg: Partial<Location> | string, | |
| basename: string, | |
| allowPartial: boolean | |
| ): AgnosticRouteMatch<string, RouteObjectType>[] | null { | |
| let location = | |
| typeof locationArg === "string" ? parsePath(locationArg) : locationArg; | |
| let pathname = stripBasename(location.pathname || "/", basename); | |
| if (pathname == null) { | |
| return null; | |
| } | |
| let branches = flattenRoutes(routes); | |
| rankRouteBranches(branches); | |
| let matches = null; | |
| let decoded = decodePath(pathname); | |
| for (let i = 0; matches == null && i < branches.length; ++i) { | |
| // Incoming pathnames are generally encoded from either window.location | |
| // or from router.navigate, but we want to match against the unencoded | |
| // paths in the route definitions. Memory router locations won't be | |
| // encoded here but there also shouldn't be anything to decode so this | |
| // should be a safe operation. This avoids needing matchRoutes to be | |
| // history-aware. | |
| matches = matchRouteBranch<string, RouteObjectType>( | |
| branches[i], | |
| decoded, | |
| allowPartial | |
| ); | |
| } | |
| 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 | |
| > { | |
| relativePath: string; | |
| caseSensitive: boolean; | |
| childrenIndex: number; | |
| route: RouteObjectType; | |
| } | |
| interface RouteBranch< | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| > { | |
| path: string; | |
| score: number; | |
| routesMeta: RouteMeta<RouteObjectType>[]; | |
| } | |
| function flattenRoutes< | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| >( | |
| routes: RouteObjectType[], | |
| branches: RouteBranch<RouteObjectType>[] = [], | |
| parentsMeta: RouteMeta<RouteObjectType>[] = [], | |
| parentPath = "" | |
| ): RouteBranch<RouteObjectType>[] { | |
| let flattenRoute = ( | |
| route: RouteObjectType, | |
| index: number, | |
| relativePath?: string | |
| ) => { | |
| let meta: RouteMeta<RouteObjectType> = { | |
| relativePath: | |
| relativePath === undefined ? route.path || "" : relativePath, | |
| caseSensitive: route.caseSensitive === true, | |
| childrenIndex: index, | |
| route, | |
| }; | |
| if (meta.relativePath.startsWith("/")) { | |
| invariant( | |
| meta.relativePath.startsWith(parentPath), | |
| `Absolute route path "${meta.relativePath}" nested under path ` + | |
| `"${parentPath}" is not valid. An absolute child route path ` + | |
| `must start with the combined path of all its parent routes.` | |
| ); | |
| meta.relativePath = meta.relativePath.slice(parentPath.length); | |
| } | |
| 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 | |
| // route tree depth-first and child routes appear before their parents in | |
| // the "flattened" version. | |
| if (route.children && route.children.length > 0) { | |
| invariant( | |
| // Our types know better, but runtime JS may not! | |
| // @ts-expect-error | |
| route.index !== true, | |
| `Index routes must not have child routes. Please remove ` + | |
| `all child routes from route path "${path}".` | |
| ); | |
| flattenRoutes(route.children, branches, routesMeta, path); | |
| } | |
| // Routes without a path shouldn't ever match by themselves unless they are | |
| // index routes, so don't add them to the list of possible branches. | |
| if (route.path == null && !route.index) { | |
| return; | |
| } | |
| branches.push({ | |
| path, | |
| score: computeScore(path, route.index), | |
| routesMeta, | |
| }); | |
| }; | |
| routes.forEach((route, index) => { | |
| // coarse-grain check for optional params | |
| if (route.path === "" || !route.path?.includes("?")) { | |
| flattenRoute(route, index); | |
| } else { | |
| for (let exploded of explodeOptionalSegments(route.path)) { | |
| flattenRoute(route, index, exploded); | |
| } | |
| } | |
| }); | |
| return branches; | |
| } | |
| /** | |
| * Computes all combinations of optional path segments for a given path, | |
| * excluding combinations that are ambiguous and of lower priority. | |
| * | |
| * For example, `/one/:two?/three/:four?/:five?` explodes to: | |
| * - `/one/three` | |
| * - `/one/:two/three` | |
| * - `/one/three/:four` | |
| * - `/one/three/:five` | |
| * - `/one/:two/three/:four` | |
| * - `/one/:two/three/:five` | |
| * - `/one/three/:four/:five` | |
| * - `/one/:two/three/:four/:five` | |
| */ | |
| function explodeOptionalSegments(path: string): string[] { | |
| let segments = path.split("/"); | |
| if (segments.length === 0) return []; | |
| let [first, ...rest] = segments; | |
| // Optional path segments are denoted by a trailing `?` | |
| let isOptional = first.endsWith("?"); | |
| // Compute the corresponding required segment: `foo?` -> `foo` | |
| let required = first.replace(/\?$/, ""); | |
| if (rest.length === 0) { | |
| // Intepret empty string as omitting an optional segment | |
| // `["one", "", "three"]` corresponds to omitting `:two` from `/one/:two?/three` -> `/one/three` | |
| return isOptional ? [required, ""] : [required]; | |
| } | |
| let restExploded = explodeOptionalSegments(rest.join("/")); | |
| 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 | |
| // 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 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 | |
| if (isOptional) { | |
| result.push(...restExploded); | |
| } | |
| // for absolute paths, ensure `/` instead of empty segment | |
| return result.map((exploded) => | |
| path.startsWith("/") && exploded === "" ? "/" : exploded | |
| ); | |
| } | |
| function rankRouteBranches(branches: RouteBranch[]): void { | |
| branches.sort((a, b) => | |
| a.score !== b.score | |
| ? b.score - a.score // Higher score first | |
| : compareIndexes( | |
| a.routesMeta.map((meta) => meta.childrenIndex), | |
| b.routesMeta.map((meta) => meta.childrenIndex) | |
| ) | |
| ); | |
| } | |
| const paramRe = /^:[\w-]+$/; | |
| const dynamicSegmentValue = 3; | |
| const indexRouteValue = 2; | |
| const emptySegmentValue = 1; | |
| const staticSegmentValue = 10; | |
| const splatPenalty = -2; | |
| const isSplat = (s: string) => s === "*"; | |
| function computeScore(path: string, index: boolean | undefined): number { | |
| let segments = path.split("/"); | |
| let initialScore = segments.length; | |
| if (segments.some(isSplat)) { | |
| initialScore += splatPenalty; | |
| } | |
| if (index) { | |
| initialScore += indexRouteValue; | |
| } | |
| return segments | |
| .filter((s) => !isSplat(s)) | |
| .reduce( | |
| (score, segment) => | |
| score + | |
| (paramRe.test(segment) | |
| ? dynamicSegmentValue | |
| : segment === "" | |
| ? emptySegmentValue | |
| : staticSegmentValue), | |
| initialScore | |
| ); | |
| } | |
| function compareIndexes(a: number[], b: number[]): number { | |
| let siblings = | |
| a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]); | |
| return siblings | |
| ? // If two routes are siblings, we should try to match the earlier sibling | |
| // first. This allows people to have fine-grained control over the matching | |
| // behavior by simply putting routes with identical paths in the order they | |
| // want them tried. | |
| a[a.length - 1] - b[b.length - 1] | |
| : // Otherwise, it doesn't really make sense to rank non-siblings by index, | |
| // so they sort equally. | |
| 0; | |
| } | |
| function matchRouteBranch< | |
| ParamKey extends string = string, | |
| RouteObjectType extends AgnosticRouteObject = AgnosticRouteObject | |
| >( | |
| branch: RouteBranch<RouteObjectType>, | |
| pathname: string, | |
| allowPartial = false | |
| ): AgnosticRouteMatch<ParamKey, RouteObjectType>[] | null { | |
| let { routesMeta } = branch; | |
| let matchedParams = {}; | |
| let matchedPathname = "/"; | |
| let matches: AgnosticRouteMatch<ParamKey, RouteObjectType>[] = []; | |
| for (let i = 0; i < routesMeta.length; ++i) { | |
| let meta = routesMeta[i]; | |
| let end = i === routesMeta.length - 1; | |
| let remainingPathname = | |
| matchedPathname === "/" | |
| ? pathname | |
| : pathname.slice(matchedPathname.length) || "/"; | |
| let match = matchPath( | |
| { path: meta.relativePath, caseSensitive: meta.caseSensitive, end }, | |
| remainingPathname | |
| ); | |
| let route = meta.route; | |
| if ( | |
| !match && | |
| end && | |
| allowPartial && | |
| !routesMeta[routesMeta.length - 1].route.index | |
| ) { | |
| match = matchPath( | |
| { | |
| path: meta.relativePath, | |
| caseSensitive: meta.caseSensitive, | |
| end: false, | |
| }, | |
| remainingPathname | |
| ); | |
| } | |
| if (!match) { | |
| return null; | |
| } | |
| Object.assign(matchedParams, match.params); | |
| matches.push({ | |
| // TODO: Can this as be avoided? | |
| params: matchedParams as Params<ParamKey>, | |
| pathname: joinPaths([matchedPathname, match.pathname]), | |
| pathnameBase: normalizePathname( | |
| joinPaths([matchedPathname, match.pathnameBase]) | |
| ), | |
| route, | |
| }); | |
| if (match.pathnameBase !== "/") { | |
| matchedPathname = joinPaths([matchedPathname, match.pathnameBase]); | |
| } | |
| } | |
| return matches; | |
| } | |
| /** | |
| * Returns a path with params interpolated. | |
| * | |
| * @see https://reactrouter.com/v6/utils/generate-path | |
| */ | |
| export function generatePath<Path extends string>( | |
| originalPath: Path, | |
| params: { | |
| [key in PathParam<Path>]: string | null; | |
| } = {} as any | |
| ): string { | |
| let path: string = originalPath; | |
| if (path.endsWith("*") && path !== "*" && !path.endsWith("/*")) { | |
| warning( | |
| false, | |
| `Route path "${path}" will be treated as if it were ` + | |
| `"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` + | |
| `always follow a \`/\` in the pattern. To get rid of this warning, ` + | |
| `please change the route path to "${path.replace(/\*$/, "/*")}".` | |
| ); | |
| path = path.replace(/\*$/, "/*") as Path; | |
| } | |
| // ensure `/` is added at the beginning if the path is absolute | |
| const prefix = path.startsWith("/") ? "/" : ""; | |
| const stringify = (p: any) => | |
| p == null ? "" : typeof p === "string" ? p : String(p); | |
| const segments = path | |
| .split(/\/+/) | |
| .map((segment, index, array) => { | |
| const isLastSegment = index === array.length - 1; | |
| // only apply the splat if it's the last segment | |
| if (isLastSegment && segment === "*") { | |
| const star = "*" as PathParam<Path>; | |
| // Apply the splat | |
| return stringify(params[star]); | |
| } | |
| const keyMatch = segment.match(/^:([\w-]+)(\??)$/); | |
| if (keyMatch) { | |
| const [, key, optional] = keyMatch; | |
| let param = params[key as PathParam<Path>]; | |
| invariant(optional === "?" || param != null, `Missing ":${key}" param`); | |
| return stringify(param); | |
| } | |
| // Remove any optional markers from optional static segments | |
| return segment.replace(/\?$/g, ""); | |
| }) | |
| // Remove empty segments | |
| .filter((segment) => !!segment); | |
| return prefix + segments.join("/"); | |
| } | |
| /** | |
| * A PathPattern is used to match on some portion of a URL pathname. | |
| */ | |
| export interface PathPattern<Path extends string = string> { | |
| /** | |
| * A string to match against a URL pathname. May contain `:id`-style segments | |
| * to indicate placeholders for dynamic parameters. May also end with `/*` to | |
| * indicate matching the rest of the URL pathname. | |
| */ | |
| path: Path; | |
| /** | |
| * Should be `true` if the static portions of the `path` should be matched in | |
| * the same case. | |
| */ | |
| caseSensitive?: boolean; | |
| /** | |
| * Should be `true` if this pattern should match the entire URL pathname. | |
| */ | |
| end?: boolean; | |
| } | |
| /** | |
| * A PathMatch contains info about how a PathPattern matched on a URL pathname. | |
| */ | |
| export interface PathMatch<ParamKey extends string = string> { | |
| /** | |
| * The names and values of dynamic parameters in the URL. | |
| */ | |
| params: Params<ParamKey>; | |
| /** | |
| * The portion of the URL pathname that was matched. | |
| */ | |
| pathname: string; | |
| /** | |
| * The portion of the URL pathname that was matched before child routes. | |
| */ | |
| pathnameBase: string; | |
| /** | |
| * The pattern that was used to match. | |
| */ | |
| pattern: PathPattern; | |
| } | |
| type Mutable<T> = { | |
| -readonly [P in keyof T]: T[P]; | |
| }; | |
| /** | |
| * Performs pattern matching on a URL pathname and returns information about | |
| * the match. | |
| * | |
| * @see https://reactrouter.com/v6/utils/match-path | |
| */ | |
| export function matchPath< | |
| ParamKey extends ParamParseKey<Path>, | |
| Path extends string | |
| >( | |
| pattern: PathPattern<Path> | Path, | |
| pathname: string | |
| ): PathMatch<ParamKey> | null { | |
| if (typeof pattern === "string") { | |
| pattern = { path: pattern, caseSensitive: false, end: true }; | |
| } | |
| let [matcher, compiledParams] = compilePath( | |
| pattern.path, | |
| pattern.caseSensitive, | |
| pattern.end | |
| ); | |
| let match = pathname.match(matcher); | |
| if (!match) return null; | |
| let matchedPathname = match[0]; | |
| let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1"); | |
| let captureGroups = match.slice(1); | |
| let params: Params = compiledParams.reduce<Mutable<Params>>( | |
| (memo, { paramName, isOptional }, index) => { | |
| // We need to compute the pathnameBase here using the raw splat value | |
| // instead of using params["*"] later because it will be decoded then | |
| if (paramName === "*") { | |
| let splatValue = captureGroups[index] || ""; | |
| pathnameBase = matchedPathname | |
| .slice(0, matchedPathname.length - splatValue.length) | |
| .replace(/(.)\/+$/, "$1"); | |
| } | |
| const value = captureGroups[index]; | |
| if (isOptional && !value) { | |
| memo[paramName] = undefined; | |
| } else { | |
| memo[paramName] = (value || "").replace(/%2F/g, "/"); | |
| } | |
| return memo; | |
| }, | |
| {} | |
| ); | |
| return { | |
| params, | |
| pathname: matchedPathname, | |
| pathnameBase, | |
| pattern, | |
| }; | |
| } | |
| type CompiledPathParam = { paramName: string; isOptional?: boolean }; | |
| function compilePath( | |
| path: string, | |
| caseSensitive = false, | |
| end = true | |
| ): [RegExp, CompiledPathParam[]] { | |
| warning( | |
| path === "*" || !path.endsWith("*") || path.endsWith("/*"), | |
| `Route path "${path}" will be treated as if it were ` + | |
| `"${path.replace(/\*$/, "/*")}" because the \`*\` character must ` + | |
| `always follow a \`/\` in the pattern. To get rid of this warning, ` + | |
| `please change the route path to "${path.replace(/\*$/, "/*")}".` | |
| ); | |
| let params: CompiledPathParam[] = []; | |
| let regexpSource = | |
| "^" + | |
| path | |
| .replace(/\/*\*?$/, "") // Ignore trailing / and /*, we'll handle it below | |
| .replace(/^\/*/, "/") // Make sure it has a leading / | |
| .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars | |
| .replace( | |
| /\/:([\w-]+)(\?)?/g, | |
| (_: string, paramName: string, isOptional) => { | |
| params.push({ paramName, isOptional: isOptional != null }); | |
| return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)"; | |
| } | |
| ); | |
| if (path.endsWith("*")) { | |
| params.push({ paramName: "*" }); | |
| regexpSource += | |
| path === "*" || path === "/*" | |
| ? "(.*)$" // Already matched the initial /, just match the rest | |
| : "(?:\\/(.+)|\\/*)$"; // Don't include the / in params["*"] | |
| } else if (end) { | |
| // When matching to the end, ignore trailing slashes | |
| 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 | |
| // 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 | |
| // word boundary but that gives false positives on routes like | |
| // /user-preferences since `-` counts as a word boundary. | |
| regexpSource += "(?:(?=\\/|$))"; | |
| } else { | |
| // Nothing to match for "" or "/" | |
| } | |
| let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i"); | |
| return [matcher, params]; | |
| } | |
| export function decodePath(value: string) { | |
| try { | |
| return value | |
| .split("/") | |
| .map((v) => decodeURIComponent(v).replace(/\//g, "%2F")) | |
| .join("/"); | |
| } catch (error) { | |
| warning( | |
| false, | |
| `The URL path "${value}" could not be decoded because it is is a ` + | |
| `malformed URL segment. This is probably due to a bad percent ` + | |
| `encoding (${error}).` | |
| ); | |
| return value; | |
| } | |
| } | |
| /** | |
| * @private | |
| */ | |
| export function stripBasename( | |
| pathname: string, | |
| basename: string | |
| ): string | null { | |
| if (basename === "/") return pathname; | |
| if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) { | |
| return null; | |
| } | |
| // We want to leave trailing slash behavior in the user's control, so if they | |
| // specify a basename with a trailing slash, we should support it | |
| let startIndex = basename.endsWith("/") | |
| ? basename.length - 1 | |
| : basename.length; | |
| let nextChar = pathname.charAt(startIndex); | |
| if (nextChar && nextChar !== "/") { | |
| // pathname does not start with basename/ | |
| return null; | |
| } | |
| return pathname.slice(startIndex) || "/"; | |
| } | |
| const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i; | |
| export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url); | |
| /** | |
| * Returns a resolved path object relative to the given pathname. | |
| * | |
| * @see https://reactrouter.com/v6/utils/resolve-path | |
| */ | |
| export function resolvePath(to: To, fromPathname = "/"): Path { | |
| let { | |
| pathname: toPathname, | |
| search = "", | |
| hash = "", | |
| } = typeof to === "string" ? parsePath(to) : to; | |
| let pathname: string; | |
| if (toPathname) { | |
| if (isAbsoluteUrl(toPathname)) { | |
| pathname = toPathname; | |
| } else { | |
| if (toPathname.includes("//")) { | |
| let oldPathname = toPathname; | |
| toPathname = removeDoubleSlashes(toPathname); | |
| warning( | |
| false, | |
| `Pathnames cannot have embedded double slashes - normalizing ` + | |
| `${oldPathname} -> ${toPathname}` | |
| ); | |
| } | |
| if (toPathname.startsWith("/")) { | |
| pathname = resolvePathname(toPathname.substring(1), "/"); | |
| } else { | |
| pathname = resolvePathname(toPathname, fromPathname); | |
| } | |
| } | |
| } else { | |
| pathname = fromPathname; | |
| } | |
| return { | |
| pathname, | |
| search: normalizeSearch(search), | |
| hash: normalizeHash(hash), | |
| }; | |
| } | |
| function resolvePathname(relativePath: string, fromPathname: string): string { | |
| let segments = fromPathname.replace(/\/+$/, "").split("/"); | |
| let relativeSegments = relativePath.split("/"); | |
| relativeSegments.forEach((segment) => { | |
| if (segment === "..") { | |
| // Keep the root "" segment so the pathname starts at / | |
| if (segments.length > 1) segments.pop(); | |
| } else if (segment !== ".") { | |
| segments.push(segment); | |
| } | |
| }); | |
| return segments.length > 1 ? segments.join("/") : "/"; | |
| } | |
| function getInvalidPathError( | |
| char: string, | |
| field: string, | |
| dest: string, | |
| path: Partial<Path> | |
| ) { | |
| return ( | |
| `Cannot include a '${char}' character in a manually specified ` + | |
| `\`to.${field}\` field [${JSON.stringify( | |
| path | |
| )}]. Please separate it out to the ` + | |
| `\`to.${dest}\` field. Alternatively you may provide the full path as ` + | |
| `a string in <Link to="..."> and the router will parse it for you.` | |
| ); | |
| } | |
| /** | |
| * @private | |
| * | |
| * When processing relative navigation we want to ignore ancestor routes that | |
| * do not contribute to the path, such that index/pathless layout routes don't | |
| * interfere. | |
| * | |
| * For example, when moving a route element into an index route and/or a | |
| * pathless layout route, relative link behavior contained within should stay | |
| * the same. Both of the following examples should link back to the root: | |
| * | |
| * <Route path="/"> | |
| * <Route path="accounts" element={<Link to=".."}> | |
| * </Route> | |
| * | |
| * <Route path="/"> | |
| * <Route path="accounts"> | |
| * <Route element={<AccountsLayout />}> // <-- Does not contribute | |
| * <Route index element={<Link to=".."} /> // <-- Does not contribute | |
| * </Route | |
| * </Route> | |
| * </Route> | |
| */ | |
| export function getPathContributingMatches< | |
| T extends AgnosticRouteMatch = AgnosticRouteMatch | |
| >(matches: T[]) { | |
| return matches.filter( | |
| (match, index) => | |
| index === 0 || (match.route.path && match.route.path.length > 0) | |
| ); | |
| } | |
| // Return the array of pathnames for the current route matches - used to | |
| // generate the routePathnames input for resolveTo() | |
| export function getResolveToMatches< | |
| T extends AgnosticRouteMatch = AgnosticRouteMatch | |
| >(matches: T[], v7_relativeSplatPath: boolean) { | |
| let pathMatches = getPathContributingMatches(matches); | |
| // When v7_relativeSplatPath is enabled, use the full pathname for the leaf | |
| // match so we include splat values for "." links. See: | |
| // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329 | |
| if (v7_relativeSplatPath) { | |
| return pathMatches.map((match, idx) => | |
| idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase | |
| ); | |
| } | |
| return pathMatches.map((match) => match.pathnameBase); | |
| } | |
| /** | |
| * @private | |
| */ | |
| export function resolveTo( | |
| toArg: To, | |
| routePathnames: string[], | |
| locationPathname: string, | |
| isPathRelative = false | |
| ): Path { | |
| let to: Partial<Path>; | |
| if (typeof toArg === "string") { | |
| to = parsePath(toArg); | |
| } else { | |
| to = { ...toArg }; | |
| invariant( | |
| !to.pathname || !to.pathname.includes("?"), | |
| getInvalidPathError("?", "pathname", "search", to) | |
| ); | |
| invariant( | |
| !to.pathname || !to.pathname.includes("#"), | |
| getInvalidPathError("#", "pathname", "hash", to) | |
| ); | |
| invariant( | |
| !to.search || !to.search.includes("#"), | |
| getInvalidPathError("#", "search", "hash", to) | |
| ); | |
| } | |
| let isEmptyPath = toArg === "" || to.pathname === ""; | |
| let toPathname = isEmptyPath ? "/" : to.pathname; | |
| let from: string; | |
| // Routing is relative to the current pathname if explicitly requested. | |
| // | |
| // If a pathname is explicitly provided in `to`, it should be relative to the | |
| // route context. This is explained in `Note on `<Link to>` values` in our | |
| // migration guide from v5 as a means of disambiguation between `to` values | |
| // that begin with `/` and those that do not. However, this is problematic for | |
| // `to` values that do not provide a pathname. `to` can simply be a search or | |
| // hash string, in which case we should assume that the navigation is relative | |
| // to the current location's pathname and *not* the route pathname. | |
| if (toPathname == null) { | |
| from = locationPathname; | |
| } else { | |
| let routePathnameIndex = routePathnames.length - 1; | |
| // With relative="route" (the default), each leading .. segment means | |
| // "go up one route" instead of "go up one URL segment". This is a key | |
| // difference from how <a href> works and a major reason we call this a | |
| // "to" value instead of a "href". | |
| if (!isPathRelative && toPathname.startsWith("..")) { | |
| let toSegments = toPathname.split("/"); | |
| while (toSegments[0] === "..") { | |
| toSegments.shift(); | |
| routePathnameIndex -= 1; | |
| } | |
| to.pathname = toSegments.join("/"); | |
| } | |
| from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/"; | |
| } | |
| let path = resolvePath(to, from); | |
| // Ensure the pathname has a trailing slash if the original "to" had one | |
| let hasExplicitTrailingSlash = | |
| toPathname && toPathname !== "/" && toPathname.endsWith("/"); | |
| // Or if this was a link to the current path which has a trailing slash | |
| let hasCurrentTrailingSlash = | |
| (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/"); | |
| if ( | |
| !path.pathname.endsWith("/") && | |
| (hasExplicitTrailingSlash || hasCurrentTrailingSlash) | |
| ) { | |
| path.pathname += "/"; | |
| } | |
| return path; | |
| } | |
| /** | |
| * @private | |
| */ | |
| export function getToPathname(to: To): string | undefined { | |
| // Empty strings should be treated the same as / paths | |
| return to === "" || (to as Path).pathname === "" | |
| ? "/" | |
| : typeof to === "string" | |
| ? parsePath(to).pathname | |
| : to.pathname; | |
| } | |
| export const removeDoubleSlashes = (path: string): string => | |
| path.replace(/\/\/+/g, "/"); | |
| /** | |
| * @private | |
| */ | |
| export const joinPaths = (paths: string[]): string => | |
| removeDoubleSlashes(paths.join("/")); | |
| /** | |
| * @private | |
| */ | |
| export const normalizePathname = (pathname: string): string => | |
| pathname.replace(/\/+$/, "").replace(/^\/*/, "/"); | |
| /** | |
| * @private | |
| */ | |
| export const normalizeSearch = (search: string): string => | |
| !search || search === "?" | |
| ? "" | |
| : search.startsWith("?") | |
| ? search | |
| : "?" + search; | |
| /** | |
| * @private | |
| */ | |
| export const normalizeHash = (hash: string): string => | |
| !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash; | |
| export type JsonFunction = <Data>( | |
| data: Data, | |
| init?: number | ResponseInit | |
| ) => Response; | |
| /** | |
| * This is a shortcut for creating `application/json` responses. Converts `data` | |
| * to JSON and sets the `Content-Type` header. | |
| * | |
| * @deprecated The `json` method is deprecated in favor of returning raw objects. | |
| * This method will be removed in v7. | |
| */ | |
| export const json: JsonFunction = (data, init = {}) => { | |
| let responseInit = typeof init === "number" ? { status: init } : init; | |
| let headers = new Headers(responseInit.headers); | |
| if (!headers.has("Content-Type")) { | |
| headers.set("Content-Type", "application/json; charset=utf-8"); | |
| } | |
| return new Response(JSON.stringify(data), { | |
| ...responseInit, | |
| headers, | |
| }); | |
| }; | |
| export class DataWithResponseInit<D> { | |
| type: string = "DataWithResponseInit"; | |
| data: D; | |
| init: ResponseInit | null; | |
| constructor(data: D, init?: ResponseInit) { | |
| this.data = data; | |
| this.init = init || null; | |
| } | |
| } | |
| /** | |
| * Create "responses" that contain `status`/`headers` without forcing | |
| * serialization into an actual `Response` - used by Remix single fetch | |
| */ | |
| export function data<D>(data: D, init?: number | ResponseInit) { | |
| return new DataWithResponseInit( | |
| data, | |
| typeof init === "number" ? { status: init } : init | |
| ); | |
| } | |
| export interface TrackedPromise extends Promise<any> { | |
| _tracked?: boolean; | |
| _data?: any; | |
| _error?: any; | |
| } | |
| export class AbortedDeferredError extends Error {} | |
| export class DeferredData { | |
| private pendingKeysSet: Set<string> = new Set<string>(); | |
| private controller: AbortController; | |
| private abortPromise: Promise<void>; | |
| private unlistenAbortSignal: () => void; | |
| private subscribers: Set<(aborted: boolean, settledKey?: string) => void> = | |
| new Set(); | |
| data: Record<string, unknown>; | |
| init?: ResponseInit; | |
| deferredKeys: string[] = []; | |
| constructor(data: Record<string, unknown>, responseInit?: ResponseInit) { | |
| invariant( | |
| data && typeof data === "object" && !Array.isArray(data), | |
| "defer() only accepts plain objects" | |
| ); | |
| // Set up an AbortController + Promise we can race against to exit early | |
| // cancellation | |
| let reject: (e: AbortedDeferredError) => void; | |
| this.abortPromise = new Promise((_, r) => (reject = r)); | |
| this.controller = new AbortController(); | |
| let onAbort = () => | |
| reject(new AbortedDeferredError("Deferred data aborted")); | |
| this.unlistenAbortSignal = () => | |
| this.controller.signal.removeEventListener("abort", onAbort); | |
| this.controller.signal.addEventListener("abort", onAbort); | |
| this.data = Object.entries(data).reduce( | |
| (acc, [key, value]) => | |
| Object.assign(acc, { | |
| [key]: this.trackPromise(key, value), | |
| }), | |
| {} | |
| ); | |
| if (this.done) { | |
| // All incoming values were resolved | |
| this.unlistenAbortSignal(); | |
| } | |
| this.init = responseInit; | |
| } | |
| private trackPromise( | |
| key: string, | |
| value: Promise<unknown> | unknown | |
| ): TrackedPromise | unknown { | |
| if (!(value instanceof Promise)) { | |
| return value; | |
| } | |
| this.deferredKeys.push(key); | |
| this.pendingKeysSet.add(key); | |
| // We store a little wrapper promise that will be extended with | |
| // _data/_error props upon resolve/reject | |
| let promise: TrackedPromise = Promise.race([value, this.abortPromise]).then( | |
| (data) => this.onSettle(promise, key, undefined, data as unknown), | |
| (error) => this.onSettle(promise, key, error as unknown) | |
| ); | |
| // Register rejection listeners to avoid uncaught promise rejections on | |
| // errors or aborted deferred values | |
| promise.catch(() => {}); | |
| Object.defineProperty(promise, "_tracked", { get: () => true }); | |
| return promise; | |
| } | |
| private onSettle( | |
| promise: TrackedPromise, | |
| key: string, | |
| error: unknown, | |
| data?: unknown | |
| ): unknown { | |
| if ( | |
| this.controller.signal.aborted && | |
| error instanceof AbortedDeferredError | |
| ) { | |
| this.unlistenAbortSignal(); | |
| Object.defineProperty(promise, "_error", { get: () => error }); | |
| return Promise.reject(error); | |
| } | |
| this.pendingKeysSet.delete(key); | |
| if (this.done) { | |
| // Nothing left to abort! | |
| this.unlistenAbortSignal(); | |
| } | |
| // If the promise was resolved/rejected with undefined, we'll throw an error as you | |
| // should always resolve with a value or null | |
| if (error === undefined && data === undefined) { | |
| let undefinedError = new Error( | |
| `Deferred data for key "${key}" resolved/rejected with \`undefined\`, ` + | |
| `you must resolve/reject with a value or \`null\`.` | |
| ); | |
| Object.defineProperty(promise, "_error", { get: () => undefinedError }); | |
| this.emit(false, key); | |
| return Promise.reject(undefinedError); | |
| } | |
| if (data === undefined) { | |
| Object.defineProperty(promise, "_error", { get: () => error }); | |
| this.emit(false, key); | |
| return Promise.reject(error); | |
| } | |
| Object.defineProperty(promise, "_data", { get: () => data }); | |
| this.emit(false, key); | |
| return data; | |
| } | |
| private emit(aborted: boolean, settledKey?: string) { | |
| this.subscribers.forEach((subscriber) => subscriber(aborted, settledKey)); | |
| } | |
| subscribe(fn: (aborted: boolean, settledKey?: string) => void) { | |
| this.subscribers.add(fn); | |
| return () => this.subscribers.delete(fn); | |
| } | |
| cancel() { | |
| this.controller.abort(); | |
| this.pendingKeysSet.forEach((v, k) => this.pendingKeysSet.delete(k)); | |
| this.emit(true); | |
| } | |
| async resolveData(signal: AbortSignal) { | |
| let aborted = false; | |
| if (!this.done) { | |
| let onAbort = () => this.cancel(); | |
| signal.addEventListener("abort", onAbort); | |
| aborted = await new Promise((resolve) => { | |
| this.subscribe((aborted) => { | |
| signal.removeEventListener("abort", onAbort); | |
| if (aborted || this.done) { | |
| resolve(aborted); | |
| } | |
| }); | |
| }); | |
| } | |
| return aborted; | |
| } | |
| get done() { | |
| return this.pendingKeysSet.size === 0; | |
| } | |
| get unwrappedData() { | |
| invariant( | |
| this.data !== null && this.done, | |
| "Can only unwrap data on initialized and settled deferreds" | |
| ); | |
| return Object.entries(this.data).reduce( | |
| (acc, [key, value]) => | |
| Object.assign(acc, { | |
| [key]: unwrapTrackedPromise(value), | |
| }), | |
| {} | |
| ); | |
| } | |
| get pendingKeys() { | |
| return Array.from(this.pendingKeysSet); | |
| } | |
| } | |
| function isTrackedPromise(value: any): value is TrackedPromise { | |
| return ( | |
| value instanceof Promise && (value as TrackedPromise)._tracked === true | |
| ); | |
| } | |
| function unwrapTrackedPromise(value: any) { | |
| if (!isTrackedPromise(value)) { | |
| return value; | |
| } | |
| if (value._error) { | |
| throw value._error; | |
| } | |
| return value._data; | |
| } | |
| export type DeferFunction = ( | |
| data: Record<string, unknown>, | |
| init?: number | ResponseInit | |
| ) => DeferredData; | |
| /** | |
| * @deprecated The `defer` method is deprecated in favor of returning raw | |
| * objects. This method will be removed in v7. | |
| */ | |
| export const defer: DeferFunction = (data, init = {}) => { | |
| let responseInit = typeof init === "number" ? { status: init } : init; | |
| return new DeferredData(data, responseInit); | |
| }; | |
| export type RedirectFunction = ( | |
| url: string, | |
| init?: number | ResponseInit | |
| ) => Response; | |
| /** | |
| * A redirect response. Sets the status code and the `Location` header. | |
| * Defaults to "302 Found". | |
| */ | |
| export const redirect: RedirectFunction = (url, init = 302) => { | |
| let responseInit = init; | |
| if (typeof responseInit === "number") { | |
| responseInit = { status: responseInit }; | |
| } else if (typeof responseInit.status === "undefined") { | |
| responseInit.status = 302; | |
| } | |
| let headers = new Headers(responseInit.headers); | |
| headers.set("Location", url); | |
| return new Response(null, { | |
| ...responseInit, | |
| headers, | |
| }); | |
| }; | |
| /** | |
| * A redirect response that will force a document reload to the new location. | |
| * Sets the status code and the `Location` header. | |
| * Defaults to "302 Found". | |
| */ | |
| export const redirectDocument: RedirectFunction = (url, init) => { | |
| let response = redirect(url, init); | |
| response.headers.set("X-Remix-Reload-Document", "true"); | |
| return response; | |
| }; | |
| /** | |
| * A redirect response that will perform a `history.replaceState` instead of a | |
| * `history.pushState` for client-side navigation redirects. | |
| * Sets the status code and the `Location` header. | |
| * Defaults to "302 Found". | |
| */ | |
| export const replace: RedirectFunction = (url, init) => { | |
| let response = redirect(url, init); | |
| response.headers.set("X-Remix-Replace", "true"); | |
| return response; | |
| }; | |
| export type ErrorResponse = { | |
| status: number; | |
| statusText: string; | |
| data: any; | |
| }; | |
| /** | |
| * @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() | |
| */ | |
| export class ErrorResponseImpl implements ErrorResponse { | |
| status: number; | |
| statusText: string; | |
| data: any; | |
| private error?: Error; | |
| private internal: boolean; | |
| constructor( | |
| status: number, | |
| statusText: string | undefined, | |
| data: any, | |
| internal = false | |
| ) { | |
| this.status = status; | |
| this.statusText = statusText || ""; | |
| this.internal = internal; | |
| if (data instanceof Error) { | |
| this.data = data.toString(); | |
| this.error = data; | |
| } else { | |
| this.data = data; | |
| } | |
| } | |
| } | |
| /** | |
| * Check if the given error is an ErrorResponse generated from a 4xx/5xx | |
| * Response thrown from an action/loader | |
| */ | |
| export function isRouteErrorResponse(error: any): error is ErrorResponse { | |
| return ( | |
| error != null && | |
| typeof error.status === "number" && | |
| typeof error.statusText === "string" && | |
| typeof error.internal === "boolean" && | |
| "data" in error | |
| ); | |
| } | |