@vuepress/client 2.0.0-rc.3 → 2.0.0-rc.31

package/README.md

@@ -5,7 +5,7 @@
 
 ## Documentation
 
-https://v2.vuepress.vuejs.org
+https://vuepress.vuejs.org
 
 ## License
 

package/dist/app.d.ts

@@ -1,7 +1,6 @@
-import { C as CreateVueAppFunction } from './createVueAppFunction-YNGNKfE3.js';
-import 'vue';
-import 'vue-router';
-
+import { t as CreateVueAppFunction } from "./index-wQR7Pl0s.js";
+import "@internal/userStyle";
+//#region src/app.d.ts
 declare const createVueApp: CreateVueAppFunction;
-
-export { createVueApp };
+//#endregion
+export { createVueApp };

package/dist/app.js

@@ -1,326 +1,264 @@
-import {
-  ClientOnly,
-  Content,
-  VPLink,
-  layoutsSymbol,
-  pageDataSymbol,
-  pageFrontmatterSymbol,
-  pageHeadSymbol,
-  pageHeadTitleSymbol,
-  pageLangSymbol,
-  pageLayoutSymbol,
-  resolveRoute,
-  resolvers,
-  routeLocaleSymbol,
-  routes,
-  siteData,
-  siteLocaleDataSymbol,
-  updateHeadSymbol,
-  usePageHead,
-  usePageLang,
-  usePageLayout,
-  withBase
-} from "./chunk-2SMBJWK6.js";
-
-// src/app.ts
+import { D as usePageLang, E as usePageHead, L as clientDataSymbol, O as usePageLayout, f as redirects, i as ClientOnly, m as updateHeadSymbol, n as resolvers, o as RouteLink, p as routes, r as Content, t as withBase, u as resolveRoute } from "./utils-jFeCv-dX.js";
 import { clientConfigs } from "@internal/clientConfigs";
-import { createApp, createSSRApp, h as h2 } from "vue";
-import { RouterView } from "vue-router";
-
-// src/createVueRouter.ts
-import { removeEndingSlash } from "@vuepress/shared";
-import {
-  createMemoryHistory,
-  createRouter,
-  createWebHistory,
-  START_LOCATION
-} from "vue-router";
-
-// src/components/Vuepress.ts
-import { defineComponent, h } from "vue";
-var Vuepress = defineComponent({
-  name: "Vuepress",
-  setup() {
-    const layout = usePageLayout();
-    return () => h(layout.value);
-  }
-});
-
-// src/createVueRouter.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: [
-      {
-        name: "vuepress-route",
-        path: "/:catchAll(.*)",
-        component: Vuepress
-      }
-    ],
-    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) {
-      const route = resolveRoute(to.path);
-      if (route.path !== to.path) {
-        return route.path;
-      }
-      const pageChunk = await route.loader();
-      to.meta = {
-        // attach route meta
-        ...route.meta,
-        // attach page data to route meta to trigger page data computed when route changes
-        _data: pageChunk.data
-      };
-    }
-  });
-  return router;
+import { computed, createApp, createSSRApp, customRef, h, onMounted, provide, shallowRef, useSSRContext, watch } from "vue";
+import { siteData } from "@internal/siteData";
+import { isPlainObject, isString, removeEndingSlash } from "@vuepress/shared";
+import { START_LOCATION, createMemoryHistory, createRouter, createWebHistory } from "vue-router";
+import "@internal/userStyle";
+//#region src/internal/siteData.ts
+/**
+* Global site data ref
+*/
+const siteData$1 = shallowRef(siteData);
+if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) __VUE_HMR_RUNTIME__.updateSiteData = (data) => {
+	siteData$1.value = data;
 };
-
-// src/setupGlobalComponents.ts
-var setupGlobalComponents = (app) => {
-  app.component("ClientOnly", ClientOnly);
-  app.component("Content", Content);
-  app.component("VPLink", VPLink);
+//#endregion
+//#region src/router/createVueRouter.ts
+/**
+* - use `createWebHistory` in dev mode and build mode client bundle
+* - use `createMemoryHistory` in build mode server bundle
+*/
+const historyCreator = __VUEPRESS_SSR__ ? createMemoryHistory : createWebHistory;
+/**
+* Create router instance
+*/
+const createVueRouter = () => {
+	const router = createRouter({
+		history: historyCreator(removeEndingSlash(__VUEPRESS_BASE__)),
+		routes: [{
+			name: "vuepress-route",
+			path: "/:catchAll(.*)",
+			components: {}
+		}],
+		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) {
+			const route = resolveRoute(to.fullPath);
+			if (route.path !== to.fullPath) return route.path;
+			const pageChunk = await route.loader();
+			to.meta = {
+				...route.meta,
+				_pageChunk: pageChunk
+			};
+		} else if (to.path === from.path) to.meta = from.meta;
+	});
+	return router;
 };
-
-// src/setupGlobalComputed.ts
-import { computedWithControl } from "@vueuse/core";
-import { computed } from "vue";
-var setupGlobalComputed = (app, router, clientConfigs2) => {
-  const routePath = computed(() => router.currentRoute.value.path);
-  const pageData = computedWithControl(
-    routePath,
-    () => router.currentRoute.value.meta._data
-  );
-  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();
-      }
-    };
-  }
-  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, siteLocaleData.value)
-  );
-  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 {
-    layouts,
-    pageData,
-    pageFrontmatter,
-    pageHead,
-    pageHeadTitle,
-    pageLang,
-    pageLayout,
-    routeLocale,
-    siteData,
-    siteLocaleData
-  };
+//#endregion
+//#region src/setupGlobalComponents.ts
+/**
+* Register global built-in components
+*/
+const setupGlobalComponents = (app) => {
+	app.component("ClientOnly", ClientOnly);
+	app.component("Content", Content);
+	app.component("RouteLink", RouteLink);
 };
-
-// src/setupUpdateHead.ts
-import { isPlainObject, isString } from "@vuepress/shared";
-import { onMounted, provide, useSSRContext, watch } 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;
-  }
-  let managedHeadElements = [];
-  const takeOverHeadElements = () => {
-    head.value.forEach((item) => {
-      const headElement = queryHeadElement(item);
-      if (headElement) {
-        managedHeadElements.push(headElement);
-      }
-    });
-  };
-  const generateHeadElements = () => {
-    const result = [];
-    head.value.forEach((item) => {
-      const headElement = createHeadElement(item);
-      if (headElement) {
-        result.push(headElement);
-      }
-    });
-    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(() => {
-    if (!__VUEPRESS_DEV__) {
-      takeOverHeadElements();
-    }
-    watch(head, updateHead, { immediate: __VUEPRESS_DEV__ });
-  });
+//#endregion
+//#region src/setupGlobalComputed.ts
+/**
+* Create and provide global computed
+*/
+const setupGlobalComputed = (app, router, clientConfigs) => {
+	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 = async (newPageData) => {
+		const newPageChunk = {
+			default: (await routes.value[newPageData.path].loader()).default,
+			_pageData: newPageData
+		};
+		routes.value[newPageData.path].loader = async () => Promise.resolve(newPageChunk);
+		if (newPageData.path === router.currentRoute.value.meta._pageChunk?._pageData.path) pageChunk.value = newPageChunk;
+	};
+	const layouts = computed(() => resolvers.resolveLayouts(clientConfigs));
+	const routeLocale = computed(() => resolvers.resolveRouteLocale(siteData$1.value.locales, routePath.value));
+	const siteLocaleData = computed(() => resolvers.resolveSiteLocaleData(siteData$1.value, routeLocale.value));
+	const pageComponent = computed(() => pageChunk.value.default);
+	const pageData = computed(() => pageChunk.value._pageData);
+	const pageFrontmatter = computed(() => pageData.value.frontmatter);
+	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, siteLocaleData.value));
+	const clientData = {
+		layouts,
+		pageData,
+		pageComponent,
+		pageFrontmatter,
+		pageHead,
+		pageHeadTitle,
+		pageLang,
+		pageLayout: computed(() => resolvers.resolvePageLayout(pageData.value, layouts.value)),
+		redirects,
+		routeLocale,
+		routePath,
+		routes,
+		siteData: siteData$1,
+		siteLocaleData,
+		frontmatter: pageFrontmatter,
+		head: pageHead,
+		headTitle: pageHeadTitle,
+		lang: pageLang,
+		page: pageData,
+		site: siteData$1,
+		siteLocale: siteLocaleData
+	};
+	app.provide(clientDataSymbol, clientData);
+	Object.defineProperties(app.config.globalProperties, {
+		$pageFrontmatter: { get: () => pageFrontmatter.value },
+		$pageHead: { get: () => pageHead.value },
+		$pageHeadTitle: { get: () => pageHeadTitle.value },
+		$pageLang: { get: () => pageLang.value },
+		$pageData: { get: () => pageData.value },
+		$routeLocale: { get: () => routeLocale.value },
+		$withBase: { get: () => withBase },
+		$frontmatter: { get: () => pageFrontmatter.value },
+		$head: { get: () => pageHead.value },
+		$headTitle: { get: () => pageHeadTitle.value },
+		$lang: { get: () => pageLang.value },
+		$page: { get: () => pageData.value },
+		$site: { get: () => siteData$1.value },
+		$siteLocale: { get: () => siteLocaleData.value }
+	});
+	return clientData;
 };
-var queryHeadElement = ([
-  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 headElements = Array.from(
-    document.querySelectorAll(selector)
-  );
-  const matchedHeadElement = headElements.find(
-    (item) => item.innerText === content
-  );
-  return matchedHeadElement || null;
+//#endregion
+//#region src/setupUpdateHead.ts
+/**
+* Query the matched head element of head config
+*/
+const queryHeadElement = ([tagName, attrs, content = ""]) => {
+	const selector = `head > ${tagName}${Object.entries(attrs).map(([key, value]) => {
+		if (isString(value)) return `[${key}=${JSON.stringify(value)}]`;
+		if (value) return `[${key}]`;
+		return "";
+	}).join("")}`;
+	return Array.from(document.querySelectorAll(selector)).find((item) => item.innerText === content) ?? null;
 };
-var createHeadElement = ([
-  tagName,
-  attrs,
-  content
-]) => {
-  if (!isString(tagName)) {
-    return null;
-  }
-  const headElement = document.createElement(tagName);
-  if (isPlainObject(attrs)) {
-    Object.entries(attrs).forEach(([key, value]) => {
-      if (isString(value)) {
-        headElement.setAttribute(key, value);
-      } else if (value === true) {
-        headElement.setAttribute(key, "");
-      }
-    });
-  }
-  if (isString(content)) {
-    headElement.appendChild(document.createTextNode(content));
-  }
-  return headElement;
+/**
+* Create head element from head config
+*/
+const createHeadElement = ([tagName, attrs, content]) => {
+	if (!isString(tagName)) return null;
+	const headElement = document.createElement(tagName);
+	if (isPlainObject(attrs)) Object.entries(attrs).forEach(([key, value]) => {
+		if (isString(value)) headElement.setAttribute(key, value);
+		else if (value) headElement.setAttribute(key, "");
+	});
+	if (isString(content)) headElement.appendChild(document.createTextNode(content));
+	return headElement;
 };
-
-// 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
-  };
+/**
+* Auto update head and provide as global util
+*/
+const setupUpdateHead = () => {
+	const head = usePageHead();
+	const lang = usePageLang();
+	if (__VUEPRESS_SSR__) {
+		const ssrContext = useSSRContext();
+		if (ssrContext) {
+			ssrContext.head = head.value;
+			ssrContext.lang = lang.value;
+		}
+		return;
+	}
+	let managedHeadElements = [];
+	/**
+	* Take over the existing head elements
+	*/
+	const takeOverHeadElements = () => {
+		head.value.forEach((item) => {
+			const headElement = queryHeadElement(item);
+			if (headElement) managedHeadElements.push(headElement);
+		});
+	};
+	/**
+	* Generate head elements from current head config
+	*/
+	const generateHeadElements = () => {
+		const result = [];
+		head.value.forEach((item) => {
+			const headElement = createHeadElement(item);
+			if (headElement) result.push(headElement);
+		});
+		return result;
+	};
+	/**
+	* Update head elements
+	*/
+	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 = [...managedHeadElements.filter((item) => !!item), ...newHeadElements];
+	};
+	provide(updateHeadSymbol, updateHead);
+	onMounted(() => {
+		if (!__VUEPRESS_DEV__) takeOverHeadElements();
+		watch(head, updateHead, { immediate: __VUEPRESS_DEV__ });
+	});
 };
-if (!__VUEPRESS_SSR__) {
-  createVueApp().then(({ app, router }) => {
-    router.isReady().then(() => {
-      app.mount("#app");
-    });
-  });
-}
-export {
-  createVueApp
+//#endregion
+//#region src/app.ts
+/**
+* - use `createApp` in dev mode
+* - use `createSSRApp` in build mode
+*/
+const appCreator = __VUEPRESS_DEV__ ? createApp : createSSRApp;
+const createVueApp = async () => {
+	const app = appCreator({
+		name: "Vuepress",
+		setup() {
+			setupUpdateHead();
+			for (const clientConfig of clientConfigs) clientConfig.setup?.();
+			const clientRootComponents = clientConfigs.flatMap(({ rootComponents = [] }) => rootComponents.map((component) => h(component)));
+			const pageLayout = usePageLayout();
+			return () => [h(pageLayout.value), clientRootComponents];
+		}
+	});
+	const router = createVueRouter();
+	setupGlobalComponents(app);
+	const globalComputed = setupGlobalComputed(app, router, clientConfigs);
+	if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+		const { setupDevtools } = await import("./setupDevtools-DJemw8CK.js");
+		setupDevtools(app, globalComputed);
+	}
+	for (const clientConfig of clientConfigs) await clientConfig.enhance?.({
+		app,
+		router,
+		siteData: siteData$1
+	});
+	app.use(router);
+	return {
+		app,
+		router
+	};
 };
+if (!__VUEPRESS_SSR__) createVueApp().then(({ app, router }) => {
+	router.isReady().then(() => {
+		app.mount("#app");
+	});
+});
+//#endregion
+export { createVueApp };

package/dist/constants-CWVu3aBh.js

@@ -0,0 +1,57 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+//#region src/devtools/constants.ts
+var constants_exports = /* @__PURE__ */ __exportAll({
+	COMPONENT_STATE_TYPE: () => COMPONENT_STATE_TYPE,
+	INSPECTOR_ID: () => INSPECTOR_ID,
+	INSPECTOR_LABEL: () => INSPECTOR_LABEL,
+	INSPECTOR_NODES: () => INSPECTOR_NODES,
+	INSPECTOR_STATE_SECTION_NAME: () => INSPECTOR_STATE_SECTION_NAME,
+	PLUGIN_ID: () => PLUGIN_ID,
+	PLUGIN_LABEL: () => PLUGIN_LABEL
+});
+const PLUGIN_ID = "org.vuejs.vuepress";
+const PLUGIN_LABEL = "VuePress";
+const COMPONENT_STATE_TYPE = PLUGIN_LABEL;
+const INSPECTOR_ID = PLUGIN_ID;
+const INSPECTOR_LABEL = PLUGIN_LABEL;
+const INSPECTOR_NODE_INTERNAL = {
+	id: "INTERNAL",
+	label: "Internal",
+	keys: [
+		"layouts",
+		"routes",
+		"redirects"
+	]
+};
+const INSPECTOR_NODE_SITE = {
+	id: "SITE",
+	label: "Site",
+	keys: ["siteData", "siteLocaleData"]
+};
+const INSPECTOR_NODE_ROUTE = {
+	id: "ROUTE",
+	label: "Route",
+	keys: ["routePath", "routeLocale"]
+};
+const INSPECTOR_NODE_PAGE = {
+	id: "PAGE",
+	label: "Page",
+	keys: [
+		"pageData",
+		"pageFrontmatter",
+		"pageLang",
+		"pageHead",
+		"pageHeadTitle",
+		"pageLayout",
+		"pageComponent"
+	]
+};
+const INSPECTOR_NODES = {
+	[INSPECTOR_NODE_INTERNAL.id]: INSPECTOR_NODE_INTERNAL,
+	[INSPECTOR_NODE_SITE.id]: INSPECTOR_NODE_SITE,
+	[INSPECTOR_NODE_ROUTE.id]: INSPECTOR_NODE_ROUTE,
+	[INSPECTOR_NODE_PAGE.id]: INSPECTOR_NODE_PAGE
+};
+const INSPECTOR_STATE_SECTION_NAME = "State";
+//#endregion
+export { INSPECTOR_STATE_SECTION_NAME as a, constants_exports as c, INSPECTOR_NODES as i, INSPECTOR_ID as n, PLUGIN_ID as o, INSPECTOR_LABEL as r, PLUGIN_LABEL as s, COMPONENT_STATE_TYPE as t };