@vuepress/client 2.0.0-rc.1 → 2.0.0-rc.11

package/dist/app.d.ts

@@ -1,4 +1,4 @@
-import { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
+import { C as CreateVueAppFunction } from './createVueAppFunction-onJTVJru.js';
 import 'vue';
 import 'vue-router';
 

package/dist/app.js

@@ -1,32 +1,34 @@
 import {
   ClientOnly,
   Content,
-  layoutsSymbol,
-  pageDataSymbol,
-  pageFrontmatterSymbol,
-  pageHeadSymbol,
-  pageHeadTitleSymbol,
-  pageLangSymbol,
-  pageLayoutSymbol,
-  pagesData,
+  RouteLink,
+  clientDataSymbol,
+  redirects,
+  resolveRoute,
   resolvers,
-  routeLocaleSymbol,
-  siteData,
-  siteLocaleDataSymbol,
+  routes,
   updateHeadSymbol,
   usePageHead,
   usePageLang,
   usePageLayout,
   withBase
-} from "./chunk-PEQEPZ75.js";
+} from "./chunk-MPZOAYAQ.js";
 
 // src/app.ts
 import { clientConfigs } from "@internal/clientConfigs";
-import { createApp, createSSRApp, h as h2 } from "vue";
-import { RouterView } from "vue-router";
+import { createApp, createSSRApp, h } from "vue";
 
-// src/router.ts
-import { pagesComponents } from "@internal/pagesComponents";
+// 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,
@@ -34,67 +36,19 @@ import {
   createWebHistory,
   START_LOCATION
 } from "vue-router";
-
-// src/routes.ts
-import { pagesRoutes } from "@internal/pagesRoutes";
-
-// src/components/Vuepress.ts
-import { defineComponent, h } from "vue";
-var Vuepress = defineComponent({
-  name: "Vuepress",
-  setup() {
-    const layout = usePageLayout();
-    return () => h(layout.value);
-  }
-});
-
-// src/routes.ts
-var createRoutes = () => pagesRoutes.reduce(
-  (result, [name, path, meta, redirects]) => {
-    result.push(
-      {
-        name,
-        path,
-        component: Vuepress,
-        meta
-      },
-      {
-        path: path.endsWith("/") ? (
-          // redirect from `/index.html` to `/`
-          path + "index.html"
-        ) : (
-          // redirect from `/foo` to `/foo.html`
-          path.substring(0, path.length - 5)
-        ),
-        redirect: path
-      },
-      ...redirects.map((item) => ({
-        path: item === ":md" ? (
-          // redirect from `/foo.md` to `/foo.html`
-          path.substring(0, path.length - 5) + ".md"
-        ) : item,
-        redirect: path
-      }))
-    );
-    return result;
-  },
-  [
-    {
-      name: "404",
-      path: "/:catchAll(.*)",
-      component: Vuepress
-    }
-  ]
-);
-
-// src/router.ts
 var historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
 var createVueRouter = () => {
   const router = createRouter({
     // it might be an issue of vue-router that have to remove the ending slash
     history: historyCreator(removeEndingSlash(__VUEPRESS_BASE__)),
-    routes: createRoutes(),
-    scrollBehavior: (to, from, savedPosition) => {
+    routes: [
+      {
+        name: "vuepress-route",
+        path: "/:catchAll(.*)",
+        components: {}
+      }
+    ],
+    scrollBehavior: (to, _from, savedPosition) => {
       if (savedPosition)
         return savedPosition;
       if (to.hash)
@@ -104,11 +58,19 @@ var createVueRouter = () => {
   });
   router.beforeResolve(async (to, from) => {
     if (to.path !== from.path || from === START_LOCATION) {
-      ;
-      [to.meta._data] = await Promise.all([
-        resolvers.resolvePageData(to.name),
-        pagesComponents[to.name]?.__asyncLoader()
-      ]);
+      const route = resolveRoute(to.fullPath);
+      if (route.path !== to.fullPath) {
+        return route.path;
+      }
+      const pageChunk = await route.loader();
+      to.meta = {
+        // attach route meta
+        ...route.meta,
+        // attach page chunk route meta
+        _pageChunk: pageChunk
+      };
+    } else if (to.path === from.path) {
+      to.meta = from.meta;
     }
   });
   return router;
@@ -118,23 +80,30 @@ var createVueRouter = () => {
 var setupGlobalComponents = (app) => {
   app.component("ClientOnly", ClientOnly);
   app.component("Content", Content);
+  app.component("RouteLink", RouteLink);
 };
 
 // src/setupGlobalComputed.ts
-import { computedWithControl } from "@vueuse/core";
-import { computed } from "vue";
+import { computed, customRef } from "vue";
 var setupGlobalComputed = (app, router, clientConfigs2) => {
   const routePath = computed(() => router.currentRoute.value.path);
-  const pageData = computedWithControl(
-    routePath,
-    () => router.currentRoute.value.meta._data
-  );
+  const pageChunk = customRef((track, trigger) => ({
+    get() {
+      track();
+      return router.currentRoute.value.meta._pageChunk;
+    },
+    set(value) {
+      router.currentRoute.value.meta._pageChunk = value;
+      trigger();
+    }
+  }));
   if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
-    __VUE_HMR_RUNTIME__.updatePageData = (data) => {
-      pagesData.value[data.key] = () => Promise.resolve(data);
-      if (data.key === router.currentRoute.value.meta._data?.key) {
-        router.currentRoute.value.meta._data = data;
-        pageData.trigger();
+    __VUE_HMR_RUNTIME__.updatePageData = async (newPageData) => {
+      const oldPageChunk = await routes.value[newPageData.path].loader();
+      const newPageChunk = { comp: oldPageChunk.comp, data: newPageData };
+      routes.value[newPageData.path].loader = () => Promise.resolve(newPageChunk);
+      if (newPageData.path === router.currentRoute.value.meta._pageChunk?.data.path) {
+        pageChunk.value = newPageChunk;
       }
     };
   }
@@ -145,9 +114,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)
   );
@@ -164,38 +133,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
@@ -311,25 +277,24 @@ var createHeadElement = ([
 var appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp;
 var createVueApp = async () => {
   const app = appCreator({
-    name: "VuepressApp",
+    name: "Vuepress",
     setup() {
       setupUpdateHead();
       for (const clientConfig of clientConfigs) {
         clientConfig.setup?.();
       }
-      return () => [
-        h2(RouterView),
-        ...clientConfigs.flatMap(
-          ({ rootComponents = [] }) => rootComponents.map((component) => h2(component))
-        )
-      ];
+      const rootComponents = clientConfigs.flatMap(
+        ({ rootComponents: rootComponents2 = [] }) => rootComponents2.map((component) => h(component))
+      );
+      const pageLayout = usePageLayout();
+      return () => [h(pageLayout.value), rootComponents];
     }
   });
   const router = createVueRouter();
   setupGlobalComponents(app);
   const globalComputed = setupGlobalComputed(app, router, clientConfigs);
   if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
-    const { setupDevtools } = await import("./setupDevtools-X4YFRK4B.js");
+    const { setupDevtools } = await import("./setupDevtools-H6KAGBNI.js");
     setupDevtools(app, globalComputed);
   }
   for (const clientConfig of clientConfigs) {

package/dist/chunk-MPZOAYAQ.js

@@ -0,0 +1,397 @@
+// 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, currentPath) => {
+  const normalizedPath = normalizeRoutePath(path, currentPath);
+  if (routes.value[normalizedPath])
+    return normalizedPath;
+  const encodedPath = encodeURI(normalizedPath);
+  if (routes.value[encodedPath])
+    return encodedPath;
+  return redirects.value[normalizedPath] || redirects.value[encodedPath] || normalizedPath;
+};
+
+// src/router/resolveRoute.ts
+var resolveRoute = (path, currentPath) => {
+  const routePath = resolveRoutePath(path, currentPath);
+  const route = routes.value[routePath] ?? {
+    ...routes.value["/404.html"],
+    notFound: true
+  };
+  return {
+    path: routePath,
+    notFound: false,
+    ...route
+  };
+};
+
+// src/router/index.ts
+import { useRoute, useRouter } from "vue-router";
+
+// src/components/RouteLink.ts
+import { computed, defineComponent, h } from "vue";
+import { useRoute as useRoute2, 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 = defineComponent({
+  name: "RouteLink",
+  props: {
+    /**
+     * The route path to link to
+     */
+    to: {
+      type: String,
+      required: true
+    },
+    /**
+     * Whether the link is active to have an active class
+     *
+     * Notice that the active status is not automatically determined according to the current route.
+     */
+    active: Boolean,
+    /**
+     * The class to add when the link is active
+     */
+    activeClass: {
+      type: String,
+      default: "route-link-active"
+    }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const router = useRouter2();
+    const route = useRoute2();
+    const path = computed(
+      () => props.to.startsWith("#") || props.to.startsWith("?") ? props.to : `${__VUEPRESS_BASE__}${resolveRoutePath(props.to, route.path).substring(1)}`
+    );
+    return () => h(
+      "a",
+      {
+        class: ["route-link", { [props.activeClass]: props.active }],
+        href: path.value,
+        onClick: (event = {}) => {
+          if (guardEvent(event)) {
+            router.push(props.to).catch();
+          }
+        }
+      },
+      slots.default?.()
+    );
+  }
+});
+
+// src/components/AutoLink.ts
+import { isLinkWithProtocol } from "@vuepress/shared";
+import { computed as computed2, defineComponent as defineComponent2, h as h2, toRef } from "vue";
+import { useRoute as useRoute3 } from "vue-router";
+var AutoLink = defineComponent2({
+  name: "AutoLink",
+  props: {
+    config: {
+      type: Object,
+      required: true
+    }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const config = toRef(props, "config");
+    const route = useRoute3();
+    const siteData = useSiteData();
+    const withProtocol = computed2(() => isLinkWithProtocol(config.value.link));
+    const linkTarget = computed2(
+      () => config.value.target || (withProtocol.value ? "_blank" : void 0)
+    );
+    const isBlankTarget = computed2(() => linkTarget.value === "_blank");
+    const isInternal = computed2(
+      () => !withProtocol.value && !isBlankTarget.value
+    );
+    const linkRel = computed2(
+      () => config.value.rel || (isBlankTarget.value ? "noopener noreferrer" : null)
+    );
+    const linkAriaLabel = computed2(
+      () => config.value.ariaLabel ?? config.value.text
+    );
+    const shouldBeActiveInSubpath = computed2(() => {
+      if (config.value.exact)
+        return false;
+      const localePaths = Object.keys(siteData.value.locales);
+      return localePaths.length ? (
+        // Check all the locales
+        localePaths.every((key) => key !== config.value.link)
+      ) : (
+        // Check root
+        config.value.link !== "/"
+      );
+    });
+    const isActive = computed2(() => {
+      if (!isInternal.value)
+        return false;
+      if (config.value.activeMatch) {
+        return (config.value.activeMatch instanceof RegExp ? config.value.activeMatch : new RegExp(config.value.activeMatch, "u")).test(route.path);
+      }
+      if (shouldBeActiveInSubpath.value) {
+        return route.path.startsWith(config.value.link);
+      }
+      return route.path === config.value.link;
+    });
+    return () => {
+      const { before, after, default: defaultSlot } = slots;
+      const content = defaultSlot?.(config.value) || [
+        before?.(config.value),
+        config.value.text,
+        after?.(config.value)
+      ];
+      return isInternal.value ? h2(
+        RouteLink,
+        {
+          "class": "auto-link",
+          "to": config.value.link,
+          "active": isActive.value,
+          "aria-label": linkAriaLabel.value
+        },
+        () => content
+      ) : h2(
+        "a",
+        {
+          "class": "auto-link external-link",
+          "href": config.value.link,
+          "aria-label": linkAriaLabel.value,
+          "rel": linkRel.value,
+          "target": linkTarget.value
+        },
+        content
+      );
+    };
+  }
+});
+
+// src/components/ClientOnly.ts
+import { defineComponent as defineComponent3, onMounted, ref } from "vue";
+var ClientOnly = defineComponent3({
+  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 as computed3, defineAsyncComponent, defineComponent as defineComponent4, h as h3 } from "vue";
+var Content = defineComponent4({
+  // 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 = computed3(() => {
+      if (!props.path)
+        return pageComponent.value;
+      const route = resolveRoute(props.path);
+      return defineAsyncComponent(() => route.loader().then(({ comp }) => comp));
+    });
+    return () => h3(ContentComponent.value);
+  }
+});
+
+// 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;
+    if (!layouts[layoutName]) {
+      throw new Error(`[vuepress] Cannot resolve layout: ${layoutName}`);
+    }
+    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: ({ base, locales, ...siteData }, routeLocale) => ({
+    ...siteData,
+    ...locales[routeLocale],
+    head: [
+      // when merging head, the locales head should be placed before root head
+      // to get higher priority
+      ...locales[routeLocale]?.head ?? [],
+      ...siteData.head ?? []
+    ]
+  })
+});
+
+// src/utils/defineClientConfig.ts
+var defineClientConfig = (clientConfig = {}) => clientConfig;
+
+// src/utils/withBase.ts
+import { isLinkHttp, removeLeadingSlash } from "@vuepress/shared";
+var withBase = (url) => {
+  if (isLinkHttp(url))
+    return url;
+  return `${__VUEPRESS_BASE__}${removeLeadingSlash(url)}`;
+};
+
+export {
+  clientDataSymbol,
+  useClientData,
+  useLayouts,
+  usePageComponent,
+  usePageData,
+  usePageFrontmatter,
+  usePageHead,
+  usePageLang,
+  usePageLayout,
+  useRedirects,
+  useRouteLocale,
+  useRoutePath,
+  useRoutes,
+  useSiteData,
+  useSiteLocaleData,
+  updateHeadSymbol,
+  useUpdateHead,
+  redirects,
+  routes,
+  resolveRoutePath,
+  resolveRoute,
+  useRoute,
+  useRouter,
+  RouteLink,
+  AutoLink,
+  ClientOnly,
+  Content,
+  resolvers,
+  defineClientConfig,
+  withBase
+};