@tanstack/vue-router/dist/esm/headContentUtils.js

Modern and scalable routing for Vue applications

import { useRouter } from "./useRouter.js";
import { escapeHtml, getAssetCrossOrigin, isInlinableStylesheet, resolveManifestAssetLink } from "@tanstack/router-core";
import * as Vue from "vue";
import { useStore } from "@tanstack/vue-store";
//#region src/headContentUtils.tsx
var useTags = (assetCrossOrigin) => {
	const router = useRouter();
	const matches = useStore(router.stores.matches, (value) => value);
	const meta = Vue.computed(() => {
		const resultMeta = [];
		const metaByAttribute = {};
		let title;
		[...matches.value.map((match) => match.meta).filter(Boolean)].reverse().forEach((metas) => {
			[...metas].reverse().forEach((m) => {
				if (!m) return;
				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]) return;
					else metaByAttribute[attribute] = true;
					resultMeta.push({
						tag: "meta",
						attrs: { ...m }
					});
				}
			});
		});
		if (title) resultMeta.push(title);
		resultMeta.reverse();
		return resultMeta;
	});
	const links = Vue.computed(() => matches.value.map((match) => match.links).filter(Boolean).flat(1).map((link) => ({
		tag: "link",
		attrs: { ...link }
	})));
	const preloadMeta = Vue.computed(() => {
		const preloadMeta = [];
		matches.value.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => router.ssr?.manifest?.routes[route.id]?.preloads?.filter(Boolean).forEach((preload) => {
			const preloadLink = resolveManifestAssetLink(preload);
			preloadMeta.push({
				tag: "link",
				attrs: {
					rel: "modulepreload",
					href: preloadLink.href,
					crossOrigin: getAssetCrossOrigin(assetCrossOrigin, "modulepreload") ?? preloadLink.crossOrigin
				}
			});
		}));
		return preloadMeta;
	});
	const headScripts = Vue.computed(() => matches.value.map((match) => match.headScripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
		tag: "script",
		attrs: { ...script },
		children
	})));
	const manifestAssets = Vue.computed(() => {
		const manifest = router.ssr?.manifest;
		return matches.value.map((match) => manifest?.routes[match.routeId]?.assets ?? []).filter(Boolean).flat(1).flatMap((asset) => {
			if (asset.tag === "link") {
				if (isInlinableStylesheet(manifest, asset)) return [];
				return [{
					tag: "link",
					attrs: {
						...asset.attrs,
						crossOrigin: getAssetCrossOrigin(assetCrossOrigin, "stylesheet") ?? asset.attrs?.crossOrigin
					}
				}];
			}
			if (asset.tag === "style") return [{
				tag: "style",
				attrs: asset.attrs,
				children: asset.children,
				...asset.inlineCss ? { inlineCss: true } : {}
			}];
			return [];
		});
	});
	return () => uniqBy([
		...manifestAssets.value,
		...meta.value,
		...preloadMeta.value,
		...links.value,
		...headScripts.value
	], (d) => {
		return JSON.stringify(d);
	});
};
function uniqBy(arr, fn) {
	const seen = /* @__PURE__ */ new Set();
	return arr.filter((item) => {
		const key = fn(item);
		if (seen.has(key)) return false;
		seen.add(key);
		return true;
	});
}
//#endregion
export { useTags };

//# sourceMappingURL=headContentUtils.js.map