react-router 8.0.1 → 8.2.0

package/dist/production/lib/hooks.d.ts

@@ -143,12 +143,16 @@ interface NavigateFunction {
  * All properties are optional.
  *
  * ```tsx
- * navigate({
- *   pathname: "/some/route",
- *   search: "?search=param",
- *   hash: "#hash",
- *   state: { some: "state" },
- * });
+ * navigate(
+ *   {
+ *     pathname: "/some/route",
+ *     search: "?search=param",
+ *     hash: "#hash",
+ *   },
+ *   {
+ *     state: { some: "state" },
+ *   },
+ * );
  * ```
  *
  * If you use `state`, that will be available on the {@link Location} object on
@@ -576,6 +580,29 @@ declare function useRevalidator(): {
  * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
  * property
  *
+ * Pairing the route `handle` with `useMatches` gets very powerful since you can put
+ * whatever you want on a route handle and have access to `useMatches` anywhere.
+ * Please see the [handle](../../how-to/using-handle) documentation for an example
+ * of breadcrumbs via `useMatches`/`handle`.
+ *
+ * ```tsx
+ * import { useMatches } from "react-router";
+ *
+ * function SomeComponent() {
+ *   const matches = useMatches();
+ *   // matches[i].id          // route id
+ *   // matches[i].pathname    // the portion of the URL the route matched
+ *   // matches[i].params      // the parsed params from the URL
+ *   // matches[i].loaderData  // the data from the loader
+ *   // matches[i].handle      // the route handle with any app specific data
+ * }
+ * ```
+ *
+ * <docs-info>useMatches only works with a data router like `createBrowserRouter`,
+ * since they know the full route tree up front and can provide all of the current
+ * matches. Additionally, `useMatches` will not match down into any descendant route
+ * trees since the router isn't aware of the descendant routes.</docs-info>
+ *
  * @public
  * @category Hooks
  * @mode framework

package/dist/production/lib/hooks.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.1
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -162,12 +162,16 @@ const navigateEffectWarning = "You should call navigate() in a React.useEffect()
 * All properties are optional.
 *
 * ```tsx
-* navigate({
-*   pathname: "/some/route",
-*   search: "?search=param",
-*   hash: "#hash",
-*   state: { some: "state" },
-* });
+* navigate(
+*   {
+*     pathname: "/some/route",
+*     search: "?search=param",
+*     hash: "#hash",
+*   },
+*   {
+*     state: { some: "state" },
+*   },
+* );
 * ```
 *
 * If you use `state`, that will be available on the {@link Location} object on
@@ -904,6 +908,29 @@ function useRevalidator() {
 * parent/child routes or the route [`handle`](../../start/framework/route-module#handle)
 * property
 *
+* Pairing the route `handle` with `useMatches` gets very powerful since you can put
+* whatever you want on a route handle and have access to `useMatches` anywhere.
+* Please see the [handle](../../how-to/using-handle) documentation for an example
+* of breadcrumbs via `useMatches`/`handle`.
+*
+* ```tsx
+* import { useMatches } from "react-router";
+*
+* function SomeComponent() {
+*   const matches = useMatches();
+*   // matches[i].id          // route id
+*   // matches[i].pathname    // the portion of the URL the route matched
+*   // matches[i].params      // the parsed params from the URL
+*   // matches[i].loaderData  // the data from the loader
+*   // matches[i].handle      // the route handle with any app specific data
+* }
+* ```
+*
+* <docs-info>useMatches only works with a data router like `createBrowserRouter`,
+* since they know the full route tree up front and can provide all of the current
+* matches. Additionally, `useMatches` will not match down into any descendant route
+* trees since the router isn't aware of the descendant routes.</docs-info>
+*
 * @public
 * @category Hooks
 * @mode framework

package/dist/production/lib/href.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.1
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,6 +9,9 @@
  * @license MIT
  */
 //#region lib/href.ts
+function stringify(p) {
+	return p == null ? "" : typeof p === "string" ? p : String(p);
+}
 /**
 Returns a resolved URL path for the specified route.
 
@@ -25,11 +28,11 @@ function href(path, ...args) {
 		const isRequired = questionMark === void 0;
 		const value = params?.[param];
 		if (isRequired && value === void 0) throw new Error(`Path '${path}' requires param '${param}' but it was not provided`);
-		return value === void 0 ? "" : "/" + value;
+		return value == null ? "" : "/" + encodeURIComponent(stringify(value));
 	});
 	if (path.endsWith("*")) {
 		const value = params?.["*"];
-		if (value !== void 0) result += "/" + value;
+		if (value !== void 0) result += "/" + stringify(value).split("/").map(encodeURIComponent).join("/");
 	}
 	return result || "/";
 }

package/dist/production/lib/router/history.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.1
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/production/lib/router/instrumentation.d.ts

@@ -12,6 +12,19 @@ type ClientInstrumentation = {
 type InstrumentRequestHandlerFunction = (handler: InstrumentableRequestHandler) => void;
 type InstrumentRouterFunction = (router: InstrumentableRouter) => void;
 type InstrumentRouteFunction = (route: InstrumentableRoute) => void;
+/**
+ * Route metadata available after React Router has matched an instrumented
+ * request, navigation, or fetcher call.
+ */
+type InstrumentationResultMeta = {
+  url: LoaderFunctionArgs["url"];
+  pattern: string;
+  params: LoaderFunctionArgs["params"];
+};
+/**
+ * Result returned by route-level instrumented handler calls, such as
+ * instrumented loaders, actions, middleware, and lazy route functions.
+ */
 type InstrumentationHandlerResult = {
   status: "success";
   error: undefined;
@@ -19,7 +32,21 @@ type InstrumentationHandlerResult = {
   status: "error";
   error: Error;
 };
-type InstrumentFunction<T> = (handler: () => Promise<InstrumentationHandlerResult>, info: T) => Promise<void>;
+/**
+ * Result returned by client-side router instrumented navigation and fetcher
+ * calls.
+ */
+type InstrumentationClientRouterResult = InstrumentationHandlerResult & {
+  meta: InstrumentationResultMeta | undefined;
+};
+/**
+ * Result returned by server request handler instrumentation.
+ */
+type InstrumentationServerHandlerResult = InstrumentationHandlerResult & {
+  statusCode: number;
+  meta: InstrumentationResultMeta | undefined;
+};
+type InstrumentFunction<T, TInnerResult = InstrumentationHandlerResult> = (handler: () => Promise<TInnerResult>, info: T) => Promise<void>;
 type ReadonlyRequest = {
   method: string;
   url: string;
@@ -42,18 +69,16 @@ type RouteInstrumentations = {
   action?: InstrumentFunction<RouteHandlerInstrumentationInfo>;
 };
 type RouteLazyInstrumentationInfo = undefined;
-type RouteHandlerInstrumentationInfo = Readonly<{
+type RouteHandlerInstrumentationInfo = Readonly<Omit<LoaderFunctionArgs, "request" | "context"> & {
   request: ReadonlyRequest;
-  params: LoaderFunctionArgs["params"];
-  pattern: string;
   context: ReadonlyContext;
 }>;
 type InstrumentableRouter = {
   instrument(instrumentations: RouterInstrumentations): void;
 };
 type RouterInstrumentations = {
-  navigate?: InstrumentFunction<RouterNavigationInstrumentationInfo>;
-  fetch?: InstrumentFunction<RouterFetchInstrumentationInfo>;
+  navigate?: InstrumentFunction<RouterNavigationInstrumentationInfo, InstrumentationClientRouterResult>;
+  fetch?: InstrumentFunction<RouterFetchInstrumentationInfo, InstrumentationClientRouterResult>;
 };
 type RouterNavigationInstrumentationInfo = Readonly<{
   to: string | number;
@@ -76,11 +101,11 @@ type InstrumentableRequestHandler = {
   instrument(instrumentations: RequestHandlerInstrumentations): void;
 };
 type RequestHandlerInstrumentations = {
-  request?: InstrumentFunction<RequestHandlerInstrumentationInfo>;
+  request?: InstrumentFunction<RequestHandlerInstrumentationInfo, InstrumentationServerHandlerResult>;
 };
 type RequestHandlerInstrumentationInfo = Readonly<{
   request: ReadonlyRequest;
   context: ReadonlyContext | undefined;
 }>;
 //#endregion
-export { ClientInstrumentation, InstrumentRequestHandlerFunction, InstrumentRouteFunction, InstrumentRouterFunction, InstrumentationHandlerResult, ServerInstrumentation };
+export { ClientInstrumentation, InstrumentRequestHandlerFunction, InstrumentRouteFunction, InstrumentRouterFunction, InstrumentationClientRouterResult, InstrumentationHandlerResult, InstrumentationServerHandlerResult, ServerInstrumentation };

package/dist/production/lib/router/instrumentation.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.0.1
+ * react-router v8.2.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -9,8 +9,11 @@
  * @license MIT
  */
 import { createPath, invariant } from "./history.js";
+import { RouterContextProvider, createContext } from "./utils.js";
 //#region lib/router/instrumentation.ts
 const UninstrumentedSymbol = Symbol("Uninstrumented");
+const instrumentationResultMetaContext = createContext();
+let instrumentationClientResultMetaReceivers = /* @__PURE__ */ new WeakMap();
 function getRouteInstrumentationUpdates(fns, route) {
 	let aggregated = {
 		lazy: [],
@@ -26,50 +29,67 @@ function getRouteInstrumentationUpdates(fns, route) {
 		index: route.index,
 		path: route.path,
 		instrument(i) {
-			let keys = Object.keys(aggregated);
-			for (let key of keys) if (i[key]) aggregated[key].push(i[key]);
+			if (i.lazy != null) aggregated.lazy.push(i.lazy);
+			if (i["lazy.loader"] != null) aggregated["lazy.loader"].push(i["lazy.loader"]);
+			if (i["lazy.action"] != null) aggregated["lazy.action"].push(i["lazy.action"]);
+			if (i["lazy.middleware"] != null) aggregated["lazy.middleware"].push(i["lazy.middleware"]);
+			if (i.middleware != null) aggregated.middleware.push(i.middleware);
+			if (i.loader != null) aggregated.loader.push(i.loader);
+			if (i.action != null) aggregated.action.push(i.action);
 		}
 	}));
 	let updates = {};
 	if (typeof route.lazy === "function" && aggregated.lazy.length > 0) {
-		let instrumented = wrapImpl(aggregated.lazy, route.lazy, () => void 0);
-		if (instrumented) updates.lazy = instrumented;
+		let lazy = route.lazy;
+		updates.lazy = async (...args) => {
+			return throwOrReturnResult(await recurseRight(aggregated.lazy, void 0, () => lazy(...args), getInstrumentationInnerResult));
+		};
 	}
 	if (typeof route.lazy === "object") {
 		let lazyObject = route.lazy;
-		[
-			"middleware",
-			"loader",
-			"action"
-		].forEach((key) => {
-			let lazyFn = lazyObject[key];
-			let instrumentations = aggregated[`lazy.${key}`];
-			if (typeof lazyFn === "function" && instrumentations.length > 0) {
-				let instrumented = wrapImpl(instrumentations, lazyFn, () => void 0);
-				if (instrumented) updates.lazy = Object.assign(updates.lazy || {}, { [key]: instrumented });
-			}
-		});
-	}
-	["loader", "action"].forEach((key) => {
-		let handler = route[key];
-		if (typeof handler === "function" && aggregated[key].length > 0) {
-			let original = handler[UninstrumentedSymbol] ?? handler;
-			let instrumented = wrapImpl(aggregated[key], original, (...args) => getHandlerInfo(args[0]));
-			if (instrumented) {
-				if (key === "loader" && original.hydrate === true) instrumented.hydrate = true;
-				instrumented[UninstrumentedSymbol] = original;
-				updates[key] = instrumented;
-			}
+		if (typeof lazyObject.middleware === "function" && aggregated["lazy.middleware"].length > 0) {
+			let middleware = lazyObject.middleware;
+			updates.lazy = Object.assign(updates.lazy || {}, { middleware: async (...args) => {
+				return throwOrReturnResult(await recurseRight(aggregated["lazy.middleware"], void 0, () => middleware(...args), getInstrumentationInnerResult));
+			} });
 		}
-	});
-	if (route.middleware && route.middleware.length > 0 && aggregated.middleware.length > 0) updates.middleware = route.middleware.map((middleware) => {
-		let original = middleware[UninstrumentedSymbol] ?? middleware;
-		let instrumented = wrapImpl(aggregated.middleware, original, (...args) => getHandlerInfo(args[0]));
-		if (instrumented) {
-			instrumented[UninstrumentedSymbol] = original;
-			return instrumented;
+		if (typeof lazyObject.loader === "function" && aggregated["lazy.loader"].length > 0) {
+			let loader = lazyObject.loader;
+			updates.lazy = Object.assign(updates.lazy || {}, { loader: async (...args) => {
+				return throwOrReturnResult(await recurseRight(aggregated["lazy.loader"], void 0, () => loader(...args), getInstrumentationInnerResult));
+			} });
+		}
+		if (typeof lazyObject.action === "function" && aggregated["lazy.action"].length > 0) {
+			let action = lazyObject.action;
+			updates.lazy = Object.assign(updates.lazy || {}, { action: async (...args) => {
+				return throwOrReturnResult(await recurseRight(aggregated["lazy.action"], void 0, () => action(...args), getInstrumentationInnerResult));
+			} });
 		}
-		return middleware;
+	}
+	if (typeof route.loader === "function" && aggregated.loader.length > 0) {
+		let original = getUninstrumentedHandler(route.loader);
+		let instrumented = async (...args) => {
+			return throwOrReturnResult(await recurseRight(aggregated.loader, getHandlerInfo(args[0]), () => original(...args), getInstrumentationInnerResult));
+		};
+		if (original.hydrate === true) instrumented.hydrate = true;
+		setUninstrumentedHandler(instrumented, original);
+		updates.loader = instrumented;
+	}
+	if (typeof route.action === "function" && aggregated.action.length > 0) {
+		let original = getUninstrumentedHandler(route.action);
+		let instrumented = async (...args) => {
+			return throwOrReturnResult(await recurseRight(aggregated.action, getHandlerInfo(args[0]), () => original(...args), getInstrumentationInnerResult));
+		};
+		setUninstrumentedHandler(instrumented, original);
+		updates.action = instrumented;
+	}
+	if (route.middleware && route.middleware.length > 0 && aggregated.middleware.length > 0) updates.middleware = route.middleware.map((middleware) => {
+		let original = getUninstrumentedHandler(middleware);
+		let instrumented = async (...args) => {
+			return throwOrReturnResult(await recurseRight(aggregated.middleware, getHandlerInfo(args[0]), () => original(...args), getInstrumentationInnerResult));
+		};
+		setUninstrumentedHandler(instrumented, original);
+		return instrumented;
 	});
 	return updates;
 }
@@ -79,93 +99,138 @@ function instrumentClientSideRouter(router, fns) {
 		fetch: []
 	};
 	fns.forEach((fn) => fn({ instrument(i) {
-		let keys = Object.keys(i);
-		for (let key of keys) if (i[key]) aggregated[key].push(i[key]);
+		if (i.navigate != null) aggregated.navigate.push(i.navigate);
+		if (i.fetch != null) aggregated.fetch.push(i.fetch);
 	} }));
 	if (aggregated.navigate.length > 0) {
-		let navigate = router.navigate[UninstrumentedSymbol] ?? router.navigate;
-		let instrumentedNavigate = wrapImpl(aggregated.navigate, navigate, (...args) => {
+		let navigate = getUninstrumentedHandler(router.navigate);
+		let instrumentedNavigate = async (...args) => {
 			let [to, opts] = args;
-			return {
+			let meta;
+			let info = {
 				to: typeof to === "number" || typeof to === "string" ? to : to ? createPath(to) : ".",
 				...getRouterInfo(router, opts ?? {})
 			};
-		});
-		if (instrumentedNavigate) {
-			instrumentedNavigate[UninstrumentedSymbol] = navigate;
-			router.navigate = instrumentedNavigate;
-		}
+			return throwOrReturnResult(await recurseRight(aggregated.navigate, info, async () => {
+				if (typeof to === "number") return await navigate(...args);
+				let cleanup = setInstrumentationClientResultMetaReceiver(router, (value) => {
+					meta = value;
+				});
+				try {
+					return await navigate(...args);
+				} finally {
+					cleanup();
+				}
+			}, (result) => ({
+				...getInstrumentationInnerResult(result),
+				meta
+			})));
+		};
+		setUninstrumentedHandler(instrumentedNavigate, navigate);
+		router.navigate = instrumentedNavigate;
 	}
 	if (aggregated.fetch.length > 0) {
-		let fetch = router.fetch[UninstrumentedSymbol] ?? router.fetch;
-		let instrumentedFetch = wrapImpl(aggregated.fetch, fetch, (...args) => {
-			let [key, , href, opts] = args;
-			return {
+		let fetch = getUninstrumentedHandler(router.fetch);
+		let instrumentedFetch = async (...args) => {
+			let [key, _, href, opts] = args;
+			let meta;
+			return throwOrReturnResult(await recurseRight(aggregated.fetch, {
 				href: href ?? ".",
 				fetcherKey: key,
 				...getRouterInfo(router, opts ?? {})
-			};
-		});
-		if (instrumentedFetch) {
-			instrumentedFetch[UninstrumentedSymbol] = fetch;
-			router.fetch = instrumentedFetch;
-		}
+			}, async () => {
+				let cleanup = setInstrumentationClientResultMetaReceiver(router, (value) => {
+					meta = value;
+				});
+				try {
+					return await fetch(...args);
+				} finally {
+					cleanup();
+				}
+			}, (result) => ({
+				...getInstrumentationInnerResult(result),
+				meta
+			})));
+		};
+		setUninstrumentedHandler(instrumentedFetch, fetch);
+		router.fetch = instrumentedFetch;
 	}
 	return router;
 }
 function instrumentHandler(handler, fns) {
 	let aggregated = { request: [] };
 	fns.forEach((fn) => fn({ instrument(i) {
-		let keys = Object.keys(i);
-		for (let key of keys) if (i[key]) aggregated[key].push(i[key]);
+		if (i.request != null) aggregated.request.push(i.request);
 	} }));
 	let instrumentedHandler = handler;
-	if (aggregated.request.length > 0) instrumentedHandler = wrapImpl(aggregated.request, handler, (...args) => {
+	if (aggregated.request.length > 0) instrumentedHandler = async (...args) => {
 		let [request, context] = args;
-		return {
+		let instrumentationContext = context ?? new RouterContextProvider();
+		return throwOrReturnResult(await recurseRight(aggregated.request, {
 			request: getReadonlyRequest(request),
-			context: context != null ? getReadonlyContext(context) : context
-		};
-	});
+			context: getReadonlyContext(instrumentationContext)
+		}, () => handler(request, instrumentationContext), (result, info) => {
+			let meta;
+			try {
+				meta = info.context?.get(instrumentationResultMetaContext);
+			} catch {}
+			invariant(result.value instanceof Response, "Expected a Response from the request handler");
+			return {
+				...getInstrumentationInnerResult(result),
+				statusCode: result.value.status,
+				meta
+			};
+		}));
+	};
 	return instrumentedHandler;
 }
-function wrapImpl(impls, handler, getInfo) {
-	if (impls.length === 0) return null;
-	return async (...args) => {
-		let result = await recurseRight(impls, getInfo(...args), () => handler(...args), impls.length - 1);
-		if (result.type === "error") throw result.value;
-		return result.value;
+function getUninstrumentedHandler(handler) {
+	return handler[UninstrumentedSymbol] ?? handler;
+}
+function setUninstrumentedHandler(handler, uninstrumentedHandler) {
+	handler[UninstrumentedSymbol] = uninstrumentedHandler;
+}
+function setInstrumentationClientResultMetaReceiver(router, receiver) {
+	instrumentationClientResultMetaReceivers.set(router, receiver);
+	return () => {
+		if (instrumentationClientResultMetaReceivers.get(router) === receiver) instrumentationClientResultMetaReceivers.delete(router);
 	};
 }
-async function recurseRight(impls, info, handler, index) {
+function consumeInstrumentationClientResultMetaReceiver(router) {
+	let receiver = instrumentationClientResultMetaReceivers.get(router);
+	instrumentationClientResultMetaReceivers.delete(router);
+	return receiver;
+}
+function throwOrReturnResult(result) {
+	if (result.type === "error") throw result.value;
+	return result.value;
+}
+async function recurseRight(impls, info, handler, getInnerResult, state = {
+	result: null,
+	innerResult: null
+}, index = impls.length - 1) {
 	let impl = impls[index];
-	let result;
-	if (!impl) try {
-		result = {
-			type: "success",
-			value: await handler()
-		};
-	} catch (e) {
-		result = {
-			type: "error",
-			value: e
-		};
-	}
-	else {
+	if (!impl) {
+		try {
+			state.result = {
+				type: "success",
+				value: await handler()
+			};
+		} catch (e) {
+			state.result = {
+				type: "error",
+				value: e
+			};
+		}
+		state.innerResult = getInnerResult(state.result, info);
+	} else {
 		let handlerPromise = void 0;
 		let callHandler = async () => {
 			if (handlerPromise) console.error("You cannot call instrumented handlers more than once");
-			else handlerPromise = recurseRight(impls, info, handler, index - 1);
-			result = await handlerPromise;
-			invariant(result, "Expected a result");
-			if (result.type === "error" && result.value instanceof Error) return {
-				status: "error",
-				error: result.value
-			};
-			return {
-				status: "success",
-				error: void 0
-			};
+			else handlerPromise = recurseRight(impls, info, handler, getInnerResult, state, index - 1);
+			await handlerPromise;
+			invariant(state.innerResult, "Expected an inner result");
+			return state.innerResult;
 		};
 		try {
 			await impl(callHandler, info);
@@ -175,18 +240,30 @@ async function recurseRight(impls, info, handler, index) {
 		if (!handlerPromise) await callHandler();
 		await handlerPromise;
 	}
-	if (result) return result;
-	return {
+	if (state.result) return state.result;
+	state.result = {
 		type: "error",
 		value: /* @__PURE__ */ new Error("No result assigned in instrumentation chain.")
 	};
+	state.innerResult = getInnerResult(state.result, info);
+	return state.result;
+}
+function getInstrumentationInnerResult(result) {
+	if (result.type === "error" && result.value instanceof Error) return {
+		status: "error",
+		error: result.value
+	};
+	return {
+		status: "success",
+		error: void 0
+	};
 }
 function getHandlerInfo(args) {
-	let { request, context, params, pattern } = args;
+	let { request, context, params } = args;
 	return {
+		...args,
 		request: getReadonlyRequest(request),
 		params: { ...params },
-		pattern,
 		context: getReadonlyContext(context)
 	};
 }
@@ -210,4 +287,4 @@ function getReadonlyContext(context) {
 	return { get: (ctx) => context.get(ctx) };
 }
 //#endregion
-export { getRouteInstrumentationUpdates, instrumentClientSideRouter, instrumentHandler };
+export { consumeInstrumentationClientResultMetaReceiver, getRouteInstrumentationUpdates, instrumentClientSideRouter, instrumentHandler, instrumentationResultMetaContext };