import * as Vue from 'vue';
import { Asset } from './Asset';
import { useRouterState } from './useRouterState';
import { useRouter } from './useRouter';
export const Scripts = Vue.defineComponent({
    name: 'Scripts',
    setup() {
        const router = useRouter();
        const nonce = router.options.ssr?.nonce;
        const assetScripts = useRouterState({
            select: (state) => {
                const assetScripts = [];
                const manifest = router.ssr?.manifest;
                if (!manifest) {
                    return [];
                }
                state.matches
                    .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 = useRouterState({
            select: (state) => ({
                scripts: state.matches
                    .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