react-router 7.16.0 → 8.0.0-pre.0

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

@@ -0,0 +1,346 @@
+/**
+ * react-router v8.0.0-pre.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { ErrorResponseImpl, data, isRouteErrorResponse, redirect } from "../../router/utils.js";
+import { isDataWithResponseInit, isResponse } from "../../router/router.js";
+import invariant from "./invariant.js";
+import { escapeHtml } from "./markup.js";
+import { SUPPORTED_ERROR_TYPES } from "../../../vendor/turbo-stream-v2/utils.js";
+import { decode } from "../../../vendor/turbo-stream-v2/turbo-stream.js";
+import { createRequestInit } from "./data.js";
+import * as React$1 from "react";
+//#region lib/dom/ssr/single-fetch.tsx
+const SingleFetchRedirectSymbol = Symbol("SingleFetchRedirect");
+var SingleFetchNoResultError = class extends Error {};
+const NO_BODY_STATUS_CODES = new Set([
+	100,
+	101,
+	204,
+	205
+]);
+function StreamTransfer({ context, identifier, reader, textDecoder, nonce }) {
+	if (!context.renderMeta || !context.renderMeta.didRenderScripts) return null;
+	if (!context.renderMeta.streamCache) context.renderMeta.streamCache = {};
+	let { streamCache } = context.renderMeta;
+	let promise = streamCache[identifier];
+	if (!promise) promise = streamCache[identifier] = reader.read().then((result) => {
+		streamCache[identifier].result = {
+			done: result.done,
+			value: textDecoder.decode(result.value, { stream: true })
+		};
+	}).catch((e) => {
+		streamCache[identifier].error = e;
+	});
+	if (promise.error) throw promise.error;
+	if (promise.result === void 0) throw promise;
+	let { done, value } = promise.result;
+	let scriptTag = value ? /* @__PURE__ */ React$1.createElement("script", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: `window.__reactRouterContext.streamController.enqueue(${escapeHtml(JSON.stringify(value))});` }
+	}) : null;
+	if (done) return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, scriptTag, /* @__PURE__ */ React$1.createElement("script", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: `window.__reactRouterContext.streamController.close();` }
+	}));
+	else return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, scriptTag, /* @__PURE__ */ React$1.createElement(React$1.Suspense, null, /* @__PURE__ */ React$1.createElement(StreamTransfer, {
+		context,
+		identifier: identifier + 1,
+		reader,
+		textDecoder,
+		nonce
+	})));
+}
+function getTurboStreamSingleFetchDataStrategy(getRouter, manifest, routeModules, ssr) {
+	let dataStrategy = getSingleFetchDataStrategyImpl(getRouter, (match) => {
+		let manifestRoute = manifest.routes[match.route.id];
+		invariant(manifestRoute, "Route not found in manifest");
+		return {
+			hasLoader: manifestRoute.hasLoader,
+			hasClientLoader: manifestRoute.hasClientLoader
+		};
+	}, fetchAndDecodeViaTurboStream, ssr);
+	return async (args) => args.runClientMiddleware(dataStrategy);
+}
+function getSingleFetchDataStrategyImpl(getRouter, getRouteInfo, fetchAndDecode, ssr, shouldAllowOptOut = () => true) {
+	return async (args) => {
+		let { request, matches, fetcherKey } = args;
+		let router = getRouter();
+		if (request.method !== "GET") return singleFetchActionStrategy(args, fetchAndDecode);
+		let foundRevalidatingServerLoader = matches.some((m) => {
+			let { hasLoader, hasClientLoader } = getRouteInfo(m);
+			return m.shouldCallHandler() && hasLoader && !hasClientLoader;
+		});
+		if (!ssr && !foundRevalidatingServerLoader) return nonSsrStrategy(args, getRouteInfo, fetchAndDecode);
+		if (fetcherKey) return singleFetchLoaderFetcherStrategy(args, fetchAndDecode);
+		return singleFetchLoaderNavigationStrategy(args, router, getRouteInfo, fetchAndDecode, ssr, shouldAllowOptOut);
+	};
+}
+async function singleFetchActionStrategy(args, fetchAndDecode) {
+	let actionMatch = args.matches.find((m) => m.shouldCallHandler());
+	invariant(actionMatch, "No action match found");
+	let actionStatus = void 0;
+	let result = await actionMatch.resolve(async (handler) => {
+		return await handler(async () => {
+			let { data, status } = await fetchAndDecode(args, [actionMatch.route.id]);
+			actionStatus = status;
+			return unwrapSingleFetchResult(data, actionMatch.route.id);
+		});
+	});
+	if (isResponse(result.result) || isRouteErrorResponse(result.result) || isDataWithResponseInit(result.result)) return { [actionMatch.route.id]: result };
+	return { [actionMatch.route.id]: {
+		type: result.type,
+		result: data(result.result, actionStatus)
+	} };
+}
+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 {
+			let { hasClientLoader } = getRouteInfo(m);
+			let routeId = m.route.id;
+			let result = hasClientLoader ? await 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
+			};
+		}
+	})));
+	return results;
+}
+async function singleFetchLoaderNavigationStrategy(args, router, getRouteInfo, fetchAndDecode, ssr, shouldAllowOptOut = () => true) {
+	let routesParams = /* @__PURE__ */ new Set();
+	let foundOptOutRoute = false;
+	let routeDfds = args.matches.map(() => createDeferred());
+	let singleFetchDfd = createDeferred();
+	let results = {};
+	let resolvePromise = Promise.all(args.matches.map(async (m, i) => m.resolve(async (handler) => {
+		routeDfds[i].resolve();
+		let routeId = m.route.id;
+		let { hasLoader, hasClientLoader } = getRouteInfo(m);
+		let defaultShouldRevalidate = !m.shouldRevalidateArgs || m.shouldRevalidateArgs.actionStatus == null || m.shouldRevalidateArgs.actionStatus < 400;
+		if (!m.shouldCallHandler(defaultShouldRevalidate)) {
+			foundOptOutRoute ||= m.shouldRevalidateArgs != null && hasLoader;
+			return;
+		}
+		if (shouldAllowOptOut(m) && hasClientLoader) {
+			if (hasLoader) foundOptOutRoute = true;
+			try {
+				results[routeId] = {
+					type: "data",
+					result: await handler(async () => {
+						let { data } = await fetchAndDecode(args, [routeId]);
+						return unwrapSingleFetchResult(data, routeId);
+					})
+				};
+			} catch (e) {
+				results[routeId] = {
+					type: "error",
+					result: e
+				};
+			}
+			return;
+		}
+		if (hasLoader) routesParams.add(routeId);
+		try {
+			results[routeId] = {
+				type: "data",
+				result: await handler(async () => {
+					return unwrapSingleFetchResult(await singleFetchDfd.promise, routeId);
+				})
+			};
+		} catch (e) {
+			results[routeId] = {
+				type: "error",
+				result: e
+			};
+		}
+	})));
+	await Promise.all(routeDfds.map((d) => d.promise));
+	if ((!router.state.initialized && router.state.navigation.state === "idle" || routesParams.size === 0) && !window.__reactRouterHdrActive) singleFetchDfd.resolve({ routes: {} });
+	else {
+		let targetRoutes = ssr && foundOptOutRoute && routesParams.size > 0 ? [...routesParams.keys()] : void 0;
+		try {
+			let data = await fetchAndDecode(args, targetRoutes);
+			singleFetchDfd.resolve(data.data);
+		} catch (e) {
+			singleFetchDfd.reject(e);
+		}
+	}
+	await resolvePromise;
+	await bubbleMiddlewareErrors(singleFetchDfd.promise, args.matches, routesParams, results);
+	return results;
+}
+async function bubbleMiddlewareErrors(singleFetchPromise, matches, routesParams, results) {
+	try {
+		let middlewareError;
+		let fetchedData = await singleFetchPromise;
+		if ("routes" in fetchedData) {
+			for (let match of matches) if (match.route.id in fetchedData.routes) {
+				let routeResult = fetchedData.routes[match.route.id];
+				if ("error" in routeResult) {
+					middlewareError = routeResult.error;
+					if (results[match.route.id]?.result == null) results[match.route.id] = {
+						type: "error",
+						result: middlewareError
+					};
+					break;
+				}
+			}
+		}
+		if (middlewareError !== void 0) Array.from(routesParams.values()).forEach((routeId) => {
+			if (results[routeId].result instanceof SingleFetchNoResultError) results[routeId].result = middlewareError;
+		});
+	} catch (e) {}
+}
+async function singleFetchLoaderFetcherStrategy(args, fetchAndDecode) {
+	let fetcherMatch = args.matches.find((m) => m.shouldCallHandler());
+	invariant(fetcherMatch, "No fetcher match found");
+	let routeId = fetcherMatch.route.id;
+	let result = await fetcherMatch.resolve(async (handler) => handler(async () => {
+		let { data } = await fetchAndDecode(args, [routeId]);
+		return unwrapSingleFetchResult(data, routeId);
+	}));
+	return { [fetcherMatch.route.id]: result };
+}
+function stripIndexParam(url) {
+	let indexValues = url.searchParams.getAll("index");
+	url.searchParams.delete("index");
+	let indexValuesToKeep = [];
+	for (let indexValue of indexValues) if (indexValue) indexValuesToKeep.push(indexValue);
+	for (let toKeep of indexValuesToKeep) url.searchParams.append("index", toKeep);
+	return url;
+}
+function singleFetchUrl(reqUrl, extension) {
+	let url = typeof reqUrl === "string" ? new URL(reqUrl, typeof window === "undefined" ? "server://singlefetch/" : window.location.origin) : reqUrl;
+	if (url.pathname.endsWith("/")) url.pathname = `${url.pathname}_.${extension}`;
+	else url.pathname = `${url.pathname}.${extension}`;
+	return url;
+}
+async function fetchAndDecodeViaTurboStream(args, targetRoutes) {
+	let { request } = args;
+	let url = singleFetchUrl(request.url, "data");
+	if (request.method === "GET") {
+		url = stripIndexParam(url);
+		if (targetRoutes) url.searchParams.set("_routes", targetRoutes.join(","));
+	}
+	let res = await fetch(url, await createRequestInit(request));
+	if (res.status >= 400 && !res.headers.has("X-Remix-Response")) throw new ErrorResponseImpl(res.status, res.statusText, await res.text());
+	if (res.status === 204 && res.headers.has("X-Remix-Redirect")) return {
+		status: 202,
+		data: { redirect: {
+			redirect: res.headers.get("X-Remix-Redirect"),
+			status: Number(res.headers.get("X-Remix-Status") || "302"),
+			revalidate: res.headers.get("X-Remix-Revalidate") === "true",
+			reload: res.headers.get("X-Remix-Reload-Document") === "true",
+			replace: res.headers.get("X-Remix-Replace") === "true"
+		} }
+	};
+	if (NO_BODY_STATUS_CODES.has(res.status)) {
+		let routes = {};
+		if (targetRoutes && request.method !== "GET") routes[targetRoutes[0]] = { data: void 0 };
+		return {
+			status: res.status,
+			data: { routes }
+		};
+	}
+	invariant(res.body, "No response body to decode");
+	try {
+		let decoded = await decodeViaTurboStream(res.body, window);
+		let data;
+		if (request.method === "GET") {
+			let typed = decoded.value;
+			if (SingleFetchRedirectSymbol in typed) data = { redirect: typed[SingleFetchRedirectSymbol] };
+			else data = { routes: typed };
+		} else {
+			let typed = decoded.value;
+			let routeId = targetRoutes?.[0];
+			invariant(routeId, "No routeId found for single fetch call decoding");
+			if ("redirect" in typed) data = { redirect: typed };
+			else data = { routes: { [routeId]: typed } };
+		}
+		return {
+			status: res.status,
+			data
+		};
+	} catch (e) {
+		throw new Error("Unable to decode turbo-stream response");
+	}
+}
+function decodeViaTurboStream(body, global) {
+	return decode(body, { plugins: [(type, ...rest) => {
+		if (type === "SanitizedError") {
+			let [name, message, stack] = rest;
+			let Constructor = Error;
+			if (name && SUPPORTED_ERROR_TYPES.includes(name) && name in global && typeof global[name] === "function") Constructor = global[name];
+			let error = new Constructor(message);
+			error.stack = stack;
+			return { value: error };
+		}
+		if (type === "ErrorResponse") {
+			let [data, status, statusText] = rest;
+			return { value: new ErrorResponseImpl(status, statusText, data) };
+		}
+		if (type === "SingleFetchRedirect") return { value: { [SingleFetchRedirectSymbol]: rest[0] } };
+		if (type === "SingleFetchClassInstance") return { value: rest[0] };
+		if (type === "SingleFetchFallback") return { value: void 0 };
+	}] });
+}
+function unwrapSingleFetchResult(result, routeId) {
+	if ("redirect" in result) {
+		let { redirect: location, revalidate, reload, replace, status } = result.redirect;
+		throw redirect(location, {
+			status,
+			headers: {
+				...revalidate ? { "X-Remix-Revalidate": "yes" } : null,
+				...reload ? { "X-Remix-Reload-Document": "yes" } : null,
+				...replace ? { "X-Remix-Replace": "yes" } : null
+			}
+		});
+	}
+	let routeResult = result.routes[routeId];
+	if (routeResult == null) throw new SingleFetchNoResultError(`No result found for routeId "${routeId}"`);
+	else if ("error" in routeResult) throw routeResult.error;
+	else if ("data" in routeResult) return routeResult.data;
+	else throw new Error(`Invalid response found for routeId "${routeId}"`);
+}
+function createDeferred() {
+	let resolve;
+	let reject;
+	let promise = new Promise((res, rej) => {
+		resolve = async (val) => {
+			res(val);
+			try {
+				await promise;
+			} catch (e) {}
+		};
+		reject = async (error) => {
+			rej(error);
+			try {
+				await promise;
+			} catch (e) {}
+		};
+	});
+	return {
+		promise,
+		resolve,
+		reject
+	};
+}
+//#endregion
+export { NO_BODY_STATUS_CODES, SingleFetchRedirectSymbol, StreamTransfer, decodeViaTurboStream, getSingleFetchDataStrategyImpl, getTurboStreamSingleFetchDataStrategy, singleFetchUrl, stripIndexParam };

package/dist/development/lib/dom-export/dom-router-provider.d.ts

@@ -0,0 +1,9 @@
+
+import * as React$1 from "react";
+import { RouterProviderProps } from "react-router";
+
+//#region lib/dom-export/dom-router-provider.d.ts
+type RouterProviderProps$1 = Omit<RouterProviderProps, "flushSync">;
+declare function RouterProvider$1(props: RouterProviderProps$1): React$1.JSX.Element;
+//#endregion
+export { RouterProvider$1 as RouterProvider, RouterProviderProps$1 as RouterProviderProps };

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

@@ -0,0 +1,22 @@
+/**
+ * react-router v8.0.0-pre.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import * as React$1 from "react";
+import * as ReactDOM from "react-dom";
+import { RouterProvider } from "react-router";
+//#region lib/dom-export/dom-router-provider.tsx
+function RouterProvider$1(props) {
+	return /* @__PURE__ */ React$1.createElement(RouterProvider, {
+		flushSync: ReactDOM.flushSync,
+		...props
+	});
+}
+//#endregion
+export { RouterProvider$1 as RouterProvider };

package/dist/development/lib/dom-export/hydrated-router.d.ts

@@ -0,0 +1,125 @@
+
+import { ClientInstrumentation } from "../router/instrumentation.js";
+import * as React$1 from "react";
+import { ClientOnErrorFunction, RouterInit } from "react-router";
+
+//#region lib/dom-export/hydrated-router.d.ts
+/**
+ * Props for the {@link dom.HydratedRouter} component.
+ *
+ * @category Types
+ */
+interface HydratedRouterProps {
+  /**
+   * Context factory function to be passed through to {@link createBrowserRouter}.
+   * This function will be called to create a fresh `context` instance on each
+   * navigation/fetch and made available to
+   * [`clientAction`](../../start/framework/route-module#clientAction)/[`clientLoader`](../../start/framework/route-module#clientLoader)
+   * functions.
+   */
+  getContext?: RouterInit["getContext"];
+  /**
+   * Array of instrumentation objects allowing you to instrument the router and
+   * individual routes prior to router initialization (and on any subsequently
+   * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
+   * mostly useful for observability such as wrapping navigations, fetches,
+   * as well as route loaders/actions/middlewares with logging and/or performance
+   * tracing. See the [docs](../../how-to/instrumentation) for more information.
+   *
+   * ```tsx
+   * const logging = {
+   *   router({ instrument }) {
+   *     instrument({
+   *       navigate: (impl, { to }) => logExecution(`navigate ${to}`, impl),
+   *       fetch: (impl, { to }) => logExecution(`fetch ${to}`, impl)
+   *     });
+   *   },
+   *   route({ instrument, id }) {
+   *     instrument({
+   *       middleware: (impl, { request }) => logExecution(
+   *         `middleware ${request.url} (route ${id})`,
+   *         impl
+   *       ),
+   *       loader: (impl, { request }) => logExecution(
+   *         `loader ${request.url} (route ${id})`,
+   *         impl
+   *       ),
+   *       action: (impl, { request }) => logExecution(
+   *         `action ${request.url} (route ${id})`,
+   *         impl
+   *       ),
+   *     })
+   *   }
+   * };
+   *
+   * async function logExecution(label: string, impl: () => Promise<void>) {
+   *   let start = performance.now();
+   *   console.log(`start ${label}`);
+   *   await impl();
+   *   let duration = Math.round(performance.now() - start);
+   *   console.log(`end ${label} (${duration}ms)`);
+   * }
+   *
+   * startTransition(() => {
+   *   hydrateRoot(
+   *     document,
+   *     <HydratedRouter instrumentations={[logging]} />
+   *   );
+   * });
+   * ```
+   */
+  instrumentations?: ClientInstrumentation[];
+  /**
+   * An error handler function that will be called for any middleware, loader, action,
+   * or render errors that are encountered in your application.  This is useful for
+   * logging or reporting errors instead of in the {@link ErrorBoundary} because it's not
+   * subject to re-rendering and will only run one time per error.
+   *
+   * The `errorInfo` parameter is passed along from
+   * [`componentDidCatch`](https://react.dev/reference/react/Component#componentdidcatch)
+   * and is only present for render errors.
+   *
+   * ```tsx
+   * <HydratedRouter onError=(error, info) => {
+   *   let { location, params, pattern, errorInfo } = info;
+   *   console.error(error, location, errorInfo);
+   *   reportToErrorService(error, location, errorInfo);
+   * }} />
+   * ```
+   */
+  onError?: ClientOnErrorFunction;
+  /**
+   * Control whether router state updates are internally wrapped in
+   * [`React.startTransition`](https://react.dev/reference/react/startTransition).
+   *
+   * - When left `undefined`, all state updates are wrapped in
+   *   `React.startTransition`
+   *   - This can lead to buggy behaviors if you are wrapping your own
+   *     navigations/fetchers in `startTransition`.
+   * - When set to `true`, {@link Link} and {@link Form} navigations will be wrapped
+   *   in `React.startTransition` and router state changes will be wrapped in
+   *   `React.startTransition` and also sent through
+   *   [`useOptimistic`](https://react.dev/reference/react/useOptimistic) to
+   *   surface mid-navigation router state changes to the UI.
+   * - When set to `false`, the router will not leverage `React.startTransition` or
+   *   `React.useOptimistic` on any navigations or state changes.
+   *
+   * For more information, please see the [docs](../../explanation/react-transitions).
+   */
+  useTransitions?: boolean;
+}
+/**
+ * Framework-mode router component to be used to hydrate a router from a
+ * {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
+ *
+ * @public
+ * @category Framework Routers
+ * @mode framework
+ * @param props Props
+ * @param {dom.HydratedRouterProps.getContext} props.getContext n/a
+ * @param {dom.HydratedRouterProps.onError} props.onError n/a
+ * @returns A React element that represents the hydrated application.
+ */
+declare function HydratedRouter(props: HydratedRouterProps): React$1.JSX.Element;
+//#endregion
+export { HydratedRouter, HydratedRouterProps };

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

@@ -0,0 +1,153 @@
+/**
+ * react-router v8.0.0-pre.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { CRITICAL_CSS_DATA_ATTRIBUTE } from "../dom/ssr/components.js";
+import { RouterProvider as RouterProvider$1 } from "./dom-router-provider.js";
+import * as React$1 from "react";
+import { UNSAFE_FrameworkContext, UNSAFE_RemixErrorBoundary, UNSAFE_createBrowserHistory, UNSAFE_createClientRoutes, UNSAFE_createClientRoutesWithHMRRevalidationOptOut, UNSAFE_createRouter, UNSAFE_decodeViaTurboStream, UNSAFE_defaultMapRouteProperties, UNSAFE_deserializeErrors, UNSAFE_getHydrationData, UNSAFE_getPatchRoutesOnNavigationFunction, UNSAFE_getTurboStreamSingleFetchDataStrategy, UNSAFE_hydrationRouteProperties, UNSAFE_invariant, UNSAFE_useFogOFWarDiscovery } from "react-router";
+//#region lib/dom-export/hydrated-router.tsx
+let ssrInfo = null;
+let router = null;
+function initSsrInfo() {
+	if (!ssrInfo && window.__reactRouterContext && window.__reactRouterManifest && window.__reactRouterRouteModules) {
+		if (window.__reactRouterManifest.sri === true) {
+			const importMap = document.querySelector("script[rr-importmap]");
+			if (importMap?.textContent) try {
+				window.__reactRouterManifest.sri = JSON.parse(importMap.textContent).integrity;
+			} catch (err) {
+				console.error("Failed to parse import map", err);
+			}
+		}
+		ssrInfo = {
+			context: window.__reactRouterContext,
+			manifest: window.__reactRouterManifest,
+			routeModules: window.__reactRouterRouteModules,
+			stateDecodingPromise: void 0,
+			router: void 0,
+			routerInitialized: false
+		};
+	}
+}
+function createHydratedRouter({ getContext, instrumentations }) {
+	initSsrInfo();
+	if (!ssrInfo) throw new Error("You must be using the SSR features of React Router in order to skip passing a `router` prop to `<RouterProvider>`");
+	let localSsrInfo = ssrInfo;
+	if (!ssrInfo.stateDecodingPromise) {
+		let stream = ssrInfo.context.stream;
+		UNSAFE_invariant(stream, "No stream found for single fetch decoding");
+		ssrInfo.context.stream = void 0;
+		ssrInfo.stateDecodingPromise = UNSAFE_decodeViaTurboStream(stream, window).then((value) => {
+			ssrInfo.context.state = value.value;
+			localSsrInfo.stateDecodingPromise.value = true;
+		}).catch((e) => {
+			localSsrInfo.stateDecodingPromise.error = e;
+		});
+	}
+	if (ssrInfo.stateDecodingPromise.error) throw ssrInfo.stateDecodingPromise.error;
+	if (!ssrInfo.stateDecodingPromise.value) throw ssrInfo.stateDecodingPromise;
+	let routes = UNSAFE_createClientRoutes(ssrInfo.manifest.routes, ssrInfo.routeModules, ssrInfo.context.state, ssrInfo.context.ssr, ssrInfo.context.isSpaMode);
+	let hydrationData = void 0;
+	if (ssrInfo.context.isSpaMode) {
+		let { loaderData } = ssrInfo.context.state;
+		if (ssrInfo.manifest.routes.root?.hasLoader && loaderData && "root" in loaderData) hydrationData = { loaderData: { root: loaderData.root } };
+	} else {
+		hydrationData = UNSAFE_getHydrationData({
+			state: ssrInfo.context.state,
+			routes,
+			getRouteInfo: (routeId) => ({
+				clientLoader: ssrInfo.routeModules[routeId]?.clientLoader,
+				hasLoader: ssrInfo.manifest.routes[routeId]?.hasLoader === true,
+				hasHydrateFallback: ssrInfo.routeModules[routeId]?.HydrateFallback != null
+			}),
+			location: window.location,
+			basename: window.__reactRouterContext?.basename,
+			isSpaMode: ssrInfo.context.isSpaMode
+		});
+		if (hydrationData && hydrationData.errors) hydrationData.errors = UNSAFE_deserializeErrors(hydrationData.errors);
+	}
+	if (window.history.state && window.history.state.masked) window.history.replaceState({
+		...window.history.state,
+		masked: void 0
+	}, "");
+	let router = UNSAFE_createRouter({
+		routes,
+		history: UNSAFE_createBrowserHistory(),
+		basename: ssrInfo.context.basename,
+		getContext,
+		hydrationData,
+		mapRouteProperties: UNSAFE_defaultMapRouteProperties,
+		hydrationRouteProperties: UNSAFE_hydrationRouteProperties,
+		instrumentations,
+		dataStrategy: UNSAFE_getTurboStreamSingleFetchDataStrategy(() => router, ssrInfo.manifest, ssrInfo.routeModules, ssrInfo.context.ssr),
+		patchRoutesOnNavigation: UNSAFE_getPatchRoutesOnNavigationFunction(() => router, ssrInfo.manifest, ssrInfo.routeModules, ssrInfo.context.ssr, ssrInfo.context.routeDiscovery, ssrInfo.context.isSpaMode, ssrInfo.context.basename)
+	});
+	ssrInfo.router = router;
+	if (router.state.initialized) {
+		ssrInfo.routerInitialized = true;
+		router.initialize();
+	}
+	router.createRoutesForHMR = UNSAFE_createClientRoutesWithHMRRevalidationOptOut;
+	window.__reactRouterDataRouter = router;
+	return router;
+}
+/**
+* Framework-mode router component to be used to hydrate a router from a
+* {@link ServerRouter}. See [`entry.client.tsx`](../framework-conventions/entry.client.tsx).
+*
+* @public
+* @category Framework Routers
+* @mode framework
+* @param props Props
+* @param {dom.HydratedRouterProps.getContext} props.getContext n/a
+* @param {dom.HydratedRouterProps.onError} props.onError n/a
+* @returns A React element that represents the hydrated application.
+*/
+function HydratedRouter(props) {
+	if (!router) router = createHydratedRouter({
+		getContext: props.getContext,
+		instrumentations: props.instrumentations
+	});
+	let [criticalCss, setCriticalCss] = React$1.useState(process.env.NODE_ENV === "development" ? ssrInfo?.context.criticalCss : void 0);
+	React$1.useEffect(() => {
+		if (process.env.NODE_ENV === "development") setCriticalCss(void 0);
+	}, []);
+	React$1.useEffect(() => {
+		if (process.env.NODE_ENV === "development" && criticalCss === void 0) document.querySelectorAll(`[${CRITICAL_CSS_DATA_ATTRIBUTE}]`).forEach((element) => element.remove());
+	}, [criticalCss]);
+	let [location, setLocation] = React$1.useState(router.state.location);
+	React$1.useLayoutEffect(() => {
+		if (ssrInfo && ssrInfo.router && !ssrInfo.routerInitialized) {
+			ssrInfo.routerInitialized = true;
+			ssrInfo.router.initialize();
+		}
+	}, []);
+	React$1.useLayoutEffect(() => {
+		if (ssrInfo && ssrInfo.router) return ssrInfo.router.subscribe((newState) => {
+			if (newState.location !== location) setLocation(newState.location);
+		});
+	}, [location]);
+	UNSAFE_invariant(ssrInfo, "ssrInfo unavailable for HydratedRouter");
+	UNSAFE_useFogOFWarDiscovery(router, ssrInfo.manifest, ssrInfo.routeModules, ssrInfo.context.ssr, ssrInfo.context.routeDiscovery, ssrInfo.context.isSpaMode);
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(UNSAFE_FrameworkContext.Provider, { value: {
+		manifest: ssrInfo.manifest,
+		routeModules: ssrInfo.routeModules,
+		future: ssrInfo.context.future,
+		criticalCss,
+		ssr: ssrInfo.context.ssr,
+		isSpaMode: ssrInfo.context.isSpaMode,
+		routeDiscovery: ssrInfo.context.routeDiscovery
+	} }, /* @__PURE__ */ React$1.createElement(UNSAFE_RemixErrorBoundary, { location }, /* @__PURE__ */ React$1.createElement(RouterProvider$1, {
+		router,
+		useTransitions: props.useTransitions,
+		onError: props.onError
+	}))), /* @__PURE__ */ React$1.createElement(React$1.Fragment, null));
+}
+//#endregion
+export { HydratedRouter };

package/dist/development/lib/errors.js

@@ -0,0 +1,29 @@
+/**
+ * react-router v8.0.0-pre.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { ErrorResponseImpl } from "./router/utils.js";
+//#region lib/errors.ts
+const ERROR_DIGEST_BASE = "REACT_ROUTER_ERROR";
+const ERROR_DIGEST_REDIRECT = "REDIRECT";
+const ERROR_DIGEST_ROUTE_ERROR_RESPONSE = "ROUTE_ERROR_RESPONSE";
+function decodeRedirectErrorDigest(digest) {
+	if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_REDIRECT}:{`)) try {
+		let parsed = JSON.parse(digest.slice(28));
+		if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string" && typeof parsed.location === "string" && typeof parsed.reloadDocument === "boolean" && typeof parsed.replace === "boolean") return parsed;
+	} catch {}
+}
+function decodeRouteErrorResponseDigest(digest) {
+	if (digest.startsWith(`${ERROR_DIGEST_BASE}:${ERROR_DIGEST_ROUTE_ERROR_RESPONSE}:{`)) try {
+		let parsed = JSON.parse(digest.slice(40));
+		if (typeof parsed === "object" && parsed && typeof parsed.status === "number" && typeof parsed.statusText === "string") return new ErrorResponseImpl(parsed.status, parsed.statusText, parsed.data);
+	} catch {}
+}
+//#endregion
+export { decodeRedirectErrorDigest, decodeRouteErrorResponseDigest };