vitepress 0.22.3 → 1.0.0-alpha.10

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,4 +1,4 @@
-import { ref, onMounted, defineComponent } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 export const ClientOnly = defineComponent({
     setup(_, { slots }) {
         const show = ref(false);

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

@@ -1,5 +1,5 @@
 import { defineComponent, h } from 'vue';
-import { useRoute } from '../router';
+import { useRoute } from '../router.js';
 export const Content = defineComponent({
     name: 'VitePressContent',
     setup() {

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

@@ -1,4 +1,5 @@
 import { watchEffect } from 'vue';
+import { createTitle, mergeHead } from '../../shared.js';
 export function useUpdateHead(route, siteDataByRouteRef) {
     let managedHeadTags = [];
     let isFirstUpdate = true;
@@ -9,60 +10,25 @@ 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 pageTitle = pageData && pageData.title;
         const pageDescription = pageData && pageData.description;
-        const frontmatterHead = pageData && pageData.frontmatter.head;
+        const frontmatterHead = (pageData && pageData.frontmatter.head) || [];
         // update title and description
-        document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title;
+        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) : [])
-        ]);
+        updateHeadTags(mergeHead(siteData.head, filterOutHeadDescription(frontmatterHead)));
     });
 }
 function createHeadElement([tag, attrs, innerHTML]) {

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

@@ -1,8 +1,8 @@
 // Customized pre-fetch for page chunks based on
 // https://github.com/GoogleChromeLabs/quicklink
-import { useRoute } from '../router';
+import { useRoute } from '../router.js';
 import { onMounted, onUnmounted, watch } from 'vue';
-import { inBrowser, pathToFile } from '../utils';
+import { inBrowser, pathToFile } from '../utils.js';
 const hasFetched = new Set();
 const createLink = () => document.createElement('link');
 const viaDOM = (url) => {

package/dist/client/app/data.js

@@ -1,17 +1,16 @@
 import { shallowRef, readonly, computed, inject } from 'vue';
-import serializedSiteData from '@siteData';
-import { resolveSiteDataByRoute } from '../shared';
-import { withBase } from './utils';
+import siteData from '@siteData';
+import { resolveSiteDataByRoute, createTitle } from '../shared.js';
+import { withBase } from './utils.js';
 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
@@ -29,9 +28,7 @@ export function initData(route) {
             return withBase(path || '/');
         }),
         title: computed(() => {
-            return route.data.title
-                ? route.data.title + ' | ' + site.value.title
-                : site.value.title;
+            return createTitle(site.value, route.data);
         }),
         description: computed(() => {
             return route.data.description || site.value.description;

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
+            });
+        });
+    });
+};

package/dist/client/app/index.js

@@ -1,15 +1,15 @@
-import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
-import { inBrowser, pathToFile } from './utils';
-import { RouterSymbol, createRouter } from './router';
-import { siteDataRef, useData } from './data';
-import { useUpdateHead } from './composables/head';
-import Theme from '/@theme/index';
-import { usePrefetch } from './composables/preFetch';
-import { dataSymbol, initData } from './data';
-import { Content } from './components/Content';
-import { ClientOnly } from './components/ClientOnly';
+import { createApp as createClientApp, createSSRApp, defineComponent, h, onMounted, watch } from 'vue';
+import Theme from '@theme/index';
+import { inBrowser, pathToFile } from './utils.js';
+import { RouterSymbol, createRouter } from './router.js';
+import { siteDataRef, useData } from './data.js';
+import { useUpdateHead } from './composables/head.js';
+import { usePrefetch } from './composables/preFetch.js';
+import { dataSymbol, initData } from './data.js';
+import { Content } from './components/Content.js';
+import { ClientOnly } from './components/ClientOnly.js';
 const NotFound = Theme.NotFound || (() => '404 Not Found');
-const VitePressApp = {
+const VitePressApp = defineComponent({
     name: 'VitePressApp',
     setup() {
         const { site } = useData();
@@ -23,26 +23,22 @@ const VitePressApp = {
             // in prod mode, enable intersectionObserver based pre-fetch
             usePrefetch();
         }
+        if (Theme.setup)
+            Theme.setup();
         return () => h(Theme.Layout);
     }
-};
+});
 export function createApp() {
     const router = newRouter();
-    handleHMR(router);
     const app = newApp();
     app.provide(RouterSymbol, router);
     const data = initData(router.route);
     app.provide(dataSymbol, data);
-    if (inBrowser) {
-        // dynamically update head tags
-        useUpdateHead(router.route, data.site);
-    }
+    // provide this to avoid circular dependency in VPContent
+    app.provide('NotFound', NotFound);
     // 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() {
@@ -56,7 +52,11 @@ export function createApp() {
             siteData: siteDataRef
         });
     }
-    return { app, router };
+    // 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() {
     return import.meta.env.PROD
@@ -77,36 +77,18 @@ function newRouter() {
         if (isInitialPageLoad || initialPath === pageFilePath) {
             pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
         }
-        // in browser: native dynamic import
         if (inBrowser) {
             isInitialPageLoad = false;
-            return import(/*@vite-ignore*/ pageFilePath);
         }
-        // SSR: sync require
-        // @ts-ignore
-        return require(pageFilePath);
+        return import(/*@vite-ignore*/ pageFilePath);
     }, 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;
-            }
-        });
-    }
-}
-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 } = createApp();
+    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');
     });
 }

package/dist/client/app/router.js

@@ -1,18 +1,11 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue';
-import { inBrowser } from './utils';
-import { siteDataRef } from './data';
+import { notFoundPageData } from '../shared.js';
+import { inBrowser, withBase } from './utils.js';
+import { siteDataRef } from './data.js';
 export const RouterSymbol = Symbol();
 // we are just using URL to parse the pathname and hash - the base doesn't
 // matter and is only passed to support same-host hrefs.
 const fakeHost = `http://a.com`;
-const notFoundPageData = {
-    relativePath: '',
-    title: '404',
-    description: 'Not Found',
-    headers: [],
-    frontmatter: {},
-    lastUpdated: 0
-};
 const getDefaultRoute = () => ({
     path: '/',
     component: null,
@@ -21,11 +14,14 @@ const getDefaultRoute = () => ({
 export function createRouter(loadPageModule, fallbackComponent) {
     const route = reactive(getDefaultRoute());
     function go(href = inBrowser ? location.href : '/') {
-        // ensure correct deep link so page refresh lands on correct files.
         const url = new URL(href, fakeHost);
-        if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
-            url.pathname += '.html';
-            href = url.pathname + url.search + url.hash;
+        if (siteDataRef.value.cleanUrls === 'disabled') {
+            // ensure correct deep link so page refresh lands on correct files.
+            // if cleanUrls is enabled, the server should handle this
+            if (!url.pathname.endsWith('/') && !url.pathname.endsWith('.html')) {
+                url.pathname += '.html';
+                href = url.pathname + url.search + url.hash;
+            }
         }
         if (inBrowser) {
             // save scroll position before changing url
@@ -39,23 +35,18 @@ export function createRouter(loadPageModule, fallbackComponent) {
         const targetLoc = new URL(href, fakeHost);
         const pendingPath = (latestPendingPath = targetLoc.pathname);
         try {
-            let page = loadPageModule(pendingPath);
-            // only await if it returns a Promise - this allows sync resolution
-            // on initial render in SSR.
-            if ('then' in page && typeof page.then === 'function') {
-                page = await page;
-            }
+            let page = await loadPageModule(pendingPath);
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
                 const { default: comp, __pageData } = page;
                 if (!comp) {
                     throw new Error(`Invalid route component: ${comp}`);
                 }
-                route.path = pendingPath;
+                route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD
-                    ? markRaw(JSON.parse(__pageData))
-                    : readonly(JSON.parse(__pageData));
+                    ? markRaw(__pageData)
+                    : readonly(__pageData);
                 if (inBrowser) {
                     nextTick(() => {
                         if (targetLoc.hash && !scrollPosition) {
@@ -77,7 +68,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
         }
         catch (err) {
-            if (!err.message.match(/fetch/)) {
+            if (!/fetch/.test(err.message) && !/^\/404(\.html|\/)?$/.test(href)) {
                 console.error(err);
             }
             // retry on fetch fail: the page to hash map may have been invalidated
@@ -94,7 +85,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
-                route.path = pendingPath;
+                route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = fallbackComponent ? markRaw(fallbackComponent) : null;
                 route.data = notFoundPageData;
             }
@@ -104,7 +95,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
         window.addEventListener('click', (e) => {
             const link = e.target.closest('a');
             if (link) {
-                const { href, protocol, hostname, pathname, hash, target } = link;
+                const { href, origin, pathname, hash, search, target } = link;
                 const currentUrl = window.location;
                 const extMatch = pathname.match(/\.\w+$/);
                 // only intercept inbound links
@@ -113,11 +104,12 @@ export function createRouter(loadPageModule, fallbackComponent) {
                     !e.altKey &&
                     !e.metaKey &&
                     target !== `_blank` &&
-                    protocol === currentUrl.protocol &&
-                    hostname === currentUrl.hostname &&
+                    origin === currentUrl.origin &&
+                    // don't intercept if non-html extension is present
                     !(extMatch && extMatch[0] !== '.html')) {
                     e.preventDefault();
-                    if (pathname === currentUrl.pathname) {
+                    if (pathname === currentUrl.pathname &&
+                        search === currentUrl.search) {
                         // scroll between hash anchors in the same page
                         if (hash && hash !== currentUrl.hash) {
                             history.pushState(null, '', hash);
@@ -140,6 +132,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             e.preventDefault();
         });
     }
+    handleHMR(route);
     return {
         route,
         go
@@ -150,7 +143,6 @@ export function useRouter() {
     if (!router) {
         throw new Error('useRouter() is called without provider.');
     }
-    // @ts-ignore
     return router;
 }
 export function useRoute() {
@@ -190,3 +182,19 @@ function scrollTo(el, hash, smooth = false) {
         }
     }
 }
+function handleHMR(route) {
+    // 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)) {
+                route.data = payload.pageData;
+            }
+        });
+    }
+}
+function shouldHotReload(payload) {
+    const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '');
+    const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '');
+    return payloadPath === locationPath;
+}

package/dist/client/app/ssr.js

@@ -0,0 +1,9 @@
+// entry for SSR
+import { createApp } from './index.js';
+// @ts-ignore pending vue release
+import { renderToString } from 'vue/server-renderer';
+export async function render(path) {
+    const { app, router } = createApp();
+    await router.go(path);
+    return renderToString(app);
+}

package/dist/client/app/utils.js

@@ -1,5 +1,5 @@
-import { siteDataRef } from './data';
-import { inBrowser, EXTERNAL_URL_RE } from '../shared';
+import { siteDataRef } from './data.js';
+import { inBrowser, EXTERNAL_URL_RE } from '../shared.js';
 export { inBrowser };
 /**
  * Join two paths by resolving the slash collision.
@@ -31,7 +31,8 @@ export function pathToFile(path) {
         // /foo/bar.html -> ./foo_bar.md
         if (inBrowser) {
             const base = import.meta.env.BASE_URL;
-            pagePath = pagePath.slice(base.length).replace(/\//g, '_') + '.md';
+            pagePath =
+                (pagePath.slice(base.length).replace(/\//g, '_') || 'index') + '.md';
             // client production build needs to account for page hash, which is
             // injected directly in the page's html
             const pageHash = __VP_HASH_MAP__[pagePath.toLowerCase()];