@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 { composeSsrBodyScripts, getSsrBodyScriptParts } from "@tanstack/router-core";
import * as Vue from "vue";
import { Fragment, createVNode, mergeProps } from "vue";
import { isServer } from "@tanstack/router-core/isServer";
import { useSelector } from "@tanstack/vue-store";
//#region src/Scripts.tsx
/**
* During streaming SSR, `<Scripts>` marks where late hydration scripts may
* begin to be inserted.
*/
var Scripts = Vue.defineComponent({
	name: "Scripts",
	setup() {
		const router = useRouter();
		const nonce = router.options.ssr?.nonce;
		const matches = useSelector(router.stores.matches, (value) => value);
		const scripts = Vue.computed(() => getSsrBodyScriptParts(matches.value, router.ssr?.manifest, nonce));
		const mounted = Vue.ref(false);
		Vue.onMounted(() => {
			mounted.value = true;
		});
		return () => {
			return renderScripts(router, scripts.value, mounted.value, nonce);
		};
	}
});
function renderScripts(router, scriptParts, mounted, nonce) {
	const allScripts = [];
	let streamBoundary;
	const [scripts, assetScripts] = scriptParts;
	if ((isServer ?? router.isServer) && router.serverSsr) {
		const initialHydrationScripts = router.serverSsr.takeInitialHydrationScriptTags();
		allScripts.push(...composeSsrBodyScripts(scriptParts, initialHydrationScripts));
		return renderScriptTags(allScripts);
	} else if (router.ssr && !mounted) {
		allScripts.push({
			tag: "script",
			attrs: {
				nonce,
				"data-allow-mismatch": true
			},
			children: ""
		});
		streamBoundary = {
			tag: "script",
			attrs: {
				nonce,
				"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) allScripts.push(...assetScripts);
	if (streamBoundary) allScripts.push(streamBoundary);
	return renderScriptTags(allScripts);
}
function renderScriptTags(allScripts) {
	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