vitepress 0.22.3 → 1.0.0-alpha.2

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,3 @@
-// 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" />

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/composables/head.js

@@ -1,4 +1,5 @@
 import { watchEffect } from 'vue';
+import { createTitle } from '../../shared';
 export function useUpdateHead(route, siteDataByRouteRef) {
     let managedHeadTags = [];
     let isFirstUpdate = true;
@@ -50,11 +51,10 @@ export function useUpdateHead(route, siteDataByRouteRef) {
     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.title = createTitle(siteData, pageData);
         document
             .querySelector(`meta[name=description]`)
             .setAttribute('content', pageDescription || siteData.description);

package/dist/client/app/data.js

@@ -1,6 +1,6 @@
 import { shallowRef, readonly, computed, inject } from 'vue';
 import serializedSiteData from '@siteData';
-import { resolveSiteDataByRoute } from '../shared';
+import { resolveSiteDataByRoute, createTitle } from '../shared';
 import { withBase } from './utils';
 export const dataSymbol = Symbol();
 export const siteDataRef = shallowRef(parse(serializedSiteData));
@@ -29,9 +29,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,9 +1,9 @@
-import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
+import { createApp as createClientApp, createSSRApp, 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 { useUpdateHead } from './composables/head';
-import Theme from '/@theme/index';
 import { usePrefetch } from './composables/preFetch';
 import { dataSymbol, initData } from './data';
 import { Content } from './components/Content';
@@ -28,21 +28,13 @@ const VitePressApp = {
 };
 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);
-    }
     // 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 +48,11 @@ export function createApp() {
             siteData: siteDataRef
         });
     }
-    return { app, router };
+    // setup devtools in dev mode
+    if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) {
+        import('./devtools').then(({ setupDevtools }) => setupDevtools(app, router, data));
+    }
+    return { app, router, data };
 }
 function newApp() {
     return import.meta.env.PROD
@@ -77,36 +73,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 { notFoundPageData } from '../shared';
+import { inBrowser, withBase } from './utils';
 import { siteDataRef } from './data';
 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,
@@ -51,11 +44,11 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 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 +70,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
         }
         catch (err) {
-            if (!err.message.match(/fetch/)) {
+            if (!err.message.match(/fetch/) && !href.match(/^[\\/]404\.html$/)) {
                 console.error(err);
             }
             // retry on fetch fail: the page to hash map may have been invalidated
@@ -94,7 +87,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;
             }
@@ -140,6 +133,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             e.preventDefault();
         });
     }
+    handleHMR(route);
     return {
         route,
         go
@@ -190,3 +184,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/index.d.ts

@@ -1,129 +1,121 @@
-import { AllowedComponentProps } from 'vue';
-import { App } from 'vue';
-import { Component } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentOptions } from 'vue';
-import { ComponentOptionsMixin } from 'vue';
-import { DefineComponent } from 'vue';
-import { EmitsOptions } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { Ref } from 'vue';
-import { RendererElement } from 'vue';
-import { RendererNode } from 'vue';
-import { VNode } from 'vue';
-import { VNodeProps } from 'vue';
-
-export declare const Content: DefineComponent<    {}, () => VNode<RendererNode, RendererElement, {
-[key: string]: any;
-}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {}>>, {}>;
-
-export declare const Debug: ComponentOptions<{}, any, any, any, any, any, any, any>;
-
-export declare interface EnhanceAppContext {
-    app: App;
-    router: Router;
-    siteData: Ref<SiteData>;
-}
-
-export declare type HeadConfig =
-| [string, Record<string, string>]
-| [string, Record<string, string>, string]
-
-export declare interface Header {
-    level: number
-    title: string
-    slug: string
-}
-
-export declare const inBrowser: boolean;
-
-export declare interface LocaleConfig {
-    lang: string
-    title?: string
-    description?: string
-    head?: HeadConfig[]
-    label?: string
-    selectText?: string
-}
-
-export declare interface PageData {
-    relativePath: string
-    title: string
-    description: string
-    headers: Header[]
-    frontmatter: Record<string, any>
-    lastUpdated?: number
-}
-
-export declare interface Route {
-    path: string;
-    data: PageData;
-    component: Component | null;
-}
-
-export declare interface Router {
-    route: Route;
-    go: (href?: string) => Promise<void>;
-}
-
-export declare interface SiteData<ThemeConfig = any> {
-    base: string
-    /**
-     * Language of the site as it should be set on the `html` element.
-     * @example `en-US`, `zh-CN`
-     */
-    lang: string
-    title: string
-    description: string
-    head: HeadConfig[]
-    themeConfig: ThemeConfig
-    scrollOffset: number | string
-    locales: Record<string, LocaleConfig>
-    /**
-     * Available locales for the site when it has defined `locales` in its
-     * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or
-     * `/zh/`.
-     */
-    langs: Record<
-    string,
-        {
-        /**
-         * Lang attribute as set on the `<html>` element.
-         * @example `en-US`, `zh-CN`
-         */
-        lang: string
-        /**
-         * Label to display in the language menu.
-         * @example `English`, `简体中文`
-         */
-        label: string
-    }
-    >
-}
-
-export declare interface Theme {
-    Layout: Component;
-    NotFound?: Component;
-    enhanceApp?: (ctx: EnhanceAppContext) => void;
-}
-
-export declare function useData<T = any>(): VitePressData<T>;
-
-export declare function useRoute(): Route;
-
-export declare function useRouter(): Router;
-
-export declare interface VitePressData<T = any> {
-    site: Ref<SiteData<T>>;
-    page: Ref<PageData>;
-    theme: Ref<T>;
-    frontmatter: Ref<PageData['frontmatter']>;
-    title: Ref<string>;
-    description: Ref<string>;
-    lang: Ref<string>;
-    localePath: Ref<string>;
-}
-
-export declare function withBase(path: string): string;
-
-export { }
+import * as vue from 'vue';
+import { Component, Ref, App } from 'vue';
+
+// types shared between server and client
+
+
+interface PageData {
+  relativePath: string
+  title: string
+  titleTemplate?: string | boolean
+  description: string
+  headers: Header[]
+  frontmatter: Record<string, any>
+  lastUpdated?: number
+}
+
+interface Header {
+  level: number
+  title: string
+  slug: string
+}
+
+interface SiteData<ThemeConfig = any> {
+  base: string
+
+  /**
+   * Language of the site as it should be set on the `html` element.
+   *
+   * @example `en-US`, `zh-CN`
+   */
+  lang: string
+
+  title: string
+  titleTemplate?: string | boolean
+  description: string
+  head: HeadConfig[]
+  appearance: boolean
+  themeConfig: ThemeConfig
+  scrollOffset: number | string
+  locales: Record<string, LocaleConfig>
+
+  /**
+   * Available locales for the site when it has defined `locales` in its
+   * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or
+   * `/zh/`.
+   */
+  langs: Record<
+    string,
+    {
+      /**
+       * Lang attribute as set on the `<html>` element.
+       * @example `en-US`, `zh-CN`
+       */
+      lang: string
+      /**
+       * Label to display in the language menu.
+       * @example `English`, `简体中文`
+       */
+      label: string
+    }
+  >
+}
+
+type HeadConfig =
+  | [string, Record<string, string>]
+  | [string, Record<string, string>, string]
+
+interface LocaleConfig {
+  lang: string
+  title?: string
+  titleTemplate?: string | boolean
+  description?: string
+  head?: HeadConfig[]
+  label?: string
+  selectText?: string
+}
+
+declare const inBrowser: boolean;
+
+interface Route {
+    path: string;
+    data: PageData;
+    component: Component | null;
+}
+interface Router {
+    route: Route;
+    go: (href?: string) => Promise<void>;
+}
+declare function useRouter(): Router;
+declare function useRoute(): Route;
+
+interface VitePressData<T = any> {
+    site: Ref<SiteData<T>>;
+    page: Ref<PageData>;
+    theme: Ref<T>;
+    frontmatter: Ref<PageData['frontmatter']>;
+    title: Ref<string>;
+    description: Ref<string>;
+    lang: Ref<string>;
+    localePath: Ref<string>;
+}
+declare function useData<T = any>(): VitePressData<T>;
+
+interface EnhanceAppContext {
+    app: App;
+    router: Router;
+    siteData: Ref<SiteData>;
+}
+interface Theme {
+    Layout: Component;
+    NotFound?: Component;
+    enhanceApp?: (ctx: EnhanceAppContext) => void;
+}
+
+declare function withBase(path: string): string;
+
+declare const Content: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
+
+export { Content, EnhanceAppContext, HeadConfig, Header, LocaleConfig, PageData, Route, Router, SiteData, Theme, VitePressData, inBrowser, useData, useRoute, useRouter, withBase };

package/dist/client/index.js

@@ -7,6 +7,3 @@ export { useRouter, useRoute } from './app/router';
 export { inBrowser, withBase } from './app/utils';
 // components
 export { Content } from './app/components/Content';
-import _Debug from './app/components/Debug.vue';
-const Debug = _Debug;
-export { Debug };

package/dist/client/shared.js

@@ -1,6 +1,15 @@
 export const EXTERNAL_URL_RE = /^https?:/i;
+export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined';
+export const notFoundPageData = {
+    relativePath: '',
+    title: '404',
+    description: 'Not Found',
+    headers: [],
+    frontmatter: {},
+    lastUpdated: 0
+};
 function findMatchRoot(route, roots) {
     // first match to the routes with the most deep level.
     roots.sort((a, b) => {
@@ -52,6 +61,27 @@ export function resolveSiteDataByRoute(siteData, route) {
         langs: createLangDictionary(siteData)
     });
 }
+/**
+ * Create the page title string based on configs.
+ */
+export function createTitle(siteData, pageData) {
+    const title = pageData.title || siteData.title;
+    const template = pageData.titleTemplate ?? siteData.titleTemplate;
+    const templateString = createTitleTemplate(siteData.title, template);
+    return `${title}${templateString}`;
+}
+function createTitleTemplate(siteTitle, template) {
+    if (template === false) {
+        return '';
+    }
+    if (template === true || template === undefined) {
+        return ` | ${siteTitle}`;
+    }
+    if (siteTitle === template) {
+        return '';
+    }
+    return ` | ${template}`;
+}
 /**
  * Clean up the route by removing the `base` path if it's set in config.
  */