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

package/dist/client/app/composables/preFetch.js

@@ -1,99 +1,67 @@
-// Customized pre-fetch for page chunks based on
-// https://github.com/GoogleChromeLabs/quicklink
-import { onMounted, onUnmounted, watch } from 'vue';
-import { useRoute } from '../router';
-import { inBrowser, pathToFile } from '../utils';
-const hasFetched = new Set();
-const createLink = () => document.createElement('link');
-const viaDOM = (url) => {
-    const link = createLink();
-    link.rel = `prefetch`;
-    link.href = url;
-    document.head.appendChild(link);
+import { EXTERNAL_URL_RE, inBrowser } from "../../shared.js";
+import { pathToFile } from "../utils.js";
+import { getRoutableLinkUrl, useRoute } from "../router.js";
+import { computed, onMounted, onUnmounted, watch } from "vue";
+import { useNetwork } from "@vueuse/core";
+//#region src/client/app/composables/preFetch.ts
+const hasFetched = /* @__PURE__ */ new Set();
+const createLink = () => document.createElement("link");
+const viaDOM = (url, onError) => {
+	const link = createLink();
+	link.rel = `prefetch`;
+	if (EXTERNAL_URL_RE.test(url)) link.crossOrigin = "";
+	link.href = url;
+	link.onerror = () => {
+		link.remove();
+		onError();
+	};
+	document.head.appendChild(link);
 };
-const viaXHR = (url) => {
-    const req = new XMLHttpRequest();
-    req.open('GET', url, (req.withCredentials = true));
-    req.send();
+const viaXHR = (url, onError) => {
+	const req = new XMLHttpRequest();
+	req.open("GET", url, true);
+	req.withCredentials = !EXTERNAL_URL_RE.test(url);
+	req.onerror = onError;
+	req.send();
 };
-let link;
-const doFetch = inBrowser &&
-    (link = createLink()) &&
-    link.relList &&
-    link.relList.supports &&
-    link.relList.supports('prefetch')
-    ? viaDOM
-    : viaXHR;
-export function usePrefetch() {
-    if (!inBrowser) {
-        return;
-    }
-    if (!window.IntersectionObserver) {
-        return;
-    }
-    let conn;
-    if ((conn = navigator.connection) &&
-        (conn.saveData || /2g/.test(conn.effectiveType))) {
-        // Don't prefetch if using 2G or if Save-Data is enabled.
-        return;
-    }
-    const rIC = window.requestIdleCallback || setTimeout;
-    let observer = null;
-    const observeLinks = () => {
-        if (observer) {
-            observer.disconnect();
-        }
-        observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    const link = entry.target;
-                    observer.unobserve(link);
-                    const { pathname } = link;
-                    if (!hasFetched.has(pathname)) {
-                        hasFetched.add(pathname);
-                        const pageChunkPath = pathToFile(pathname);
-                        if (pageChunkPath)
-                            doFetch(pageChunkPath);
-                    }
-                }
-            });
-        });
-        rIC(() => {
-            document
-                .querySelectorAll('#app a')
-                .forEach((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.
-                link.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);
-                    }
-                }
-            });
-        });
-    };
-    onMounted(observeLinks);
-    const route = useRoute();
-    watch(() => route.path, observeLinks);
-    onUnmounted(() => {
-        observer && observer.disconnect();
-    });
+function usePrefetch() {
+	if (!inBrowser) return;
+	const { isOnline, saveData, effectiveType } = useNetwork();
+	const isWeak = computed(() => !isOnline.value || saveData.value || !!effectiveType.value?.includes("2g"));
+	const prefetch = createLink().relList.supports("prefetch") ? viaDOM : viaXHR;
+	const rIC = window.requestIdleCallback || setTimeout;
+	let observer = null;
+	const observeLinks = () => {
+		if (observer) observer.disconnect();
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (!entry.isIntersecting || isWeak.value) return;
+				const link = entry.target;
+				observer.unobserve(link);
+				const url = getRoutableLinkUrl(link);
+				const pageChunkPath = url && pathToFile(url.pathname);
+				if (!pageChunkPath || hasFetched.has(pageChunkPath)) return;
+				hasFetched.add(pageChunkPath);
+				prefetch(pageChunkPath, () => hasFetched.delete(pageChunkPath));
+			});
+		});
+		rIC(() => {
+			document.querySelectorAll("#app a").forEach((link) => {
+				const url = getRoutableLinkUrl(link);
+				if (url && url.pathname !== location.pathname) observer.observe(link);
+			});
+		});
+	};
+	onMounted(observeLinks);
+	const route = useRoute();
+	watch(() => route.path, () => {
+		const pageChunkPath = pathToFile(location.pathname);
+		if (pageChunkPath) hasFetched.add(pageChunkPath);
+		observeLinks();
+	});
+	onUnmounted(() => {
+		observer?.disconnect();
+	});
 }
+//#endregion
+export { usePrefetch };

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

@@ -0,0 +1,9 @@
+import { Route, SiteData, VitePressData } from "../shared.js";
+import { InjectionKey, Ref } from "vue";
+//#region src/client/app/data.d.ts
+export declare const dataSymbol: InjectionKey<VitePressData>;
+export declare const siteDataRef: Ref<SiteData>;
+export declare function initData(route: Route): VitePressData;
+export declare function useData<T = any>(): VitePressData<T>;
+//#endregion
+export type { VitePressData };

package/dist/client/app/data.js

@@ -1,61 +1,36 @@
-import siteData from '@siteData';
-import { useDark, usePreferredDark } from '@vueuse/core';
-import { computed, inject, readonly, ref, shallowRef, watch } from 'vue';
-import { APPEARANCE_KEY, createTitle, inBrowser, resolveSiteDataByRoute } from '../shared';
-export const dataSymbol = Symbol();
-// site data is a singleton
-export const siteDataRef = shallowRef((import.meta.env.PROD ? siteData : readonly(siteData)));
-// hmr
-if (import.meta.hot) {
-    import.meta.hot.accept('/@siteData', (m) => {
-        if (m) {
-            siteDataRef.value = m.default;
-        }
-    });
+import { APPEARANCE_KEY, createTitle, resolveSiteDataByRoute } from "../shared.js";
+import { computed, inject, readonly, ref, shallowRef } from "vue";
+import { useDark, usePreferredDark } from "@vueuse/core";
+import siteData from "@siteData";
+//#region src/client/app/data.ts
+const dataSymbol = Symbol();
+const siteDataRef = shallowRef(readonly(siteData));
+function initData(route) {
+	const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath, route.data.filePath));
+	const appearance = site.value.appearance;
+	const isDark = appearance === "force-dark" ? ref(true) : appearance === "force-auto" ? usePreferredDark() : appearance ? useDark({
+		storageKey: APPEARANCE_KEY,
+		initialValue: () => appearance === "dark" ? "dark" : "auto",
+		...typeof appearance === "object" ? appearance : {}
+	}) : ref(false);
+	return {
+		site,
+		theme: computed(() => site.value.themeConfig),
+		page: computed(() => route.data),
+		frontmatter: computed(() => route.data.frontmatter),
+		params: computed(() => route.data.params),
+		lang: computed(() => site.value.lang),
+		dir: computed(() => route.data.frontmatter.dir || site.value.dir),
+		localeIndex: computed(() => site.value.localeIndex || "root"),
+		title: computed(() => createTitle(site.value, route.data)),
+		description: computed(() => route.data.description || site.value.description),
+		isDark
+	};
 }
-// per-app data
-export function initData(route) {
-    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));
-    const appearance = site.value.appearance; // fine with reactivity being lost here, config change triggers a restart
-    const isDark = appearance === 'force-dark'
-        ? ref(true)
-        : appearance === 'force-auto'
-            ? usePreferredDark()
-            : appearance
-                ? useDark({
-                    storageKey: APPEARANCE_KEY,
-                    initialValue: () => (appearance === 'dark' ? 'dark' : 'auto'),
-                    ...(typeof appearance === 'object' ? appearance : {})
-                })
-                : ref(false);
-    const hashRef = ref(inBrowser ? location.hash : '');
-    if (inBrowser) {
-        window.addEventListener('hashchange', () => {
-            hashRef.value = location.hash;
-        });
-    }
-    watch(() => route.data, () => {
-        hashRef.value = inBrowser ? location.hash : '';
-    });
-    return {
-        site,
-        theme: computed(() => site.value.themeConfig),
-        page: computed(() => route.data),
-        frontmatter: computed(() => route.data.frontmatter),
-        params: computed(() => route.data.params),
-        lang: computed(() => site.value.lang),
-        dir: computed(() => route.data.frontmatter.dir || site.value.dir),
-        localeIndex: computed(() => site.value.localeIndex || 'root'),
-        title: computed(() => createTitle(site.value, route.data)),
-        description: computed(() => route.data.description || site.value.description),
-        isDark,
-        hash: computed(() => hashRef.value)
-    };
-}
-export function useData() {
-    const data = inject(dataSymbol);
-    if (!data) {
-        throw new Error('vitepress data not properly injected in app');
-    }
-    return data;
+function useData() {
+	const data = inject(dataSymbol);
+	if (!data) throw new Error("vitepress data not properly injected in app");
+	return data;
 }
+//#endregion
+export { dataSymbol, initData, siteDataRef, useData };

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

@@ -0,0 +1,7 @@
+import { VitePressData } from "../shared.js";
+import "./data.js";
+import { Router } from "./router.js";
+import { App } from "vue";
+//#region src/client/app/devtools.d.ts
+export declare const setupDevtools: (app: App, router: Router, data: VitePressData) => void;
+//#endregion

package/dist/client/app/devtools.js

@@ -1,29 +1,30 @@
-import { setupDevToolsPlugin } from '@vue/devtools-api';
-const COMPONENT_STATE_TYPE = 'VitePress';
-export const setupDevtools = (app, router, data) => {
-    setupDevToolsPlugin({
-        // fix recursive reference
-        app: app,
-        id: 'org.vuejs.vitepress',
-        label: 'VitePress',
-        packageName: 'vitepress',
-        homepage: 'https://vitepress.dev',
-        componentStateTypes: [COMPONENT_STATE_TYPE]
-    }, (api) => {
-        // TODO: remove any
-        api.on.inspectComponent((payload) => {
-            payload.instanceData.state.push({
-                type: COMPONENT_STATE_TYPE,
-                key: 'route',
-                value: router.route,
-                editable: false
-            });
-            payload.instanceData.state.push({
-                type: COMPONENT_STATE_TYPE,
-                key: 'data',
-                value: data,
-                editable: false
-            });
-        });
-    });
+import { setupDevToolsPlugin } from "@vue/devtools-api";
+//#region src/client/app/devtools.ts
+const COMPONENT_STATE_TYPE = "VitePress";
+const setupDevtools = (app, router, data) => {
+	setupDevToolsPlugin({
+		app,
+		id: "org.vuejs.vitepress",
+		label: "VitePress",
+		packageName: "vitepress",
+		homepage: "https://vitepress.dev",
+		componentStateTypes: [COMPONENT_STATE_TYPE]
+	}, (api) => {
+		api.on.inspectComponent((payload) => {
+			payload.instanceData.state.push({
+				type: COMPONENT_STATE_TYPE,
+				key: "route",
+				value: router.route,
+				editable: false
+			});
+			payload.instanceData.state.push({
+				type: COMPONENT_STATE_TYPE,
+				key: "data",
+				value: data,
+				editable: false
+			});
+		});
+	});
 };
+//#endregion
+export { setupDevtools };

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

@@ -0,0 +1,11 @@
+import { VitePressData } from "../shared.js";
+import "./data.js";
+import { Router } from "./router.js";
+import { App } from "vue";
+//#region src/client/app/index.d.ts
+export declare function createApp(): Promise<{
+  app: App<any>;
+  router: Router;
+  data: VitePressData<any>;
+}>;
+//#endregion

package/dist/client/app/index.js

@@ -1,141 +1,116 @@
-import RawTheme from '@theme/index';
-import { createApp as createClientApp, createSSRApp, defineComponent, h, onMounted, watchEffect } from 'vue';
-import { ClientOnly } from './components/ClientOnly';
-import { Content } from './components/Content';
-import { useCodeGroups } from './composables/codeGroups';
-import { useCopyCode } from './composables/copyCode';
-import { useUpdateHead } from './composables/head';
-import { usePrefetch } from './composables/preFetch';
-import { dataSymbol, initData, siteDataRef, useData } from './data';
-import { RouterSymbol, createRouter, scrollTo } from './router';
-import { inBrowser, pathToFile } from './utils';
+import { ClientOnly } from "./components/ClientOnly.js";
+import { inBrowser } from "../shared.js";
+import { dataSymbol, initData, siteDataRef, useData } from "./data.js";
+import { pathToFile } from "./utils.js";
+import { Content } from "./components/Content.js";
+import { RouterSymbol, createRouter, scrollTo } from "./router.js";
+import { useCodeGroups } from "./composables/codeGroups.js";
+import { useCopyCode } from "./composables/copyCode.js";
+import { useUpdateHead } from "./composables/head.js";
+import { usePrefetch } from "./composables/preFetch.js";
+import { createApp as createApp$1, createSSRApp, defineComponent, h, watchEffect } from "vue";
+import RawTheme from "@theme/index";
+//#region src/client/app/index.ts
 function resolveThemeExtends(theme) {
-    if (theme.extends) {
-        const base = resolveThemeExtends(theme.extends);
-        return {
-            ...base,
-            ...theme,
-            async enhanceApp(ctx) {
-                if (base.enhanceApp)
-                    await base.enhanceApp(ctx);
-                if (theme.enhanceApp)
-                    await theme.enhanceApp(ctx);
-            }
-        };
-    }
-    return theme;
+	if (theme.extends) {
+		const base = resolveThemeExtends(theme.extends);
+		return {
+			...base,
+			...theme,
+			async enhanceApp(ctx) {
+				await base.enhanceApp?.(ctx);
+				await theme.enhanceApp?.(ctx);
+			},
+			setup() {
+				base.setup?.();
+				theme.setup?.();
+			}
+		};
+	}
+	return theme;
 }
 const Theme = resolveThemeExtends(RawTheme);
 const VitePressApp = defineComponent({
-    name: 'VitePressApp',
-    setup() {
-        const { site, lang, dir } = useData();
-        // change the language on the HTML element based on the current lang
-        onMounted(() => {
-            watchEffect(() => {
-                document.documentElement.lang = lang.value;
-                document.documentElement.dir = dir.value;
-            });
-        });
-        if (import.meta.env.PROD && site.value.router.prefetchLinks) {
-            // in prod mode, enable intersectionObserver based pre-fetch
-            usePrefetch();
-        }
-        // setup global copy code handler
-        useCopyCode();
-        // setup global code groups handler
-        useCodeGroups();
-        if (Theme.setup)
-            Theme.setup();
-        return () => h(Theme.Layout);
-    }
+	name: "VitePressApp",
+	setup() {
+		const { site, lang, dir } = useData();
+		if (inBrowser) watchEffect(() => {
+			document.documentElement.lang = lang.value;
+			document.documentElement.dir = dir.value;
+		});
+		if (import.meta.env.PROD && site.value.router.prefetchLinks) usePrefetch();
+		useCopyCode();
+		useCodeGroups();
+		if (Theme.setup) Theme.setup();
+		return () => h(Theme.Layout);
+	}
 });
-export async function createApp() {
-    ;
-    globalThis.__VITEPRESS__ = true;
-    const router = newRouter();
-    const app = newApp();
-    app.provide(RouterSymbol, router);
-    const data = initData(router.route);
-    app.provide(dataSymbol, data);
-    // install global components
-    app.component('Content', Content);
-    app.component('ClientOnly', ClientOnly);
-    // expose $frontmatter & $params
-    Object.defineProperties(app.config.globalProperties, {
-        $frontmatter: {
-            get() {
-                return data.frontmatter.value;
-            }
-        },
-        $params: {
-            get() {
-                return data.page.value.params;
-            }
-        }
-    });
-    if (Theme.enhanceApp) {
-        await Theme.enhanceApp({
-            app,
-            router,
-            siteData: siteDataRef
-        });
-    }
-    // setup devtools in dev mode
-    if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) {
-        import('./devtools.js').then(({ setupDevtools }) => setupDevtools(app, router, data));
-    }
-    return { app, router, data };
+async function createApp() {
+	globalThis.__VITEPRESS__ = true;
+	const router = newRouter();
+	const app = newApp();
+	app.provide(RouterSymbol, router);
+	const data = initData(router.route);
+	app.provide(dataSymbol, data);
+	app.component("Content", Content);
+	app.component("ClientOnly", ClientOnly);
+	Object.defineProperties(app.config.globalProperties, {
+		$frontmatter: { get() {
+			return data.frontmatter.value;
+		} },
+		$params: { get() {
+			return data.page.value.params;
+		} }
+	});
+	if (import.meta.env.SSR) app.config.throwUnhandledErrorInProduction = true;
+	if (Theme.enhanceApp) await Theme.enhanceApp({
+		app,
+		router,
+		siteData: siteDataRef
+	});
+	if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) import("./devtools.js").then(({ setupDevtools }) => setupDevtools(app, router, data));
+	return {
+		app,
+		router,
+		data
+	};
 }
 function newApp() {
-    return import.meta.env.PROD
-        ? createSSRApp(VitePressApp)
-        : createClientApp(VitePressApp);
+	return import.meta.env.PROD ? createSSRApp(VitePressApp) : createApp$1(VitePressApp);
 }
 function newRouter() {
-    let isInitialPageLoad = inBrowser;
-    return createRouter((path) => {
-        let pageFilePath = pathToFile(path);
-        let pageModule = null;
-        if (pageFilePath) {
-            // use lean build if this is the initial page load
-            if (isInitialPageLoad) {
-                pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
-            }
-            if (import.meta.env.DEV) {
-                pageModule = import(/*@vite-ignore*/ pageFilePath).catch(() => {
-                    // try with/without trailing slash
-                    // in prod this is handled in src/client/app/utils.ts#pathToFile
-                    const url = new URL(pageFilePath, 'http://a.com');
-                    const path = (url.pathname.endsWith('/index.md')
-                        ? url.pathname.slice(0, -9) + '.md'
-                        : url.pathname.slice(0, -3) + '/index.md') +
-                        url.search +
-                        url.hash;
-                    return import(/*@vite-ignore*/ path);
-                });
-            }
-            else {
-                pageModule = import(/*@vite-ignore*/ pageFilePath);
-            }
-        }
-        if (inBrowser) {
-            isInitialPageLoad = false;
-        }
-        return pageModule;
-    }, Theme.NotFound);
-}
-if (inBrowser) {
-    createApp().then(({ app, router, data }) => {
-        // wait until page component is fetched before mounting
-        router.go(location.href, { initialLoad: true }).then(() => {
-            // dynamically update head tags
-            useUpdateHead(router.route, data.site);
-            app.mount('#app');
-            // scroll to hash on new tab during dev
-            if (import.meta.env.DEV && location.hash) {
-                scrollTo(location.hash);
-            }
-        });
-    });
+	let isInitialPageLoad = inBrowser;
+	return createRouter((path) => {
+		let pageFilePath = pathToFile(path);
+		let pageModule = null;
+		if (pageFilePath) {
+			if (isInitialPageLoad) pageFilePath = pageFilePath.replace(/\.js$/, ".lean.js");
+			if (import.meta.env.DEV) pageModule = import(
+				/*@vite-ignore*/
+				pageFilePath
+).catch((e) => {
+				console.error(e);
+				const url = new URL(pageFilePath, "http://a.com");
+				return import(
+					/*@vite-ignore*/
+					(url.pathname.endsWith("/index.md") ? url.pathname.slice(0, -9) + ".md" : url.pathname.slice(0, -3) + "/index.md") + url.search + url.hash
+);
+			});
+			else pageModule = import(
+				/*@vite-ignore*/
+				pageFilePath
+);
+		}
+		if (inBrowser) isInitialPageLoad = false;
+		return pageModule;
+	}, Theme.NotFound);
 }
+if (inBrowser) createApp().then(({ app, router, data }) => {
+	router.go(location.href, { initialLoad: true }).then(() => {
+		useUpdateHead(router.route, data.site);
+		app.mount("#app");
+		if (import.meta.env.DEV && location.hash) setTimeout(() => scrollTo(location.hash), 100);
+	});
+});
+//#endregion
+export { createApp };

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

@@ -0,0 +1,49 @@
+import { Awaitable, PageData, Route } from "../shared.js";
+import { Component, InjectionKey } from "vue";
+//#region src/client/app/router.d.ts
+export interface Router {
+  /**
+   * Current route.
+   */
+  route: Route;
+  /**
+   * Navigate to a new URL.
+   */
+  go: (to: string, options?: {
+    initialLoad?: boolean;
+    replace?: boolean;
+  }) => Promise<void>;
+  /**
+   * Called before the route changes. Return `false` to cancel the navigation.
+   */
+  onBeforeRouteChange?: (to: string) => Awaitable<void | boolean>;
+  /**
+   * Called before the page component is loaded (after the history state is
+   * updated). Return `false` to cancel the navigation.
+   */
+  onBeforePageLoad?: (to: string) => Awaitable<void | boolean>;
+  /**
+   * Called after the page component is loaded (before the page component is updated).
+   */
+  onAfterPageLoad?: (to: string) => Awaitable<void>;
+  /**
+   * Called after the route changes.
+   */
+  onAfterRouteChange?: (to: string) => Awaitable<void>;
+}
+export declare const RouterSymbol: InjectionKey<Router>;
+interface PageModule {
+  __pageData: PageData;
+  default: Component;
+}
+export declare function createRouter(loadPageModule: (path: string) => Awaitable<PageModule | null>, fallbackComponent?: Component): Router;
+export declare function useRouter(): Router;
+export declare function useRoute(): Route;
+export declare function scrollTo(hash: string, scrollPosition?: number): void;
+/**
+ * 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).
+ */
+export declare function getRoutableLinkUrl(link: HTMLAnchorElement | SVGAElement): URL | null;
+//#endregion