vitepress 1.0.0-draft.8 → 1.0.0-rc.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/client.d.ts

@@ -1,3 +1,5 @@
 // re-export vite client types. with strict installers like pnpm, user won't
 // be able to reference vite/client in project root.
 /// <reference types="vite/client" />
+
+export * from './dist/client/index.js'

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

@@ -1,11 +1,22 @@
 import { defineComponent, h } from 'vue';
-import { useRoute } from '../router';
+import { useData, useRoute } from 'vitepress';
+import { contentUpdatedCallbacks } from '../utils';
+const runCbs = () => contentUpdatedCallbacks.forEach((fn) => fn());
 export const Content = defineComponent({
     name: 'VitePressContent',
-    setup() {
+    props: {
+        as: { type: [Object, String], default: 'div' }
+    },
+    setup(props) {
         const route = useRoute();
-        return () => h('div', { style: { position: 'relative' } }, [
-            route.component ? h(route.component) : null
+        const { site } = useData();
+        return () => h(props.as, site.value.contentProps ?? { 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,40 @@
+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' });
+            }
+        });
+    }
+}

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

@@ -0,0 +1,71 @@
+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);
+                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,5 +1,5 @@
 import { watchEffect } from 'vue';
-import { createTitle } from '../../shared';
+import { createTitle, mergeHead } from '../../shared';
 export function useUpdateHead(route, siteDataByRouteRef) {
     let managedHeadTags = [];
     let isFirstUpdate = true;
@@ -10,59 +10,30 @@ export function useUpdateHead(route, siteDataByRouteRef) {
             isFirstUpdate = false;
             return;
         }
-        const newEls = [];
-        const commonLength = Math.min(managedHeadTags.length, newTags.length);
-        for (let i = 0; i < commonLength; i++) {
-            let el = managedHeadTags[i];
-            const [tag, attrs, innerHTML = ''] = newTags[i];
-            if (el.tagName.toLocaleLowerCase() === tag) {
-                for (const key in attrs) {
-                    if (el.getAttribute(key) !== attrs[key]) {
-                        el.setAttribute(key, attrs[key]);
-                    }
-                }
-                for (let i = 0; i < el.attributes.length; i++) {
-                    const name = el.attributes[i].name;
-                    if (!(name in attrs)) {
-                        el.removeAttribute(name);
-                    }
-                }
-                if (el.innerHTML !== innerHTML) {
-                    el.innerHTML = innerHTML;
-                }
-            }
-            else {
-                document.head.removeChild(el);
-                el = createHeadElement(newTags[i]);
-                document.head.append(el);
-            }
-            newEls.push(el);
-        }
-        managedHeadTags
-            .slice(commonLength)
-            .forEach((el) => document.head.removeChild(el));
-        newTags.slice(commonLength).forEach((headConfig) => {
+        managedHeadTags.forEach((el) => document.head.removeChild(el));
+        managedHeadTags = [];
+        newTags.forEach((headConfig) => {
             const el = createHeadElement(headConfig);
             document.head.appendChild(el);
-            newEls.push(el);
+            managedHeadTags.push(el);
         });
-        managedHeadTags = newEls;
     };
     watchEffect(() => {
         const pageData = route.data;
         const siteData = siteDataByRouteRef.value;
         const pageDescription = pageData && pageData.description;
-        const frontmatterHead = pageData && pageData.frontmatter.head;
+        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([
-            // site head can only change during dev
-            ...(import.meta.env.DEV ? siteData.head : []),
-            ...(frontmatterHead ? filterOutHeadDescription(frontmatterHead) : [])
-        ]);
+        const description = pageDescription || siteData.description;
+        let metaDescriptionElement = document.querySelector(`meta[name=description]`);
+        if (metaDescriptionElement) {
+            metaDescriptionElement.setAttribute('content', description);
+        }
+        else {
+            createHeadElement(['meta', { name: 'description', content: description }]);
+        }
+        updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
     });
 }
 function createHeadElement([tag, attrs, innerHTML]) {

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

@@ -52,14 +52,19 @@ export function usePrefetch() {
                     if (!hasFetched.has(pathname)) {
                         hasFetched.add(pathname);
                         const pageChunkPath = pathToFile(pathname);
-                        doFetch(pageChunkPath);
+                        if (pageChunkPath)
+                            doFetch(pageChunkPath);
                     }
                 }
             });
         });
         rIC(() => {
-            document.querySelectorAll('#app a').forEach((link) => {
-                const { target, hostname, pathname } = link;
+            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;
@@ -67,7 +72,7 @@ export function usePrefetch() {
                 if (
                 // only prefetch same tab navigation, since a new tab will load
                 // the lean js chunk instead.
-                target !== `_blank` &&
+                link.target !== '_blank' &&
                     // only prefetch inbound links
                     hostname === location.hostname) {
                     if (pathname !== location.pathname) {

package/dist/client/app/data.js

@@ -1,39 +1,36 @@
-import { shallowRef, readonly, computed, inject } from 'vue';
-import serializedSiteData from '@siteData';
+import { computed, inject, readonly, ref, shallowRef } from 'vue';
+import siteData from '@siteData';
 import { resolveSiteDataByRoute, createTitle } from '../shared';
-import { withBase } from './utils';
 export const dataSymbol = Symbol();
-export const siteDataRef = shallowRef(parse(serializedSiteData));
-function parse(data) {
-    const parsed = JSON.parse(data);
-    return (import.meta.env.DEV ? readonly(parsed) : parsed);
-}
+// 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) => {
-        siteDataRef.value = parse(m.default);
+        if (m) {
+            siteDataRef.value = m.default;
+        }
     });
 }
 // per-app data
 export function initData(route) {
-    const site = computed(() => resolveSiteDataByRoute(siteDataRef.value, route.path));
+    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),
-        localePath: computed(() => {
-            const { langs, lang } = site.value;
-            const path = Object.keys(langs).find((langPath) => langs[langPath].lang === lang);
-            return withBase(path || '/');
-        }),
+        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() {

package/dist/client/app/devtools.js

@@ -0,0 +1,28 @@
+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) => {
+        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
+            });
+        });
+    });
+};

package/dist/client/app/index.js

@@ -1,34 +1,57 @@
-import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
-import Theme from '/@theme/index';
-import { inBrowser, pathToFile } from './utils';
-import { RouterSymbol, createRouter } from './router';
-import { siteDataRef, useData } from './data';
+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 } from './data';
-import { Content } from './components/Content';
-import { ClientOnly } from './components/ClientOnly';
-const NotFound = Theme.NotFound || (() => '404 Not Found');
-const VitePressApp = {
+import { dataSymbol, initData, siteDataRef, useData } from './data';
+import { RouterSymbol, createRouter, scrollTo } from './router';
+import { inBrowser, pathToFile } from './utils';
+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;
+}
+const Theme = resolveThemeExtends(RawTheme);
+const VitePressApp = defineComponent({
     name: 'VitePressApp',
     setup() {
         const { site } = useData();
         // change the language on the HTML element based on the current lang
         onMounted(() => {
-            watch(() => site.value.lang, (lang) => {
-                document.documentElement.lang = lang;
-            }, { immediate: true });
+            watchEffect(() => {
+                document.documentElement.lang = site.value.lang;
+                document.documentElement.dir = site.value.dir;
+            });
         });
         if (import.meta.env.PROD) {
             // 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);
     }
-};
-export function createApp() {
+});
+export async function createApp() {
     const router = newRouter();
-    handleHMR(router);
     const app = newApp();
     app.provide(RouterSymbol, router);
     const data = initData(router.route);
@@ -36,22 +59,30 @@ export function createApp() {
     // install global components
     app.component('Content', Content);
     app.component('ClientOnly', ClientOnly);
-    app.component('Debug', import.meta.env.PROD
-        ? () => null
-        : defineAsyncComponent(() => import('./components/Debug.vue')));
-    // expose $frontmatter
-    Object.defineProperty(app.config.globalProperties, '$frontmatter', {
-        get() {
-            return data.frontmatter.value;
+    // expose $frontmatter & $params
+    Object.defineProperties(app.config.globalProperties, {
+        $frontmatter: {
+            get() {
+                return data.frontmatter.value;
+            }
+        },
+        $params: {
+            get() {
+                return data.page.value.params;
+            }
         }
     });
     if (Theme.enhanceApp) {
-        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 };
 }
 function newApp() {
@@ -64,6 +95,8 @@ function newRouter() {
     let initialPath;
     return createRouter((path) => {
         let pageFilePath = pathToFile(path);
+        if (!pageFilePath)
+            return null;
         if (isInitialPageLoad) {
             initialPath = pageFilePath;
         }
@@ -77,30 +110,22 @@ function newRouter() {
             isInitialPageLoad = false;
         }
         return import(/*@vite-ignore*/ pageFilePath);
-    }, NotFound);
+    }, Theme.NotFound);
 }
-function handleHMR(router) {
-    // 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)) {
-                router.route.data = payload.pageData;
+if (inBrowser) {
+    createApp().then(({ app, router, data }) => {
+        // wait until page component is fetched before mounting
+        router.go().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) {
+                const target = document.getElementById(decodeURIComponent(location.hash).slice(1));
+                if (target) {
+                    scrollTo(target, location.hash);
+                }
             }
         });
-    }
-}
-function shouldHotReload(payload) {
-    const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '');
-    const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '');
-    return payloadPath === locationPath;
-}
-if (inBrowser) {
-    const { app, router, data } = createApp();
-    // wait until page component is fetched before mounting
-    router.go().then(() => {
-        // dynamically update head tags
-        useUpdateHead(router.route, data.site);
-        app.mount('#app');
     });
 }