@vuepress/client 2.0.0-beta.24 → 2.0.0-beta.28

package/lib/app.js

@@ -1,31 +1,31 @@
-import { createApp, createSSRApp, computed, h } from 'vue';
-import { createRouter, createWebHistory, createMemoryHistory, RouterView, START_LOCATION, } from 'vue-router';
-import { removeEndingSlash } from '@vuepress/shared';
 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 { siteData, pageData, resolvePageData, pageFrontmatterSymbol, resolvePageFrontmatter, pageHeadSymbol, resolvePageHead, pageHeadTitleSymbol, resolvePageHeadTitle, pageLangSymbol, resolvePageLang, routeLocaleSymbol, resolveRouteLocale, siteLocaleDataSymbol, resolveSiteLocaleData, useUpdateHead, } from './injections';
-import { ClientOnly, Content, OutboundLink } from './components';
-import { withBase } from './utils';
+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';
 /**
  * - use `createApp` in dev mode
  * - use `createSSRApp` in build mode
  */
-const appCreator = __DEV__ ? createApp : createSSRApp;
+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 = __SSR__ ? createMemoryHistory : createWebHistory;
+const historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
 export const createVueApp = async () => {
     // create vue app
     const app = appCreator({
         name: 'VuepressApp',
         setup() {
             // auto update head
-            useUpdateHead();
+            setupUpdateHead();
             // invoke all clientAppSetups
             for (const clientAppSetup of clientAppSetups) {
                 clientAppSetup();
@@ -60,37 +60,9 @@ export const createVueApp = async () => {
             ]);
         }
     });
-    // 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 data & helpers
-    Object.defineProperties(app.config.globalProperties, {
-        $routeLocale: { get: () => routeLocale.value },
-        $site: { get: () => siteData.value },
-        $siteLocale: { get: () => siteLocaleData.value },
-        $page: { get: () => pageData.value },
-        $frontmatter: { get: () => pageFrontmatter.value },
-        $lang: { get: () => pageLang.value },
-        $headTitle: { get: () => pageHeadTitle.value },
-        $withBase: { get: () => withBase },
-    });
-    // register built-in components
-    /* eslint-disable vue/match-component-file-name */
-    app.component('ClientOnly', ClientOnly);
-    app.component('Content', Content);
-    app.component('OutboundLink', OutboundLink);
-    /* eslint-enable vue/match-component-file-name */
+    // global computed and global components
+    provideGlobalComputed(app, router);
+    registerGlobalComponents(app);
     // invoke all clientAppEnhances
     for (const clientAppEnhance of clientAppEnhances) {
         await clientAppEnhance({ app, router, siteData });
@@ -107,7 +79,7 @@ export const createVueApp = async () => {
     };
 };
 // mount app in client bundle
-if (!__SSR__) {
+if (!__VUEPRESS_SSR__) {
     createVueApp().then(({ app, router }) => {
         router.isReady().then(() => {
             app.mount('#app');

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<{} & {} & {}>, {}>;

package/lib/components/ClientOnly.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 export const ClientOnly = defineComponent({
     setup(_, ctx) {
         const isMounted = ref(false);

package/lib/components/Content.js

@@ -1,6 +1,6 @@
-import { h } from 'vue';
 import { pagesComponents } from '@internal/pagesComponents';
-import { usePageData } from '../injections';
+import { h } from 'vue';
+import { usePageData } from '../composables';
 /**
  * Markdown rendered content
  */
@@ -21,7 +21,7 @@ export const Content = (props) => {
         return h(component);
     }
     // fallback
-    return h('div', __DEV__
+    return h('div', __VUEPRESS_DEV__
         ? 'Page does not exist. This is a fallback content.'
         : '404 Not Found');
 };

package/lib/components/OutboundLink.js

@@ -1,15 +1,15 @@
 import { h } from 'vue';
 import './OutboundLink.css';
 const svg = h('svg', {
-    class: 'icon outbound',
-    xmlns: 'http://www.w3.org/2000/svg',
-    ariaHidden: 'true',
-    focusable: 'false',
-    x: '0px',
-    y: '0px',
-    viewBox: '0 0 100 100',
-    width: '15',
-    height: '15',
+    'class': 'icon outbound',
+    'xmlns': 'http://www.w3.org/2000/svg',
+    'aria-hidden': 'true',
+    'focusable': 'false',
+    'x': '0px',
+    'y': '0px',
+    'viewBox': '0 0 100 100',
+    'width': '15',
+    'height': '15',
 }, [
     h('path', {
         fill: 'currentColor',

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<{} & {} & {}>, {}>;

package/lib/components/Vuepress.js

@@ -1,7 +1,7 @@
-import { computed, defineComponent, h, resolveComponent } from 'vue';
-import { isString } from '@vuepress/shared';
 import { layoutComponents } from '@internal/layoutComponents';
-import { usePageData } from '../injections';
+import { isString } from '@vuepress/shared';
+import { computed, defineComponent, h, resolveComponent } from 'vue';
+import { usePageData } from '../composables';
 /**
  * Global Layout
  */

package/lib/{injections → composables}/pageData.d.ts

@@ -1,7 +1,19 @@
-import type { Ref } from 'vue';
 import type { PageData } from '@vuepress/shared';
+import type { Ref } from 'vue';
 export type { PageData };
+/**
+ * Ref wrapper of `PageData`
+ */
 export declare type PageDataRef<T extends Record<any, any> = Record<never, never>> = Ref<PageData<T>>;
+/**
+ * Global page data ref
+ */
 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/{injections → composables}/pageData.js

@@ -1,5 +1,8 @@
-import { ref, readonly } from 'vue';
+import { readonly, ref } from 'vue';
 import { pagesData } from './pagesData';
+/**
+ * Empty page data to be used as the fallback value
+ */
 const pageDataEmpty = readonly({
     key: '',
     path: '',
@@ -9,10 +12,17 @@ const pageDataEmpty = readonly({
     excerpt: '',
     headers: [],
 });
+/**
+ * Global page data ref
+ */
 export const pageData = ref(pageDataEmpty);
-export const usePageData = () => {
-    return pageData;
-};
+/**
+ * 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) {

package/lib/{injections → composables}/pageFrontmatter.d.ts

@@ -1,7 +1,19 @@
-import type { ComputedRef, InjectionKey } from 'vue';
 import type { PageData, PageFrontmatter } from '@vuepress/shared';
+import type { ComputedRef, InjectionKey } from 'vue';
 export type { PageFrontmatter };
+/**
+ * Ref wrapper of `PageFrontmatter`
+ */
 export declare type PageFrontmatterRef<T extends Record<any, any> = Record<string, unknown>> = ComputedRef<PageFrontmatter<T>>;
+/**
+ * Injection key for page frontmatter
+ */
 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/{injections → composables}/pageFrontmatter.js

@@ -1,5 +1,11 @@
 import { inject } from 'vue';
-export const pageFrontmatterSymbol = Symbol(__DEV__ ? 'pageFrontmatter' : '');
+/**
+ * Injection key for page frontmatter
+ */
+export const pageFrontmatterSymbol = Symbol(__VUEPRESS_DEV__ ? 'pageFrontmatter' : '');
+/**
+ * Returns the ref of the frontmatter of current page
+ */
 export const usePageFrontmatter = () => {
     const pageFrontmatter = inject(pageFrontmatterSymbol);
     if (!pageFrontmatter) {
@@ -7,4 +13,7 @@ export const usePageFrontmatter = () => {
     }
     return pageFrontmatter;
 };
+/**
+ * Resolve page frontmatter from page data
+ */
 export const resolvePageFrontmatter = (pageData) => pageData.frontmatter;

package/lib/{injections → composables}/pageHead.d.ts

@@ -1,11 +1,23 @@
-import type { ComputedRef, InjectionKey } from 'vue';
 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>`
+ */
 export declare type PageHead = HeadConfig[];
+/**
+ * Ref wrapper of `PageHead`
+ */
 export declare type PageHeadRef = ComputedRef<PageHead>;
+/**
+ * Injection key for page head
+ */
 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

package/lib/{injections → composables}/pageHead.js

@@ -1,6 +1,12 @@
-import { inject } from 'vue';
 import { dedupeHead, isArray, isString } from '@vuepress/shared';
-export const pageHeadSymbol = Symbol(__DEV__ ? 'pageHead' : '');
+import { inject } from 'vue';
+/**
+ * Injection key for page head
+ */
+export const pageHeadSymbol = Symbol(__VUEPRESS_DEV__ ? 'pageHead' : '');
+/**
+ * Returns the ref of the head config of current page
+ */
 export const usePageHead = () => {
     const pageHead = inject(pageHeadSymbol);
     if (!pageHead) {

package/lib/{injections → composables}/pageHeadTitle.d.ts

@@ -1,11 +1,25 @@
 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
+ */
 export declare type PageHeadTitle = string;
+/**
+ * Ref wrapper of `PageHeadTitle`
+ */
 export declare type PageHeadTitleRef = ComputedRef<PageHeadTitle>;
+/**
+ * Injection key for page head title
+ */
 export declare const pageHeadTitleSymbol: InjectionKey<PageHeadTitleRef>;
+/**
+ * Returns the ref of the head title of current page
+ */
 export declare const usePageHeadTitle: () => PageHeadTitleRef;
 /**
- * Title to displayed in `<head>` tag
+ * 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/{injections → composables}/pageHeadTitle.js

@@ -1,5 +1,11 @@
 import { inject } from 'vue';
-export const pageHeadTitleSymbol = Symbol(__DEV__ ? 'pageHeadTitle' : '');
+/**
+ * Injection key for page head title
+ */
+export const pageHeadTitleSymbol = Symbol(__VUEPRESS_DEV__ ? 'pageHeadTitle' : '');
+/**
+ * Returns the ref of the head title of current page
+ */
 export const usePageHeadTitle = () => {
     const pageHeadTitle = inject(pageHeadTitleSymbol);
     if (!pageHeadTitle) {
@@ -8,6 +14,8 @@ export const usePageHeadTitle = () => {
     return pageHeadTitle;
 };
 /**
- * Title to displayed in `<head>` tag
+ * 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/{injections → composables}/pageLang.d.ts

@@ -1,13 +1,24 @@
-import type { ComputedRef, InjectionKey } from 'vue';
 import type { PageData } from '@vuepress/shared';
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Page language
+ */
 export declare type PageLang = string;
+/**
+ * Ref wrapper of `PageLang`
+ */
 export declare type PageLangRef = ComputedRef<PageLang>;
+/**
+ * Injection key for page language
+ */
 export declare const pageLangSymbol: InjectionKey<PageLangRef>;
+/**
+ * Returns the ref of the language of current page
+ */
 export declare const usePageLang: () => PageLangRef;
 /**
- * Resolve language of current page
+ * Resolve page language from page data
  *
- * It's mainly used for the `lang` attribute of `<html>` tag,
- * which should not be empty
+ * It would be used as the `lang` attribute of `<html>` tag
  */
 export declare const resolvePageLang: (pageData: PageData) => PageLang;

package/lib/{injections → composables}/pageLang.js

@@ -1,5 +1,11 @@
 import { inject } from 'vue';
-export const pageLangSymbol = Symbol(__DEV__ ? 'pageLang' : '');
+/**
+ * Injection key for page language
+ */
+export const pageLangSymbol = Symbol(__VUEPRESS_DEV__ ? 'pageLang' : '');
+/**
+ * Returns the ref of the language of current page
+ */
 export const usePageLang = () => {
     const pageLang = inject(pageLangSymbol);
     if (!pageLang) {
@@ -8,9 +14,8 @@ export const usePageLang = () => {
     return pageLang;
 };
 /**
- * Resolve language of current page
+ * Resolve page language from page data
  *
- * It's mainly used for the `lang` attribute of `<html>` tag,
- * which should not be empty
+ * It would be used as the `lang` attribute of `<html>` tag
  */
 export const resolvePageLang = (pageData) => pageData.lang || 'en';

package/lib/{injections → composables}/pagesData.d.ts

@@ -1,6 +1,21 @@
-import type { Ref } from 'vue';
 import type { PageData } from '@vuepress/shared';
+import type { Ref } from 'vue';
+/**
+ * Data resolvers of all pages
+ *
+ * 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>>;
+/**
+ * Ref wrapper of `PagesData`
+ */
 export declare type PagesDataRef = Ref<PagesData>;
+/**
+ * Global pages data ref
+ */
 export declare const pagesData: PagesDataRef;
+/**
+ * Returns the ref of data resolvers of all pages
+ */
 export declare const usePagesData: () => PagesDataRef;

package/lib/{injections → composables}/pagesData.js

@@ -1,6 +1,10 @@
-import { ref } from 'vue';
 import { pagesData as pagesDataRaw } from '@internal/pagesData';
+import { ref } from 'vue';
+/**
+ * Global pages data ref
+ */
 export const pagesData = ref(pagesDataRaw);
-export const usePagesData = () => {
-    return pagesData;
-};
+/**
+ * Returns the ref of data resolvers of all pages
+ */
+export const usePagesData = () => pagesData;

package/lib/{injections → composables}/routeLocale.d.ts

@@ -1,10 +1,22 @@
-import type { ComputedRef, InjectionKey } from 'vue';
 import type { SiteData } from '@vuepress/shared';
+import type { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Route locale path
+ */
 export declare type RouteLocale = string;
+/**
+ * Ref wrapper of `RouteLocale`
+ */
 export declare type RouteLocaleRef = ComputedRef<RouteLocale>;
+/**
+ * Injection key for page route locale path
+ */
 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 of the route path
+ * Resolve locale path according to route path and locales config
  */
 export declare const resolveRouteLocale: (locales: SiteData['locales'], routePath: string) => RouteLocale;

package/lib/{injections → composables}/routeLocale.js

@@ -1,6 +1,12 @@
-import { inject } from 'vue';
 import { resolveLocalePath } from '@vuepress/shared';
-export const routeLocaleSymbol = Symbol(__DEV__ ? 'routeLocale' : '');
+import { inject } from 'vue';
+/**
+ * Injection key for page route locale path
+ */
+export const routeLocaleSymbol = Symbol(__VUEPRESS_DEV__ ? 'routeLocale' : '');
+/**
+ * Returns the ref of the route locale path of current page
+ */
 export const useRouteLocale = () => {
     const routeLocale = inject(routeLocaleSymbol);
     if (!routeLocale) {
@@ -9,6 +15,6 @@ export const useRouteLocale = () => {
     return routeLocale;
 };
 /**
- * Resolve locale path of the route path
+ * Resolve locale path according to route path and locales config
  */
 export const resolveRouteLocale = (locales, routePath) => resolveLocalePath(locales, routePath);

package/lib/{injections → composables}/siteData.d.ts

@@ -1,6 +1,15 @@
-import type { Ref } from 'vue';
 import type { SiteData } from '@vuepress/shared';
+import type { Ref } from 'vue';
 export type { SiteData };
+/**
+ * Ref wrapper of `SiteData`
+ */
 export declare type SiteDataRef = Ref<SiteData>;
+/**
+ * Global site data ref
+ */
 export declare const siteData: SiteDataRef;
+/**
+ * Returns the ref of the site data
+ */
 export declare const useSiteData: () => SiteDataRef;

package/lib/{injections → composables}/siteData.js

@@ -1,6 +1,12 @@
-import { ref } from 'vue';
 import { siteData as siteDataRaw } from '@internal/siteData';
+import { ref } from 'vue';
+/**
+ * Global site data ref
+ */
 export const siteData = ref(siteDataRaw);
+/**
+ * Returns the ref of the site data
+ */
 export const useSiteData = () => siteData;
 if (import.meta.webpackHot || import.meta.hot) {
     // reuse vue HMR runtime

package/lib/{injections → composables}/siteLocaleData.d.ts

@@ -1,12 +1,25 @@
-import type { ComputedRef, InjectionKey } from 'vue';
 import type { SiteData } from '@vuepress/shared';
+import type { ComputedRef, InjectionKey } from 'vue';
 import type { RouteLocale } from './routeLocale';
+/**
+ * Site data of current locale
+ */
 export declare type SiteLocaleData = SiteData;
+/**
+ * Ref wrapper of `SiteLocaleData`
+ */
 export declare type SiteLocaleDataRef = ComputedRef<SiteLocaleData>;
+/**
+ * Injection key for site locale data
+ */
 export declare const siteLocaleDataSymbol: InjectionKey<SiteLocaleDataRef>;
+/**
+ * Returns the ref of the site data of current locale
+ */
 export declare const useSiteLocaleData: () => SiteLocaleDataRef;
 /**
- * Merge the locales fields to the root fields
- * according to the route path
+ * 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/{injections → composables}/siteLocaleData.js

@@ -1,5 +1,11 @@
 import { inject } from 'vue';
-export const siteLocaleDataSymbol = Symbol(__DEV__ ? 'siteLocaleData' : '');
+/**
+ * Injection key for site locale data
+ */
+export const siteLocaleDataSymbol = Symbol(__VUEPRESS_DEV__ ? 'siteLocaleData' : '');
+/**
+ * Returns the ref of the site data of current locale
+ */
 export const useSiteLocaleData = () => {
     const siteLocaleData = inject(siteLocaleDataSymbol);
     if (!siteLocaleData) {
@@ -8,8 +14,9 @@ export const useSiteLocaleData = () => {
     return siteLocaleData;
 };
 /**
- * Merge the locales fields to the root fields
- * according to the route path
+ * Resolve site data for specific locale
+ *
+ * It would merge the locales fields to the root fields
  */
 export const resolveSiteLocaleData = (site, routeLocale) => ({
     ...site,

package/lib/composables/updateHead.d.ts

@@ -0,0 +1,26 @@
+import type { HeadConfig } from '@vuepress/shared';
+import type { InjectionKey } from 'vue';
+/**
+ * A util function to force update `<head>` of current page
+ */
+export declare type UpdateHead = () => void;
+/**
+ * Injection key for `updateHead` util
+ */
+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/{injections → composables}/updateHead.js

@@ -1,63 +1,31 @@
-import { onMounted, ref, useSSRContext, watch } from 'vue';
-import { useRoute } from 'vue-router';
 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';
 /**
- * Query the matched head tag of head config
+ * Injection key for `updateHead` util
  */
-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 '';
-    });
-    const selector = `head > ${tagName}${attrsSelector}`;
-    const tags = Array.from(document.querySelectorAll(selector));
-    const matchedTag = tags.find((item) => item.innerText === content);
-    return matchedTag || null;
-};
+export const updateHeadSymbol = Symbol(__VUEPRESS_DEV__ ? 'updateHead' : '');
 /**
- * Create head tag from head config
+ * Returns the `updateHead` util
  */
-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));
+export const useUpdateHead = () => {
+    const updateHead = inject(updateHeadSymbol);
+    if (!updateHead) {
+        throw new Error('useUpdateHead() is called without provider.');
     }
-    return tag;
+    return updateHead;
 };
 /**
- * Auto update head
- *
- * This composable function should be used only once in the root app
+ * Auto update head and provide as global util in setup
  */
-export const useUpdateHead = () => {
+export const setupUpdateHead = () => {
     const route = useRoute();
     const head = usePageHead();
     const lang = usePageLang();
     // ssr-only, extract page meta info to ssrContext
-    if (__SSR__) {
+    if (__VUEPRESS_SSR__) {
         const ssrContext = useSSRContext();
         if (ssrContext) {
             ssrContext.head = head.value;
@@ -92,6 +60,7 @@ export const useUpdateHead = () => {
             }
         });
     };
+    provide(updateHeadSymbol, updateHead);
     onMounted(() => {
         loadHead();
         updateHead();
@@ -99,3 +68,49 @@ export const useUpdateHead = () => {
         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,6 +1,7 @@
+export type { PageHeader } from '@vuepress/shared';
+export { useRoute, useRouter } from 'vue-router';
 export * from './app';
 export * from './components';
-export * from './injections';
+export * from './composables';
 export * from './types';
 export * from './utils';
-export type { PageHeader } from '@vuepress/shared';

package/lib/index.js

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

package/lib/provideGlobalComputed.d.ts

@@ -0,0 +1,20 @@
+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

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

package/lib/registerGlobalComponents.d.ts

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

package/lib/registerGlobalComponents.js

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

package/lib/types/clientAppEnhance.d.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
-import type { SiteDataRef } from '../injections';
+import type { SiteDataRef } from '../composables';
 export declare type ClientAppEnhance = (context: {
     app: App;
     router: Router;

package/lib/utils/withBase.js

@@ -1,5 +1,5 @@
 import { isLinkHttp, removeLeadingSlash } from '@vuepress/shared';
-import { useSiteData } from '../injections';
+import { useSiteData } from '../composables';
 /**
  * Prefix url with site base
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-beta.24",
+  "version": "2.0.0-beta.28",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -29,16 +29,16 @@
     "copy": "cpx \"src/**/*.{d.ts,css}\" lib"
   },
   "dependencies": {
-    "@vuepress/shared": "2.0.0-beta.24",
-    "vue": "^3.2.2",
-    "vue-router": "^4.0.10"
+    "@vuepress/shared": "2.0.0-beta.28",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@types/webpack-env": "^1.16.2",
-    "vite": "^2.4.4"
+    "@types/webpack-env": "^1.16.3",
+    "vite": "^2.7.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dd9588128c4b8e62bb96ed8581322e8901e22b90"
+  "gitHead": "71c34816a79263c7dcba3ff0c103e264abdbf0d2"
 }

package/types.d.ts

@@ -1,4 +1,4 @@
-declare const __VERSION__: string
-declare const __DEV__: boolean
-declare const __SSR__: boolean
+declare const __VUEPRESS_VERSION__: string
+declare const __VUEPRESS_DEV__: boolean
+declare const __VUEPRESS_SSR__: boolean
 declare const __VUE_HMR_RUNTIME__: Record<string, any>

package/lib/injections/updateHead.d.ts

@@ -1,15 +0,0 @@
-import type { HeadConfig } from '@vuepress/shared';
-/**
- * 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;
-/**
- * Auto update head
- *
- * This composable function should be used only once in the root app
- */
-export declare const useUpdateHead: () => void;