@tanstack/vue-router
Version:
Modern and scalable routing for Vue applications
82 lines (81 loc) • 2.45 kB
JavaScript
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