vitepress 1.0.0-alpha.9 → 1.0.0-beta.2

package/README.md

@@ -1,17 +1,18 @@
-# VitePress (alpha) 📝💨
+# VitePress (beta) 📝💨
 
 [![Test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
 [![npm](https://img.shields.io/npm/v/vitepress)](https://www.npmjs.com/package/vitepress)
+[![chat](https://img.shields.io/badge/chat-discord-blue?logo=discord)](https://chat.vuejs.org)
 
 ---
 
 VitePress is [VuePress](https://vuepress.vuejs.org)' spiritual successor, built on top of [vite](https://github.com/vitejs/vite).
 
-Currently, it's in the `alpha` stage. It is already suitable for out-of-the-box documentation use, but the config and theming API may still change between minor releases.
+Currently, it is in the `beta` stage. It is already suitable for out-of-the-box documentation use. There still might be issues, however, we do not plan to introduce any breaking changes from here on until the stable release. 
 
 ## Documentation
 
-To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).
+To check out docs, visit [vitepress.dev](https://vitepress.dev).
 
 ## Changelog
 

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

@@ -1,10 +1,10 @@
-import { defineComponent, ref, onMounted } 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, ref, onMounted } from 'vue';
+export const ClientOnly = defineComponent({
+    setup(_, { slots }) {
+        const show = ref(false);
+        onMounted(() => {
+            show.value = true;
+        });
+        return () => (show.value && slots.default ? slots.default() : null);
+    }
+});

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

@@ -1,11 +1,21 @@
-import { defineComponent, h } from 'vue';
-import { useRoute } from '../router.js';
-export const Content = defineComponent({
-    name: 'VitePressContent',
-    setup() {
-        const route = useRoute();
-        return () => h('div', { style: { position: 'relative' } }, [
-            route.component ? h(route.component) : null
-        ]);
-    }
-});
+import { defineComponent, h } from 'vue';
+import { useRoute } from '../router';
+import { contentUpdatedCallbacks } from '../utils';
+const runCbs = () => contentUpdatedCallbacks.forEach((fn) => fn());
+export const Content = defineComponent({
+    name: 'VitePressContent',
+    props: {
+        as: { type: [Object, String], default: 'div' }
+    },
+    setup(props) {
+        const route = useRoute();
+        return () => h(props.as, { style: { position: 'relative' } }, [
+            route.component
+                ? h(route.component, {
+                    onVnodeMounted: runCbs,
+                    onVnodeUpdated: runCbs
+                })
+                : '404 Page Not Found'
+        ]);
+    }
+});

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

@@ -0,0 +1,19 @@
+import { inBrowser } from 'vitepress';
+export function useCodeGroups() {
+    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;
+                const i = Array.from(group?.querySelectorAll('input') || []).indexOf(el);
+                const current = group?.querySelector('div[class*="language-"].active');
+                const next = group?.querySelectorAll('div[class*="language-"]:not(.language-id)')?.[i];
+                if (current && next && current !== next) {
+                    current.classList.remove('active');
+                    next.classList.add('active');
+                }
+            }
+        });
+    }
+}

package/dist/client/{theme-default/composables/copy-code.js → app/composables/copyCode.js}

@@ -1,71 +1,72 @@
-import { nextTick, watch } from 'vue';
-import { inBrowser, useData } from 'vitepress';
-export function useCopyCode() {
-    const { page } = useData();
-    if (inBrowser)
-        watch(() => page.value.relativePath, () => {
-            nextTick(() => {
-                document
-                    .querySelectorAll('.vp-doc div[class*="language-"] > button.copy')
-                    .forEach(handleElement);
-            });
-        }, { immediate: true, flush: 'post' });
-}
-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();
-        }
-    }
-}
-function handleElement(el) {
-    el.onclick = () => {
-        const parent = el.parentElement;
-        const sibling = el.nextElementSibling
-            ?.nextElementSibling;
-        if (!parent || !sibling) {
-            return;
-        }
-        const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(parent.classList.toString());
-        let { innerText: text = '' } = sibling;
-        if (isShell) {
-            text = text.replace(/^ *(\$|>) /gm, '');
-        }
-        copyToClipboard(text).then(() => {
-            el.classList.add('copied');
-            setTimeout(() => {
-                el.classList.remove('copied');
-                el.blur();
-            }, 2000);
-        });
-    };
-}
+import { inBrowser } from 'vitepress';
+export function useCopyCode() {
+    if (inBrowser) {
+        const timeoutIdMap = new Map();
+        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);
+                let text = '';
+                sibling
+                    .querySelectorAll('span.line:not(.diff.remove)')
+                    .forEach((node) => (text += (node.textContent || '') + '\n'));
+                text = text.slice(0, -1);
+                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);
+                });
+            }
+        });
+    }
+}
+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();
+        }
+    }
+}

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

@@ -1,51 +1,51 @@
-import { watchEffect } from 'vue';
-import { createTitle, mergeHead } from '../../shared.js';
-export function useUpdateHead(route, siteDataByRouteRef) {
-    let managedHeadTags = [];
-    let isFirstUpdate = true;
-    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;
-            return;
-        }
-        managedHeadTags.forEach((el) => document.head.removeChild(el));
-        managedHeadTags = [];
-        newTags.forEach((headConfig) => {
-            const el = createHeadElement(headConfig);
-            document.head.appendChild(el);
-            managedHeadTags.push(el);
-        });
-    };
-    watchEffect(() => {
-        const pageData = route.data;
-        const siteData = siteDataByRouteRef.value;
-        const pageDescription = pageData && pageData.description;
-        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
-        // update title and description
-        document.title = createTitle(siteData, pageData);
-        document
-            .querySelector(`meta[name=description]`)
-            .setAttribute('content', pageDescription || siteData.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;
-    }
-    return el;
-}
-function isMetaDescription(headConfig) {
-    return (headConfig[0] === 'meta' &&
-        headConfig[1] &&
-        headConfig[1].name === 'description');
-}
-function filterOutHeadDescription(head) {
-    return head.filter((h) => !isMetaDescription(h));
-}
+import { watchEffect } from 'vue';
+import { createTitle, mergeHead } from '../../shared';
+export function useUpdateHead(route, siteDataByRouteRef) {
+    let managedHeadTags = [];
+    let isFirstUpdate = true;
+    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;
+            return;
+        }
+        managedHeadTags.forEach((el) => document.head.removeChild(el));
+        managedHeadTags = [];
+        newTags.forEach((headConfig) => {
+            const el = createHeadElement(headConfig);
+            document.head.appendChild(el);
+            managedHeadTags.push(el);
+        });
+    };
+    watchEffect(() => {
+        const pageData = route.data;
+        const siteData = siteDataByRouteRef.value;
+        const pageDescription = pageData && pageData.description;
+        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
+        // update title and description
+        document.title = createTitle(siteData, pageData);
+        document
+            .querySelector(`meta[name=description]`)
+            .setAttribute('content', pageDescription || siteData.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;
+    }
+    return el;
+}
+function isMetaDescription(headConfig) {
+    return (headConfig[0] === 'meta' &&
+        headConfig[1] &&
+        headConfig[1].name === 'description');
+}
+function filterOutHeadDescription(head) {
+    return head.filter((h) => !isMetaDescription(h));
+}

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

@@ -1,94 +1,99 @@
-// Customized pre-fetch for page chunks based on
-// https://github.com/GoogleChromeLabs/quicklink
-import { useRoute } from '../router.js';
-import { onMounted, onUnmounted, watch } from 'vue';
-import { inBrowser, pathToFile } from '../utils.js';
-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);
-};
-const viaXHR = (url) => {
-    const req = new XMLHttpRequest();
-    req.open('GET', url, (req.withCredentials = true));
-    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);
-                        doFetch(pageChunkPath);
-                    }
-                }
-            });
-        });
-        rIC(() => {
-            document.querySelectorAll('#app a').forEach((link) => {
-                const { target, hostname, pathname } = link;
-                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);
-                    }
-                }
-            });
-        });
-    };
-    onMounted(observeLinks);
-    const route = useRoute();
-    watch(() => route.path, observeLinks);
-    onUnmounted(() => {
-        observer && observer.disconnect();
-    });
-}
+// Customized pre-fetch for page chunks based on
+// https://github.com/GoogleChromeLabs/quicklink
+import { useRoute } from '../router';
+import { onMounted, onUnmounted, watch } from 'vue';
+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);
+};
+const viaXHR = (url) => {
+    const req = new XMLHttpRequest();
+    req.open('GET', url, (req.withCredentials = true));
+    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);
+                        doFetch(pageChunkPath);
+                    }
+                }
+            });
+        });
+        rIC(() => {
+            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);
+                    }
+                }
+            });
+        });
+    };
+    onMounted(observeLinks);
+    const route = useRoute();
+    watch(() => route.path, observeLinks);
+    onUnmounted(() => {
+        observer && observer.disconnect();
+    });
+}

package/dist/client/app/data.js

@@ -1,44 +1,42 @@
-import { shallowRef, readonly, computed, inject } from 'vue';
-import siteData from '@siteData';
-import { resolveSiteDataByRoute, createTitle } from '../shared.js';
-import { withBase } from './utils.js';
-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;
-        }
-    });
-}
-// per-app data
-export function initData(route) {
-    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.path));
-    return {
-        site,
-        theme: computed(() => site.value.themeConfig),
-        page: computed(() => route.data),
-        frontmatter: computed(() => route.data.frontmatter),
-        lang: computed(() => site.value.lang),
-        localePath: computed(() => {
-            const { langs, lang } = site.value;
-            const path = Object.keys(langs).find((langPath) => langs[langPath].lang === lang);
-            return withBase(path || '/');
-        }),
-        title: computed(() => {
-            return createTitle(site.value, route.data);
-        }),
-        description: computed(() => {
-            return route.data.description || site.value.description;
-        })
-    };
-}
-export function useData() {
-    const data = inject(dataSymbol);
-    if (!data) {
-        throw new Error('vitepress data not properly injected in app');
-    }
-    return data;
-}
+import { computed, inject, readonly, ref, shallowRef } from 'vue';
+import siteData from '@siteData';
+import { resolveSiteDataByRoute, createTitle } 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;
+        }
+    });
+}
+// per-app data
+export function initData(route) {
+    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.data.relativePath));
+    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(() => site.value.dir),
+        localeIndex: computed(() => site.value.localeIndex || 'root'),
+        title: computed(() => {
+            return createTitle(site.value, route.data);
+        }),
+        description: computed(() => {
+            return route.data.description || site.value.description;
+        }),
+        isDark: ref(false)
+    };
+}
+export function useData() {
+    const data = inject(dataSymbol);
+    if (!data) {
+        throw new Error('vitepress data not properly injected in app');
+    }
+    return data;
+}