@tanstack/vue-router/dist/source/Scripts.jsx

Modern and scalable routing for Vue applications

import * as Vue from 'vue';
import { useStore } from '@tanstack/vue-store';
import { Asset } from './Asset';
import { useRouter } from './useRouter';
export const 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 (<>
          {allScripts.map((asset, i) => (<Asset {...asset} key={`tsr-scripts-${asset.tag}-${i}`}/>))}
        </>);
        };
    },
});
//# sourceMappingURL=Scripts.jsx.map