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

package/bin/vitepress.js

@@ -1,2 +1,16 @@
 #!/usr/bin/env node
+// @ts-check
+
+import module from 'node:module'
+
+// https://github.com/vitejs/vite/blob/6c8a5a27e645a182f5b03a4ed6aa726eab85993f/packages/vite/bin/vite.js#L48-L63
+try {
+  module.enableCompileCache?.()
+  setTimeout(() => {
+    try {
+      module.flushCompileCache?.()
+    } catch {}
+  }, 10 * 1000).unref()
+} catch {}
+
 import('../dist/node/cli.js')

package/client.d.ts

@@ -3,3 +3,12 @@
 /// <reference types="vite/client" />
 
 export * from './dist/client/index.js'
+
+declare global {
+  interface WindowEventMap {
+    'vitepress:codeGroupTabActivate': Event & {
+      /** code block element that was activated */
+      detail: Element
+    }
+  }
+}

package/dist/client/app/components/ClientOnly.d.ts

@@ -0,0 +1,5 @@
+//#region src/client/app/components/ClientOnly.d.ts
+export declare const ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion

package/dist/client/app/components/ClientOnly.js

@@ -1,10 +1,11 @@
-import { defineComponent, onMounted, ref } from 'vue';
-export const ClientOnly = defineComponent({
-    setup(_, { slots }) {
-        const show = ref(false);
-        onMounted(() => {
-            show.value = true;
-        });
-        return () => (show.value && slots.default ? slots.default() : null);
-    }
-});
+import { defineComponent, onMounted, ref } from "vue";
+//#region src/client/app/components/ClientOnly.ts
+const ClientOnly = defineComponent({ setup(_, { slots }) {
+	const show = ref(false);
+	onMounted(() => {
+		show.value = true;
+	});
+	return () => show.value && slots.default ? slots.default() : null;
+} });
+//#endregion
+export { ClientOnly };

package/dist/client/app/components/Content.d.ts

@@ -0,0 +1,17 @@
+//#region src/client/app/components/Content.d.ts
+export declare const Content: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  as: {
+    type: (ObjectConstructor | StringConstructor)[];
+    default: string;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  as: {
+    type: (ObjectConstructor | StringConstructor)[];
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  as: string | Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion

package/dist/client/app/components/Content.js

@@ -1,24 +1,27 @@
-import { useData, useRoute } from 'vitepress';
-import { defineComponent, h, watch } from 'vue';
-import { contentUpdatedCallbacks } from '../utils';
+import { contentUpdatedCallbacks } from "../utils.js";
+import { defineComponent, h, watch } from "vue";
+import { useData, useRoute } from "vitepress";
+//#region src/client/app/components/Content.ts
 const runCbs = () => contentUpdatedCallbacks.forEach((fn) => fn());
-export const Content = defineComponent({
-    name: 'VitePressContent',
-    props: {
-        as: { type: [Object, String], default: 'div' }
-    },
-    setup(props) {
-        const route = useRoute();
-        const { frontmatter, site } = useData();
-        watch(frontmatter, runCbs, { deep: true, flush: 'post' });
-        return () => h(props.as, site.value.contentProps ?? { style: { position: 'relative' } }, [
-            route.component
-                ? h(route.component, {
-                    onVnodeMounted: runCbs,
-                    onVnodeUpdated: runCbs,
-                    onVnodeUnmounted: runCbs
-                })
-                : '404 Page Not Found'
-        ]);
-    }
+const Content = defineComponent({
+	name: "VitePressContent",
+	props: { as: {
+		type: [Object, String],
+		default: "div"
+	} },
+	setup(props) {
+		const { frontmatter, site } = useData();
+		const route = useRoute();
+		watch(frontmatter, runCbs, {
+			deep: true,
+			flush: "post"
+		});
+		return () => h(props.as, site.value.contentProps ?? { style: { position: "relative" } }, [route.component ? h(route.component, {
+			onVnodeMounted: runCbs,
+			onVnodeUpdated: runCbs,
+			onVnodeUnmounted: runCbs
+		}) : "404 Page Not Found"]);
+	}
 });
+//#endregion
+export { Content };

package/dist/client/app/composables/codeGroups.d.ts

@@ -0,0 +1,3 @@
+//#region src/client/app/composables/codeGroups.d.ts
+export declare function useCodeGroups(): void;
+//#endregion

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

@@ -1,40 +1,37 @@
-import { inBrowser, onContentUpdated } from 'vitepress';
-export function useCodeGroups() {
-    if (import.meta.env.DEV) {
-        onContentUpdated(() => {
-            document.querySelectorAll('.vp-code-group > .blocks').forEach((el) => {
-                Array.from(el.children).forEach((child) => {
-                    child.classList.remove('active');
-                });
-                el.children[0].classList.add('active');
-            });
-        });
-    }
-    if (inBrowser) {
-        window.addEventListener('click', (e) => {
-            const el = e.target;
-            if (el.matches('.vp-code-group input')) {
-                // input <- .tabs <- .vp-code-group
-                const group = el.parentElement?.parentElement;
-                if (!group)
-                    return;
-                const i = Array.from(group.querySelectorAll('input')).indexOf(el);
-                if (i < 0)
-                    return;
-                const blocks = group.querySelector('.blocks');
-                if (!blocks)
-                    return;
-                const current = Array.from(blocks.children).find((child) => child.classList.contains('active'));
-                if (!current)
-                    return;
-                const next = blocks.children[i];
-                if (!next || current === next)
-                    return;
-                current.classList.remove('active');
-                next.classList.add('active');
-                const label = group?.querySelector(`label[for="${el.id}"]`);
-                label?.scrollIntoView({ block: 'nearest' });
-            }
-        });
-    }
+import { inBrowser, onContentUpdated } from "vitepress";
+//#region src/client/app/composables/codeGroups.ts
+function useCodeGroups() {
+	if (import.meta.env.DEV) onContentUpdated(() => {
+		document.querySelectorAll(".vp-code-group > .blocks").forEach((el) => {
+			Array.from(el.children).forEach((child) => {
+				child.classList.remove("active");
+			});
+			const first = el.children[0];
+			if (first) activate(first);
+		});
+	});
+	if (inBrowser) window.addEventListener("click", (e) => {
+		const el = e.target;
+		if (el.matches(".vp-code-group input")) {
+			const group = el.parentElement?.parentElement;
+			if (!group) return;
+			const i = Array.from(group.querySelectorAll("input")).indexOf(el);
+			if (i < 0) return;
+			const blocks = group.querySelector(".blocks");
+			if (!blocks) return;
+			const current = Array.from(blocks.children).find((child) => child.classList.contains("active"));
+			if (!current) return;
+			const next = blocks.children[i];
+			if (!next || current === next) return;
+			current.classList.remove("active");
+			activate(next);
+			(group?.querySelector(`label[for="${el.id}"]`))?.scrollIntoView({ block: "nearest" });
+		}
+	});
 }
+function activate(el) {
+	el.classList.add("active");
+	window.dispatchEvent(new CustomEvent("vitepress:codeGroupTabActivate", { detail: el }));
+}
+//#endregion
+export { useCodeGroups };

package/dist/client/app/composables/copyCode.d.ts

@@ -0,0 +1,3 @@
+//#region src/client/app/composables/copyCode.d.ts
+export declare function useCopyCode(): void;
+//#endregion

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

@@ -1,73 +1,62 @@
-import { inBrowser } from 'vitepress';
-export function useCopyCode() {
-    if (inBrowser) {
-        const timeoutIdMap = new WeakMap();
-        window.addEventListener('click', (e) => {
-            const el = e.target;
-            if (el.matches('div[class*="language-"] > button.copy')) {
-                const parent = el.parentElement;
-                const sibling = el.nextElementSibling?.nextElementSibling;
-                if (!parent || !sibling) {
-                    return;
-                }
-                const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(parent.className);
-                const ignoredNodes = ['.vp-copy-ignore', '.diff.remove'];
-                // Clone the node and remove the ignored nodes
-                const clone = sibling.cloneNode(true);
-                clone
-                    .querySelectorAll(ignoredNodes.join(','))
-                    .forEach((node) => node.remove());
-                let text = clone.textContent || '';
-                if (isShell) {
-                    text = text.replace(/^ *(\$|>) /gm, '').trim();
-                }
-                copyToClipboard(text).then(() => {
-                    el.classList.add('copied');
-                    clearTimeout(timeoutIdMap.get(el));
-                    const timeoutId = setTimeout(() => {
-                        el.classList.remove('copied');
-                        el.blur();
-                        timeoutIdMap.delete(el);
-                    }, 2000);
-                    timeoutIdMap.set(el, timeoutId);
-                });
-            }
-        });
-    }
+import { isShell } from "../../shared.js";
+import { inBrowser } from "vitepress";
+//#region src/client/app/composables/copyCode.ts
+const ignoredNodes = [".vp-copy-ignore", ".diff.remove"].join(", ");
+function useCopyCode() {
+	if (inBrowser) {
+		const timeoutIdMap = /* @__PURE__ */ new WeakMap();
+		window.addEventListener("click", (e) => {
+			const el = e.target;
+			if (el.matches("div[class*=\"language-\"] > button.copy")) {
+				const parent = el.parentElement;
+				const sibling = el.nextElementSibling?.nextElementSibling;
+				if (!parent || !sibling) return;
+				const clone = sibling.cloneNode(true);
+				clone.querySelectorAll(ignoredNodes).forEach((node) => node.remove());
+				clone.innerHTML = clone.innerHTML.replace(/\n+/g, "\n");
+				let text = clone.textContent || "";
+				const lang = /language-(\w+)/.exec(parent.className)?.[1] || "";
+				if (isShell(lang)) text = text.replace(/^ *(\$|>) /gm, "").trim();
+				copyToClipboard(text).then(() => {
+					el.classList.add("copied");
+					clearTimeout(timeoutIdMap.get(el));
+					const timeoutId = window.setTimeout(() => {
+						el.classList.remove("copied");
+						el.blur();
+						timeoutIdMap.delete(el);
+					}, 2e3);
+					timeoutIdMap.set(el, timeoutId);
+				});
+			}
+		});
+	}
 }
 async function copyToClipboard(text) {
-    try {
-        return navigator.clipboard.writeText(text);
-    }
-    catch {
-        const element = document.createElement('textarea');
-        const previouslyFocusedElement = document.activeElement;
-        element.value = text;
-        // Prevent keyboard from showing on mobile
-        element.setAttribute('readonly', '');
-        element.style.contain = 'strict';
-        element.style.position = 'absolute';
-        element.style.left = '-9999px';
-        element.style.fontSize = '12pt'; // Prevent zooming on iOS
-        const selection = document.getSelection();
-        const originalRange = selection
-            ? selection.rangeCount > 0 && selection.getRangeAt(0)
-            : null;
-        document.body.appendChild(element);
-        element.select();
-        // Explicit selection workaround for iOS
-        element.selectionStart = 0;
-        element.selectionEnd = text.length;
-        document.execCommand('copy');
-        document.body.removeChild(element);
-        if (originalRange) {
-            selection.removeAllRanges(); // originalRange can't be truthy when selection is falsy
-            selection.addRange(originalRange);
-        }
-        // Get the focus back on the previously focused element, if any
-        if (previouslyFocusedElement) {
-            ;
-            previouslyFocusedElement.focus();
-        }
-    }
+	try {
+		await navigator.clipboard.writeText(text);
+	} catch {
+		const element = document.createElement("textarea");
+		const previouslyFocusedElement = document.activeElement;
+		element.value = text;
+		element.setAttribute("readonly", "");
+		element.style.contain = "strict";
+		element.style.position = "absolute";
+		element.style.insetInlineStart = "-9999px";
+		element.style.fontSize = "12pt";
+		const selection = document.getSelection();
+		const originalRange = selection ? selection.rangeCount > 0 && selection.getRangeAt(0) : null;
+		document.body.appendChild(element);
+		element.select();
+		element.selectionStart = 0;
+		element.selectionEnd = text.length;
+		document.execCommand("copy");
+		document.body.removeChild(element);
+		if (originalRange) {
+			selection.removeAllRanges();
+			selection.addRange(originalRange);
+		}
+		if (previouslyFocusedElement) previouslyFocusedElement.focus();
+	}
 }
+//#endregion
+export { useCopyCode };

package/dist/client/app/composables/head.d.ts

@@ -0,0 +1,5 @@
+import { Route, SiteData } from "../../shared.js";
+import { Ref } from "vue";
+//#region src/client/app/composables/head.d.ts
+export declare function useUpdateHead(route: Route, siteDataByRouteRef: Ref<SiteData>): void;
+//#endregion

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

@@ -1,81 +1,63 @@
-import { watchEffect } from 'vue';
-import { createTitle, mergeHead } from '../../shared';
-export function useUpdateHead(route, siteDataByRouteRef) {
-    let isFirstUpdate = true;
-    let managedHeadElements = [];
-    const updateHeadTags = (newTags) => {
-        if (import.meta.env.PROD && isFirstUpdate) {
-            // in production, the initial meta tags are already pre-rendered so we
-            // skip the first update.
-            isFirstUpdate = false;
-            newTags.forEach((tag) => {
-                const headEl = createHeadElement(tag);
-                for (const el of document.head.children) {
-                    if (el.isEqualNode(headEl)) {
-                        managedHeadElements.push(el);
-                        return;
-                    }
-                }
-            });
-            return;
-        }
-        const newElements = newTags.map(createHeadElement);
-        managedHeadElements.forEach((oldEl, oldIndex) => {
-            const matchedIndex = newElements.findIndex((newEl) => newEl?.isEqualNode(oldEl ?? null));
-            if (matchedIndex !== -1) {
-                delete newElements[matchedIndex];
-            }
-            else {
-                oldEl?.remove();
-                delete managedHeadElements[oldIndex];
-            }
-        });
-        newElements.forEach((el) => el && document.head.appendChild(el));
-        managedHeadElements = [...managedHeadElements, ...newElements].filter(Boolean);
-    };
-    watchEffect(() => {
-        const pageData = route.data;
-        const siteData = siteDataByRouteRef.value;
-        const pageDescription = pageData && pageData.description;
-        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
-        // update title and description
-        const title = createTitle(siteData, pageData);
-        if (title !== document.title) {
-            document.title = title;
-        }
-        const description = pageDescription || siteData.description;
-        let metaDescriptionElement = document.querySelector(`meta[name=description]`);
-        if (metaDescriptionElement) {
-            if (metaDescriptionElement.getAttribute('content') !== description) {
-                metaDescriptionElement.setAttribute('content', description);
-            }
-        }
-        else {
-            createHeadElement(['meta', { name: 'description', content: description }]);
-        }
-        updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
-    });
+import { createTitle, mergeHead } from "../../shared.js";
+import { watchEffect } from "vue";
+//#region src/client/app/composables/head.ts
+function useUpdateHead(route, siteDataByRouteRef) {
+	let isFirstUpdate = true;
+	let managedHeadElements = [];
+	const updateHeadTags = (newTags) => {
+		if (import.meta.env.PROD && isFirstUpdate) {
+			isFirstUpdate = false;
+			newTags.forEach((tag) => {
+				const headEl = createHeadElement(tag);
+				for (const el of document.head.children) if (el.isEqualNode(headEl)) {
+					managedHeadElements.push(el);
+					return;
+				}
+			});
+			return;
+		}
+		const newElements = newTags.map(createHeadElement);
+		managedHeadElements.forEach((oldEl, oldIndex) => {
+			const matchedIndex = newElements.findIndex((newEl) => newEl?.isEqualNode(oldEl ?? null));
+			if (matchedIndex !== -1) delete newElements[matchedIndex];
+			else {
+				oldEl?.remove();
+				delete managedHeadElements[oldIndex];
+			}
+		});
+		newElements.forEach((el) => el && document.head.appendChild(el));
+		managedHeadElements = [...managedHeadElements, ...newElements].filter(Boolean);
+	};
+	watchEffect(() => {
+		const pageData = route.data;
+		const siteData = siteDataByRouteRef.value;
+		const pageDescription = pageData && pageData.description;
+		const frontmatterHead = pageData && pageData.frontmatter.head || [];
+		const title = createTitle(siteData, pageData);
+		if (title !== document.title) document.title = title;
+		const description = pageDescription || siteData.description;
+		let metaDescriptionElement = document.querySelector(`meta[name=description]`);
+		if (metaDescriptionElement) {
+			if (metaDescriptionElement.getAttribute("content") !== description) metaDescriptionElement.setAttribute("content", description);
+		} else createHeadElement(["meta", {
+			name: "description",
+			content: description
+		}]);
+		updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
+	});
 }
 function createHeadElement([tag, attrs, innerHTML]) {
-    const el = document.createElement(tag);
-    for (const key in attrs) {
-        el.setAttribute(key, attrs[key]);
-    }
-    if (innerHTML) {
-        el.innerHTML = innerHTML;
-    }
-    if (tag === 'script' && attrs.async == null) {
-        // async is true by default for dynamically created scripts
-        ;
-        el.async = false;
-    }
-    return el;
+	const el = document.createElement(tag);
+	for (const [key, value] of Object.entries(attrs)) el.setAttribute(key, value);
+	if (innerHTML) el.innerHTML = innerHTML;
+	if (tag === "script" && attrs.async == null) el.async = false;
+	return el;
 }
 function isMetaDescription(headConfig) {
-    return (headConfig[0] === 'meta' &&
-        headConfig[1] &&
-        headConfig[1].name === 'description');
+	return headConfig[0] === "meta" && headConfig[1] && headConfig[1].name === "description";
 }
 function filterOutHeadDescription(head) {
-    return head.filter((h) => !isMetaDescription(h));
+	return head.filter((h) => !isMetaDescription(h));
 }
+//#endregion
+export { useUpdateHead };

package/dist/client/app/composables/icon.d.ts

@@ -0,0 +1,12 @@
+import { ComputedRef, MaybeRefOrGetter } from "vue";
+//#region src/client/app/composables/icon.d.ts
+/**
+ * Resolves an icon name (`collection:name`, e.g. `simple-icons:github`) to
+ * its `vpi-<collection>-<name>` class. During SSR the name is registered so
+ * the build emits its CSS rule; in dev the SVG is served on demand and
+ * applied to `el` inline.
+ */
+export declare function useIcon(icon: MaybeRefOrGetter<string | {
+  svg: string;
+} | undefined>, el?: MaybeRefOrGetter<HTMLElement | null>): ComputedRef<string | undefined>;
+//#endregion

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

@@ -0,0 +1,56 @@
+import { parseIconName } from "../../shared.js";
+import { withBase } from "../utils.js";
+import { computed, onMounted, toValue, useSSRContext, watchPostEffect } from "vue";
+//#region src/client/app/composables/icon.ts
+/**
+* Resolves an icon name (`collection:name`, e.g. `simple-icons:github`) to
+* its `vpi-<collection>-<name>` class. During SSR the name is registered so
+* the build emits its CSS rule; in dev the SVG is served on demand and
+* applied to `el` inline.
+*/
+function useIcon(icon, el) {
+	const parsed = computed(() => {
+		const value = toValue(icon);
+		return typeof value === "string" ? parseIconName(value) : null;
+	});
+	const iconClass = computed(() => parsed.value ? `vpi-${parsed.value.collection}-${parsed.value.icon}` : void 0);
+	if (import.meta.env.SSR) {
+		const ctx = useSSRContext();
+		const value = toValue(icon);
+		if (typeof value === "string") ctx?.vpIcons.add(value);
+	} else if (import.meta.env.DEV) {
+		let applied;
+		onMounted(() => {
+			watchPostEffect(() => {
+				const span = toValue(el);
+				if (!span) return;
+				const name = parsed.value;
+				if (!name) {
+					if (applied) {
+						span.style.removeProperty("--icon");
+						applied = void 0;
+					}
+					return;
+				}
+				const key = `${name.collection}/${name.icon}`;
+				if (applied === key) return;
+				applied = key;
+				span.style.setProperty("--icon", `url('${withBase(`/_vpi/${name.collection}/${name.icon}.svg`)}')`);
+				const styles = getComputedStyle(span);
+				if ((styles.maskImage || styles.webkitMaskImage) === "none") Object.assign(span.style, {
+					display: "inline-block",
+					width: "1em",
+					height: "1em",
+					mask: "var(--icon) no-repeat",
+					webkitMask: "var(--icon) no-repeat",
+					maskSize: "100% 100%",
+					webkitMaskSize: "100% 100%",
+					backgroundColor: "currentColor"
+				});
+			});
+		});
+	}
+	return iconClass;
+}
+//#endregion
+export { useIcon };

package/dist/client/app/composables/preFetch.d.ts

@@ -0,0 +1,3 @@
+//#region src/client/app/composables/preFetch.d.ts
+export declare function usePrefetch(): void;
+//#endregion