@tanstack/react-router
Version:
Modern and scalable routing for React applications
271 lines (270 loc) • 7.5 kB
JavaScript
import { useRouter } from "./useRouter.js";
import { appendUniqueUserTags, deepEqual, escapeHtml, getAssetCrossOrigin, getScriptPreloadAttrs, resolveManifestCssLink } from "@tanstack/router-core";
import * as React$1 from "react";
import { useStore } from "@tanstack/react-store";
import { isServer } from "@tanstack/router-core/isServer";
//#region src/headContentUtils.tsx
function buildTagsFromMatches(router, nonce, matches, assetCrossOrigin) {
const routeMeta = matches.map((match) => match.meta).filter((meta) => meta !== void 0);
const resultMeta = [];
const metaByAttribute = {};
let title;
for (let i = routeMeta.length - 1; i >= 0; i--) {
const metas = routeMeta[i];
for (let j = metas.length - 1; j >= 0; j--) {
const m = metas[j];
if (!m) continue;
if (m.title) {
if (!title) title = {
tag: "title",
children: m.title
};
} else if ("script:ld+json" in m) try {
const json = JSON.stringify(m["script:ld+json"]);
resultMeta.push({
tag: "script",
attrs: { type: "application/ld+json" },
children: escapeHtml(json)
});
} catch {}
else {
const attribute = m.name ?? m.property;
if (attribute) if (metaByAttribute[attribute]) continue;
else metaByAttribute[attribute] = true;
resultMeta.push({
tag: "meta",
attrs: {
...m,
nonce
}
});
}
}
}
if (title) resultMeta.push(title);
if (nonce) resultMeta.push({
tag: "meta",
attrs: {
property: "csp-nonce",
content: nonce
}
});
resultMeta.reverse();
const constructedLinks = matches.flatMap((match) => match.links ?? []).filter((link) => link !== void 0).map((link) => ({
tag: "link",
attrs: {
...link,
nonce
}
}));
const manifest = router.ssr?.manifest;
const manifestCssTags = [];
if (manifest) {
matches.forEach((match) => {
(manifest.routes[match.routeId]?.css)?.forEach((link) => {
const resolvedLink = resolveManifestCssLink(link);
manifestCssTags.push({
tag: "link",
attrs: {
rel: "stylesheet",
...resolvedLink,
crossOrigin: getAssetCrossOrigin(assetCrossOrigin, "stylesheet") ?? resolvedLink.crossOrigin,
suppressHydrationWarning: true,
nonce
}
});
});
});
if (manifest.inlineStyle) manifestCssTags.push({
tag: "style",
attrs: {
...manifest.inlineStyle.attrs,
nonce
},
children: manifest.inlineStyle.children,
inlineCss: true
});
}
const preloadLinks = [];
if (manifest) matches.forEach((match) => {
manifest.routes[match.routeId]?.preloads?.forEach((preload) => {
preloadLinks.push({
tag: "link",
attrs: {
...getScriptPreloadAttrs(manifest, preload, assetCrossOrigin),
nonce
}
});
});
});
const styles = matches.flatMap((match) => match.styles ?? []).filter((style) => style !== void 0).map(({ children, ...attrs }) => ({
tag: "style",
attrs: {
...attrs,
nonce
},
children
}));
const headScripts = matches.flatMap((match) => match.headScripts ?? []).filter((script) => script !== void 0).map(({ children, ...script }) => ({
tag: "script",
attrs: {
...script,
nonce
},
children
}));
const tags = [];
appendUniqueUserTags(tags, resultMeta);
tags.push(...preloadLinks);
appendUniqueUserTags(tags, constructedLinks);
tags.push(...manifestCssTags);
appendUniqueUserTags(tags, styles);
appendUniqueUserTags(tags, headScripts);
return tags;
}
/**
* Build the list of head/link/meta/script tags to render for active matches.
* Used internally by `HeadContent`.
*/
var useTags = (assetCrossOrigin) => {
const router = useRouter();
const nonce = router.options.ssr?.nonce;
if (isServer ?? router.isServer) return buildTagsFromMatches(router, nonce, router.stores.matches.get(), assetCrossOrigin);
const routeMeta = useStore(router.stores.matches, (matches) => {
return matches.map((match) => match.meta).filter((meta) => meta !== void 0);
}, deepEqual);
const meta = React$1.useMemo(() => {
const resultMeta = [];
const metaByAttribute = {};
let title;
for (let i = routeMeta.length - 1; i >= 0; i--) {
const metas = routeMeta[i];
for (let j = metas.length - 1; j >= 0; j--) {
const m = metas[j];
if (!m) continue;
if (m.title) {
if (!title) title = {
tag: "title",
children: m.title
};
} else if ("script:ld+json" in m) try {
const json = JSON.stringify(m["script:ld+json"]);
resultMeta.push({
tag: "script",
attrs: { type: "application/ld+json" },
children: escapeHtml(json)
});
} catch {}
else {
const attribute = m.name ?? m.property;
if (attribute) if (metaByAttribute[attribute]) continue;
else metaByAttribute[attribute] = true;
resultMeta.push({
tag: "meta",
attrs: {
...m,
nonce
}
});
}
}
}
if (title) resultMeta.push(title);
if (nonce) resultMeta.push({
tag: "meta",
attrs: {
property: "csp-nonce",
content: nonce
}
});
resultMeta.reverse();
return resultMeta;
}, [routeMeta, nonce]);
const links = useStore(router.stores.matches, (matches) => {
return matches.flatMap((match) => match.links ?? []).filter((link) => link !== void 0).map((link) => ({
tag: "link",
attrs: {
...link,
nonce
}
}));
}, deepEqual);
const manifestCssTags = useStore(router.stores.matches, (matches) => {
const manifest = router.ssr?.manifest;
const tags = [];
if (!manifest) return tags;
matches.forEach((match) => {
manifest.routes[match.routeId]?.css?.forEach((link) => {
const resolvedLink = resolveManifestCssLink(link);
tags.push({
tag: "link",
attrs: {
rel: "stylesheet",
...resolvedLink,
crossOrigin: getAssetCrossOrigin(assetCrossOrigin, "stylesheet") ?? resolvedLink.crossOrigin,
suppressHydrationWarning: true,
nonce
}
});
});
});
if (manifest.inlineStyle) tags.push({
tag: "style",
attrs: {
...manifest.inlineStyle.attrs,
nonce
},
children: manifest.inlineStyle.children,
inlineCss: true
});
return tags;
}, deepEqual);
const preloadLinks = useStore(router.stores.matches, (matches) => {
const preloadLinks = [];
const manifest = router.ssr?.manifest;
if (!manifest) return preloadLinks;
matches.forEach((match) => {
manifest.routes[match.routeId]?.preloads?.forEach((preload) => {
preloadLinks.push({
tag: "link",
attrs: {
...getScriptPreloadAttrs(manifest, preload, assetCrossOrigin),
nonce
}
});
});
});
return preloadLinks;
}, deepEqual);
const styles = useStore(router.stores.matches, (matches) => {
return matches.flatMap((match) => match.styles ?? []).filter((style) => style !== void 0).map(({ children, ...attrs }) => ({
tag: "style",
attrs: {
...attrs,
nonce
},
children
}));
}, deepEqual);
const headScripts = useStore(router.stores.matches, (matches) => {
return matches.flatMap((match) => match.headScripts ?? []).filter((script) => script !== void 0).map(({ children, ...script }) => ({
tag: "script",
attrs: {
...script,
nonce
},
children
}));
}, deepEqual);
const tags = [];
appendUniqueUserTags(tags, meta);
tags.push(...preloadLinks);
appendUniqueUserTags(tags, links);
tags.push(...manifestCssTags);
appendUniqueUserTags(tags, styles);
appendUniqueUserTags(tags, headScripts);
return tags;
};
//#endregion
export { useTags };
//# sourceMappingURL=headContentUtils.js.map