UNPKG

react-router/dist/production/lib/dom/ssr/components.js

Version:
21.5 kBJavaScriptView Raw
1/**
* react-router v8.4.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
*/
11import { useIsRSCRouterContext } from "../../context.js";
12import { useDataRouterContext, useDataRouterData, useDataRouterState, useLocation } from "../../hooks.js";
13import { warnOnce } from "../../server-runtime/warnings.js";
14import invariant from "./invariant.js";
15import { getKeyedLinksForMatches, getKeyedPrefetchLinks, getModuleLinkHrefs, getNewMatchesForLinks, isPageLinkDescriptor } from "./links.js";
16import { escapeHtml } from "./markup.js";
17import { singleFetchUrl } from "./single-fetch.js";
18import { getPartialManifest, isFogOfWarEnabled } from "./fog-of-war.js";
19import * as React$1 from "react";
20//#region lib/dom/ssr/components.tsx
21const FrameworkContext = React$1.createContext(void 0);
22FrameworkContext.displayName = "FrameworkContext";
23function useFrameworkContext() {
let context = React$1.useContext(FrameworkContext);
invariant(context, "You must render this element inside a <HydratedRouter> element");
return context;
27}
28function usePrefetchBehavior(prefetch, theirElementProps) {
let frameworkContext = React$1.useContext(FrameworkContext);
let [maybePrefetch, setMaybePrefetch] = React$1.useState(false);
let [shouldPrefetch, setShouldPrefetch] = React$1.useState(false);
let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
let ref = React$1.useRef(null);
React$1.useEffect(() => {
if (prefetch === "render") setShouldPrefetch(true);
if (prefetch === "viewport") {
	let callback = (entries) => {
		entries.forEach((entry) => {
			setShouldPrefetch(entry.isIntersecting);
		});
	};
	let observer = new IntersectionObserver(callback, { threshold: .5 });
	if (ref.current) observer.observe(ref.current);
	return () => {
		observer.disconnect();
	};
}
}, [prefetch]);
React$1.useEffect(() => {
if (maybePrefetch) {
	let id = setTimeout(() => {
		setShouldPrefetch(true);
	}, 100);
	return () => {
		clearTimeout(id);
	};
}
}, [maybePrefetch]);
let setIntent = () => {
setMaybePrefetch(true);
};
let cancelIntent = () => {
setMaybePrefetch(false);
setShouldPrefetch(false);
};
if (!frameworkContext) return [
false,
ref,
{}
];
if (prefetch !== "intent") return [
shouldPrefetch,
ref,
{}
];
return [
shouldPrefetch,
ref,
{
	onFocus: composeEventHandlers(onFocus, setIntent),
	onBlur: composeEventHandlers(onBlur, cancelIntent),
	onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
	onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
	onTouchStart: composeEventHandlers(onTouchStart, setIntent)
}
];
87}
88function composeEventHandlers(theirHandler, ourHandler) {
return (event) => {
theirHandler && theirHandler(event);
if (!event.defaultPrevented) ourHandler(event);
};
93}
94function getActiveMatches(matches, errors, isSpaMode) {
if (isSpaMode && !isHydrated) return [matches[0]];
if (errors) {
let errorIdx = matches.findIndex((m) => errors[m.route.id] !== void 0);
return matches.slice(0, errorIdx + 1);
}
return matches;
101}
102const CRITICAL_CSS_DATA_ATTRIBUTE = "data-react-router-critical-css";
103/**
104* Renders all the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
105* tags created by the route module's [`links`](../../start/framework/route-module#links)
106* export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
107* of your document.
108*
109* @example
110* import { Links } from "react-router";
111*
112* export default function Root() {
113*   return (
114*     <html>
115*       <head>
116*         <Links />
117*       </head>
118*       <body></body>
119*     </html>
120*   );
121* }
122*
123* @public
124* @category Components
125* @mode framework
126* @param props Props
127* @param {LinksProps.nonce} props.nonce n/a
128* @param {LinksProps.crossOrigin} props.crossOrigin n/a
129* @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
130* tags
131*/
132function Links({ nonce, crossOrigin }) {
let { isSpaMode, manifest, routeModules, criticalCss, nonce: contextNonce } = useFrameworkContext();
let { matches: routerMatches } = useDataRouterState("Links");
let { errors } = useDataRouterData("Links");
let matches = getActiveMatches(routerMatches, errors, isSpaMode);
let keyedLinks = React$1.useMemo(() => getKeyedLinksForMatches(matches, routeModules, manifest), [
matches,
routeModules,
manifest
]);
if (nonce == null && contextNonce) nonce = contextNonce;
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, typeof criticalCss === "string" ? /* @__PURE__ */ React$1.createElement("style", {
[CRITICAL_CSS_DATA_ATTRIBUTE]: "",
nonce,
dangerouslySetInnerHTML: { __html: criticalCss }
}) : null, typeof criticalCss === "object" ? /* @__PURE__ */ React$1.createElement("link", {
[CRITICAL_CSS_DATA_ATTRIBUTE]: "",
rel: "stylesheet",
href: criticalCss.href,
nonce,
crossOrigin
}) : null, keyedLinks.map(({ key, link }) => isPageLinkDescriptor(link) ? /* @__PURE__ */ React$1.createElement(PrefetchPageLinks, {
key,
nonce,
...link,
crossOrigin: link.crossOrigin ?? crossOrigin
}) : /* @__PURE__ */ React$1.createElement("link", {
key,
nonce,
...link,
crossOrigin: link.crossOrigin ?? crossOrigin
})));
164}
165/**
166* Renders [`<link rel=prefetch|modulepreload>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel)
167* tags for modules and data of another page to enable an instant navigation to
168* that page. [`<Link prefetch>`](./Link#prefetch) uses this internally, but you
169* can render it to prefetch a page for any other reason.
170*
171* For example, you may render one of this as the user types into a search field
172* to prefetch search results before they click through to their selection.
173*
174* @example
175* import { PrefetchPageLinks } from "react-router";
176*
177* <PrefetchPageLinks page="/absolute/path" />
178*
179* @public
180* @category Components
181* @mode framework
182* @param props Props
183* @param {PageLinkDescriptor.page} props.page n/a
184* @param props.linkProps Additional props to spread onto the [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
185* tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/crossOrigin),
186* [`integrity`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/integrity),
187* [`rel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/rel),
188* etc.
189* @returns A collection of React elements for [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
190* tags
191*/
192function PrefetchPageLinks({ page, ...linkProps }) {
let rsc = useIsRSCRouterContext();
let { nonce: contextNonce } = useFrameworkContext();
let { router } = useDataRouterContext("PrefetchPageLinks");
let matches = React$1.useMemo(() => router.match(page), [
router,
router.routes,
page
]);
if (!matches) return null;
if (linkProps.nonce == null && contextNonce) linkProps = {
...linkProps,
nonce: contextNonce
};
if (rsc) return /* @__PURE__ */ React$1.createElement(RSCPrefetchPageLinksImpl, {
page,
matches,
...linkProps
});
return /* @__PURE__ */ React$1.createElement(PrefetchPageLinksImpl, {
page,
matches,
...linkProps
});
216}
217function useKeyedPrefetchLinks(matches) {
let { manifest, routeModules } = useFrameworkContext();
let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React$1.useState([]);
React$1.useEffect(() => {
let interrupted = false;
getKeyedPrefetchLinks(matches, manifest, routeModules).then((links) => {
	if (!interrupted) setKeyedPrefetchLinks(links);
});
return () => {
	interrupted = true;
};
}, [
matches,
manifest,
routeModules
]);
return keyedPrefetchLinks;
234}
235function RSCPrefetchPageLinksImpl({ page, matches: nextMatches, ...linkProps }) {
let location = useLocation();
let dataHrefs = React$1.useMemo(() => {
if (page === location.pathname + location.search + location.hash) return [];
let url = singleFetchUrl(page, "rsc");
let hasSomeRoutesWithShouldRevalidate = false;
let targetRoutes = [];
for (let match of nextMatches) if (typeof match.route.shouldRevalidate === "function") hasSomeRoutesWithShouldRevalidate = true;
else targetRoutes.push(match.route.id);
if (hasSomeRoutesWithShouldRevalidate && targetRoutes.length > 0) url.searchParams.set("_routes", targetRoutes.join(","));
return [url.pathname + url.search];
}, [
page,
location,
nextMatches
]);
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React$1.createElement("link", {
key: href,
rel: "prefetch",
as: "fetch",
href,
...linkProps
})));
258}
259function PrefetchPageLinksImpl({ page, matches: nextMatches, ...linkProps }) {
let location = useLocation();
let { manifest, routeModules } = useFrameworkContext();
let { matches } = useDataRouterState("PrefetchPageLinks");
let { loaderData } = useDataRouterData("PrefetchPageLinks");
let newMatchesForData = React$1.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, manifest, location, "data"), [
page,
nextMatches,
matches,
manifest,
location
]);
let newMatchesForAssets = React$1.useMemo(() => getNewMatchesForLinks(page, nextMatches, matches, manifest, location, "assets"), [
page,
nextMatches,
matches,
manifest,
location
]);
let dataHrefs = React$1.useMemo(() => {
if (page === location.pathname + location.search + location.hash) return [];
let routesParams = /* @__PURE__ */ new Set();
let foundOptOutRoute = false;
nextMatches.forEach((m) => {
	let manifestRoute = manifest.routes[m.route.id];
	if (!manifestRoute || !manifestRoute.hasLoader) return;
	if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && routeModules[m.route.id]?.shouldRevalidate) foundOptOutRoute = true;
	else if (manifestRoute.hasClientLoader) foundOptOutRoute = true;
	else routesParams.add(m.route.id);
});
if (routesParams.size === 0) return [];
let url = singleFetchUrl(page, "data");
if (foundOptOutRoute && routesParams.size > 0) url.searchParams.set("_routes", nextMatches.filter((m) => routesParams.has(m.route.id)).map((m) => m.route.id).join(","));
return [url.pathname + url.search];
}, [
loaderData,
location,
manifest,
newMatchesForData,
nextMatches,
page,
routeModules
]);
let moduleHrefs = React$1.useMemo(() => getModuleLinkHrefs(newMatchesForAssets, manifest), [newMatchesForAssets, manifest]);
let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React$1.createElement("link", {
key: href,
rel: "prefetch",
as: "fetch",
href,
...linkProps
})), moduleHrefs.map((href) => /* @__PURE__ */ React$1.createElement("link", {
key: href,
rel: "modulepreload",
href,
...linkProps
})), keyedPrefetchLinks.map(({ key, link }) => /* @__PURE__ */ React$1.createElement("link", {
key,
nonce: linkProps.nonce,
...link,
crossOrigin: link.crossOrigin ?? linkProps.crossOrigin
})));
321}
322/**
323* Renders all the [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
324* tags created by the route module's [`meta`](../../start/framework/route-module#meta)
325* export. You should render it inside the [`<head>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)
326* of your document.
327*
328* @example
329* import { Meta } from "react-router";
330*
331* export default function Root() {
332*   return (
333*     <html>
334*       <head>
335*         <Meta />
336*       </head>
337*     </html>
338*   );
339* }
340*
341* @public
342* @category Components
343* @mode framework
344* @returns A collection of React elements for [`<meta>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)
345* tags
346*/
347function Meta() {
let { isSpaMode, routeModules } = useFrameworkContext();
let { matches: routerMatches } = useDataRouterState("Meta");
let { errors, loaderData } = useDataRouterData("Meta");
let location = useLocation();
let _matches = getActiveMatches(routerMatches, errors, isSpaMode);
let error = null;
if (errors) error = errors[_matches[_matches.length - 1].route.id];
let meta = [];
let leafMeta = null;
let matches = [];
for (let i = 0; i < _matches.length; i++) {
let _match = _matches[i];
let routeId = _match.route.id;
let data = loaderData[routeId];
let params = _match.params;
let routeModule = routeModules[routeId];
let routeMeta = [];
let match = {
	id: routeId,
	loaderData: data,
	meta: [],
	params: _match.params,
	pathname: _match.pathname,
	handle: _match.route.handle,
	error
};
matches[i] = match;
if (routeModule?.meta) routeMeta = typeof routeModule.meta === "function" ? routeModule.meta({
	loaderData: data,
	params,
	location,
	matches,
	error
}) : Array.isArray(routeModule.meta) ? [...routeModule.meta] : routeModule.meta;
else if (leafMeta) routeMeta = [...leafMeta];
routeMeta = routeMeta || [];
if (!Array.isArray(routeMeta)) throw new Error("The route at " + _match.route.path + " returns an invalid value. All route meta functions must return an array of meta objects.\n\nTo reference the meta function API, see https://reactrouter.com/start/framework/route-module#meta");
match.meta = routeMeta;
matches[i] = match;
meta = [...routeMeta];
leafMeta = meta;
}
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, meta.flat().map((metaProps) => {
if (!metaProps) return null;
if ("tagName" in metaProps) {
	let { tagName, ...rest } = metaProps;
	if (!isValidMetaTag(tagName)) {
		console.warn(`A meta object uses an invalid tagName: ${tagName}. Expected either 'link' or 'meta'`);
		return null;
	}
	let Comp = tagName;
	return /* @__PURE__ */ React$1.createElement(Comp, {
		key: JSON.stringify(rest),
		...rest
	});
}
if ("title" in metaProps) return /* @__PURE__ */ React$1.createElement("title", { key: "title" }, String(metaProps.title));
if ("charset" in metaProps) {
	metaProps.charSet ??= metaProps.charset;
	delete metaProps.charset;
}
if ("charSet" in metaProps && metaProps.charSet != null) return typeof metaProps.charSet === "string" ? /* @__PURE__ */ React$1.createElement("meta", {
	key: "charSet",
	charSet: metaProps.charSet
}) : null;
if ("script:ld+json" in metaProps) try {
	let json = JSON.stringify(metaProps["script:ld+json"]);
	return /* @__PURE__ */ React$1.createElement("script", {
		key: `script:ld+json:${json}`,
		type: "application/ld+json",
		dangerouslySetInnerHTML: { __html: escapeHtml(json) }
	});
} catch {
	return null;
}
return /* @__PURE__ */ React$1.createElement("meta", {
	key: JSON.stringify(metaProps),
	...metaProps
});
}));
428}
429function isValidMetaTag(tagName) {
return typeof tagName === "string" && /^(meta|link)$/.test(tagName);
431}
432/**
433* Tracks whether hydration is finished, so scripts can be skipped
434* during client-side updates.
435*/
436let isHydrated = false;
437function setIsHydrated() {
isHydrated = true;
439}
440/**
441* Renders the client runtime of your app. It should be rendered inside the
442* [`<body>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)
443*  of the document.
444*
445* If server rendering, you can omit `<Scripts/>` and the app will work as a
446* traditional web app without JavaScript, relying solely on HTML and browser
447* behaviors.
448*
449* @example
450* import { Scripts } from "react-router";
451*
452* export default function Root() {
453*   return (
454*     <html>
455*       <head />
456*       <body>
457*         <Scripts />
458*       </body>
459*     </html>
460*   );
461* }
462*
463* @public
464* @category Components
465* @mode framework
466* @param scriptProps Additional props to spread onto the [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
467* tags, such as [`crossOrigin`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/crossOrigin),
468* [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce),
469* etc.
470* @returns A collection of React elements for [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)
471* tags
472*/
473function Scripts(scriptProps) {
let { manifest, serverHandoffString, isSpaMode, renderMeta, routeDiscovery, ssr, nonce: contextNonce } = useFrameworkContext();
let { router, static: isStatic, staticContext } = useDataRouterContext("Scripts");
let { matches: routerMatches } = useDataRouterState("Scripts");
let isRSCRouterContext = useIsRSCRouterContext();
let enableFogOfWar = isFogOfWarEnabled(routeDiscovery, ssr);
if (scriptProps.nonce == null && contextNonce) scriptProps = {
...scriptProps,
nonce: contextNonce
};
if (renderMeta) renderMeta.didRenderScripts = true;
let matches = getActiveMatches(routerMatches, null, isSpaMode);
React$1.useEffect(() => {
setIsHydrated();
}, []);
let initialScripts = React$1.useMemo(() => {
if (isRSCRouterContext) return null;
let contextScript = staticContext ? `window.__reactRouterContext = ${serverHandoffString};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());` : " ";
let routeModulesScript = !isStatic ? " " : `${manifest.hmr?.runtime ? `import ${JSON.stringify(manifest.hmr.runtime)};` : ""}${!enableFogOfWar ? `import ${JSON.stringify(manifest.url)}` : ""};
492${matches.map((match, routeIndex) => {
	let routeVarName = `route${routeIndex}`;
	let manifestEntry = manifest.routes[match.route.id];
	invariant(manifestEntry, `Route ${match.route.id} not found in manifest`);
	let { clientActionModule, clientLoaderModule, clientMiddlewareModule, hydrateFallbackModule, module } = manifestEntry;
	let chunks = [
		...clientActionModule ? [{
			module: clientActionModule,
			varName: `${routeVarName}_clientAction`
		}] : [],
		...clientLoaderModule ? [{
			module: clientLoaderModule,
			varName: `${routeVarName}_clientLoader`
		}] : [],
		...clientMiddlewareModule ? [{
			module: clientMiddlewareModule,
			varName: `${routeVarName}_clientMiddleware`
		}] : [],
		...hydrateFallbackModule ? [{
			module: hydrateFallbackModule,
			varName: `${routeVarName}_HydrateFallback`
		}] : [],
		{
			module,
			varName: `${routeVarName}_main`
		}
	];
	if (chunks.length === 1) return `import * as ${routeVarName} from ${JSON.stringify(module)};`;
	return [chunks.map((chunk) => `import * as ${chunk.varName} from "${chunk.module}";`).join("\n"), `const ${routeVarName} = {${chunks.map((chunk) => `...${chunk.varName}`).join(",")}};`].join("\n");
}).join("\n")}
${enableFogOfWar ? `window.__reactRouterManifest = ${JSON.stringify(getPartialManifest(manifest, router), null, 2)};` : ""}
window.__reactRouterRouteModules = {${matches.map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`).join(",")}};
524
525import(${JSON.stringify(manifest.entry.module)});`;
return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("script", {
	...scriptProps,
	suppressHydrationWarning: true,
	dangerouslySetInnerHTML: { __html: contextScript },
	type: void 0
}), /* @__PURE__ */ React$1.createElement("script", {
	...scriptProps,
	suppressHydrationWarning: true,
	dangerouslySetInnerHTML: { __html: routeModulesScript },
	type: "module",
	async: true
}));
}, []);
let preloads = isHydrated || isRSCRouterContext ? [] : [...new Set(manifest.entry.imports.concat(getModuleLinkHrefs(matches, manifest, { includeHydrateFallback: true })))];
let sri = typeof manifest.sri === "object" ? manifest.sri : {};
warnOnce(!isRSCRouterContext, "The <Scripts /> element is a no-op when using RSC and can be safely removed.");
return isHydrated || isRSCRouterContext ? null : /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, typeof manifest.sri === "object" ? /* @__PURE__ */ React$1.createElement("script", {
...scriptProps,
"rr-importmap": "",
type: "importmap",
suppressHydrationWarning: true,
dangerouslySetInnerHTML: { __html: JSON.stringify({ integrity: sri }) }
}) : null, !enableFogOfWar ? /* @__PURE__ */ React$1.createElement("link", {
rel: "modulepreload",
href: manifest.url,
crossOrigin: scriptProps.crossOrigin,
integrity: sri[manifest.url],
nonce: scriptProps.nonce,
suppressHydrationWarning: true
}) : null, /* @__PURE__ */ React$1.createElement("link", {
rel: "modulepreload",
href: manifest.entry.module,
crossOrigin: scriptProps.crossOrigin,
integrity: sri[manifest.entry.module],
nonce: scriptProps.nonce,
suppressHydrationWarning: true
}), preloads.map((path) => /* @__PURE__ */ React$1.createElement("link", {
key: path,
rel: "modulepreload",
href: path,
crossOrigin: scriptProps.crossOrigin,
integrity: sri[path],
nonce: scriptProps.nonce,
suppressHydrationWarning: true
})), initialScripts);
571}
572function mergeRefs(...refs) {
return (value) => {
refs.forEach((ref) => {
	if (typeof ref === "function") ref(value);
	else if (ref != null) ref.current = value;
});
};
579}
580//#endregion
581export { CRITICAL_CSS_DATA_ATTRIBUTE, FrameworkContext, Links, Meta, PrefetchPageLinks, Scripts, mergeRefs, setIsHydrated, useFrameworkContext, usePrefetchBehavior };
1	`/**`
2	`* react-router v8.4.0`
3	`*`
4	`* Copyright (c) Remix Software Inc.`
5	`*`
6	`* This source code is licensed under the MIT license found in the`
7	`* LICENSE.md file in the root directory of this source tree.`
8	`*`
9	`* @license MIT`
10	`*/`
11	`import { useIsRSCRouterContext } from "../../context.js";`
12	`import { useDataRouterContext, useDataRouterData, useDataRouterState, useLocation } from "../../hooks.js";`
13	`import { warnOnce } from "../../server-runtime/warnings.js";`
14	`import invariant from "./invariant.js";`
15	`import { getKeyedLinksForMatches, getKeyedPrefetchLinks, getModuleLinkHrefs, getNewMatchesForLinks, isPageLinkDescriptor } from "./links.js";`
16	`import { escapeHtml } from "./markup.js";`
17	`import { singleFetchUrl } from "./single-fetch.js";`
18	`import { getPartialManifest, isFogOfWarEnabled } from "./fog-of-war.js";`
19	`import * as React$1 from "react";`
20	`//#region lib/dom/ssr/components.tsx`
21	`const FrameworkContext = React$1.createContext(void 0);`
22	`FrameworkContext.displayName = "FrameworkContext";`
23	`function useFrameworkContext() {`
24	`let context = React$1.useContext(FrameworkContext);`
25	`invariant(context, "You must render this element inside a <HydratedRouter> element");`
26	`return context;`
27	`}`
28	`function usePrefetchBehavior(prefetch, theirElementProps) {`
29	`let frameworkContext = React$1.useContext(FrameworkContext);`
30	`let [maybePrefetch, setMaybePrefetch] = React$1.useState(false);`
31	`let [shouldPrefetch, setShouldPrefetch] = React$1.useState(false);`
32	`let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;`
33	`let ref = React$1.useRef(null);`
34	`React$1.useEffect(() => {`
35	`if (prefetch === "render") setShouldPrefetch(true);`
36	`if (prefetch === "viewport") {`
37	`let callback = (entries) => {`
38	`entries.forEach((entry) => {`
39	`setShouldPrefetch(entry.isIntersecting);`
40	`});`