@vuepress/client 2.0.0-beta.6 → 2.0.0-beta.61

package/dist/app.js

@@ -0,0 +1,309 @@
+import {
+  ClientOnly,
+  Content,
+  layoutsSymbol,
+  pageData,
+  pageFrontmatterSymbol,
+  pageHeadSymbol,
+  pageHeadTitleSymbol,
+  pageLangSymbol,
+  pageLayoutSymbol,
+  resolvers,
+  routeLocaleSymbol,
+  siteData,
+  siteLocaleDataSymbol,
+  updateHeadSymbol,
+  usePageHead,
+  usePageLang,
+  usePageLayout,
+  withBase
+} from "./chunk-X6BS2PXP.js";
+
+// src/app.ts
+import { clientConfigs } from "@internal/clientConfigs";
+import { createApp, createSSRApp, h as h2 } from "vue";
+import { RouterView } from "vue-router";
+
+// src/router.ts
+import { pagesComponents } from "@internal/pagesComponents";
+import { removeEndingSlash } from "@vuepress/shared";
+import {
+  createMemoryHistory,
+  createRouter,
+  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
+      },
+      ...redirects.map((item) => ({
+        path: 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) => {
+      if (savedPosition)
+        return savedPosition;
+      if (to.hash)
+        return { el: to.hash };
+      return { top: 0 };
+    }
+  });
+  router.beforeResolve(async (to, from) => {
+    if (to.path !== from.path || from === START_LOCATION) {
+      ;
+      [pageData.value] = await Promise.all([
+        resolvers.resolvePageData(to.name),
+        pagesComponents[to.name]?.__asyncLoader()
+      ]);
+    }
+  });
+  return router;
+};
+
+// src/setupGlobalComponents.ts
+var setupGlobalComponents = (app) => {
+  app.component("ClientOnly", ClientOnly);
+  app.component("Content", Content);
+};
+
+// src/setupGlobalComputed.ts
+import { computed, ref, watch } from "vue";
+var setupGlobalComputed = (app, router, clientConfigs2) => {
+  const routePath = ref(router.currentRoute.value.path);
+  watch(
+    () => router.currentRoute.value.path,
+    (value) => routePath.value = value
+  );
+  const layouts = computed(() => resolvers.resolveLayouts(clientConfigs2));
+  const routeLocale = computed(
+    () => resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
+  );
+  const siteLocaleData = computed(
+    () => resolvers.resolveSiteLocaleData(siteData.value, routeLocale.value)
+  );
+  const pageFrontmatter = computed(
+    () => resolvers.resolvePageFrontmatter(pageData.value)
+  );
+  const pageHeadTitle = computed(
+    () => resolvers.resolvePageHeadTitle(pageData.value, siteLocaleData.value)
+  );
+  const pageHead = computed(
+    () => resolvers.resolvePageHead(
+      pageHeadTitle.value,
+      pageFrontmatter.value,
+      siteLocaleData.value
+    )
+  );
+  const pageLang = computed(() => resolvers.resolvePageLang(pageData.value));
+  const pageLayout = computed(
+    () => resolvers.resolvePageLayout(pageData.value, layouts.value)
+  );
+  app.provide(layoutsSymbol, layouts);
+  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 {
+    layouts,
+    pageData,
+    pageFrontmatter,
+    pageHead,
+    pageHeadTitle,
+    pageLang,
+    pageLayout,
+    routeLocale,
+    siteData,
+    siteLocaleData
+  };
+};
+
+// src/setupUpdateHead.ts
+import { isPlainObject, isString } from "@vuepress/shared";
+import { onMounted, provide, ref as ref2, useSSRContext, watch as watch2 } from "vue";
+var setupUpdateHead = () => {
+  const head = usePageHead();
+  const lang = usePageLang();
+  if (__VUEPRESS_SSR__) {
+    const ssrContext = useSSRContext();
+    if (ssrContext) {
+      ssrContext.head = head.value;
+      ssrContext.lang = lang.value;
+    }
+    return;
+  }
+  const headTags = ref2([]);
+  const loadHead = () => {
+    head.value.forEach((item) => {
+      const tag = queryHeadTag(item);
+      if (tag) {
+        headTags.value.push(tag);
+      }
+    });
+  };
+  const updateHead = () => {
+    document.documentElement.lang = lang.value;
+    headTags.value.forEach((item) => {
+      if (item.parentNode === document.head) {
+        document.head.removeChild(item);
+      }
+    });
+    headTags.value.splice(0, headTags.value.length);
+    head.value.forEach((item) => {
+      const tag = createHeadTag(item);
+      if (tag !== null) {
+        document.head.appendChild(tag);
+        headTags.value.push(tag);
+      }
+    });
+  };
+  provide(updateHeadSymbol, updateHead);
+  onMounted(() => {
+    loadHead();
+    updateHead();
+    watch2(
+      () => head.value,
+      () => updateHead()
+    );
+  });
+};
+var queryHeadTag = ([
+  tagName,
+  attrs,
+  content = ""
+]) => {
+  const attrsSelector = Object.entries(attrs).map(([key, value]) => {
+    if (isString(value)) {
+      return `[${key}=${JSON.stringify(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;
+};
+var createHeadTag = ([
+  tagName,
+  attrs,
+  content
+]) => {
+  if (!isString(tagName)) {
+    return null;
+  }
+  const tag = document.createElement(tagName);
+  if (isPlainObject(attrs)) {
+    Object.entries(attrs).forEach(([key, value]) => {
+      if (isString(value)) {
+        tag.setAttribute(key, value);
+      } else if (value === true) {
+        tag.setAttribute(key, "");
+      }
+    });
+  }
+  if (isString(content)) {
+    tag.appendChild(document.createTextNode(content));
+  }
+  return tag;
+};
+
+// src/app.ts
+var appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp;
+var createVueApp = async () => {
+  const app = appCreator({
+    name: "VuepressApp",
+    setup() {
+      setupUpdateHead();
+      for (const clientConfig of clientConfigs) {
+        clientConfig.setup?.();
+      }
+      return () => [
+        h2(RouterView),
+        ...clientConfigs.flatMap(
+          ({ rootComponents = [] }) => rootComponents.map((component) => h2(component))
+        )
+      ];
+    }
+  });
+  const router = createVueRouter();
+  setupGlobalComponents(app);
+  const globalComputed = setupGlobalComputed(app, router, clientConfigs);
+  if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+    const { setupDevtools } = await import("./setupDevtools-X4YFRK4B.js");
+    setupDevtools(app, globalComputed);
+  }
+  for (const clientConfig of clientConfigs) {
+    await clientConfig.enhance?.({ app, router, siteData });
+  }
+  app.use(router);
+  return {
+    app,
+    router
+  };
+};
+if (!__VUEPRESS_SSR__) {
+  createVueApp().then(({ app, router }) => {
+    router.isReady().then(() => {
+      app.mount("#app");
+    });
+  });
+}
+export {
+  createVueApp
+};

package/dist/chunk-X6BS2PXP.js

@@ -0,0 +1,340 @@
+// 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/pagesData.ts
+import { pagesData as pagesDataRaw } from "@internal/pagesData";
+import { ref } from "vue";
+var pagesData = ref(pagesDataRaw);
+var usePagesData = () => pagesData;
+
+// src/composables/pageData.ts
+import { readonly, ref as ref2 } from "vue";
+var pageDataEmpty = readonly({
+  key: "",
+  path: "",
+  title: "",
+  lang: "",
+  frontmatter: {},
+  headers: []
+});
+var pageData = ref2(pageDataEmpty);
+var usePageData = () => pageData;
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
+  __VUE_HMR_RUNTIME__.updatePageData = (data) => {
+    pagesData.value[data.key] = () => Promise.resolve(data);
+    if (data.key === pageData.value.key) {
+      pageData.value = data;
+    }
+  };
+}
+
+// src/composables/pageFrontmatter.ts
+import { inject as inject2 } from "vue";
+var pageFrontmatterSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "pageFrontmatter" : ""
+);
+var usePageFrontmatter = () => {
+  const pageFrontmatter = inject2(pageFrontmatterSymbol);
+  if (!pageFrontmatter) {
+    throw new Error("usePageFrontmatter() is called without provider.");
+  }
+  return pageFrontmatter;
+};
+
+// src/composables/pageHead.ts
+import { inject as inject3 } from "vue";
+var pageHeadSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "pageHead" : ""
+);
+var usePageHead = () => {
+  const pageHead = inject3(pageHeadSymbol);
+  if (!pageHead) {
+    throw new Error("usePageHead() is called without provider.");
+  }
+  return pageHead;
+};
+
+// src/composables/pageHeadTitle.ts
+import { inject as inject4 } from "vue";
+var pageHeadTitleSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "pageHeadTitle" : ""
+);
+var usePageHeadTitle = () => {
+  const pageHeadTitle = inject4(pageHeadTitleSymbol);
+  if (!pageHeadTitle) {
+    throw new Error("usePageHeadTitle() is called without provider.");
+  }
+  return pageHeadTitle;
+};
+
+// src/composables/pageLang.ts
+import { inject as inject5 } from "vue";
+var pageLangSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "pageLang" : ""
+);
+var usePageLang = () => {
+  const pageLang = inject5(pageLangSymbol);
+  if (!pageLang) {
+    throw new Error("usePageLang() is called without provider.");
+  }
+  return pageLang;
+};
+
+// src/composables/pageLayout.ts
+import {
+  inject as inject6
+} from "vue";
+var pageLayoutSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "pageLayout" : ""
+);
+var usePageLayout = () => {
+  const pageLayout = inject6(pageLayoutSymbol);
+  if (!pageLayout) {
+    throw new Error("usePageLayout() is called without provider.");
+  }
+  return pageLayout;
+};
+
+// src/composables/routeLocale.ts
+import { inject as inject7 } from "vue";
+var routeLocaleSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "routeLocale" : ""
+);
+var useRouteLocale = () => {
+  const routeLocale = inject7(routeLocaleSymbol);
+  if (!routeLocale) {
+    throw new Error("useRouteLocale() is called without provider.");
+  }
+  return routeLocale;
+};
+
+// src/composables/siteData.ts
+import { siteData as siteDataRaw } from "@internal/siteData";
+import { ref as ref3 } from "vue";
+var siteData = ref3(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 inject8 } from "vue";
+var siteLocaleDataSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "siteLocaleData" : ""
+);
+var useSiteLocaleData = () => {
+  const siteLocaleData = inject8(siteLocaleDataSymbol);
+  if (!siteLocaleData) {
+    throw new Error("useSiteLocaleData() is called without provider.");
+  }
+  return siteLocaleData;
+};
+
+// src/composables/updateHead.ts
+import { inject as inject9 } from "vue";
+var updateHeadSymbol = Symbol(
+  __VUEPRESS_DEV__ ? "updateHead" : ""
+);
+var useUpdateHead = () => {
+  const updateHead = inject9(updateHeadSymbol);
+  if (!updateHead) {
+    throw new Error("useUpdateHead() is called without provider.");
+  }
+  return updateHead;
+};
+
+// src/resolvers.ts
+import {
+  dedupeHead,
+  isArray,
+  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 data according to page key
+   */
+  resolvePageData: async (pageKey) => {
+    const pageDataResolver = pagesData.value[pageKey];
+    const pageData2 = await pageDataResolver?.();
+    return pageData2 ?? pageDataEmpty;
+  },
+  /**
+   * Resolve page frontmatter from page data
+   */
+  resolvePageFrontmatter: (pageData2) => pageData2.frontmatter,
+  /**
+   * Merge the head config in frontmatter and site locale
+   *
+   * Frontmatter should take priority over site locale
+   */
+  resolvePageHead: (headTitle, frontmatter, siteLocale) => {
+    const description = isString(frontmatter.description) ? frontmatter.description : siteLocale.description;
+    const head = [
+      ...isArray(frontmatter.head) ? frontmatter.head : [],
+      ...siteLocale.head,
+      ["title", {}, headTitle],
+      ["meta", { name: "description", content: description }]
+    ];
+    return dedupeHead(head);
+  },
+  /**
+   * Resolve the content of page head title
+   *
+   * It would be used as the content of the `<title>` tag
+   */
+  resolvePageHeadTitle: (page, siteLocale) => [page.title, 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) => page.lang || "en",
+  /**
+   * 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]
+  })
+});
+
+// src/components/ClientOnly.ts
+import { defineComponent, onMounted, ref as ref4 } from "vue";
+var ClientOnly = defineComponent({
+  name: "ClientOnly",
+  setup(_, ctx) {
+    const isMounted = ref4(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
+    return () => isMounted.value ? ctx.slots.default?.() : null;
+  }
+});
+
+// src/components/Content.ts
+import { pagesComponents } from "@internal/pagesComponents";
+import { computed, defineComponent as defineComponent2, h } from "vue";
+var Content = defineComponent2({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Content",
+  props: {
+    pageKey: {
+      type: String,
+      required: false,
+      default: ""
+    }
+  },
+  setup(props) {
+    const page = usePageData();
+    const pageComponent = computed(
+      () => pagesComponents[props.pageKey || page.value.key]
+    );
+    return () => pageComponent.value ? (
+      // use page component
+      h(pageComponent.value)
+    ) : (
+      // fallback content
+      h(
+        "div",
+        __VUEPRESS_DEV__ ? "Page does not exist. This is a fallback content." : "404 Not Found"
+      )
+    );
+  }
+});
+
+// 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)}`;
+};
+
+export {
+  layoutsSymbol,
+  useLayouts,
+  pagesData,
+  usePagesData,
+  pageDataEmpty,
+  pageData,
+  usePageData,
+  pageFrontmatterSymbol,
+  usePageFrontmatter,
+  pageHeadSymbol,
+  usePageHead,
+  pageHeadTitleSymbol,
+  usePageHeadTitle,
+  pageLangSymbol,
+  usePageLang,
+  pageLayoutSymbol,
+  usePageLayout,
+  routeLocaleSymbol,
+  useRouteLocale,
+  siteData,
+  useSiteData,
+  siteLocaleDataSymbol,
+  useSiteLocaleData,
+  updateHeadSymbol,
+  useUpdateHead,
+  resolvers,
+  ClientOnly,
+  Content,
+  defineClientConfig,
+  withBase
+};