@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 { _getAssetMatches } from "@tanstack/router-core";
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, _getAssetMatches);
		const scripts = Vue.computed(() => {
			const userScripts = [];
			const assetScripts = [];
			const manifest = router.ssr?.manifest;
			for (const match of matches.value) {
				for (const script of match.scripts ?? []) {
					if (!script) continue;
					const { children, ...attrs } = script;
					userScripts.push({
						tag: "script",
						attrs: {
							...attrs,
							nonce
						},
						children
					});
				}
				for (const asset of manifest?.routes[match.routeId]?.scripts ?? []) assetScripts.push({
					tag: "script",
					attrs: {
						...asset.attrs,
						nonce
					},
					children: asset.children
				});
			}
			return [userScripts, assetScripts];
		});
		const mounted = Vue.ref(false);
		Vue.onMounted(() => {
			mounted.value = true;
		});
		return () => {
			return renderScripts(router, scripts.value, 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