280 lines
11 KiB
JavaScript
280 lines
11 KiB
JavaScript
|
import { inject, markRaw, nextTick, reactive, readonly } from 'vue';
|
||
|
|
import { notFoundPageData, treatAsHtml } from '../shared';
|
||
|
|
import { siteDataRef } from './data';
|
||
|
|
import { getScrollOffset, inBrowser, withBase } from './utils';
|
||
|
|
export const RouterSymbol = Symbol();
|
||
|
|
// we are just using URL to parse the pathname and hash - the base doesn't
|
||
|
|
// matter and is only passed to support same-host hrefs
|
||
|
|
const fakeHost = 'http://a.com';
|
||
|
|
const getDefaultRoute = () => ({
|
||
|
|
path: '/',
|
||
|
|
hash: '',
|
||
|
|
query: '',
|
||
|
|
component: null,
|
||
|
|
data: notFoundPageData
|
||
|
|
});
|
||
|
|
export function createRouter(loadPageModule, fallbackComponent) {
|
||
|
|
const route = reactive(getDefaultRoute());
|
||
|
|
const router = {
|
||
|
|
route,
|
||
|
|
async go(href, options) {
|
||
|
|
href = normalizeHref(href);
|
||
|
|
if ((await router.onBeforeRouteChange?.(href)) === false)
|
||
|
|
return;
|
||
|
|
if (!inBrowser || (await changeRoute(href, options)))
|
||
|
|
await loadPage(href);
|
||
|
|
syncRouteQueryAndHash();
|
||
|
|
await router.onAfterRouteChange?.(href);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
let latestPendingPath = null;
|
||
|
|
async function loadPage(href, scrollPosition = 0, isRetry = false) {
|
||
|
|
if ((await router.onBeforePageLoad?.(href)) === false)
|
||
|
|
return;
|
||
|
|
const targetLoc = new URL(href, fakeHost);
|
||
|
|
const pendingPath = (latestPendingPath = targetLoc.pathname);
|
||
|
|
try {
|
||
|
|
let page = await loadPageModule(pendingPath);
|
||
|
|
if (!page)
|
||
|
|
throw new Error(`Page not found: ${pendingPath}`);
|
||
|
|
if (latestPendingPath === pendingPath) {
|
||
|
|
latestPendingPath = null;
|
||
|
|
const { default: comp, __pageData } = page;
|
||
|
|
if (!comp)
|
||
|
|
throw new Error(`Invalid route component: ${comp}`);
|
||
|
|
await router.onAfterPageLoad?.(href);
|
||
|
|
route.path = inBrowser ? pendingPath : withBase(pendingPath);
|
||
|
|
route.component = markRaw(comp);
|
||
|
|
route.data = import.meta.env.PROD
|
||
|
|
? markRaw(__pageData)
|
||
|
|
: readonly(__pageData);
|
||
|
|
syncRouteQueryAndHash(targetLoc);
|
||
|
|
if (inBrowser) {
|
||
|
|
nextTick(() => {
|
||
|
|
let actualPathname = siteDataRef.value.base +
|
||
|
|
__pageData.relativePath.replace(/(?:(^|\/)index)?\.md$/, '$1');
|
||
|
|
if (!siteDataRef.value.cleanUrls && !actualPathname.endsWith('/')) {
|
||
|
|
actualPathname += '.html';
|
||
|
|
}
|
||
|
|
if (actualPathname !== targetLoc.pathname) {
|
||
|
|
targetLoc.pathname = actualPathname;
|
||
|
|
href = actualPathname + targetLoc.search + targetLoc.hash;
|
||
|
|
history.replaceState({}, '', href);
|
||
|
|
}
|
||
|
|
return scrollTo(targetLoc.hash, false, scrollPosition);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (err) {
|
||
|
|
if (!/fetch|Page not found/.test(err.message) &&
|
||
|
|
!/^\/404(\.html|\/)?$/.test(href)) {
|
||
|
|
console.error(err);
|
||
|
|
}
|
||
|
|
// retry on fetch fail: the page to hash map may have been invalidated
|
||
|
|
// because a new deploy happened while the page is open. Try to fetch
|
||
|
|
// the updated pageToHash map and fetch again.
|
||
|
|
if (!isRetry) {
|
||
|
|
try {
|
||
|
|
const res = await fetch(siteDataRef.value.base + 'hashmap.json');
|
||
|
|
window.__VP_HASH_MAP__ = await res.json();
|
||
|
|
await loadPage(href, scrollPosition, true);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
catch (e) { }
|
||
|
|
}
|
||
|
|
if (latestPendingPath === pendingPath) {
|
||
|
|
latestPendingPath = null;
|
||
|
|
route.path = inBrowser ? pendingPath : withBase(pendingPath);
|
||
|
|
route.component = fallbackComponent ? markRaw(fallbackComponent) : null;
|
||
|
|
const relativePath = inBrowser
|
||
|
|
? route.path
|
||
|
|
.replace(/(^|\/)$/, '$1index')
|
||
|
|
.replace(/(\.html)?$/, '.md')
|
||
|
|
.slice(siteDataRef.value.base.length)
|
||
|
|
: '404.md';
|
||
|
|
route.data = { ...notFoundPageData, relativePath };
|
||
|
|
syncRouteQueryAndHash(targetLoc);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function syncRouteQueryAndHash(loc = inBrowser
|
||
|
|
? location
|
||
|
|
: { search: '', hash: '' }) {
|
||
|
|
route.query = loc.search;
|
||
|
|
route.hash = decodeURIComponent(loc.hash);
|
||
|
|
}
|
||
|
|
if (inBrowser) {
|
||
|
|
if (history.state === null)
|
||
|
|
history.replaceState({}, '');
|
||
|
|
window.addEventListener('click', (e) => {
|
||
|
|
if (e.defaultPrevented ||
|
||
|
|
!(e.target instanceof Element) ||
|
||
|
|
e.target.closest('button') || // temporary fix for docsearch action buttons
|
||
|
|
e.button !== 0 ||
|
||
|
|
e.ctrlKey ||
|
||
|
|
e.shiftKey ||
|
||
|
|
e.altKey ||
|
||
|
|
e.metaKey) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const link = e.target.closest('a');
|
||
|
|
if (!link ||
|
||
|
|
link.closest('.vp-raw') ||
|
||
|
|
link.hasAttribute('download') ||
|
||
|
|
link.hasAttribute('target')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const linkHref = link.getAttribute('href') ??
|
||
|
|
(link instanceof SVGAElement ? link.getAttribute('xlink:href') : null);
|
||
|
|
if (linkHref == null)
|
||
|
|
return;
|
||
|
|
const { href, origin, pathname } = new URL(linkHref, link.baseURI);
|
||
|
|
const currentLoc = new URL(location.href); // copy to keep old data
|
||
|
|
// only intercept inbound html links
|
||
|
|
if (origin === currentLoc.origin && treatAsHtml(pathname)) {
|
||
|
|
e.preventDefault();
|
||
|
|
router.go(href, {
|
||
|
|
// use smooth scroll when clicking on header anchor links
|
||
|
|
smoothScroll: link.classList.contains('header-anchor')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, { capture: true });
|
||
|
|
window.addEventListener('popstate', async (e) => {
|
||
|
|
if (e.state === null)
|
||
|
|
return;
|
||
|
|
const href = normalizeHref(location.href);
|
||
|
|
await loadPage(href, (e.state && e.state.scrollPosition) || 0);
|
||
|
|
syncRouteQueryAndHash();
|
||
|
|
await router.onAfterRouteChange?.(href);
|
||
|
|
});
|
||
|
|
window.addEventListener('hashchange', (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
syncRouteQueryAndHash();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
handleHMR(route);
|
||
|
|
return router;
|
||
|
|
}
|
||
|
|
export function useRouter() {
|
||
|
|
const router = inject(RouterSymbol);
|
||
|
|
if (!router)
|
||
|
|
throw new Error('useRouter() is called without provider.');
|
||
|
|
return router;
|
||
|
|
}
|
||
|
|
export function useRoute() {
|
||
|
|
return useRouter().route;
|
||
|
|
}
|
||
|
|
export function scrollTo(hash, smooth = false, scrollPosition = 0) {
|
||
|
|
if (!hash || scrollPosition) {
|
||
|
|
window.scrollTo(0, scrollPosition);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let target = null;
|
||
|
|
try {
|
||
|
|
target = document.getElementById(decodeURIComponent(hash).slice(1));
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
console.warn(e);
|
||
|
|
}
|
||
|
|
if (!target)
|
||
|
|
return;
|
||
|
|
const targetTop = window.scrollY +
|
||
|
|
target.getBoundingClientRect().top -
|
||
|
|
getScrollOffset() +
|
||
|
|
Number.parseInt(window.getComputedStyle(target).paddingTop, 10) || 0;
|
||
|
|
const behavior = window.matchMedia('(prefers-reduced-motion)').matches
|
||
|
|
? 'instant'
|
||
|
|
: // only smooth scroll if distance is smaller than screen height
|
||
|
|
smooth && Math.abs(targetTop - window.scrollY) <= window.innerHeight
|
||
|
|
? 'smooth'
|
||
|
|
: 'auto';
|
||
|
|
const scrollToTarget = () => {
|
||
|
|
window.scrollTo({ left: 0, top: targetTop, behavior });
|
||
|
|
// focus the target element for better accessibility
|
||
|
|
target.focus({ preventScroll: true });
|
||
|
|
// return if focus worked
|
||
|
|
if (document.activeElement === target)
|
||
|
|
return;
|
||
|
|
// element has tabindex already, likely not focusable
|
||
|
|
// because of some other reason, bail out
|
||
|
|
if (target.hasAttribute('tabindex'))
|
||
|
|
return;
|
||
|
|
const restoreTabindex = () => {
|
||
|
|
target.removeAttribute('tabindex');
|
||
|
|
target.removeEventListener('blur', restoreTabindex);
|
||
|
|
};
|
||
|
|
// temporarily make the target element focusable
|
||
|
|
target.setAttribute('tabindex', '-1');
|
||
|
|
target.addEventListener('blur', restoreTabindex);
|
||
|
|
// try to focus again
|
||
|
|
target.focus({ preventScroll: true });
|
||
|
|
// remove tabindex and event listener if focus still not worked
|
||
|
|
if (document.activeElement !== target)
|
||
|
|
restoreTabindex();
|
||
|
|
};
|
||
|
|
requestAnimationFrame(scrollToTarget);
|
||
|
|
}
|
||
|
|
function handleHMR(route) {
|
||
|
|
// update route.data on HMR updates of active page
|
||
|
|
if (import.meta.hot) {
|
||
|
|
// hot reload pageData
|
||
|
|
import.meta.hot.on('vitepress:pageData', (payload) => {
|
||
|
|
if (shouldHotReload(payload))
|
||
|
|
route.data = payload.pageData;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function shouldHotReload(payload) {
|
||
|
|
const payloadPath = payload.path.replace(/(?:(^|\/)index)?\.md$/, '$1');
|
||
|
|
const locationPath = location.pathname
|
||
|
|
.replace(/(?:(^|\/)index)?\.html$/, '')
|
||
|
|
.slice(siteDataRef.value.base.length - 1);
|
||
|
|
return payloadPath === locationPath;
|
||
|
|
}
|
||
|
|
function normalizeHref(href) {
|
||
|
|
const url = new URL(href, fakeHost);
|
||
|
|
url.pathname = url.pathname.replace(/(^|\/)index(\.html)?$/, '$1');
|
||
|
|
// ensure correct deep link so page refresh lands on correct files
|
||
|
|
if (siteDataRef.value.cleanUrls) {
|
||
|
|
url.pathname = url.pathname.replace(/\.html$/, '');
|
||
|
|
}
|
||
|
|
else if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
|
||
|
|
url.pathname += '.html';
|
||
|
|
}
|
||
|
|
return url.pathname + url.search + url.hash;
|
||
|
|
}
|
||
|
|
async function changeRoute(href, { smoothScroll = false, initialLoad = false, replace = false } = {}) {
|
||
|
|
const loc = normalizeHref(location.href);
|
||
|
|
const nextUrl = new URL(href, location.origin);
|
||
|
|
const currentUrl = new URL(loc, location.origin);
|
||
|
|
if (href === loc) {
|
||
|
|
if (!initialLoad) {
|
||
|
|
scrollTo(nextUrl.hash, smoothScroll);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (replace) {
|
||
|
|
history.replaceState({}, '', href);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// save scroll position before changing URL
|
||
|
|
history.replaceState({ scrollPosition: window.scrollY }, '');
|
||
|
|
history.pushState({}, '', href);
|
||
|
|
}
|
||
|
|
if (nextUrl.pathname === currentUrl.pathname) {
|
||
|
|
// scroll between hash anchors on the same page, avoid duplicate entries
|
||
|
|
if (nextUrl.hash !== currentUrl.hash) {
|
||
|
|
window.dispatchEvent(new HashChangeEvent('hashchange', {
|
||
|
|
oldURL: currentUrl.href,
|
||
|
|
newURL: nextUrl.href
|
||
|
|
}));
|
||
|
|
scrollTo(nextUrl.hash, smoothScroll);
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|