vitepress 0.22.4 → 1.0.0-alpha.11

package/README.md

@@ -1,4 +1,4 @@
-# (WIP) VitePress 📝💨
+# VitePress (alpha) 📝💨
 
 [![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)
@@ -7,6 +7,8 @@
 
 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.
+
 ## Documentation
 
 To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).

package/bin/vitepress.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../dist/node/cli')
+import('../dist/node/cli.js')

package/client.d.ts

@@ -1,4 +1,5 @@
-// re-export vite client types
-// with strict installers like pnpm, user won't be able to reference vite/client
-// in project root
+// 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/ClientOnly.js

@@ -1,10 +1,10 @@
-import { ref, onMounted, defineComponent } 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,11 @@
-import { defineComponent, h } from 'vue';
-import { useRoute } from '../router';
-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.js';
+export const Content = defineComponent({
+    name: 'VitePressContent',
+    setup() {
+        const route = useRoute();
+        return () => h('div', { style: { position: 'relative' } }, [
+            route.component ? h(route.component) : null
+        ]);
+    }
+});

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

@@ -1,85 +1,51 @@
-import { watchEffect } from 'vue';
-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;
-        }
-        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) => {
-            const el = createHeadElement(headConfig);
-            document.head.appendChild(el);
-            newEls.push(el);
-        });
-        managedHeadTags = newEls;
-    };
-    watchEffect(() => {
-        const pageData = route.data;
-        const siteData = siteDataByRouteRef.value;
-        const pageTitle = pageData && pageData.title;
-        const pageDescription = pageData && pageData.description;
-        const frontmatterHead = pageData && pageData.frontmatter.head;
-        // update title and description
-        document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title;
-        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) : [])
-        ]);
-    });
-}
-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.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));
+}

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

@@ -1,94 +1,94 @@
-// 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, 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.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();
+    });
+}

package/dist/client/app/data.js

@@ -1,47 +1,44 @@
-import { shallowRef, readonly, computed, inject } from 'vue';
-import serializedSiteData from '@siteData';
-import { resolveSiteDataByRoute } 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);
-}
-// hmr
-if (import.meta.hot) {
-    import.meta.hot.accept('/@siteData', (m) => {
-        siteDataRef.value = parse(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 route.data.title
-                ? route.data.title + ' | ' + site.value.title
-                : site.value.title;
-        }),
-        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 { 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;
+}

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.vuejs.org',
+        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
+            });
+        });
+    });
+};