diff --git a/src/client/app/composables/preFetch.ts b/src/client/app/composables/preFetch.ts index 387fc176124b..a37e24e53cc3 100644 --- a/src/client/app/composables/preFetch.ts +++ b/src/client/app/composables/preFetch.ts @@ -73,32 +73,40 @@ export function usePrefetch() { }) rIC(() => { - document.querySelectorAll('#app a').forEach((link) => { - const { target, hostname, pathname } = link - const extMatch = pathname.match(/\.\w+$/) - if (extMatch && extMatch[0] !== '.html') { - return - } + document + .querySelectorAll('#app a') + .forEach((link) => { + const { target } = link + const { hostname, pathname } = new URL( + link.href instanceof SVGAnimatedString + ? link.href.animVal + : link.href, + link.baseURI + ) + const extMatch = pathname.match(/\.\w+$/) + if (extMatch && extMatch[0] !== '.html') { + return + } - if ( - // only prefetch same tab navigation, since a new tab will load - // the lean js chunk instead. - target !== `_blank` && - // only prefetch inbound links - hostname === location.hostname - ) { - if (pathname !== location.pathname) { - observer!.observe(link) - } else { - // No need to prefetch chunk for the current page, but also mark - // it as already fetched. This is because the initial page uses its - // lean chunk, and if we don't mark it, navigation to another page - // with a link back to the first page will fetch its full chunk - // which isn't needed. - hasFetched.add(pathname) + if ( + // only prefetch same tab navigation, since a new tab will load + // the lean js chunk instead. + target !== `_blank` && + // only prefetch inbound links + hostname === location.hostname + ) { + if (pathname !== location.pathname) { + observer!.observe(link) + } else { + // No need to prefetch chunk for the current page, but also mark + // it as already fetched. This is because the initial page uses its + // lean chunk, and if we don't mark it, navigation to another page + // with a link back to the first page will fetch its full chunk + // which isn't needed. + hasFetched.add(pathname) + } } - } - }) + }) }) } diff --git a/src/client/app/router.ts b/src/client/app/router.ts index f0f3e350f3c7..a89b3d0808e5 100644 --- a/src/client/app/router.ts +++ b/src/client/app/router.ts @@ -153,9 +153,21 @@ export function createRouter( const button = (e.target as Element).closest('button') if (button) return - const link = (e.target as Element).closest('a') - if (link && !link.closest('.vp-raw') && !link.download) { - const { href, origin, pathname, hash, search, target } = link + const link = (e.target as Element | SVGElement).closest< + HTMLAnchorElement | SVGAElement + >('a') + if ( + link && + !link.closest('.vp-raw') && + (link instanceof SVGElement || !link.download) + ) { + const { target } = link + const { href, origin, pathname, hash, search } = new URL( + link.href instanceof SVGAnimatedString + ? link.href.animVal + : link.href, + link.baseURI + ) const currentUrl = window.location const extMatch = pathname.match(/\.\w+$/) // only intercept inbound links @@ -217,8 +229,8 @@ export function useRoute(): Route { return useRouter().route } -function scrollTo(el: HTMLElement, hash: string, smooth = false) { - let target: HTMLElement | null = null +function scrollTo(el: HTMLElement | SVGElement, hash: string, smooth = false) { + let target: HTMLElement | SVGElement | null = null try { target = el.classList.contains('header-anchor')