@vuepress/client 2.0.0-rc.5 → 2.0.0-rc.7

package/dist/app.js

@@ -2,31 +2,33 @@ import {
   ClientOnly,
   Content,
   RouteLink,
-  layoutsSymbol,
-  pageDataSymbol,
-  pageFrontmatterSymbol,
-  pageHeadSymbol,
-  pageHeadTitleSymbol,
-  pageLangSymbol,
-  pageLayoutSymbol,
+  clientDataSymbol,
+  redirects,
   resolveRoute,
   resolvers,
-  routeLocaleSymbol,
   routes,
-  siteData,
-  siteLocaleDataSymbol,
   updateHeadSymbol,
   usePageHead,
   usePageLang,
   usePageLayout,
   withBase
-} from "./chunk-VSQZBVKH.js";
+} from "./chunk-VWNFZFFH.js";
 
 // src/app.ts
 import { clientConfigs } from "@internal/clientConfigs";
 import { createApp, createSSRApp, h } from "vue";
 
-// src/createVueRouter.ts
+// src/internal/siteData.ts
+import { siteData as siteDataRaw } from "@internal/siteData";
+import { shallowRef } from "vue";
+var siteData = shallowRef(siteDataRaw);
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
+  __VUE_HMR_RUNTIME__.updateSiteData = (data) => {
+    siteData.value = data;
+  };
+}
+
+// src/router/createVueRouter.ts
 import { removeEndingSlash } from "@vuepress/shared";
 import {
   createMemoryHistory,
@@ -64,8 +66,8 @@ var createVueRouter = () => {
       to.meta = {
         // attach route meta
         ...route.meta,
-        // attach page data to route meta to trigger page data computed when route changes
-        _data: pageChunk.data
+        // attach page chunk route meta
+        _pageChunk: pageChunk
       };
     }
   });
@@ -84,17 +86,17 @@ import { computedWithControl } from "@vueuse/core";
 import { computed } from "vue";
 var setupGlobalComputed = (app, router, clientConfigs2) => {
   const routePath = computed(() => router.currentRoute.value.path);
-  const pageData = computedWithControl(
+  const pageChunk = computedWithControl(
     routePath,
-    () => router.currentRoute.value.meta._data
+    () => router.currentRoute.value.meta._pageChunk
   );
   if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
-    __VUE_HMR_RUNTIME__.updatePageData = async (data) => {
-      const pageChunk = await routes.value[data.path].loader();
-      routes.value[data.path].loader = () => Promise.resolve({ comp: pageChunk.comp, data });
-      if (data.path === router.currentRoute.value.meta._data?.path) {
-        router.currentRoute.value.meta._data = data;
-        pageData.trigger();
+    __VUE_HMR_RUNTIME__.updatePageData = async (newPageData) => {
+      const oldPageChunk = await routes.value[newPageData.path].loader();
+      routes.value[newPageData.path].loader = () => Promise.resolve({ comp: oldPageChunk.comp, data: newPageData });
+      if (newPageData.path === router.currentRoute.value.meta._pageChunk?.data.path) {
+        router.currentRoute.value.meta._pageChunk.data = newPageData;
+        pageChunk.trigger();
       }
     };
   }
@@ -105,9 +107,9 @@ var setupGlobalComputed = (app, router, clientConfigs2) => {
   const siteLocaleData = computed(
     () => resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)
   );
-  const pageFrontmatter = computed(
-    () => resolvers.resolvePageFrontmatter(pageData.value)
-  );
+  const pageComponent = computed(() => pageChunk.value.comp);
+  const pageData = computed(() => pageChunk.value.data);
+  const pageFrontmatter = computed(() => pageData.value.frontmatter);
   const pageHeadTitle = computed(
     () => resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value)
   );
@@ -124,38 +126,35 @@ var setupGlobalComputed = (app, router, clientConfigs2) => {
   const pageLayout = computed(
     () => resolvers.resolvePageLayout(pageData.value, layouts.value)
   );
-  app.provide(layoutsSymbol, layouts);
-  app.provide(pageDataSymbol, pageData);
-  app.provide(pageFrontmatterSymbol, pageFrontmatter);
-  app.provide(pageHeadTitleSymbol, pageHeadTitle);
-  app.provide(pageHeadSymbol, pageHead);
-  app.provide(pageLangSymbol, pageLang);
-  app.provide(pageLayoutSymbol, pageLayout);
-  app.provide(routeLocaleSymbol, routeLocale);
-  app.provide(siteLocaleDataSymbol, siteLocaleData);
-  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 {
+  const clientData = {
     layouts,
     pageData,
+    pageComponent,
     pageFrontmatter,
     pageHead,
     pageHeadTitle,
     pageLang,
     pageLayout,
+    redirects,
     routeLocale,
+    routePath,
+    routes,
     siteData,
     siteLocaleData
   };
+  app.provide(clientDataSymbol, clientData);
+  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 clientData;
 };
 
 // src/setupUpdateHead.ts
@@ -280,8 +279,8 @@ var createVueApp = async () => {
       const rootComponents = clientConfigs.flatMap(
         ({ rootComponents: rootComponents2 = [] }) => rootComponents2.map((component) => h(component))
       );
-      const layout = usePageLayout();
-      return () => [h(layout.value), rootComponents];
+      const pageLayout = usePageLayout();
+      return () => [h(pageLayout.value), rootComponents];
     }
   });
   const router = createVueRouter();

package/dist/chunk-VWNFZFFH.js

@@ -0,0 +1,280 @@
+// src/composables/clientData.ts
+import { inject } from "vue";
+var clientDataSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "clientData" : ""
+);
+var useClientData = () => {
+  const clientData = inject(clientDataSymbol);
+  if (!clientData) {
+    throw new Error("useClientData() is called without provider.");
+  }
+  return clientData;
+};
+
+// src/composables/clientDataUtils.ts
+var useLayouts = () => useClientData().layouts;
+var usePageComponent = () => useClientData().pageComponent;
+var usePageData = () => useClientData().pageData;
+var usePageFrontmatter = () => useClientData().pageFrontmatter;
+var usePageHead = () => useClientData().pageHead;
+var usePageLang = () => useClientData().pageLang;
+var usePageLayout = () => useClientData().pageLayout;
+var useRedirects = () => useClientData().redirects;
+var useRouteLocale = () => useClientData().routeLocale;
+var useRoutePath = () => useClientData().routePath;
+var useRoutes = () => useClientData().routes;
+var useSiteData = () => useClientData().siteData;
+var useSiteLocaleData = () => useClientData().siteLocaleData;
+
+// src/composables/updateHead.ts
+import { inject as inject2 } from "vue";
+var updateHeadSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "updateHead" : ""
+);
+var useUpdateHead = () => {
+  const updateHead = inject2(updateHeadSymbol);
+  if (!updateHead) {
+    throw new Error("useUpdateHead() is called without provider.");
+  }
+  return updateHead;
+};
+
+// src/router/resolveRoutePath.ts
+import { normalizeRoutePath } from "@vuepress/shared";
+
+// src/internal/routes.ts
+import {
+  redirects as redirectsRaw,
+  routes as routesRaw
+} from "@internal/routes";
+import { shallowRef } from "vue";
+var redirects = shallowRef(redirectsRaw);
+var routes = shallowRef(routesRaw);
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
+  __VUE_HMR_RUNTIME__.updateRedirects = (data) => {
+    redirects.value = data;
+  };
+  __VUE_HMR_RUNTIME__.updateRoutes = (data) => {
+    routes.value = data;
+  };
+}
+
+// src/router/resolveRoutePath.ts
+var resolveRoutePath = (path) => {
+  const normalizedPath = normalizeRoutePath(path);
+  if (routes.value[normalizedPath])
+    return normalizedPath;
+  const encodedPath = encodeURI(normalizedPath);
+  if (routes.value[encodedPath])
+    return encodedPath;
+  return redirects.value[normalizedPath] || normalizedPath;
+};
+
+// src/router/resolveRoute.ts
+var resolveRoute = (path) => {
+  const routePath = resolveRoutePath(path);
+  const route = routes.value[routePath] ?? {
+    ...routes.value["/404.html"],
+    notFound: true
+  };
+  return {
+    path: routePath,
+    notFound: false,
+    ...route
+  };
+};
+
+// src/components/ClientOnly.ts
+import { defineComponent, onMounted, ref } from "vue";
+var ClientOnly = defineComponent({
+  name: "ClientOnly",
+  setup(_, ctx) {
+    const isMounted = ref(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    return () => isMounted.value ? ctx.slots.default?.() : null;
+  }
+});
+
+// src/router/index.ts
+import { useRoute, useRouter } from "vue-router";
+
+// src/components/Content.ts
+import { computed, defineAsyncComponent, defineComponent as defineComponent2, h } from "vue";
+var Content = defineComponent2({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Content",
+  props: {
+    path: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  setup(props) {
+    const pageComponent = usePageComponent();
+    const ContentComponent = computed(() => {
+      if (!props.path)
+        return pageComponent.value;
+      const route = resolveRoute(props.path);
+      return defineAsyncComponent(() => route.loader().then(({ comp }) => comp));
+    });
+    return () => h(ContentComponent.value);
+  }
+});
+
+// src/utils/withBase.ts
+import { isLinkHttp, removeLeadingSlash } from "@vuepress/shared";
+var withBase = (url) => {
+  if (isLinkHttp(url))
+    return url;
+  return `${__VUEPRESS_BASE__}${removeLeadingSlash(url)}`;
+};
+
+// src/components/RouteLink.ts
+import { h as h2 } from "vue";
+import { useRouter as useRouter2 } from "vue-router";
+var guardEvent = (event) => {
+  if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+    return;
+  if (event.defaultPrevented)
+    return;
+  if (event.button !== void 0 && event.button !== 0)
+    return;
+  if (event.currentTarget) {
+    const target = event.currentTarget.getAttribute("target");
+    if (target?.match(/\b_blank\b/i))
+      return;
+  }
+  event.preventDefault();
+  return true;
+};
+var RouteLink = ({ active = false, activeClass = "route-link-active", to, ...attrs }, { slots }) => {
+  const router = useRouter2();
+  const path = withBase(resolveRoutePath(to));
+  return h2(
+    "a",
+    {
+      ...attrs,
+      class: ["route-link", { [activeClass]: active }],
+      href: path,
+      onClick: (event = {}) => {
+        guardEvent(event) ? router.push(to).catch() : Promise.resolve();
+      }
+    },
+    slots.default?.()
+  );
+};
+RouteLink.displayName = "RouteLink";
+RouteLink.props = {
+  active: Boolean,
+  activeClass: String,
+  to: String
+};
+
+// src/resolvers.ts
+import { dedupeHead, isString, resolveLocalePath } from "@vuepress/shared";
+import { reactive } from "vue";
+
+// src/constants.ts
+var LAYOUT_NAME_DEFAULT = "Layout";
+var LANG_DEFAULT = "en-US";
+
+// src/resolvers.ts
+var resolvers = reactive({
+  /**
+   * Resolve layouts component map
+   */
+  resolveLayouts: (clientConfigs) => clientConfigs.reduce(
+    (prev, item) => ({
+      ...prev,
+      ...item.layouts
+    }),
+    {}
+  ),
+  /**
+   * Merge the head config in frontmatter and site locale
+   *
+   * Frontmatter should take priority over site locale
+   */
+  resolvePageHead: (pageHeadTitle, pageFrontmatter, siteLocaleDate) => {
+    const description = isString(pageFrontmatter.description) ? pageFrontmatter.description : siteLocaleDate.description;
+    const head = [
+      ...Array.isArray(pageFrontmatter.head) ? pageFrontmatter.head : [],
+      ...siteLocaleDate.head,
+      ["title", {}, pageHeadTitle],
+      ["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: (pageData, siteLocaleDate) => [pageData.title, siteLocaleDate.title].filter((item) => !!item).join(" | "),
+  /**
+   * Resolve page language from page data
+   *
+   * It would be used as the `lang` attribute of `<html>` tag
+   */
+  resolvePageLang: (pageData, siteLocaleData) => pageData.lang || siteLocaleData.lang || LANG_DEFAULT,
+  /**
+   * Resolve layout component of current page
+   */
+  resolvePageLayout: (pageData, layouts) => {
+    const layoutName = isString(pageData.frontmatter.layout) ? pageData.frontmatter.layout : LAYOUT_NAME_DEFAULT;
+    return layouts[layoutName];
+  },
+  /**
+   * 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: (siteData, routeLocale) => ({
+    ...siteData,
+    ...siteData.locales[routeLocale],
+    head: [
+      // when merging head, the locales head should be placed before root head
+      // to get higher priority
+      ...siteData.locales[routeLocale]?.head ?? [],
+      ...siteData.head ?? []
+    ]
+  })
+});
+
+export {
+  clientDataSymbol,
+  useClientData,
+  useLayouts,
+  usePageComponent,
+  usePageData,
+  usePageFrontmatter,
+  usePageHead,
+  usePageLang,
+  usePageLayout,
+  useRedirects,
+  useRouteLocale,
+  useRoutePath,
+  useRoutes,
+  useSiteData,
+  useSiteLocaleData,
+  updateHeadSymbol,
+  useUpdateHead,
+  redirects,
+  routes,
+  resolveRoutePath,
+  resolveRoute,
+  ClientOnly,
+  useRoute,
+  useRouter,
+  Content,
+  withBase,
+  RouteLink,
+  resolvers
+};

package/dist/index.d.ts

@@ -1,206 +1,75 @@
-import { PageData, PageFrontmatter, HeadConfig, SiteData } from '@vuepress/shared';
-export { PageData, PageFrontmatter, PageHeader, SiteData } from '@vuepress/shared';
 import * as vue from 'vue';
-import { ComputedRef, InjectionKey, Ref, Component, App, ComponentOptions, HTMLAttributes, FunctionalComponent, VNode } from 'vue';
+import { Component, ComputedRef, Ref, App, HTMLAttributes, FunctionalComponent, VNode, InjectionKey } from 'vue';
+import { PageData, HeadConfig, SiteData, PageFrontmatter } from '@vuepress/shared';
+export { HeadConfig, PageData, PageFrontmatter, PageHeader, SiteData } from '@vuepress/shared';
 import { Router } from 'vue-router';
+export { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from 'vue-router';
 export { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
 
 /**
- * Ref wrapper of `Layouts`
+ * Name of the default layout
  */
-type LayoutsRef = ComputedRef<Layouts>;
-/**
- * Injection key for layouts
- */
-declare const layoutsSymbol: InjectionKey<LayoutsRef>;
+declare const LAYOUT_NAME_DEFAULT = "Layout";
 /**
- * Returns layouts component map
+ * Name of the 404 page layout
  */
-declare const useLayouts: () => LayoutsRef;
+declare const LAYOUT_NAME_NOT_FOUND = "NotFound";
 
-/**
- * Ref wrapper of `PageData`
- */
-type PageDataRef<T extends Record<any, any> = Record<never, never>> = Ref<PageData<T>>;
-/**
- * Injection key for page data
- */
-declare const pageDataSymbol: InjectionKey<PageDataRef>;
-/**
- * Returns the ref of the data of current page
- */
-declare const usePageData: <T extends Record<any, any> = Record<never, never>>() => PageDataRef<T>;
-
-/**
- * Ref wrapper of `PageFrontmatter`
- */
-type PageFrontmatterRef<T extends Record<any, any> = Record<string, unknown>> = ComputedRef<PageFrontmatter<T>>;
-/**
- * Injection key for page frontmatter
- */
-declare const pageFrontmatterSymbol: InjectionKey<PageFrontmatterRef>;
-/**
- * Returns the ref of the frontmatter of current page
- */
-declare const usePageFrontmatter: <T extends Record<any, any> = Record<string, unknown>>() => PageFrontmatterRef<T>;
+interface PageChunk {
+    comp: Component;
+    data: PageData;
+}
+type RouteMeta = Record<string, unknown>;
+interface Route<T extends RouteMeta = RouteMeta> {
+    loader: () => Promise<PageChunk>;
+    meta: T;
+}
+type Redirects = Record<string, string>;
+type Routes = Record<string, Route>;
 
-/**
- * Page head config, which would be used for generate html tags in `<head>`
- */
+interface Layouts {
+    [LAYOUT_NAME_DEFAULT]: Component;
+    [LAYOUT_NAME_NOT_FOUND]: Component;
+    [key: string]: Component;
+}
+type PageComponent = Component;
 type PageHead = HeadConfig[];
-/**
- * Ref wrapper of `PageHead`
- */
-type PageHeadRef = ComputedRef<PageHead>;
-/**
- * Injection key for page head
- */
-declare const pageHeadSymbol: InjectionKey<PageHeadRef>;
-/**
- * Returns the ref of the head config of current page
- */
-declare const usePageHead: () => PageHeadRef;
-
-/**
- * Page head title, which would be used as the content of `head > title` tag
- */
 type PageHeadTitle = string;
-/**
- * Ref wrapper of `PageHeadTitle`
- */
-type PageHeadTitleRef = ComputedRef<PageHeadTitle>;
-/**
- * Injection key for page head title
- */
-declare const pageHeadTitleSymbol: InjectionKey<PageHeadTitleRef>;
-/**
- * Returns the ref of the head title of current page
- */
-declare const usePageHeadTitle: () => PageHeadTitleRef;
-
-/**
- * Page language
- */
 type PageLang = string;
-/**
- * Ref wrapper of `PageLang`
- */
-type PageLangRef = ComputedRef<PageLang>;
-/**
- * Injection key for page language
- */
-declare const pageLangSymbol: InjectionKey<PageLangRef>;
-/**
- * Returns the ref of the language of current page
- */
-declare const usePageLang: () => PageLangRef;
-
-/**
- * Ref wrapper of `PageLayout`
- */
-type PageLayoutRef = ComputedRef<Component>;
-/**
- * Injection key for page layout
- */
-declare const pageLayoutSymbol: InjectionKey<PageLayoutRef>;
-/**
- * Returns layout component of current page
- */
-declare const usePageLayout: () => ComputedRef<Component>;
-
-/**
- * Route locale path
- */
+type PageLayout = Component;
+type RoutePath = string;
 type RouteLocale = string;
-/**
- * Ref wrapper of `RouteLocale`
- */
-type RouteLocaleRef = Readonly<Ref<RouteLocale>>;
-/**
- * Injection key for page route locale path
- */
-declare const routeLocaleSymbol: InjectionKey<RouteLocaleRef>;
-/**
- * Returns the ref of the route locale path of current page
- */
-declare const useRouteLocale: () => RouteLocaleRef;
-
-interface ResolvedRoute<T extends RouteMeta = RouteMeta> extends Route<T> {
-    path: string;
-    notFound: boolean;
-}
-/**
- * Resolve route with given path
- */
-declare const resolveRoute: <T extends RouteMeta = RouteMeta>(path: string) => ResolvedRoute<T>;
-
-/**
- * Resolve route path with given raw path
- */
-declare const resolveRoutePath: (path: string) => string;
-
-/**
- * Global redirects ref
- */
-declare const redirects: Ref<Redirects>;
-/**
- * Global routes ref
- */
-declare const routes: Ref<Routes>;
-
-/**
- * Returns the ref of pages map
- */
-declare const useRedirects: () => typeof redirects;
-/**
- * Returns the ref of routes map
- */
-declare const useRoutes: () => typeof routes;
-
-/**
- * Ref wrapper of `SiteData`
- */
-type SiteDataRef = Ref<SiteData>;
-/**
- * Global site data ref
- */
-declare const siteData: SiteDataRef;
-/**
- * Returns the ref of the site data
- */
-declare const useSiteData: () => SiteDataRef;
-
-/**
- * Site data of current locale
- */
 type SiteLocaleData = SiteData;
-/**
- * Ref wrapper of `SiteLocaleData`
- */
+type LayoutsRef = ComputedRef<Layouts>;
+type PageComponentRef = ComputedRef<PageComponent>;
+type PageDataRef<T extends Record<any, any> = Record<never, never>> = ComputedRef<PageData<T>>;
+type PageFrontmatterRef<T extends Record<any, any> = Record<never, never>> = ComputedRef<PageFrontmatter<T>>;
+type PageHeadRef = ComputedRef<PageHead>;
+type PageHeadTitleRef = ComputedRef<PageHeadTitle>;
+type PageLangRef = ComputedRef<PageLang>;
+type PageLayoutRef = ComputedRef<PageLayout>;
+type RedirectsRef = Ref<Redirects>;
+type RoutePathRef = ComputedRef<RoutePath>;
+type RouteLocaleRef = ComputedRef<RouteLocale>;
+type RoutesRef = Ref<Routes>;
+type SiteDataRef = Ref<SiteData>;
 type SiteLocaleDataRef = ComputedRef<SiteLocaleData>;
-/**
- * Injection key for site locale data
- */
-declare const siteLocaleDataSymbol: InjectionKey<SiteLocaleDataRef>;
-/**
- * Returns the ref of the site data of current locale
- */
-declare const useSiteLocaleData: () => SiteLocaleDataRef;
-
-/**
- * A util function to force update `<head>` of current page
- */
-type UpdateHead = () => void;
-/**
- * Injection key for `updateHead` util
- */
-declare const updateHeadSymbol: InjectionKey<UpdateHead>;
-/**
- * Returns the `updateHead` util
- */
-declare const useUpdateHead: () => UpdateHead;
-
-type Layouts = Record<string, Component>;
+interface ClientData {
+    layouts: LayoutsRef;
+    pageComponent: PageComponentRef;
+    pageData: PageDataRef;
+    pageFrontmatter: PageFrontmatterRef;
+    pageHead: PageHeadRef;
+    pageHeadTitle: PageHeadTitleRef;
+    pageLang: PageLangRef;
+    pageLayout: PageLayoutRef;
+    redirects: RedirectsRef;
+    routePath: RoutePathRef;
+    routeLocale: RouteLocaleRef;
+    routes: RoutesRef;
+    siteData: SiteDataRef;
+    siteLocaleData: SiteLocaleDataRef;
+}
 
 /**
  * Configure vuepress client
@@ -229,18 +98,6 @@ interface ClientConfig {
     rootComponents?: Component[];
 }
 
-interface PageChunk {
-    comp: ComponentOptions;
-    data: PageData;
-}
-type RouteMeta = Record<string, unknown>;
-interface Route<T extends RouteMeta = RouteMeta> {
-    loader: () => Promise<PageChunk>;
-    meta: T;
-}
-type Redirects = Record<string, string>;
-type Routes = Record<string, Route>;
-
 /**
  * Wrapper component that only renders its content on the client side and skips server side rendering
  */
@@ -301,14 +158,54 @@ declare const RouteLink: FunctionalComponent<RouteLinkProps, Record<never, never
 }>;
 
 /**
- * A helper function to help you define vuepress client config file
+ * Injection key for client data
  */
-declare const defineClientConfig: (clientConfig?: ClientConfig) => ClientConfig;
+declare const clientDataSymbol: InjectionKey<ClientData>;
+/**
+ * Returns client data
+ */
+declare const useClientData: () => ClientData;
+
+declare const useLayouts: () => LayoutsRef;
+declare const usePageComponent: () => PageComponentRef;
+declare const usePageData: <T extends Record<any, any> = Record<never, never>>() => PageDataRef<T>;
+declare const usePageFrontmatter: <T extends Record<any, any> = Record<string, unknown>>() => PageFrontmatterRef<T>;
+declare const usePageHead: () => PageHeadRef;
+declare const usePageLang: () => PageLangRef;
+declare const usePageLayout: () => PageLayoutRef;
+declare const useRedirects: () => RedirectsRef;
+declare const useRouteLocale: () => RouteLocaleRef;
+declare const useRoutePath: () => RoutePathRef;
+declare const useRoutes: () => RoutesRef;
+declare const useSiteData: () => SiteDataRef;
+declare const useSiteLocaleData: () => SiteLocaleDataRef;
 
 /**
- * Prefix url with site base
+ * A util function to force update `<head>` of current page
  */
-declare const withBase: (url: string) => string;
+type UpdateHead = () => void;
+/**
+ * Injection key for `updateHead` util
+ */
+declare const updateHeadSymbol: InjectionKey<UpdateHead>;
+/**
+ * Returns the `updateHead` util
+ */
+declare const useUpdateHead: () => UpdateHead;
+
+interface ResolvedRoute<T extends RouteMeta = RouteMeta> extends Route<T> {
+    path: string;
+    notFound: boolean;
+}
+/**
+ * Resolve route with given path
+ */
+declare const resolveRoute: <T extends RouteMeta = RouteMeta>(path: string) => ResolvedRoute<T>;
+
+/**
+ * Resolve route path with given raw path
+ */
+declare const resolveRoutePath: (path: string) => string;
 
 /**
  * Resolver methods to get global computed
@@ -319,13 +216,17 @@ declare const withBase: (url: string) => string;
  */
 declare const resolvers: {
     resolveLayouts: (clientConfigs: ClientConfig[]) => Layouts;
-    resolvePageFrontmatter: (pageData: PageData) => PageFrontmatter;
-    resolvePageHead: (headTitle: PageHeadTitle, frontmatter: PageFrontmatter, siteLocale: SiteLocaleData) => PageHead;
-    resolvePageHeadTitle: (page: PageData, siteLocale: SiteLocaleData) => PageHeadTitle;
-    resolvePageLang: (page: PageData, siteLocale: SiteLocaleData) => PageLang;
-    resolvePageLayout: (page: PageData, layouts: Layouts) => Component;
+    resolvePageHead: (pageHeadTitle: PageHeadTitle, pageFrontmatter: PageFrontmatter, siteLocaleDate: SiteData) => PageHead;
+    resolvePageHeadTitle: (pageData: PageData, siteLocaleDate: SiteData) => PageHeadTitle;
+    resolvePageLang: (pageData: PageData, siteLocaleData: SiteData) => PageLang;
+    resolvePageLayout: (pageData: PageData, layouts: Layouts) => PageLayout;
     resolveRouteLocale: (locales: SiteData['locales'], routePath: string) => RouteLocale;
-    resolveSiteLocaleData: (site: SiteData, routeLocale: RouteLocale) => SiteLocaleData;
+    resolveSiteLocaleData: (siteData: SiteData, routeLocale: RouteLocale) => SiteLocaleData;
 };
 
-export { type ClientConfig, ClientOnly, Content, type Layouts, type LayoutsRef, type PageChunk, type PageDataRef, type PageFrontmatterRef, type PageHead, type PageHeadRef, type PageHeadTitle, type PageHeadTitleRef, type PageLang, type PageLangRef, type PageLayoutRef, type Redirects, type Route, RouteLink, type RouteLinkProps, type RouteLocale, type RouteLocaleRef, type RouteMeta, type Routes, type SiteDataRef, type SiteLocaleData, type SiteLocaleDataRef, type UpdateHead, defineClientConfig, layoutsSymbol, pageDataSymbol, pageFrontmatterSymbol, pageHeadSymbol, pageHeadTitleSymbol, pageLangSymbol, pageLayoutSymbol, redirects, resolveRoute, resolveRoutePath, resolvers, routeLocaleSymbol, routes, siteData, siteLocaleDataSymbol, updateHeadSymbol, useLayouts, usePageData, usePageFrontmatter, usePageHead, usePageHeadTitle, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };
+/**
+ * Prefix url with site base
+ */
+declare const withBase: (url: string) => string;
+
+export { type ClientConfig, type ClientData, ClientOnly, Content, type Layouts, type LayoutsRef, type PageChunk, type PageComponent, type PageComponentRef, type PageDataRef, type PageFrontmatterRef, type PageHead, type PageHeadRef, type PageHeadTitle, type PageHeadTitleRef, type PageLang, type PageLangRef, type PageLayout, type PageLayoutRef, type Redirects, type RedirectsRef, type Route, RouteLink, type RouteLinkProps, type RouteLocale, type RouteLocaleRef, type RouteMeta, type RoutePath, type RoutePathRef, type Routes, type RoutesRef, type SiteDataRef, type SiteLocaleData, type SiteLocaleDataRef, type UpdateHead, clientDataSymbol, resolveRoute, resolveRoutePath, resolvers, updateHeadSymbol, useClientData, useLayouts, usePageComponent, usePageData, usePageFrontmatter, usePageHead, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutePath, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };

package/dist/index.js

@@ -2,68 +2,52 @@ import {
   ClientOnly,
   Content,
   RouteLink,
-  defineClientConfig,
-  layoutsSymbol,
-  pageDataSymbol,
-  pageFrontmatterSymbol,
-  pageHeadSymbol,
-  pageHeadTitleSymbol,
-  pageLangSymbol,
-  pageLayoutSymbol,
-  redirects,
+  clientDataSymbol,
   resolveRoute,
   resolveRoutePath,
   resolvers,
-  routeLocaleSymbol,
-  routes,
-  siteData,
-  siteLocaleDataSymbol,
   updateHeadSymbol,
+  useClientData,
   useLayouts,
+  usePageComponent,
   usePageData,
   usePageFrontmatter,
   usePageHead,
-  usePageHeadTitle,
   usePageLang,
   usePageLayout,
   useRedirects,
+  useRoute,
   useRouteLocale,
+  useRoutePath,
+  useRouter,
   useRoutes,
   useSiteData,
   useSiteLocaleData,
   useUpdateHead,
   withBase
-} from "./chunk-VSQZBVKH.js";
+} from "./chunk-VWNFZFFH.js";
 export {
   ClientOnly,
   Content,
   RouteLink,
-  defineClientConfig,
-  layoutsSymbol,
-  pageDataSymbol,
-  pageFrontmatterSymbol,
-  pageHeadSymbol,
-  pageHeadTitleSymbol,
-  pageLangSymbol,
-  pageLayoutSymbol,
-  redirects,
+  clientDataSymbol,
   resolveRoute,
   resolveRoutePath,
   resolvers,
-  routeLocaleSymbol,
-  routes,
-  siteData,
-  siteLocaleDataSymbol,
   updateHeadSymbol,
+  useClientData,
   useLayouts,
+  usePageComponent,
   usePageData,
   usePageFrontmatter,
   usePageHead,
-  usePageHeadTitle,
   usePageLang,
   usePageLayout,
   useRedirects,
+  useRoute,
   useRouteLocale,
+  useRoutePath,
+  useRouter,
   useRoutes,
   useSiteData,
   useSiteLocaleData,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.7",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -37,7 +37,7 @@
     "@vueuse/core": "^10.7.2",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
-    "@vuepress/shared": "2.0.0-rc.5"
+    "@vuepress/shared": "2.0.0-rc.7"
   },
   "publishConfig": {
     "access": "public"
@@ -54,7 +54,6 @@
     ],
     "external": [
       "@internal/clientConfigs",
-      "@internal/layoutComponents",
       "@internal/routes",
       "@internal/siteData"
     ],

package/dist/chunk-VSQZBVKH.js

@@ -1,400 +0,0 @@
-// src/composables/layouts.ts
-import { inject } from "vue";
-var layoutsSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "layouts" : ""
-);
-var useLayouts = () => {
-  const layouts = inject(layoutsSymbol);
-  if (!layouts) {
-    throw new Error("useLayouts() is called without provider.");
-  }
-  return layouts;
-};
-
-// src/composables/pageData.ts
-import { inject as inject2 } from "vue";
-var pageDataSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageData" : ""
-);
-var usePageData = () => {
-  const pageData = inject2(pageDataSymbol);
-  if (!pageData) {
-    throw new Error("pageData() is called without provider.");
-  }
-  return pageData;
-};
-
-// src/composables/pageFrontmatter.ts
-import { inject as inject3 } from "vue";
-var pageFrontmatterSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageFrontmatter" : ""
-);
-var usePageFrontmatter = () => {
-  const pageFrontmatter = inject3(pageFrontmatterSymbol);
-  if (!pageFrontmatter) {
-    throw new Error("usePageFrontmatter() is called without provider.");
-  }
-  return pageFrontmatter;
-};
-
-// src/composables/pageHead.ts
-import { inject as inject4 } from "vue";
-var pageHeadSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageHead" : ""
-);
-var usePageHead = () => {
-  const pageHead = inject4(pageHeadSymbol);
-  if (!pageHead) {
-    throw new Error("usePageHead() is called without provider.");
-  }
-  return pageHead;
-};
-
-// src/composables/pageHeadTitle.ts
-import { inject as inject5 } from "vue";
-var pageHeadTitleSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageHeadTitle" : ""
-);
-var usePageHeadTitle = () => {
-  const pageHeadTitle = inject5(pageHeadTitleSymbol);
-  if (!pageHeadTitle) {
-    throw new Error("usePageHeadTitle() is called without provider.");
-  }
-  return pageHeadTitle;
-};
-
-// src/composables/pageLang.ts
-import { inject as inject6 } from "vue";
-var pageLangSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageLang" : ""
-);
-var usePageLang = () => {
-  const pageLang = inject6(pageLangSymbol);
-  if (!pageLang) {
-    throw new Error("usePageLang() is called without provider.");
-  }
-  return pageLang;
-};
-
-// src/composables/pageLayout.ts
-import { inject as inject7 } from "vue";
-var pageLayoutSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "pageLayout" : ""
-);
-var usePageLayout = () => {
-  const pageLayout = inject7(pageLayoutSymbol);
-  if (!pageLayout) {
-    throw new Error("usePageLayout() is called without provider.");
-  }
-  return pageLayout;
-};
-
-// src/composables/routeLocale.ts
-import { inject as inject8 } from "vue";
-var routeLocaleSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "routeLocale" : ""
-);
-var useRouteLocale = () => {
-  const routeLocale = inject8(routeLocaleSymbol);
-  if (!routeLocale) {
-    throw new Error("useRouteLocale() is called without provider.");
-  }
-  return routeLocale;
-};
-
-// src/router/routes.ts
-import {
-  redirects as redirectsRaw,
-  routes as routesRaw
-} from "@internal/routes";
-import { shallowRef } from "vue";
-var redirects = shallowRef(redirectsRaw);
-var routes = shallowRef(routesRaw);
-if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
-  __VUE_HMR_RUNTIME__.updateRedirects = (data) => {
-    redirects.value = data;
-  };
-  __VUE_HMR_RUNTIME__.updateRoutes = (data) => {
-    routes.value = data;
-  };
-}
-
-// src/router/resolveRoutePath.ts
-import { normalizeRoutePath } from "@vuepress/shared";
-var resolveRoutePath = (path) => {
-  const normalizedPath = normalizeRoutePath(path);
-  if (routes.value[normalizedPath])
-    return normalizedPath;
-  const encodedPath = encodeURI(normalizedPath);
-  if (routes.value[encodedPath])
-    return encodedPath;
-  return redirects.value[normalizedPath] || normalizedPath;
-};
-
-// src/router/resolveRoute.ts
-var resolveRoute = (path) => {
-  const routePath = resolveRoutePath(path);
-  const route = routes.value[routePath] ?? {
-    ...routes.value["/404.html"],
-    notFound: true
-  };
-  return {
-    path: routePath,
-    notFound: false,
-    ...route
-  };
-};
-
-// src/composables/routes.ts
-var useRedirects = () => redirects;
-var useRoutes = () => routes;
-
-// src/composables/siteData.ts
-import { siteData as siteDataRaw } from "@internal/siteData";
-import { shallowRef as shallowRef2 } from "vue";
-var siteData = shallowRef2(siteDataRaw);
-var useSiteData = () => siteData;
-if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
-  __VUE_HMR_RUNTIME__.updateSiteData = (data) => {
-    siteData.value = data;
-  };
-}
-
-// src/composables/siteLocaleData.ts
-import { inject as inject9 } from "vue";
-var siteLocaleDataSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "siteLocaleData" : ""
-);
-var useSiteLocaleData = () => {
-  const siteLocaleData = inject9(siteLocaleDataSymbol);
-  if (!siteLocaleData) {
-    throw new Error("useSiteLocaleData() is called without provider.");
-  }
-  return siteLocaleData;
-};
-
-// src/composables/updateHead.ts
-import { inject as inject10 } from "vue";
-var updateHeadSymbol = Symbol(
-  __VUEPRESS_DEV__ ? "updateHead" : ""
-);
-var useUpdateHead = () => {
-  const updateHead = inject10(updateHeadSymbol);
-  if (!updateHead) {
-    throw new Error("useUpdateHead() is called without provider.");
-  }
-  return updateHead;
-};
-
-// src/components/ClientOnly.ts
-import { defineComponent, onMounted, ref } from "vue";
-var ClientOnly = defineComponent({
-  name: "ClientOnly",
-  setup(_, ctx) {
-    const isMounted = ref(false);
-    onMounted(() => {
-      isMounted.value = true;
-    });
-    return () => isMounted.value ? ctx.slots.default?.() : null;
-  }
-});
-
-// src/components/Content.ts
-import { computed, defineAsyncComponent, defineComponent as defineComponent2, h } from "vue";
-var Content = defineComponent2({
-  // eslint-disable-next-line vue/no-reserved-component-names
-  name: "Content",
-  props: {
-    path: {
-      type: String,
-      required: false,
-      default: ""
-    }
-  },
-  setup(props) {
-    const pageData = usePageData();
-    const pageComponent = computed(() => {
-      const route = resolveRoute(props.path || pageData.value.path);
-      return defineAsyncComponent(() => route.loader().then(({ comp }) => comp));
-    });
-    return () => h(pageComponent.value);
-  }
-});
-
-// src/helpers/defineClientConfig.ts
-var defineClientConfig = (clientConfig = {}) => clientConfig;
-
-// src/helpers/withBase.ts
-import { isLinkHttp, removeLeadingSlash } from "@vuepress/shared";
-var withBase = (url) => {
-  if (isLinkHttp(url))
-    return url;
-  return `${__VUEPRESS_BASE__}${removeLeadingSlash(url)}`;
-};
-
-// src/components/RouteLink.ts
-import { h as h2 } from "vue";
-import { useRouter } from "vue-router";
-var guardEvent = (event) => {
-  if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
-    return;
-  if (event.defaultPrevented)
-    return;
-  if (event.button !== void 0 && event.button !== 0)
-    return;
-  if (event.currentTarget) {
-    const target = event.currentTarget.getAttribute("target");
-    if (target?.match(/\b_blank\b/i))
-      return;
-  }
-  event.preventDefault();
-  return true;
-};
-var RouteLink = ({ active = false, activeClass = "route-link-active", to, ...attrs }, { slots }) => {
-  const router = useRouter();
-  const path = withBase(resolveRoutePath(to));
-  return h2(
-    "a",
-    {
-      ...attrs,
-      class: ["route-link", { [activeClass]: active }],
-      href: path,
-      onClick: (event = {}) => {
-        guardEvent(event) ? router.push(to).catch() : Promise.resolve();
-      }
-    },
-    slots.default?.()
-  );
-};
-RouteLink.displayName = "RouteLink";
-RouteLink.props = {
-  active: Boolean,
-  activeClass: String,
-  to: String
-};
-
-// src/resolvers.ts
-import { dedupeHead, isString, resolveLocalePath } from "@vuepress/shared";
-import { reactive } from "vue";
-
-// src/constants.ts
-var LAYOUT_NAME_DEFAULT = "Layout";
-var LAYOUT_NAME_NOT_FOUND = "NotFound";
-
-// src/resolvers.ts
-var resolvers = reactive({
-  /**
-   * Resolve layouts component map
-   */
-  resolveLayouts: (clientConfigs) => clientConfigs.reduce(
-    (prev, item) => ({
-      ...prev,
-      ...item.layouts
-    }),
-    {}
-  ),
-  /**
-   * 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 = [
-      ...Array.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, siteLocale.title].filter((item) => !!item).join(" | "),
-  /**
-   * Resolve page language from page data
-   *
-   * It would be used as the `lang` attribute of `<html>` tag
-   */
-  resolvePageLang: (page, siteLocale) => page.lang || siteLocale.lang || "en-US",
-  /**
-   * Resolve layout component of current page
-   */
-  resolvePageLayout: (page, layouts) => {
-    let layoutName;
-    if (page.path) {
-      const frontmatterLayout = page.frontmatter.layout;
-      if (isString(frontmatterLayout)) {
-        layoutName = frontmatterLayout;
-      } else {
-        layoutName = LAYOUT_NAME_DEFAULT;
-      }
-    } else {
-      layoutName = LAYOUT_NAME_NOT_FOUND;
-    }
-    return layouts[layoutName];
-  },
-  /**
-   * 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],
-    head: [
-      // when merging head, the locales head should be placed before root head
-      // to get higher priority
-      ...site.locales[routeLocale]?.head ?? [],
-      ...site.head ?? []
-    ]
-  })
-});
-
-export {
-  layoutsSymbol,
-  useLayouts,
-  pageDataSymbol,
-  usePageData,
-  pageFrontmatterSymbol,
-  usePageFrontmatter,
-  pageHeadSymbol,
-  usePageHead,
-  pageHeadTitleSymbol,
-  usePageHeadTitle,
-  pageLangSymbol,
-  usePageLang,
-  pageLayoutSymbol,
-  usePageLayout,
-  routeLocaleSymbol,
-  useRouteLocale,
-  redirects,
-  routes,
-  resolveRoutePath,
-  resolveRoute,
-  useRedirects,
-  useRoutes,
-  siteData,
-  useSiteData,
-  siteLocaleDataSymbol,
-  useSiteLocaleData,
-  updateHeadSymbol,
-  useUpdateHead,
-  ClientOnly,
-  Content,
-  defineClientConfig,
-  withBase,
-  RouteLink,
-  resolvers
-};