@vuepress/client 2.0.0-beta.29 → 2.0.0-beta.35

package/lib/app.js

@@ -1,24 +1,19 @@
 import { clientAppEnhances } from '@internal/clientAppEnhances';
 import { clientAppRootComponents } from '@internal/clientAppRootComponents';
 import { clientAppSetups } from '@internal/clientAppSetups';
-import { pagesComponents } from '@internal/pagesComponents';
-import { pagesRoutes } from '@internal/pagesRoutes';
-import { removeEndingSlash } from '@vuepress/shared';
 import { createApp, createSSRApp, h } from 'vue';
-import { createMemoryHistory, createRouter, createWebHistory, RouterView, START_LOCATION, } from 'vue-router';
-import { pageData, resolvePageData, setupUpdateHead, siteData, } from './composables';
-import { provideGlobalComputed } from './provideGlobalComputed';
-import { registerGlobalComponents } from './registerGlobalComponents';
+import { RouterView } from 'vue-router';
+import { siteData } from './composables';
+import { createVueRouter } from './router';
+import { setupDevtools } from './setupDevtools';
+import { setupGlobalComponents } from './setupGlobalComponents';
+import { setupGlobalComputed } from './setupGlobalComputed';
+import { setupUpdateHead } from './setupUpdateHead';
 /**
  * - use `createApp` in dev mode
  * - use `createSSRApp` in build mode
  */
 const appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp;
-/**
- * - use `createWebHistory` in dev mode and build mode client bundle
- * - use `createMemoryHistory` in build mode server bundle
- */
-const historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
 export const createVueApp = async () => {
     // create vue app
     const app = appCreator({
@@ -36,33 +31,15 @@ export const createVueApp = async () => {
             ];
         },
     });
-    // create vue-router
-    const router = createRouter({
-        // TODO: it might be an issue of vue-router that have to remove the ending slash
-        history: historyCreator(removeEndingSlash(siteData.value.base)),
-        routes: pagesRoutes,
-        scrollBehavior: (to, from, savedPosition) => {
-            if (savedPosition)
-                return savedPosition;
-            if (to.hash)
-                return { el: to.hash };
-            return { top: 0 };
-        },
-    });
-    router.beforeResolve(async (to, from) => {
-        var _a;
-        if (to.path !== from.path || from === START_LOCATION) {
-            // ensure page data and page component have been loaded
-            ;
-            [pageData.value] = await Promise.all([
-                resolvePageData(to.name),
-                (_a = pagesComponents[to.name]) === null || _a === void 0 ? void 0 : _a.__asyncLoader(),
-            ]);
-        }
-    });
-    // global computed and global components
-    provideGlobalComputed(app, router);
-    registerGlobalComponents(app);
+    // create vue-router instance
+    const router = createVueRouter();
+    // global components and computed
+    setupGlobalComponents(app);
+    const globalComputed = setupGlobalComputed(app, router);
+    // setup devtools in dev mode
+    if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+        setupDevtools(app, globalComputed);
+    }
     // invoke all clientAppEnhances
     for (const clientAppEnhance of clientAppEnhances) {
         await clientAppEnhance({ app, router, siteData });

package/lib/components/ClientOnly.d.ts

@@ -1,3 +1,3 @@
 export declare const ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>[] | null | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/lib/components/Vuepress.d.ts

@@ -3,4 +3,4 @@
  */
 export declare const Vuepress: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/lib/composables/pageData.d.ts

@@ -5,6 +5,10 @@ export type { PageData };
  * Ref wrapper of `PageData`
  */
 export declare type PageDataRef<T extends Record<any, any> = Record<never, never>> = Ref<PageData<T>>;
+/**
+ * Empty page data to be used as the fallback value
+ */
+export declare const pageDataEmpty: PageData<Record<never, never>>;
 /**
  * Global page data ref
  */
@@ -13,7 +17,3 @@ export declare const pageData: PageDataRef;
  * Returns the ref of the data of current page
  */
 export declare const usePageData: <T extends Record<any, any> = Record<never, never>>() => PageDataRef<T>;
-/**
- * Resolve page data according to page key
- */
-export declare const resolvePageData: (pageKey: string) => Promise<PageData>;

package/lib/composables/pageData.js

@@ -3,7 +3,7 @@ import { pagesData } from './pagesData';
 /**
  * Empty page data to be used as the fallback value
  */
-const pageDataEmpty = readonly({
+export const pageDataEmpty = readonly({
     key: '',
     path: '',
     title: '',
@@ -20,17 +20,6 @@ export const pageData = ref(pageDataEmpty);
  * Returns the ref of the data of current page
  */
 export const usePageData = () => pageData;
-/**
- * Resolve page data according to page key
- */
-export const resolvePageData = async (pageKey) => {
-    const pageDataResolver = pagesData.value[pageKey];
-    if (!pageDataResolver) {
-        return pageDataEmpty;
-    }
-    const pageData = await pageDataResolver();
-    return pageData !== null && pageData !== void 0 ? pageData : pageDataEmpty;
-};
 if (import.meta.webpackHot || import.meta.hot) {
     // reuse vue HMR runtime
     __VUE_HMR_RUNTIME__.updatePageData = (data) => {

package/lib/composables/pageFrontmatter.d.ts

@@ -1,4 +1,4 @@
-import type { PageData, PageFrontmatter } from '@vuepress/shared';
+import type { PageFrontmatter } from '@vuepress/shared';
 import type { ComputedRef, InjectionKey } from 'vue';
 export type { PageFrontmatter };
 /**
@@ -13,7 +13,3 @@ export declare const pageFrontmatterSymbol: InjectionKey<PageFrontmatterRef>;
  * Returns the ref of the frontmatter of current page
  */
 export declare const usePageFrontmatter: <T extends Record<any, any> = Record<string, unknown>>() => PageFrontmatterRef<T>;
-/**
- * Resolve page frontmatter from page data
- */
-export declare const resolvePageFrontmatter: (pageData: PageData) => PageFrontmatter;

package/lib/composables/pageFrontmatter.js

@@ -13,7 +13,3 @@ export const usePageFrontmatter = () => {
     }
     return pageFrontmatter;
 };
-/**
- * Resolve page frontmatter from page data
- */
-export const resolvePageFrontmatter = (pageData) => pageData.frontmatter;

package/lib/composables/pageHead.d.ts

@@ -1,8 +1,5 @@
 import type { HeadConfig } from '@vuepress/shared';
 import type { ComputedRef, InjectionKey } from 'vue';
-import type { PageFrontmatter } from './pageFrontmatter';
-import type { PageHeadTitle } from './pageHeadTitle';
-import type { SiteLocaleData } from './siteLocaleData';
 /**
  * Page head config, which would be used for generate html tags in `<head>`
  */
@@ -19,9 +16,3 @@ export declare const pageHeadSymbol: InjectionKey<PageHeadRef>;
  * Returns the ref of the head config of current page
  */
 export declare const usePageHead: () => PageHeadRef;
-/**
- * Merge the head config in frontmatter and site locale
- *
- * Frontmatter should take priority over site locale
- */
-export declare const resolvePageHead: (headTitle: PageHeadTitle, frontmatter: PageFrontmatter, siteLocale: SiteLocaleData) => HeadConfig[];

package/lib/composables/pageHead.js

@@ -1,4 +1,3 @@
-import { dedupeHead, isArray, isString } from '@vuepress/shared';
 import { inject } from 'vue';
 /**
  * Injection key for page head
@@ -14,20 +13,3 @@ export const usePageHead = () => {
     }
     return pageHead;
 };
-/**
- * Merge the head config in frontmatter and site locale
- *
- * Frontmatter should take priority over site locale
- */
-export const resolvePageHead = (headTitle, frontmatter, siteLocale) => {
-    const description = isString(frontmatter.description)
-        ? frontmatter.description
-        : siteLocale.description;
-    const head = [
-        ...(isArray(frontmatter.head) ? frontmatter.head : []),
-        ...siteLocale.head,
-        ['title', {}, headTitle],
-        ['meta', { name: 'description', content: description }],
-    ];
-    return dedupeHead(head);
-};

package/lib/composables/pageHeadTitle.d.ts

@@ -1,6 +1,4 @@
 import type { ComputedRef, InjectionKey } from 'vue';
-import type { PageData } from './pageData';
-import type { SiteLocaleData } from './siteLocaleData';
 /**
  * Page head title, which would be used as the content of `head > title` tag
  */
@@ -17,9 +15,3 @@ export declare const pageHeadTitleSymbol: InjectionKey<PageHeadTitleRef>;
  * Returns the ref of the head title of current page
  */
 export declare const usePageHeadTitle: () => PageHeadTitleRef;
-/**
- * Resolve the content of page head title
- *
- * It would be used as the content of the `<title>` tag
- */
-export declare const resolvePageHeadTitle: (page: PageData, siteLocale: SiteLocaleData) => PageHeadTitle;

package/lib/composables/pageHeadTitle.js

@@ -13,9 +13,3 @@ export const usePageHeadTitle = () => {
     }
     return pageHeadTitle;
 };
-/**
- * Resolve the content of page head title
- *
- * It would be used as the content of the `<title>` tag
- */
-export const resolvePageHeadTitle = (page, siteLocale) => `${page.title ? `${page.title} | ` : ``}${siteLocale.title}`;

package/lib/composables/pageLang.d.ts

@@ -1,4 +1,3 @@
-import type { PageData } from '@vuepress/shared';
 import type { ComputedRef, InjectionKey } from 'vue';
 /**
  * Page language
@@ -16,9 +15,3 @@ export declare const pageLangSymbol: InjectionKey<PageLangRef>;
  * Returns the ref of the language of current page
  */
 export declare const usePageLang: () => PageLangRef;
-/**
- * Resolve page language from page data
- *
- * It would be used as the `lang` attribute of `<html>` tag
- */
-export declare const resolvePageLang: (pageData: PageData) => PageLang;

package/lib/composables/pageLang.js

@@ -13,9 +13,3 @@ export const usePageLang = () => {
     }
     return pageLang;
 };
-/**
- * Resolve page language from page data
- *
- * It would be used as the `lang` attribute of `<html>` tag
- */
-export const resolvePageLang = (pageData) => pageData.lang || 'en';

package/lib/composables/pagesData.d.ts

@@ -6,7 +6,7 @@ import type { Ref } from 'vue';
  * The key is page key, and the value is an async function that
  * returns the page data
  */
-export declare type PagesData = Record<string, () => Promise<PageData>>;
+export declare type PagesData = Record<string, (() => Promise<PageData>) | undefined>;
 /**
  * Ref wrapper of `PagesData`
  */

package/lib/composables/routeLocale.d.ts

@@ -1,4 +1,3 @@
-import type { SiteData } from '@vuepress/shared';
 import type { ComputedRef, InjectionKey } from 'vue';
 /**
  * Route locale path
@@ -16,7 +15,3 @@ export declare const routeLocaleSymbol: InjectionKey<RouteLocaleRef>;
  * Returns the ref of the route locale path of current page
  */
 export declare const useRouteLocale: () => RouteLocaleRef;
-/**
- * Resolve locale path according to route path and locales config
- */
-export declare const resolveRouteLocale: (locales: SiteData['locales'], routePath: string) => RouteLocale;

package/lib/composables/routeLocale.js

@@ -1,4 +1,3 @@
-import { resolveLocalePath } from '@vuepress/shared';
 import { inject } from 'vue';
 /**
  * Injection key for page route locale path
@@ -14,7 +13,3 @@ export const useRouteLocale = () => {
     }
     return routeLocale;
 };
-/**
- * Resolve locale path according to route path and locales config
- */
-export const resolveRouteLocale = (locales, routePath) => resolveLocalePath(locales, routePath);

package/lib/composables/siteLocaleData.d.ts

@@ -1,6 +1,5 @@
 import type { SiteData } from '@vuepress/shared';
 import type { ComputedRef, InjectionKey } from 'vue';
-import type { RouteLocale } from './routeLocale';
 /**
  * Site data of current locale
  */
@@ -17,9 +16,3 @@ export declare const siteLocaleDataSymbol: InjectionKey<SiteLocaleDataRef>;
  * Returns the ref of the site data of current locale
  */
 export declare const useSiteLocaleData: () => SiteLocaleDataRef;
-/**
- * Resolve site data for specific locale
- *
- * It would merge the locales fields to the root fields
- */
-export declare const resolveSiteLocaleData: (site: SiteData, routeLocale: RouteLocale) => SiteLocaleData;

package/lib/composables/siteLocaleData.js

@@ -13,12 +13,3 @@ export const useSiteLocaleData = () => {
     }
     return siteLocaleData;
 };
-/**
- * Resolve site data for specific locale
- *
- * It would merge the locales fields to the root fields
- */
-export const resolveSiteLocaleData = (site, routeLocale) => ({
-    ...site,
-    ...site.locales[routeLocale],
-});

package/lib/composables/updateHead.d.ts

@@ -1,4 +1,3 @@
-import type { HeadConfig } from '@vuepress/shared';
 import type { InjectionKey } from 'vue';
 /**
  * A util function to force update `<head>` of current page
@@ -12,15 +11,3 @@ export declare const updateHeadSymbol: InjectionKey<UpdateHead>;
  * Returns the `updateHead` util
  */
 export declare const useUpdateHead: () => UpdateHead;
-/**
- * Auto update head and provide as global util in setup
- */
-export declare const setupUpdateHead: () => void;
-/**
- * Query the matched head tag of head config
- */
-export declare const queryHeadTag: ([tagName, attrs, content,]: HeadConfig) => HTMLElement | null;
-/**
- * Create head tag from head config
- */
-export declare const createHeadTag: ([tagName, attrs, content,]: HeadConfig) => HTMLElement | null;

package/lib/composables/updateHead.js

@@ -1,8 +1,4 @@
-import { isPlainObject, isString } from '@vuepress/shared';
-import { inject, onMounted, provide, ref, useSSRContext, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { usePageHead } from './pageHead';
-import { usePageLang } from './pageLang';
+import { inject } from 'vue';
 /**
  * Injection key for `updateHead` util
  */
@@ -17,100 +13,3 @@ export const useUpdateHead = () => {
     }
     return updateHead;
 };
-/**
- * Auto update head and provide as global util in setup
- */
-export const setupUpdateHead = () => {
-    const route = useRoute();
-    const head = usePageHead();
-    const lang = usePageLang();
-    // ssr-only, extract page meta info to ssrContext
-    if (__VUEPRESS_SSR__) {
-        const ssrContext = useSSRContext();
-        if (ssrContext) {
-            ssrContext.head = head.value;
-            ssrContext.lang = lang.value;
-        }
-        return;
-    }
-    const headTags = ref([]);
-    // load current head tags from DOM
-    const loadHead = () => {
-        head.value.forEach((item) => {
-            const tag = queryHeadTag(item);
-            if (tag) {
-                headTags.value.push(tag);
-            }
-        });
-    };
-    // update html lang attribute and head tags to DOM
-    const updateHead = () => {
-        document.documentElement.lang = lang.value;
-        headTags.value.forEach((item) => {
-            if (item.parentNode === document.head) {
-                document.head.removeChild(item);
-            }
-        });
-        headTags.value.splice(0, headTags.value.length);
-        head.value.forEach((item) => {
-            const tag = createHeadTag(item);
-            if (tag !== null) {
-                document.head.appendChild(tag);
-                headTags.value.push(tag);
-            }
-        });
-    };
-    provide(updateHeadSymbol, updateHead);
-    onMounted(() => {
-        loadHead();
-        updateHead();
-        // only update head on route change
-        watch(() => route.path, () => updateHead());
-    });
-};
-/**
- * Query the matched head tag of head config
- */
-export const queryHeadTag = ([tagName, attrs, content = '',]) => {
-    const attrsSelector = Object.entries(attrs)
-        .map(([key, value]) => {
-        if (isString(value)) {
-            return `[${key}="${value}"]`;
-        }
-        if (value === true) {
-            return `[${key}]`;
-        }
-        return '';
-    })
-        .join('');
-    const selector = `head > ${tagName}${attrsSelector}`;
-    const tags = Array.from(document.querySelectorAll(selector));
-    const matchedTag = tags.find((item) => item.innerText === content);
-    return matchedTag || null;
-};
-/**
- * Create head tag from head config
- */
-export const createHeadTag = ([tagName, attrs, content,]) => {
-    if (!isString(tagName)) {
-        return null;
-    }
-    // create element
-    const tag = document.createElement(tagName);
-    // set attributes
-    if (isPlainObject(attrs)) {
-        Object.entries(attrs).forEach(([key, value]) => {
-            if (isString(value)) {
-                tag.setAttribute(key, value);
-            }
-            else if (value === true) {
-                tag.setAttribute(key, '');
-            }
-        });
-    }
-    // set content
-    if (isString(content)) {
-        tag.appendChild(document.createTextNode(content));
-    }
-    return tag;
-};

package/lib/index.d.ts

@@ -1,7 +1,8 @@
 export type { PageHeader } from '@vuepress/shared';
-export { useRoute, useRouter } from 'vue-router';
-export * from './app';
+export { RouterLink, useRoute, useRouter } from 'vue-router';
 export * from './components';
 export * from './composables';
+export * from './helpers';
 export * from './types';
-export * from './utils';
+export * from './app';
+export * from './resolvers';

package/lib/index.js

@@ -1,6 +1,7 @@
-export { useRoute, useRouter } from 'vue-router';
-export * from './app';
+export { RouterLink, useRoute, useRouter } from 'vue-router';
 export * from './components';
 export * from './composables';
+export * from './helpers';
 export * from './types';
-export * from './utils';
+export * from './app';
+export * from './resolvers';

package/lib/resolvers.d.ts

@@ -0,0 +1,15 @@
+import type { PageData, PageFrontmatter, PageHead, PageHeadTitle, PageLang, RouteLocale, SiteData, SiteLocaleData } from './composables';
+/**
+ * Resolver methods to get global computed
+ *
+ * Users can override corresponding method for advanced customization
+ */
+export declare const resolvers: {
+    resolvePageData: (pageKey: string) => Promise<PageData>;
+    resolvePageFrontmatter: (pageData: PageData) => PageFrontmatter;
+    resolvePageHead: (headTitle: PageHeadTitle, frontmatter: PageFrontmatter, siteLocale: SiteLocaleData) => PageHead;
+    resolvePageHeadTitle: (page: PageData, siteLocale: SiteLocaleData) => PageHeadTitle;
+    resolvePageLang: (pageData: PageData) => PageLang;
+    resolveRouteLocale: (locales: SiteData['locales'], routePath: string) => RouteLocale;
+    resolveSiteLocaleData: (site: SiteData, routeLocale: RouteLocale) => SiteLocaleData;
+};

package/lib/resolvers.js

@@ -0,0 +1,64 @@
+import { dedupeHead, isArray, isString, resolveLocalePath, } from '@vuepress/shared';
+import { reactive } from 'vue';
+import { pageDataEmpty, pagesData } from './composables';
+/**
+ * Resolver methods to get global computed
+ *
+ * Users can override corresponding method for advanced customization
+ */
+export const resolvers = reactive({
+    /**
+     * Resolve page data according to page key
+     */
+    resolvePageData: async (pageKey) => {
+        const pageDataResolver = pagesData.value[pageKey];
+        const pageData = await (pageDataResolver === null || pageDataResolver === void 0 ? void 0 : pageDataResolver());
+        return pageData !== null && pageData !== void 0 ? pageData : pageDataEmpty;
+    },
+    /**
+     * Resolve page frontmatter from page data
+     */
+    resolvePageFrontmatter: (pageData) => pageData.frontmatter,
+    /**
+     * Merge the head config in frontmatter and site locale
+     *
+     * Frontmatter should take priority over site locale
+     */
+    resolvePageHead: (headTitle, frontmatter, siteLocale) => {
+        const description = isString(frontmatter.description)
+            ? frontmatter.description
+            : siteLocale.description;
+        const head = [
+            ...(isArray(frontmatter.head) ? frontmatter.head : []),
+            ...siteLocale.head,
+            ['title', {}, headTitle],
+            ['meta', { name: 'description', content: description }],
+        ];
+        return dedupeHead(head);
+    },
+    /**
+     * Resolve the content of page head title
+     *
+     * It would be used as the content of the `<title>` tag
+     */
+    resolvePageHeadTitle: (page, siteLocale) => `${page.title ? `${page.title} | ` : ``}${siteLocale.title}`,
+    /**
+     * Resolve page language from page data
+     *
+     * It would be used as the `lang` attribute of `<html>` tag
+     */
+    resolvePageLang: (pageData) => pageData.lang || 'en',
+    /**
+     * Resolve locale path according to route path and locales config
+     */
+    resolveRouteLocale: (locales, routePath) => resolveLocalePath(locales, routePath),
+    /**
+     * Resolve site data for specific locale
+     *
+     * It would merge the locales fields to the root fields
+     */
+    resolveSiteLocaleData: (site, routeLocale) => ({
+        ...site,
+        ...site.locales[routeLocale],
+    }),
+});

package/lib/router.d.ts

@@ -0,0 +1,5 @@
+import type { Router } from 'vue-router';
+/**
+ * Create vue-router instance
+ */
+export declare const createVueRouter: () => Router;

package/lib/router.js

@@ -0,0 +1,40 @@
+import { pagesComponents } from '@internal/pagesComponents';
+import { pagesRoutes } from '@internal/pagesRoutes';
+import { removeEndingSlash } from '@vuepress/shared';
+import { createMemoryHistory, createRouter, createWebHistory, START_LOCATION, } from 'vue-router';
+import { pageData, siteData } from './composables';
+import { resolvers } from './resolvers';
+/**
+ * - use `createWebHistory` in dev mode and build mode client bundle
+ * - use `createMemoryHistory` in build mode server bundle
+ */
+const historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
+/**
+ * Create vue-router instance
+ */
+export const createVueRouter = () => {
+    const router = createRouter({
+        // TODO: it might be an issue of vue-router that have to remove the ending slash
+        history: historyCreator(removeEndingSlash(siteData.value.base)),
+        routes: pagesRoutes,
+        scrollBehavior: (to, from, savedPosition) => {
+            if (savedPosition)
+                return savedPosition;
+            if (to.hash)
+                return { el: to.hash };
+            return { top: 0 };
+        },
+    });
+    router.beforeResolve(async (to, from) => {
+        var _a;
+        if (to.path !== from.path || from === START_LOCATION) {
+            // ensure page data and page component have been loaded
+            ;
+            [pageData.value] = await Promise.all([
+                resolvers.resolvePageData(to.name),
+                (_a = pagesComponents[to.name]) === null || _a === void 0 ? void 0 : _a.__asyncLoader(),
+            ]);
+        }
+    });
+    return router;
+};

package/lib/setupDevtools.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vue';
+import type { GlobalComputed } from './setupGlobalComputed';
+export declare const setupDevtools: (app: App, globalComputed: GlobalComputed) => void;

package/lib/setupDevtools.js

@@ -0,0 +1,21 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+export const setupDevtools = (app, globalComputed) => {
+    setupDevtoolsPlugin({
+        app,
+        id: 'org.vuejs.vuepress',
+        label: 'VuePress',
+        packageName: '@vuepress/client',
+        homepage: 'https://v2.vuepress.vuejs.org',
+        logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
+        componentStateTypes: ['VuePress'],
+    }, (api) => {
+        api.on.inspectComponent((payload) => {
+            payload.instanceData.state.push(...Object.entries(globalComputed).map(([name, item]) => ({
+                type: 'VuePress',
+                key: name,
+                editable: false,
+                value: item.value,
+            })));
+        });
+    });
+};

package/lib/{registerGlobalComponents.d.ts → setupGlobalComponents.d.ts}

@@ -2,4 +2,4 @@ import type { App } from 'vue';
 /**
  * Register global built-in components
  */
-export declare const registerGlobalComponents: (app: App) => void;
+export declare const setupGlobalComponents: (app: App) => void;

package/lib/{registerGlobalComponents.js → setupGlobalComponents.js}

@@ -2,7 +2,7 @@ import { ClientOnly, Content } from './components';
 /**
  * Register global built-in components
  */
-export const registerGlobalComponents = (app) => {
+export const setupGlobalComponents = (app) => {
     /* eslint-disable vue/match-component-file-name */
     app.component('ClientOnly', ClientOnly);
     app.component('Content', Content);

package/lib/setupGlobalComputed.d.ts

@@ -0,0 +1,34 @@
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+import type { PageData, PageDataRef, PageFrontmatter, PageFrontmatterRef, PageHead, PageHeadRef, PageHeadTitle, PageHeadTitleRef, PageLang, PageLangRef, RouteLocale, RouteLocaleRef, SiteData, SiteDataRef, SiteLocaleData, SiteLocaleDataRef } from './composables';
+import { withBase } from './helpers';
+/**
+ * Vuepress client global computed
+ */
+export interface GlobalComputed {
+    pageData: PageDataRef;
+    pageFrontmatter: PageFrontmatterRef;
+    pageHead: PageHeadRef;
+    pageHeadTitle: PageHeadTitleRef;
+    pageLang: PageLangRef;
+    routeLocale: RouteLocaleRef;
+    siteData: SiteDataRef;
+    siteLocaleData: SiteLocaleDataRef;
+}
+/**
+ * Create and provide global computed
+ */
+export declare const setupGlobalComputed: (app: App, router: Router) => GlobalComputed;
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $frontmatter: PageFrontmatter;
+        $head: PageHead;
+        $headTitle: PageHeadTitle;
+        $lang: PageLang;
+        $page: PageData;
+        $routeLocale: RouteLocale;
+        $site: SiteData;
+        $siteLocale: SiteLocaleData;
+        $withBase: typeof withBase;
+    }
+}

package/lib/setupGlobalComputed.js

@@ -0,0 +1,45 @@
+import { computed } from 'vue';
+import { pageData, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, routeLocaleSymbol, siteData, siteLocaleDataSymbol, } from './composables';
+import { withBase } from './helpers';
+import { resolvers } from './resolvers';
+/**
+ * Create and provide global computed
+ */
+export const setupGlobalComputed = (app, router) => {
+    // create global computed
+    const routeLocale = computed(() => resolvers.resolveRouteLocale(siteData.value.locales, router.currentRoute.value.path));
+    const siteLocaleData = computed(() => resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value));
+    const pageFrontmatter = computed(() => resolvers.resolvePageFrontmatter(pageData.value));
+    const pageHeadTitle = computed(() => resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value));
+    const pageHead = computed(() => resolvers.resolvePageHead(pageHeadTitle.value, pageFrontmatter.value, siteLocaleData.value));
+    const pageLang = computed(() => resolvers.resolvePageLang(pageData.value));
+    // provide global computed
+    app.provide(routeLocaleSymbol, routeLocale);
+    app.provide(siteLocaleDataSymbol, siteLocaleData);
+    app.provide(pageFrontmatterSymbol, pageFrontmatter);
+    app.provide(pageHeadTitleSymbol, pageHeadTitle);
+    app.provide(pageHeadSymbol, pageHead);
+    app.provide(pageLangSymbol, pageLang);
+    // provide global helpers
+    Object.defineProperties(app.config.globalProperties, {
+        $frontmatter: { get: () => pageFrontmatter.value },
+        $head: { get: () => pageHead.value },
+        $headTitle: { get: () => pageHeadTitle.value },
+        $lang: { get: () => pageLang.value },
+        $page: { get: () => pageData.value },
+        $routeLocale: { get: () => routeLocale.value },
+        $site: { get: () => siteData.value },
+        $siteLocale: { get: () => siteLocaleData.value },
+        $withBase: { get: () => withBase },
+    });
+    return {
+        pageData,
+        pageFrontmatter,
+        pageHead,
+        pageHeadTitle,
+        pageLang,
+        routeLocale,
+        siteData,
+        siteLocaleData,
+    };
+};

package/lib/setupUpdateHead.d.ts

@@ -0,0 +1,13 @@
+import type { HeadConfig } from '@vuepress/shared';
+/**
+ * Auto update head and provide as global util
+ */
+export declare const setupUpdateHead: () => void;
+/**
+ * Query the matched head tag of head config
+ */
+export declare const queryHeadTag: ([tagName, attrs, content,]: HeadConfig) => HTMLElement | null;
+/**
+ * Create head tag from head config
+ */
+export declare const createHeadTag: ([tagName, attrs, content,]: HeadConfig) => HTMLElement | null;

package/lib/setupUpdateHead.js

@@ -0,0 +1,101 @@
+import { isPlainObject, isString } from '@vuepress/shared';
+import { onMounted, provide, ref, useSSRContext, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { updateHeadSymbol, usePageHead, usePageLang } from './composables';
+/**
+ * Auto update head and provide as global util
+ */
+export const setupUpdateHead = () => {
+    const route = useRoute();
+    const head = usePageHead();
+    const lang = usePageLang();
+    // ssr-only, extract page meta info to ssrContext
+    if (__VUEPRESS_SSR__) {
+        const ssrContext = useSSRContext();
+        if (ssrContext) {
+            ssrContext.head = head.value;
+            ssrContext.lang = lang.value;
+        }
+        return;
+    }
+    const headTags = ref([]);
+    // load current head tags from DOM
+    const loadHead = () => {
+        head.value.forEach((item) => {
+            const tag = queryHeadTag(item);
+            if (tag) {
+                headTags.value.push(tag);
+            }
+        });
+    };
+    // update html lang attribute and head tags to DOM
+    const updateHead = () => {
+        document.documentElement.lang = lang.value;
+        headTags.value.forEach((item) => {
+            if (item.parentNode === document.head) {
+                document.head.removeChild(item);
+            }
+        });
+        headTags.value.splice(0, headTags.value.length);
+        head.value.forEach((item) => {
+            const tag = createHeadTag(item);
+            if (tag !== null) {
+                document.head.appendChild(tag);
+                headTags.value.push(tag);
+            }
+        });
+    };
+    provide(updateHeadSymbol, updateHead);
+    onMounted(() => {
+        loadHead();
+        updateHead();
+        // only update head on route change
+        watch(() => route.path, () => updateHead());
+    });
+};
+/**
+ * Query the matched head tag of head config
+ */
+export const queryHeadTag = ([tagName, attrs, content = '',]) => {
+    const attrsSelector = Object.entries(attrs)
+        .map(([key, value]) => {
+        if (isString(value)) {
+            return `[${key}="${value}"]`;
+        }
+        if (value === true) {
+            return `[${key}]`;
+        }
+        return '';
+    })
+        .join('');
+    const selector = `head > ${tagName}${attrsSelector}`;
+    const tags = Array.from(document.querySelectorAll(selector));
+    const matchedTag = tags.find((item) => item.innerText === content);
+    return matchedTag || null;
+};
+/**
+ * Create head tag from head config
+ */
+export const createHeadTag = ([tagName, attrs, content,]) => {
+    if (!isString(tagName)) {
+        return null;
+    }
+    // create element
+    const tag = document.createElement(tagName);
+    // set attributes
+    if (isPlainObject(attrs)) {
+        Object.entries(attrs).forEach(([key, value]) => {
+            if (isString(value)) {
+                tag.setAttribute(key, value);
+            }
+            else if (value === true) {
+                tag.setAttribute(key, '');
+            }
+        });
+    }
+    // set content
+    if (isString(content)) {
+        tag.appendChild(document.createTextNode(content));
+    }
+    return tag;
+};

package/lib/types/index.d.ts

@@ -1,7 +1,2 @@
 export * from './clientAppEnhance';
 export * from './clientAppSetup';
-declare module 'vue-router' {
-    interface RouteMeta {
-        title?: string;
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-beta.29",
+  "version": "2.0.0-beta.35",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -29,16 +29,17 @@
     "copy": "cpx \"src/**/*.{d.ts,css}\" lib"
   },
   "dependencies": {
-    "@vuepress/shared": "2.0.0-beta.28",
-    "vue": "^3.2.24",
+    "@vue/devtools-api": "^6.0.0-beta.21.1",
+    "@vuepress/shared": "2.0.0-beta.35",
+    "vue": "^3.2.28",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.3",
-    "vite": "^2.7.1"
+    "vite": "^2.7.13"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2c6eb4270f96b6351cd1f565798bed1f662a6bb2"
+  "gitHead": "4bf1c55b6fb863c9251aa80178d5bc6475f5b315"
 }

package/types.d.ts

@@ -2,3 +2,5 @@ declare const __VUEPRESS_VERSION__: string
 declare const __VUEPRESS_DEV__: boolean
 declare const __VUEPRESS_SSR__: boolean
 declare const __VUE_HMR_RUNTIME__: Record<string, any>
+declare const __VUE_OPTIONS_API__: boolean
+declare const __VUE_PROD_DEVTOOLS__: boolean

package/lib/provideGlobalComputed.d.ts

@@ -1,20 +0,0 @@
-import type { App } from 'vue';
-import type { Router } from 'vue-router';
-import type { PageData, PageFrontmatter, PageHeadTitle, PageLang, RouteLocale, SiteData, SiteLocaleData } from './composables';
-import { withBase } from './utils';
-/**
- * Create and provide global computed
- */
-export declare const provideGlobalComputed: (app: App, router: Router) => void;
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $frontmatter: PageFrontmatter;
-        $headTitle: PageHeadTitle;
-        $lang: PageLang;
-        $page: PageData;
-        $routeLocale: RouteLocale;
-        $site: SiteData;
-        $siteLocale: SiteLocaleData;
-        $withBase: typeof withBase;
-    }
-}

package/lib/provideGlobalComputed.js

@@ -1,33 +0,0 @@
-import { computed } from 'vue';
-import { pageData, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, resolvePageFrontmatter, resolvePageHead, resolvePageHeadTitle, resolvePageLang, resolveRouteLocale, resolveSiteLocaleData, routeLocaleSymbol, siteData, siteLocaleDataSymbol, } from './composables';
-import { withBase } from './utils';
-/**
- * Create and provide global computed
- */
-export const provideGlobalComputed = (app, router) => {
-    // create global computed
-    const routeLocale = computed(() => resolveRouteLocale(siteData.value.locales, router.currentRoute.value.path));
-    const siteLocaleData = computed(() => resolveSiteLocaleData(siteData.value, routeLocale.value));
-    const pageFrontmatter = computed(() => resolvePageFrontmatter(pageData.value));
-    const pageHeadTitle = computed(() => resolvePageHeadTitle(pageData.value, siteLocaleData.value));
-    const pageHead = computed(() => resolvePageHead(pageHeadTitle.value, pageFrontmatter.value, siteLocaleData.value));
-    const pageLang = computed(() => resolvePageLang(pageData.value));
-    // provide global computed
-    app.provide(routeLocaleSymbol, routeLocale);
-    app.provide(siteLocaleDataSymbol, siteLocaleData);
-    app.provide(pageFrontmatterSymbol, pageFrontmatter);
-    app.provide(pageHeadTitleSymbol, pageHeadTitle);
-    app.provide(pageHeadSymbol, pageHead);
-    app.provide(pageLangSymbol, pageLang);
-    // provide global helpers
-    Object.defineProperties(app.config.globalProperties, {
-        $frontmatter: { get: () => pageFrontmatter.value },
-        $headTitle: { get: () => pageHeadTitle.value },
-        $lang: { get: () => pageLang.value },
-        $page: { get: () => pageData.value },
-        $routeLocale: { get: () => routeLocale.value },
-        $site: { get: () => siteData.value },
-        $siteLocale: { get: () => siteLocaleData.value },
-        $withBase: { get: () => withBase },
-    });
-};