@vuepress/client 2.0.0-rc.0 → 2.0.0-rc.10

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-present, Yuxi (Evan) You
+Copyright (c) 2018-present, VuePress Community
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -0,0 +1,12 @@
+# @vuepress/client
+
+[![npm](https://badgen.net/npm/v/@vuepress/client/next)](https://www.npmjs.com/package/@vuepress/client)
+[![license](https://badgen.net/github/license/vuepress/core)](https://github.com/vuepress/core/blob/main/LICENSE)
+
+## Documentation
+
+https://v2.vuepress.vuejs.org
+
+## License
+
+[MIT](https://github.com/vuepress/core/blob/main/LICENSE)

package/dist/app.d.ts

@@ -0,0 +1,7 @@
+import { C as CreateVueAppFunction } from './createVueAppFunction-onJTVJru.js';
+import 'vue';
+import 'vue-router';
+
+declare const createVueApp: CreateVueAppFunction;
+
+export { createVueApp };

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-DHNSDB55.js";
+} from "./chunk-GA5RAHE7.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,36 +80,43 @@ var createVueRouter = () => {
 var setupGlobalComponents = (app) => {
   app.component("ClientOnly", ClientOnly);
   app.component("Content", Content);
+  app.component("RouteLink", RouteLink);
 };
 
 // src/setupGlobalComputed.ts
-import { computedEager, computedWithControl } from "@vueuse/core";
-import { computed } from "vue";
+import { computed, customRef } from "vue";
 var setupGlobalComputed = (app, router, clientConfigs2) => {
-  const routePath = computedEager(() => router.currentRoute.value.path);
-  const routeLocale = computedEager(
-    () => resolvers.resolveRouteLocale(siteData.value.locales, routePath.value)
-  );
-  const pageData = computedWithControl(
-    routePath,
-    () => router.currentRoute.value.meta._data
-  );
+  const routePath = computed(() => router.currentRoute.value.path);
+  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;
       }
     };
   }
   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 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,43 +133,40 @@ 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
 import { isPlainObject, isString } from "@vuepress/shared";
-import { onMounted, provide, ref, useSSRContext, watch } from "vue";
+import { onMounted, provide, useSSRContext, watch } from "vue";
 var setupUpdateHead = () => {
   const head = usePageHead();
   const lang = usePageLang();
@@ -212,39 +178,55 @@ var setupUpdateHead = () => {
     }
     return;
   }
-  const headTags = ref([]);
-  const loadHead = () => {
+  let managedHeadElements = [];
+  const takeOverHeadElements = () => {
     head.value.forEach((item) => {
-      const tag = queryHeadTag(item);
-      if (tag) {
-        headTags.value.push(tag);
+      const headElement = queryHeadElement(item);
+      if (headElement) {
+        managedHeadElements.push(headElement);
       }
     });
   };
-  const updateHead = () => {
-    document.documentElement.lang = lang.value;
-    headTags.value.forEach((item) => {
-      if (item.parentNode === document.head) {
-        document.head.removeChild(item);
+  const generateHeadElements = () => {
+    const result = [];
+    head.value.forEach((item) => {
+      const headElement = createHeadElement(item);
+      if (headElement) {
+        result.push(headElement);
       }
     });
-    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);
+    return result;
+  };
+  const updateHead = () => {
+    document.documentElement.lang = lang.value;
+    const newHeadElements = generateHeadElements();
+    managedHeadElements.forEach((oldEl, oldIndex) => {
+      const matchedIndex = newHeadElements.findIndex(
+        (newEl) => oldEl.isEqualNode(newEl)
+      );
+      if (matchedIndex === -1) {
+        oldEl.remove();
+        delete managedHeadElements[oldIndex];
+      } else {
+        newHeadElements.splice(matchedIndex, 1);
       }
     });
+    newHeadElements.forEach((el) => document.head.appendChild(el));
+    managedHeadElements = [
+      // filter out empty deleted items
+      ...managedHeadElements.filter((item) => !!item),
+      ...newHeadElements
+    ];
   };
   provide(updateHeadSymbol, updateHead);
   onMounted(() => {
-    loadHead();
-    updateHead();
-    watch(() => head.value, updateHead);
+    if (!__VUEPRESS_DEV__) {
+      takeOverHeadElements();
+    }
+    watch(head, updateHead, { immediate: __VUEPRESS_DEV__ });
   });
 };
-var queryHeadTag = ([
+var queryHeadElement = ([
   tagName,
   attrs,
   content = ""
@@ -259,11 +241,15 @@ var queryHeadTag = ([
     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;
+  const headElements = Array.from(
+    document.querySelectorAll(selector)
+  );
+  const matchedHeadElement = headElements.find(
+    (item) => item.innerText === content
+  );
+  return matchedHeadElement || null;
 };
-var createHeadTag = ([
+var createHeadElement = ([
   tagName,
   attrs,
   content
@@ -271,45 +257,44 @@ var createHeadTag = ([
   if (!isString(tagName)) {
     return null;
   }
-  const tag = document.createElement(tagName);
+  const headElement = document.createElement(tagName);
   if (isPlainObject(attrs)) {
     Object.entries(attrs).forEach(([key, value]) => {
       if (isString(value)) {
-        tag.setAttribute(key, value);
+        headElement.setAttribute(key, value);
       } else if (value === true) {
-        tag.setAttribute(key, "");
+        headElement.setAttribute(key, "");
       }
     });
   }
   if (isString(content)) {
-    tag.appendChild(document.createTextNode(content));
+    headElement.appendChild(document.createTextNode(content));
   }
-  return tag;
+  return headElement;
 };
 
 // src/app.ts
 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) {