vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/client/app/router.js

@@ -1,252 +1,211 @@
-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';
+import { inBrowser, notFoundPageData, treatAsHtml } from "../shared.js";
+import { siteDataRef } from "./data.js";
+import { runtimeBase, withBase } from "./utils.js";
+import { inject, markRaw, nextTick, reactive, readonly } from "vue";
+//#region src/client/app/router.ts
+const RouterSymbol = Symbol();
+const fakeHost = "http://a.com";
 const getDefaultRoute = () => ({
-    path: '/',
-    hash: '',
-    query: '',
-    component: null,
-    data: notFoundPageData
+	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
-                    ? pendingPath
-                        .replace(/(^|\/)$/, '$1index')
-                        .replace(/(\.html)?$/, '.md')
-                        .replace(/^\//, '')
-                    : '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;
+function createRouter(loadPageModule, fallbackComponent) {
+	const route = reactive(getDefaultRoute());
+	const router = {
+		route,
+		async go(href, options) {
+			const { hash } = new URL(href, fakeHost);
+			const hasTextFragment = inBrowser && document.fragmentDirective && hash.includes(":~:");
+			href = normalizeHref(href);
+			if (await router.onBeforeRouteChange?.(href) === false) return;
+			if (!inBrowser || await changeRoute(href, {
+				...options,
+				hasTextFragment
+			})) await loadPage(href, { initialLoad: !!options?.initialLoad });
+			if (hasTextFragment) location.hash = hash;
+			syncRouteQueryAndHash();
+			await router.onAfterRouteChange?.(href);
+		}
+	};
+	let latestPendingPath = null;
+	async function loadPage(href, { scrollPosition = 0, isRetry = false, initialLoad = 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 = runtimeBase() + __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);
+					}
+					if (!initialLoad) scrollTo(targetLoc.hash, scrollPosition);
+				});
+			}
+		} catch (err) {
+			if (!/fetch|Page not found/.test(err.message) && !/^\/404(\.html|\/)?$/.test(href)) console.error(err);
+			if (!isRetry) try {
+				const res = await fetch(runtimeBase() + "hashmap.json");
+				window.__VP_HASH_MAP__ = await res.json();
+				await loadPage(href, {
+					scrollPosition,
+					isRetry: true,
+					initialLoad
+				});
+				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(runtimeBase().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") || e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) return;
+			const link = e.target.closest("a");
+			const url = link && getRoutableLinkUrl(link);
+			if (url) {
+				e.preventDefault();
+				router.go(url.href);
+			}
+		}, { capture: true });
+		window.addEventListener("popstate", async (e) => {
+			if (e.state === null) return;
+			const href = normalizeHref(location.href);
+			await loadPage(href, { scrollPosition: 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;
+function useRouter() {
+	const router = inject(RouterSymbol);
+	if (!router) throw new Error("useRouter() is called without provider.");
+	return router;
 }
-export function useRoute() {
-    return useRouter().route;
+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) {
-        const targetPadding = parseInt(window.getComputedStyle(target).paddingTop, 10);
-        const targetTop = window.scrollY +
-            target.getBoundingClientRect().top -
-            getScrollOffset() +
-            targetPadding;
-        function scrollToTarget() {
-            // only smooth scroll if distance is smaller than screen height.
-            if (!smooth || Math.abs(targetTop - window.scrollY) > window.innerHeight)
-                window.scrollTo(0, targetTop);
-            else
-                window.scrollTo({ left: 0, top: targetTop, behavior: 'smooth' });
-        }
-        requestAnimationFrame(scrollToTarget);
-    }
+function scrollTo(hash, 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 scrollToTarget = () => {
+		target.scrollIntoView({ block: "start" });
+		target.focus({ preventScroll: true });
+		if (document.activeElement === target) return;
+		if (target.hasAttribute("tabindex")) return;
+		const restoreTabindex = () => {
+			target.removeAttribute("tabindex");
+			target.removeEventListener("blur", restoreTabindex);
+		};
+		target.setAttribute("tabindex", "-1");
+		target.addEventListener("blur", restoreTabindex);
+		target.focus({ preventScroll: true });
+		if (document.activeElement !== target) restoreTabindex();
+	};
+	requestAnimationFrame(scrollToTarget);
+}
+/**
+* Resolves the URL of a link the router handles on the client side, or `null`
+* if it's left to the browser (explicit `target`, `download`, `.vp-raw`,
+* other origins, non-html files).
+*/
+function getRoutableLinkUrl(link) {
+	if (link.closest(".vp-raw") || link.hasAttribute("download") || link.hasAttribute("target")) return null;
+	const href = link.getAttribute("href") ?? (link instanceof SVGAElement ? link.getAttribute("xlink:href") : null);
+	if (href == null) return null;
+	const url = new URL(href, link.baseURI);
+	return url.origin === location.origin && treatAsHtml(url.pathname) ? url : null;
 }
 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;
-        });
-    }
+	if (import.meta.hot) 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;
+	return payload.path.replace(/(?:(^|\/)index)?\.md$/, "$1") === location.pathname.replace(/(?:(^|\/)index)?\.html$/, "").slice(runtimeBase().length - 1);
 }
 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;
+	const url = new URL(href, fakeHost);
+	url.pathname = url.pathname.replace(/(^|\/)index(\.html)?$/, "$1");
+	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.split(":~:")[0];
 }
-async function changeRoute(href, { smoothScroll = false, initialLoad = false } = {}) {
-    const loc = normalizeHref(location.href);
-    const { pathname, hash } = new URL(href, fakeHost);
-    const currentLoc = new URL(loc, fakeHost);
-    if (href === loc) {
-        if (!initialLoad) {
-            scrollTo(hash, smoothScroll);
-            return false;
-        }
-    }
-    else {
-        // save scroll position before changing URL
-        history.replaceState({ scrollPosition: window.scrollY }, '');
-        history.pushState({}, '', href);
-        if (pathname === currentLoc.pathname) {
-            // scroll between hash anchors on the same page, avoid duplicate entries
-            if (hash !== currentLoc.hash) {
-                window.dispatchEvent(new HashChangeEvent('hashchange', {
-                    oldURL: currentLoc.href,
-                    newURL: href
-                }));
-                scrollTo(hash, smoothScroll);
-            }
-            return false;
-        }
-    }
-    return true;
+async function changeRoute(href, { initialLoad = false, replace = false, hasTextFragment = 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) {
+			if (!hasTextFragment) scrollTo(nextUrl.hash);
+			return false;
+		}
+	} else {
+		if (replace) history.replaceState({}, "", href);
+		else {
+			history.replaceState({ scrollPosition: window.scrollY }, "");
+			history.pushState({}, "", href);
+		}
+		if (nextUrl.pathname === currentUrl.pathname) {
+			if (nextUrl.hash !== currentUrl.hash) {
+				window.dispatchEvent(new HashChangeEvent("hashchange", {
+					oldURL: currentUrl.href,
+					newURL: nextUrl.href
+				}));
+				if (!hasTextFragment) scrollTo(nextUrl.hash);
+			}
+			return false;
+		}
+	}
+	return true;
 }
+//#endregion
+export { RouterSymbol, createRouter, getRoutableLinkUrl, scrollTo, useRoute, useRouter };

package/dist/client/app/ssr.d.ts

@@ -0,0 +1,4 @@
+import { SSGContext } from "../shared.js";
+//#region src/client/app/ssr.d.ts
+export declare function render(path: string): Promise<SSGContext>;
+//#endregion

package/dist/client/app/ssr.js

@@ -1,10 +1,15 @@
-// entry for SSR
-import { renderToString } from 'vue/server-renderer';
-import { createApp } from './index';
-export async function render(path) {
-    const { app, router } = await createApp();
-    await router.go(path);
-    const ctx = { content: '', vpSocialIcons: new Set() };
-    ctx.content = await renderToString(app, ctx);
-    return ctx;
+import { createApp } from "./index.js";
+import { renderToString } from "vue/server-renderer";
+//#region src/client/app/ssr.ts
+async function render(path) {
+	const { app, router } = await createApp();
+	await router.go(path);
+	const ctx = {
+		content: "",
+		vpIcons: /* @__PURE__ */ new Set()
+	};
+	ctx.content = await renderToString(app, ctx);
+	return ctx;
 }
+//#endregion
+export { render };

package/dist/client/app/theme.d.ts

@@ -0,0 +1,24 @@
+import { Awaitable, SiteData } from "../shared.js";
+import { Router } from "./router.js";
+import { App, Component, Ref } from "vue";
+//#region src/client/app/theme.d.ts
+export interface EnhanceAppContext {
+  app: App;
+  router: Router;
+  siteData: Ref<SiteData>;
+}
+export interface Theme {
+  Layout?: Component;
+  enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>;
+  extends?: Theme;
+  /**
+   * Runs inside the root component's `setup()` (during SSR too). With
+   * `extends`, setups run base-first, like `enhanceApp`.
+   */
+  setup?: () => void;
+  /**
+   * @deprecated Render not found page by checking `useData().page.value.isNotFound` in Layout instead.
+   */
+  NotFound?: Component;
+}
+//#endregion

package/dist/client/app/theme.js

@@ -1 +0,0 @@
-export {};

package/dist/client/app/utils.d.ts

@@ -0,0 +1,35 @@
+import { Awaitable, escapeHtml, inBrowser, joinPath } from "../shared.js";
+import { AsyncComponentLoader, SetupContext } from "vue";
+//#region src/client/app/utils.d.ts
+/**
+ * Runtime base path used by the app.
+ *
+ * Usually this is the configured site base.
+ *
+ * For a relative base (`'./'`), the mount point is unknown at build time, so:
+ * - SSR: uses `RELATIVE_BASE_SENTINEL` (for per-page URL relativization)
+ * - dev browser: uses `'/'` (dev server always mounts at root)
+ * - prod browser: resolves from the page's `__VP_SITE_ROOT__`
+ */
+export declare function runtimeBase(): string;
+/**
+ * Prepend base to internal (non-relative) urls
+ */
+export declare function withBase(path: string): string;
+/**
+ * Converts a url path to the corresponding js chunk filename.
+ */
+export declare function pathToFile(path: string): string | null;
+export declare let contentUpdatedCallbacks: (() => any)[];
+/**
+ * Register callback that is called every time the markdown content is updated
+ * in the DOM.
+ */
+export declare function onContentUpdated(fn: () => any): void;
+export declare function defineClientComponent(loader: AsyncComponentLoader, args?: any[], cb?: () => Awaitable<void>): {
+  setup(_: unknown, { slots }: SetupContext): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }> | null;
+};
+//#endregion
+export { escapeHtml as _escapeHtml, inBrowser, joinPath };