react-router 8.3.0 → 8.4.0

package/dist/development/lib/dom/ssr/hydration.d.ts

@@ -1,7 +1,7 @@
 
 import { Path } from "../../router/history.js";
 import { DataRouteObject } from "../../router/utils.js";
-import { HydrationState, Router } from "../../router/router.js";
+import { FutureConfig, HydrationState, Router } from "../../router/router.js";
 import { ClientLoaderFunction } from "./routeModules.js";
 
 //#region lib/dom/ssr/hydration.d.ts
@@ -11,6 +11,7 @@ declare function getHydrationData({
   getRouteInfo,
   location,
   basename,
+  future,
   isSpaMode
 }: {
   state: {
@@ -26,6 +27,7 @@ declare function getHydrationData({
   };
   location: Path;
   basename: string | undefined;
+  future: FutureConfig;
   isSpaMode: boolean;
 }): HydrationState;
 //#endregion

package/dist/development/lib/dom/ssr/hydration.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,15 +8,17 @@
  *
  * @license MIT
  */
-import { matchRoutes } from "../../router/utils.js";
+import { createDataRouteMatcher } from "../../router/router.js";
 import { shouldHydrateRouteLoader } from "./routes.js";
 //#region lib/dom/ssr/hydration.tsx
-function getHydrationData({ state, routes, getRouteInfo, location, basename, isSpaMode }) {
+function getHydrationData({ state, routes, getRouteInfo, location, basename, future, isSpaMode }) {
 	let hydrationData = {
 		...state,
 		loaderData: { ...state.loaderData }
 	};
-	let initialMatches = matchRoutes(routes, location, basename);
+	let dataRouteMatcher = createDataRouteMatcher(future, basename || "/");
+	dataRouteMatcher.update(routes);
+	let initialMatches = dataRouteMatcher.match(location);
 	if (initialMatches) for (let match of initialMatches) {
 		let routeId = match.route.id;
 		let routeInfo = getRouteInfo(routeId);

package/dist/development/lib/dom/ssr/invariant.js

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

package/dist/development/lib/dom/ssr/links.js

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

package/dist/development/lib/dom/ssr/markup.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -20,5 +20,8 @@ const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
 function escapeHtml(html) {
 	return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
 }
+function escapeAttribute(value) {
+	return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 //#endregion
-export { escapeHtml };
+export { escapeAttribute, escapeHtml };

package/dist/development/lib/dom/ssr/routeModules.js

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

package/dist/development/lib/dom/ssr/routes-test-stub.js

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

package/dist/development/lib/dom/ssr/routes.js

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

package/dist/development/lib/dom/ssr/server.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -40,7 +40,7 @@ function ServerRouter({ context, url, nonce }) {
 		let manifestRoute = context.manifest.routes[routeId];
 		if (route && manifestRoute && shouldHydrateRouteLoader(routeId, route.clientLoader, manifestRoute.hasLoader, context.isSpaMode) && (route.HydrateFallback || !manifestRoute.hasLoader)) delete context.staticHandlerContext.loaderData[routeId];
 	}
-	let router = createStaticRouter(routes, context.staticHandlerContext, { branches: context.branches });
+	let router = createStaticRouter(routes, context.staticHandlerContext, { future: context.future });
 	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(FrameworkContext.Provider, { value: {
 		manifest,
 		routeModules,

package/dist/development/lib/dom/ssr/single-fetch.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -101,25 +101,16 @@ async function singleFetchActionStrategy(args, fetchAndDecode) {
 async function nonSsrStrategy(args, getRouteInfo, fetchAndDecode) {
 	let matchesToLoad = args.matches.filter((m) => m.shouldCallHandler());
 	let results = {};
-	await Promise.all(matchesToLoad.map((m) => m.resolve(async (handler) => {
-		try {
+	await Promise.all(matchesToLoad.map(async (m) => {
+		let routeId = m.route.id;
+		results[routeId] = await m.resolve(async (handler) => {
 			let { hasClientLoader } = getRouteInfo(m);
-			let routeId = m.route.id;
-			let result = hasClientLoader ? await handler(async () => {
+			return hasClientLoader ? handler(async () => {
 				let { data } = await fetchAndDecode(args, [routeId]);
 				return unwrapSingleFetchResult(data, routeId);
-			}) : await handler();
-			results[m.route.id] = {
-				type: "data",
-				result
-			};
-		} catch (e) {
-			results[m.route.id] = {
-				type: "error",
-				result: e
-			};
-		}
-	})));
+			}) : handler();
+		});
+	}));
 	return results;
 }
 async function singleFetchLoaderNavigationStrategy(args, router, getRouteInfo, fetchAndDecode, ssr, shouldAllowOptOut = () => true) {
@@ -205,7 +196,7 @@ async function bubbleMiddlewareErrors(singleFetchPromise, matches, routesParams,
 		if (middlewareError !== void 0) Array.from(routesParams.values()).forEach((routeId) => {
 			if (results[routeId].result instanceof SingleFetchNoResultError) results[routeId].result = middlewareError;
 		});
-	} catch (e) {}
+	} catch {}
 }
 async function singleFetchLoaderFetcherStrategy(args, fetchAndDecode) {
 	let fetcherMatch = args.matches.find((m) => m.shouldCallHandler());
@@ -277,8 +268,8 @@ async function fetchAndDecodeViaTurboStream(args, targetRoutes) {
 			status: res.status,
 			data
 		};
-	} catch (e) {
-		throw new Error("Unable to decode turbo-stream response");
+	} catch (cause) {
+		throw new Error("Unable to decode turbo-stream response", { cause });
 	}
 }
 function decodeViaTurboStream(body, global) {
@@ -326,13 +317,13 @@ function createDeferred() {
 			res(val);
 			try {
 				await promise;
-			} catch (e) {}
+			} catch {}
 		};
 		reject = async (error) => {
 			rej(error);
 			try {
 				await promise;
-			} catch (e) {}
+			} catch {}
 		};
 	});
 	return {

package/dist/development/lib/dom-export/dom-router-provider.js

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

package/dist/development/lib/dom-export/hydrated-router.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -67,6 +67,7 @@ function createHydratedRouter({ getContext, instrumentations }) {
 		}),
 		location: window.location,
 		basename: window.__reactRouterContext?.basename,
+		future: ssrInfo.context.future,
 		isSpaMode: ssrInfo.context.isSpaMode
 	});
 	if (window.history.state && window.history.state.masked) window.history.replaceState({

package/dist/development/lib/errors.js

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

package/dist/development/lib/hooks.js

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -8,10 +8,11 @@
  *
  * @license MIT
  */
-import { invariant, parsePath, warning } from "./router/history.js";
+import { createPath, invariant, parsePath, warning } from "./router/history.js";
 import { convertRouteMatchToUiMatch, decodePath, getResolveToMatches, getRoutePattern, isBrowser, isRouteErrorResponse, joinPaths, matchPath, matchRoutes, parseToInfo, resolveTo, stripBasename } from "./router/utils.js";
+import { getNavigatorCurrentUrl, validateNavigationTarget } from "./router/navigation.js";
 import { IDLE_BLOCKER, hasInvalidProtocol } from "./router/router.js";
-import { AwaitContext, DataRouterContext, DataRouterStateContext, LocationContext, NavigationContext, RSCRouterContext, RouteContext, RouteErrorContext } from "./context.js";
+import { AwaitContext, DataRouterContext, DataRouterDataContext, DataRouterNavigationContext, DataRouterStateContext, FetchersContext, IsDataRouteContext, LocationContext, NavigationContext, RSCRouterContext, RouteContext, RouteErrorContext, RouteIdContext } from "./context.js";
 import { decodeRedirectErrorDigest, decodeRouteErrorResponseDigest } from "./errors.js";
 import * as React$1 from "react";
 //#region lib/hooks.tsx
@@ -268,8 +269,7 @@ const navigateEffectWarning = "You should call navigate() in a React.useEffect()
 * @returns A navigate function for programmatic navigation
 */
 function useNavigate() {
-	let { isDataRoute } = React$1.useContext(RouteContext);
-	return isDataRoute ? useNavigateStable() : useNavigateUnstable();
+	return React$1.useContext(IsDataRouteContext) ? useNavigateStable() : useNavigateUnstable();
 }
 function useNavigateUnstable() {
 	invariant(useInRouterContext(), `useNavigate() may be used only in the context of a <Router> component.`);
@@ -291,6 +291,7 @@ function useNavigateUnstable() {
 		}
 		let path = resolveTo(to, JSON.parse(routePathnamesJson), locationPathname, options.relative === "path");
 		if (dataRouterContext == null && basename !== "/") path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
+		validateNavigationTarget(typeof to === "string" ? to : createPath(to), navigator.createHref(path), getNavigatorCurrentUrl(navigator), "reject");
 		(!!options.replace ? navigator.replace : navigator.push)(path, options.state, options);
 	}, [
 		basename,
@@ -601,7 +602,10 @@ function useRoutesImpl(routes, locationArg, dataRouterOpts) {
 		let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
 		remainingPathname = "/" + pathname.replace(/^\//, "").split("/").slice(parentSegments.length).join("/");
 	}
-	let matches = dataRouterOpts && dataRouterOpts.state.matches.length ? dataRouterOpts.state.matches.map((m) => Object.assign(m, { route: dataRouterOpts.manifest[m.route.id] || m.route })) : matchRoutes(routes, { pathname: remainingPathname });
+	let matches;
+	if (dataRouterOpts) if (dataRouterOpts.state.matches.length) matches = dataRouterOpts.state.matches.map((m) => Object.assign(m, { route: dataRouterOpts.manifest[m.route.id] || m.route }));
+	else matches = dataRouterOpts.router.match(dataRouterOpts.state.location);
+	else matches = matchRoutes(routes, { pathname: remainingPathname });
 	warning(parentRoute || matches != null, `No routes matched location "${location.pathname}${location.search}${location.hash}" `);
 	warning(matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0, `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`);
 	let renderedMatches = _renderMatches(matches && matches.map((match) => Object.assign({}, match, {
@@ -677,17 +681,17 @@ var RenderErrorBoundary = class extends React$1.Component {
 			const decoded = decodeRouteErrorResponseDigest(error.digest);
 			if (decoded) error = decoded;
 		}
-		let result = error !== void 0 ? /* @__PURE__ */ React$1.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React$1.createElement(RouteErrorContext.Provider, {
+		let result = error !== void 0 ? /* @__PURE__ */ React$1.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React$1.createElement(IsDataRouteContext.Provider, { value: this.props.routeContext.isDataRoute }, /* @__PURE__ */ React$1.createElement(RouteIdContext.Provider, { value: this.props.routeContext.matches[this.props.routeContext.matches.length - 1]?.route.id }, /* @__PURE__ */ React$1.createElement(RouteErrorContext.Provider, {
 			value: error,
 			children: this.props.component
-		})) : this.props.children;
+		})))) : this.props.children;
 		if (this.context) return /* @__PURE__ */ React$1.createElement(RSCErrorHandler, { error }, result);
 		return result;
 	}
 };
 const errorRedirectHandledMap = /* @__PURE__ */ new WeakMap();
 function RSCErrorHandler({ children, error }) {
-	let { basename } = React$1.useContext(NavigationContext);
+	let { basename, navigator } = React$1.useContext(NavigationContext);
 	if (typeof error === "object" && error && "digest" in error && typeof error.digest === "string") {
 		let redirect = decodeRedirectErrorDigest(error.digest);
 		if (redirect) {
@@ -695,6 +699,7 @@ function RSCErrorHandler({ children, error }) {
 			if (existingRedirect) throw existingRedirect;
 			let parsed = parseToInfo(redirect.location, basename);
 			let target = parsed.absoluteURL || parsed.to;
+			validateNavigationTarget(redirect.location, target, getNavigatorCurrentUrl(navigator), "allow-explicit");
 			if (hasInvalidProtocol(target)) throw new Error("Invalid redirect location");
 			if (isBrowser && !errorRedirectHandledMap.get(error)) if (parsed.isExternal || redirect.reloadDocument) window.location.href = target;
 			else {
@@ -713,7 +718,7 @@ function RSCErrorHandler({ children, error }) {
 function RenderedRoute({ routeContext, match, children }) {
 	let dataRouterContext = React$1.useContext(DataRouterContext);
 	if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
-	return /* @__PURE__ */ React$1.createElement(RouteContext.Provider, { value: routeContext }, children);
+	return /* @__PURE__ */ React$1.createElement(RouteContext.Provider, { value: routeContext }, /* @__PURE__ */ React$1.createElement(IsDataRouteContext.Provider, { value: routeContext.isDataRoute }, /* @__PURE__ */ React$1.createElement(RouteIdContext.Provider, { value: match.route.id }, children)));
 }
 function _renderMatches(matches, parentMatches = [], dataRouterOpts) {
 	let dataRouterState = dataRouterOpts?.state;
@@ -823,25 +828,25 @@ function useDataRouterState(hookName) {
 	invariant(state, getDataRouterConsoleError(hookName));
 	return state;
 }
-function useRouteContext(hookName) {
-	let route = React$1.useContext(RouteContext);
-	invariant(route, getDataRouterConsoleError(hookName));
-	return route;
+function useDataRouterFetchers(hookName) {
+	let fetchers = React$1.useContext(FetchersContext);
+	invariant(fetchers, getDataRouterConsoleError(hookName));
+	return fetchers;
 }
-function useCurrentRouteId(hookName) {
-	let route = useRouteContext(hookName);
-	let thisRoute = route.matches[route.matches.length - 1];
-	invariant(thisRoute.route.id, `${hookName} can only be used on routes that contain a unique "id"`);
-	return thisRoute.route.id;
+function useDataRouterData(hookName) {
+	let data = React$1.useContext(DataRouterDataContext);
+	invariant(data, getDataRouterConsoleError(hookName));
+	return data;
 }
-/**
-* Returns the ID for the nearest contextual route
-*
-* @category Hooks
-* @returns The ID of the nearest contextual route
-*/
-function useRouteId() {
-	return useCurrentRouteId("useRouteId");
+function useDataRouterNavigation(hookName) {
+	let navigation = React$1.useContext(DataRouterNavigationContext);
+	invariant(navigation, getDataRouterConsoleError(hookName));
+	return navigation;
+}
+function useCurrentRouteId(hookName) {
+	let routeId = React$1.useContext(RouteIdContext);
+	invariant(routeId, `${hookName} can only be used on routes that contain a unique "id"`);
+	return routeId;
 }
 /**
 * Returns the current {@link Navigation}, defaulting to an "idle" navigation
@@ -866,11 +871,11 @@ function useRouteId() {
 * @returns The current {@link Navigation} object
 */
 function useNavigation() {
-	let state = useDataRouterState("useNavigation");
+	let { navigation } = useDataRouterNavigation("useNavigation");
 	return React$1.useMemo(() => {
-		let { matches, historyAction, ...rest } = state.navigation;
+		let { matches, historyAction, ...rest } = navigation;
 		return rest;
-	}, [state.navigation]);
+	}, [navigation]);
 }
 /**
 * Revalidate the data on the page for reasons outside of normal data mutations
@@ -909,14 +914,14 @@ function useNavigation() {
 */
 function useRevalidator() {
 	let dataRouterContext = useDataRouterContext("useRevalidator");
-	let state = useDataRouterState("useRevalidator");
+	let { revalidation } = useDataRouterNavigation("useRevalidator");
 	let revalidate = React$1.useCallback(async () => {
 		await dataRouterContext.router.revalidate();
 	}, [dataRouterContext.router]);
 	return React$1.useMemo(() => ({
 		revalidate,
-		state: state.revalidation
-	}), [revalidate, state.revalidation]);
+		state: revalidation
+	}), [revalidate, revalidation]);
 }
 /**
 * Returns the active route matches, useful for accessing `loaderData` for
@@ -953,7 +958,8 @@ function useRevalidator() {
 * @returns An array of {@link UIMatch | UI matches} for the current route hierarchy
 */
 function useMatches() {
-	let { matches, loaderData } = useDataRouterState("useMatches");
+	let { matches } = useDataRouterState("useMatches");
+	let { loaderData } = useDataRouterData("useMatches");
 	return React$1.useMemo(() => matches.map((m) => convertRouteMatchToUiMatch(m, loaderData)), [matches, loaderData]);
 }
 /**
@@ -980,9 +986,9 @@ function useMatches() {
 * @returns The data returned from the route's [`loader`](../../start/framework/route-module#loader) or [`clientLoader`](../../start/framework/route-module#clientloader) function
 */
 function useLoaderData() {
-	let state = useDataRouterState("useLoaderData");
+	let data = useDataRouterData("useLoaderData");
 	let routeId = useCurrentRouteId("useLoaderData");
-	return state.loaderData[routeId];
+	return data.loaderData[routeId];
 }
 /**
 * Returns the [`loader`](../../start/framework/route-module#loader) data for a
@@ -1017,7 +1023,7 @@ function useLoaderData() {
 * function, or `undefined` if not found
 */
 function useRouteLoaderData(routeId) {
-	return useDataRouterState("useRouteLoaderData").loaderData[routeId];
+	return useDataRouterData("useRouteLoaderData").loaderData[routeId];
 }
 /**
 * Returns the [`action`](../../start/framework/route-module#action) data from
@@ -1052,9 +1058,9 @@ function useRouteLoaderData(routeId) {
 * has been called
 */
 function useActionData() {
-	let state = useDataRouterState("useActionData");
-	let routeId = useCurrentRouteId("useLoaderData");
-	return state.actionData ? state.actionData[routeId] : void 0;
+	let data = useDataRouterData("useActionData");
+	let routeId = useCurrentRouteId("useActionData");
+	return data.actionData ? data.actionData[routeId] : void 0;
 }
 /**
 * Accesses the error thrown during an
@@ -1078,10 +1084,10 @@ function useActionData() {
 */
 function useRouteError() {
 	let error = React$1.useContext(RouteErrorContext);
-	let state = useDataRouterState("useRouteError");
+	let data = useDataRouterData("useRouteError");
 	let routeId = useCurrentRouteId("useRouteError");
 	if (error !== void 0) return error;
-	return state.errors?.[routeId];
+	return data.errors?.[routeId];
 }
 /**
 * Returns the resolved promise value from the closest {@link Await | `<Await>`}.
@@ -1306,12 +1312,13 @@ function useRoute(...args) {
 	const currentRouteId = useCurrentRouteId("useRoute");
 	const id = args[0] ?? currentRouteId;
 	const state = useDataRouterState("useRoute");
+	const data = useDataRouterData("useRoute");
 	const route = state.matches.find(({ route }) => route.id === id);
 	if (route === void 0) return void 0;
 	return {
 		handle: route.route.handle,
-		loaderData: state.loaderData[id],
-		actionData: state.actionData?.[id]
+		loaderData: data.loaderData[id],
+		actionData: data.actionData?.[id]
 	};
 }
 function toRouterStateMatch(match) {
@@ -1365,7 +1372,8 @@ function toRouterStateMatch(match) {
 * @returns The current router state with `active` and `pending` variants
 */
 function useRouterState() {
-	let { location, historyAction: type, matches, navigation } = useDataRouterState("unstable_useRouterState");
+	let { location, historyAction: type, matches } = useDataRouterState("unstable_useRouterState");
+	let { navigation } = useDataRouterNavigation("unstable_useRouterState");
 	let active = React$1.useMemo(() => ({
 		type,
 		location,
@@ -1412,4 +1420,4 @@ function useRouterState() {
 	}), [active, pending]);
 }
 //#endregion
-export { _renderMatches, useActionData, useAsyncError, useAsyncValue, useBlocker, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRoute, useRouteError, useRouteId, useRouteLoaderData, useRouterState, useRoutes, useRoutesImpl };
+export { _renderMatches, useActionData, useAsyncError, useAsyncValue, useBlocker, useCurrentRouteId, useDataRouterContext, useDataRouterData, useDataRouterFetchers, useDataRouterState, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRoute, useRouteError, useRouteLoaderData, useRouterState, useRoutes, useRoutesImpl };

package/dist/development/lib/href.js

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

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

@@ -1,5 +1,5 @@
 /**
- * react-router v8.3.0
+ * react-router v8.4.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -193,7 +193,7 @@ function warning(cond, message) {
 		if (typeof console !== "undefined") console.warn(message);
 		try {
 			throw new Error(message);
-		} catch (e) {}
+		} catch {}
 	}
 }
 function createKey() {

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

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

package/dist/development/lib/router/matcher-route-pattern.d.ts

@@ -0,0 +1,2 @@
+
+export { };