UNPKG

@tanstack/vue-router

Version:

Modern and scalable routing for Vue applications

82 lines (81 loc) 2.45 kB
import { useRouter } from "./useRouter.js"; import { Asset } from "./Asset.js"; import * as Vue from "vue"; import { Fragment, createVNode, mergeProps } from "vue"; 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 assetScripts = Vue.computed(() => { const assetScripts = []; const manifest = router.ssr?.manifest; if (!manifest) return []; matches.value.map((match) => router.looseRoutesById[match.routeId]).forEach((route) => manifest.routes[route.id]?.assets?.filter((d) => d.tag === "script").forEach((asset) => { assetScripts.push({ tag: "script", attrs: { ...asset.attrs, nonce }, children: asset.children }); })); return assetScripts; }); const scripts = Vue.computed(() => ({ scripts: matches.value.map((match) => match.scripts).flat(1).filter(Boolean).map(({ children, ...script }) => ({ tag: "script", attrs: { ...script, nonce }, children })) })); const mounted = Vue.ref(false); Vue.onMounted(() => { mounted.value = true; }); return () => { const allScripts = []; if (router.serverSsr) { const serverBufferedScript = router.serverSsr.takeBufferedScripts(); if (serverBufferedScript) allScripts.push(serverBufferedScript); } else if (router.ssr && !mounted.value) { 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.value) allScripts.push({ tag: "script", attrs: { ...asset.attrs, "data-allow-mismatch": true }, children: "" }); } for (const script of scripts.value.scripts) allScripts.push(script); if (mounted.value || router.serverSsr) for (const asset of assetScripts.value) allScripts.push(asset); 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