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

Modern and scalable routing for Vue applications

import { useRouter } from "./useRouter.js";
import { Asset } from "./Asset.js";
import * as Vue from "vue";
import { Fragment, createVNode, mergeProps } from "vue";
import { isServer } from "@tanstack/router-core/isServer";
import { useStore } from "@tanstack/vue-store";
//#region src/Scripts.tsx
var Scripts = Vue.defineComponent({
	name: "Scripts",
	setup() {
		const router = useRouter();
		const nonce = router.options.ssr?.nonce;
		const matches = useStore(router.stores.matches, (value) => value);
		const getAssetScripts = (matches) => {
			const assetScripts = [];
			const manifest = router.ssr?.manifest;
			if (!manifest) return [];
			matches.forEach((match) => {
				manifest.routes[match.routeId]?.scripts?.forEach((asset) => {
					assetScripts.push({
						tag: "script",
						attrs: {
							...asset.attrs,
							nonce
						},
						children: asset.children
					});
				});
			});
			return assetScripts;
		};
		const getScripts = (matches) => matches.map((match) => match.scripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({
			tag: "script",
			attrs: {
				...script,
				nonce
			},
			children
		}));
		const assetScripts = Vue.computed(() => getAssetScripts(matches.value));
		const scripts = Vue.computed(() => getScripts(matches.value));
		const mounted = Vue.ref(false);
		Vue.onMounted(() => {
			mounted.value = true;
		});
		return () => renderScripts(router, {
			scripts: scripts.value,
			assetScripts: assetScripts.value,
			mounted: mounted.value,
			nonce
		});
	}
});
function renderScripts(router, { scripts, assetScripts, mounted, nonce }) {
	const allScripts = [];
	if ((isServer ?? router.isServer) && router.serverSsr) {
		const serverBufferedScript = router.serverSsr.takeBufferedScripts();
		if (serverBufferedScript) allScripts.push(serverBufferedScript);
	} else if (router.ssr && !mounted) {
		allScripts.push({
			tag: "script",
			attrs: {
				nonce,
				"data-allow-mismatch": true
			},
			children: ""
		});
		allScripts.push({
			tag: "script",
			attrs: {
				nonce,
				id: "$tsr-stream-barrier",
				"data-allow-mismatch": true
			},
			children: ""
		});
		for (const asset of assetScripts) allScripts.push({
			tag: "script",
			attrs: {
				...asset.attrs,
				"data-allow-mismatch": true
			},
			children: ""
		});
	}
	allScripts.push(...scripts);
	if (mounted || (isServer ?? router.isServer) && router.serverSsr) allScripts.push(...assetScripts);
	return createVNode(Fragment, null, [allScripts.map((asset, i) => createVNode(Asset, mergeProps(asset, { "key": `tsr-scripts-${asset.tag}-${i}` }), null))]);
}
//#endregion
export { Scripts };

//# sourceMappingURL=Scripts.js.map