@vuepress/client 2.0.0-rc.19 → 2.0.0-rc.20

package/dist/app.js

@@ -12,7 +12,8 @@ import {
   usePageLang,
   usePageLayout,
   withBase
-} from "./chunk-LVRERRCW.js";
+} from "./chunk-TET3OVHF.js";
+import "./chunk-MLKGABMK.js";
 
 // src/app.ts
 import { clientConfigs } from "@internal/clientConfigs";
@@ -292,7 +293,7 @@ var createVueApp = async () => {
   setupGlobalComponents(app);
   const globalComputed = setupGlobalComputed(app, router, clientConfigs);
   if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
-    const { setupDevtools } = await import("./setupDevtools-7MC2TMWH.js");
+    const { setupDevtools } = await import("./setupDevtools-QXEOFQJV.js");
     setupDevtools(app, globalComputed);
   }
   for (const clientConfig of clientConfigs) {

package/dist/chunk-MLKGABMK.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};

package/dist/{chunk-LVRERRCW.js → chunk-TET3OVHF.js}

@@ -26,6 +26,23 @@ var useRoutes = () => useClientData().routes;
 var useSiteData = () => useClientData().siteData;
 var useSiteLocaleData = () => useClientData().siteLocaleData;
 
+// src/composables/onContentUpdated.ts
+import { onUnmounted } from "vue";
+
+// src/internal/contentUpdatedCallbacks.ts
+import { shallowRef } from "vue";
+var contentUpdatedCallbacks = shallowRef([]);
+
+// src/composables/onContentUpdated.ts
+var onContentUpdated = (fn) => {
+  contentUpdatedCallbacks.value.push(fn);
+  onUnmounted(() => {
+    contentUpdatedCallbacks.value = contentUpdatedCallbacks.value.filter(
+      (f) => f !== fn
+    );
+  });
+};
+
 // src/composables/updateHead.ts
 import { inject as inject2 } from "vue";
 var updateHeadSymbol = Symbol(
@@ -47,9 +64,9 @@ import {
   redirects as redirectsRaw,
   routes as routesRaw
 } from "@internal/routes";
-import { shallowRef } from "vue";
-var redirects = shallowRef(redirectsRaw);
-var routes = shallowRef(routesRaw);
+import { shallowRef as shallowRef2 } from "vue";
+var redirects = shallowRef2(redirectsRaw);
+var routes = shallowRef2(routesRaw);
 if (__VUEPRESS_DEV__ && (import.meta.webpackHot || import.meta.hot)) {
   __VUE_HMR_RUNTIME__.updateRedirects = (data) => {
     redirects.value = data;
@@ -262,7 +279,10 @@ var ClientOnly = defineComponent3({
 });
 
 // src/components/Content.ts
-import { computed as computed3, defineAsyncComponent, defineComponent as defineComponent4, h as h3 } from "vue";
+import { computed as computed3, defineAsyncComponent, defineComponent as defineComponent4, h as h3, watch } from "vue";
+var runContentUpdatedCallbacks = (reason) => {
+  contentUpdatedCallbacks.value.forEach((fn) => fn(reason));
+};
 var Content = defineComponent4({
   name: "Content",
   props: {
@@ -281,7 +301,25 @@ var Content = defineComponent4({
         async () => route.loader().then(({ comp }) => comp)
       );
     });
-    return () => h3(ContentComponent.value);
+    const frontmatter = usePageFrontmatter();
+    watch(
+      frontmatter,
+      () => {
+        runContentUpdatedCallbacks("updated");
+      },
+      { deep: true, flush: "post" }
+    );
+    return () => h3(ContentComponent.value, {
+      onVnodeMounted: () => {
+        runContentUpdatedCallbacks("mounted");
+      },
+      onVnodeUpdated: () => {
+        runContentUpdatedCallbacks("updated");
+      },
+      onVnodeBeforeUnmount: () => {
+        runContentUpdatedCallbacks("beforeUnmount");
+      }
+    });
   }
 });
 
@@ -390,6 +428,7 @@ export {
   useRoutes,
   useSiteData,
   useSiteLocaleData,
+  onContentUpdated,
   updateHeadSymbol,
   useUpdateHead,
   redirects,

package/dist/chunk-XZCIWC7J.js

@@ -0,0 +1,66 @@
+import {
+  __export
+} from "./chunk-MLKGABMK.js";
+
+// src/devtools/constants.ts
+var constants_exports = {};
+__export(constants_exports, {
+  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
+});
+var PLUGIN_ID = "org.vuejs.vuepress";
+var PLUGIN_LABEL = "VuePress";
+var COMPONENT_STATE_TYPE = PLUGIN_LABEL;
+var INSPECTOR_ID = PLUGIN_ID;
+var INSPECTOR_LABEL = PLUGIN_LABEL;
+var INSPECTOR_NODE_INTERNAL = {
+  id: "INTERNAL",
+  label: "Internal",
+  keys: ["layouts", "routes", "redirects"]
+};
+var INSPECTOR_NODE_SITE = {
+  id: "SITE",
+  label: "Site",
+  keys: ["siteData", "siteLocaleData"]
+};
+var INSPECTOR_NODE_ROUTE = {
+  id: "ROUTE",
+  label: "Route",
+  keys: ["routePath", "routeLocale"]
+};
+var INSPECTOR_NODE_PAGE = {
+  id: "PAGE",
+  label: "Page",
+  keys: [
+    "pageData",
+    "pageFrontmatter",
+    "pageLang",
+    "pageHead",
+    "pageHeadTitle",
+    "pageLayout",
+    "pageComponent"
+  ]
+};
+var 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
+};
+var INSPECTOR_STATE_SECTION_NAME = "State";
+
+export {
+  PLUGIN_ID,
+  PLUGIN_LABEL,
+  COMPONENT_STATE_TYPE,
+  INSPECTOR_ID,
+  INSPECTOR_LABEL,
+  INSPECTOR_NODES,
+  INSPECTOR_STATE_SECTION_NAME,
+  constants_exports
+};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as vue from 'vue';
 import { Component, ComputedRef, Ref, App, PropType, VNode, SlotsType, InjectionKey } from 'vue';
-import { PageData, HeadConfig, PageFrontmatter, SiteData, SiteLocaleData } from '@vuepress/shared';
+import { PageData, PageFrontmatter, HeadConfig, SiteData, SiteLocaleData } from '@vuepress/shared';
 export { HeadConfig, PageData, PageFrontmatter, PageHeader, SiteData, SiteLocaleData } from '@vuepress/shared';
 import { Router } from 'vue-router';
 export { RouteLocationNormalizedLoaded, Router, useRoute, useRouter } from 'vue-router';
@@ -53,11 +53,11 @@ type RouteLocaleRef = ComputedRef<RouteLocale>;
 type RoutesRef = Ref<Routes>;
 type SiteDataRef = Ref<SiteData>;
 type SiteLocaleDataRef = ComputedRef<SiteLocaleData>;
-interface ClientData {
+interface ClientData<Frontmatter extends Record<string, unknown> = Record<string, unknown>, Data extends Record<string, unknown> = Record<string, unknown>> {
     layouts: LayoutsRef;
     pageComponent: PageComponentRef;
-    pageData: PageDataRef;
-    pageFrontmatter: PageFrontmatterRef;
+    pageData: PageDataRef<Data>;
+    pageFrontmatter: PageFrontmatterRef<Frontmatter>;
     pageHead: PageHeadRef;
     pageHeadTitle: PageHeadTitleRef;
     pageLang: PageLangRef;
@@ -97,6 +97,9 @@ interface ClientConfig {
     rootComponents?: Component[];
 }
 
+type ContentUpdatedReason = 'beforeUnmount' | 'mounted' | 'updated';
+type ContentUpdatedCallback = (reason: ContentUpdatedReason) => unknown;
+
 interface AutoLinkConfig {
     /**
      * Pattern to determine if the link should be active, which has higher priority than `exact`
@@ -268,7 +271,7 @@ declare const clientDataSymbol: InjectionKey<ClientData>;
 /**
  * Returns client data
  */
-declare const useClientData: () => ClientData;
+declare const useClientData: <Frontmatter extends Record<string, unknown> = Record<string, unknown>, Data extends Record<string, unknown> = Record<string, unknown>>() => ClientData<Frontmatter, Data>;
 
 declare const useLayouts: () => LayoutsRef;
 declare const usePageComponent: () => PageComponentRef;
@@ -284,6 +287,12 @@ declare const useRoutes: () => RoutesRef;
 declare const useSiteData: () => SiteDataRef;
 declare const useSiteLocaleData: () => SiteLocaleDataRef;
 
+/**
+ * Register callback that is called every time the markdown content is updated
+ * in the DOM.
+ */
+declare const onContentUpdated: (fn: ContentUpdatedCallback) => void;
+
 /**
  * A util function to force update `<head>` of current page
  */
@@ -297,6 +306,46 @@ declare const updateHeadSymbol: InjectionKey<UpdateHead>;
  */
 declare const useUpdateHead: () => UpdateHead;
 
+declare const PLUGIN_ID = "org.vuejs.vuepress";
+declare const PLUGIN_LABEL = "VuePress";
+declare const COMPONENT_STATE_TYPE = "VuePress";
+declare const INSPECTOR_ID = "org.vuejs.vuepress";
+declare const INSPECTOR_LABEL = "VuePress";
+declare const INSPECTOR_NODES: {
+    INTERNAL: {
+        readonly id: "INTERNAL";
+        readonly label: "Internal";
+        readonly keys: ["layouts", "routes", "redirects"];
+    };
+    SITE: {
+        readonly id: "SITE";
+        readonly label: "Site";
+        readonly keys: ["siteData", "siteLocaleData"];
+    };
+    ROUTE: {
+        readonly id: "ROUTE";
+        readonly label: "Route";
+        readonly keys: ["routePath", "routeLocale"];
+    };
+    PAGE: {
+        readonly id: "PAGE";
+        readonly label: "Page";
+        readonly keys: ["pageData", "pageFrontmatter", "pageLang", "pageHead", "pageHeadTitle", "pageLayout", "pageComponent"];
+    };
+};
+declare const INSPECTOR_STATE_SECTION_NAME = "State";
+
+declare const constants_COMPONENT_STATE_TYPE: typeof COMPONENT_STATE_TYPE;
+declare const constants_INSPECTOR_ID: typeof INSPECTOR_ID;
+declare const constants_INSPECTOR_LABEL: typeof INSPECTOR_LABEL;
+declare const constants_INSPECTOR_NODES: typeof INSPECTOR_NODES;
+declare const constants_INSPECTOR_STATE_SECTION_NAME: typeof INSPECTOR_STATE_SECTION_NAME;
+declare const constants_PLUGIN_ID: typeof PLUGIN_ID;
+declare const constants_PLUGIN_LABEL: typeof PLUGIN_LABEL;
+declare namespace constants {
+  export { constants_COMPONENT_STATE_TYPE as COMPONENT_STATE_TYPE, constants_INSPECTOR_ID as INSPECTOR_ID, constants_INSPECTOR_LABEL as INSPECTOR_LABEL, constants_INSPECTOR_NODES as INSPECTOR_NODES, constants_INSPECTOR_STATE_SECTION_NAME as INSPECTOR_STATE_SECTION_NAME, constants_PLUGIN_ID as PLUGIN_ID, constants_PLUGIN_LABEL as PLUGIN_LABEL };
+}
+
 interface ResolvedRoute<T extends RouteMeta = RouteMeta> extends Route<T> {
     path: string;
     notFound: boolean;
@@ -343,4 +392,4 @@ declare const defineClientConfig: (clientConfig?: ClientConfig) => ClientConfig;
  */
 declare const withBase: (url: string) => string;
 
-export { AutoLink, type AutoLinkConfig, 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 ResolvedRoute, type Route, RouteLink, type RouteLinkProps, type RouteLocale, type RouteLocaleRef, type RouteMeta, type RoutePath, type RoutePathRef, type Routes, type RoutesRef, type SiteDataRef, type SiteLocaleDataRef, type UpdateHead, clientDataSymbol, defineClientConfig, resolveRoute, resolveRouteFullPath, resolveRoutePath, resolvers, updateHeadSymbol, useClientData, useLayouts, usePageComponent, usePageData, usePageFrontmatter, usePageHead, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutePath, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };
+export { AutoLink, type AutoLinkConfig, type ClientConfig, type ClientData, ClientOnly, Content, type ContentUpdatedCallback, type ContentUpdatedReason, constants as DEVTOOLS, 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 ResolvedRoute, type Route, RouteLink, type RouteLinkProps, type RouteLocale, type RouteLocaleRef, type RouteMeta, type RoutePath, type RoutePathRef, type Routes, type RoutesRef, type SiteDataRef, type SiteLocaleDataRef, type UpdateHead, clientDataSymbol, defineClientConfig, onContentUpdated, resolveRoute, resolveRouteFullPath, resolveRoutePath, resolvers, updateHeadSymbol, useClientData, useLayouts, usePageComponent, usePageData, usePageFrontmatter, usePageHead, usePageLang, usePageLayout, useRedirects, useRouteLocale, useRoutePath, useRoutes, useSiteData, useSiteLocaleData, useUpdateHead, withBase };

package/dist/index.js

@@ -5,6 +5,7 @@ import {
   RouteLink,
   clientDataSymbol,
   defineClientConfig,
+  onContentUpdated,
   resolveRoute,
   resolveRouteFullPath,
   resolveRoutePath,
@@ -28,14 +29,20 @@ import {
   useSiteLocaleData,
   useUpdateHead,
   withBase
-} from "./chunk-LVRERRCW.js";
+} from "./chunk-TET3OVHF.js";
+import {
+  constants_exports
+} from "./chunk-XZCIWC7J.js";
+import "./chunk-MLKGABMK.js";
 export {
   AutoLink,
   ClientOnly,
   Content,
+  constants_exports as DEVTOOLS,
   RouteLink,
   clientDataSymbol,
   defineClientConfig,
+  onContentUpdated,
   resolveRoute,
   resolveRouteFullPath,
   resolveRoutePath,

package/dist/{setupDevtools-7MC2TMWH.js → setupDevtools-QXEOFQJV.js}

@@ -1,13 +1,17 @@
-// src/setupDevtools.ts
+import {
+  COMPONENT_STATE_TYPE,
+  INSPECTOR_ID,
+  INSPECTOR_LABEL,
+  INSPECTOR_NODES,
+  INSPECTOR_STATE_SECTION_NAME,
+  PLUGIN_ID,
+  PLUGIN_LABEL
+} from "./chunk-XZCIWC7J.js";
+import "./chunk-MLKGABMK.js";
+
+// src/devtools/setupDevtools.ts
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
 import { watch } from "vue";
-var PLUGIN_ID = "org.vuejs.vuepress";
-var PLUGIN_LABEL = "VuePress";
-var PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL;
-var INSPECTOR_ID = PLUGIN_ID;
-var INSPECTOR_LABEL = PLUGIN_LABEL;
-var INSPECTOR_CLIENT_DATA_ID = "client-data";
-var INSPECTOR_CLIENT_DATA_LABEL = "Client Data";
 var setupDevtools = (app, clientData) => {
   setupDevtoolsPlugin(
     {
@@ -18,7 +22,7 @@ var setupDevtools = (app, clientData) => {
       packageName: "@vuepress/client",
       homepage: "https://vuepress.vuejs.org",
       logo: "https://vuepress.vuejs.org/images/hero.png",
-      componentStateTypes: [PLUGIN_COMPONENT_STATE_TYPE]
+      componentStateTypes: [COMPONENT_STATE_TYPE]
     },
     (api) => {
       const clientDataEntries = Object.entries(clientData);
@@ -27,7 +31,7 @@ var setupDevtools = (app, clientData) => {
       api.on.inspectComponent((payload) => {
         payload.instanceData.state.push(
           ...clientDataEntries.map(([name, item]) => ({
-            type: PLUGIN_COMPONENT_STATE_TYPE,
+            type: COMPONENT_STATE_TYPE,
             editable: false,
             key: name,
             value: item.value
@@ -41,32 +45,32 @@ var setupDevtools = (app, clientData) => {
       });
       api.on.getInspectorTree((payload) => {
         if (payload.inspectorId !== INSPECTOR_ID) return;
-        payload.rootNodes = [
-          {
-            id: INSPECTOR_CLIENT_DATA_ID,
-            label: INSPECTOR_CLIENT_DATA_LABEL,
-            children: clientDataKeys.map((name) => ({
-              id: name,
-              label: name
+        payload.rootNodes = Object.values(INSPECTOR_NODES).map(
+          (node) => ({
+            id: node.id,
+            label: node.label,
+            children: node.keys.map((key) => ({
+              id: key,
+              label: key
             }))
-          }
-        ];
+          })
+        );
       });
       api.on.getInspectorState((payload) => {
         if (payload.inspectorId !== INSPECTOR_ID) return;
-        if (payload.nodeId === INSPECTOR_CLIENT_DATA_ID) {
+        const inspectorNode = INSPECTOR_NODES[payload.nodeId];
+        if (inspectorNode) {
           payload.state = {
-            [INSPECTOR_CLIENT_DATA_LABEL]: clientDataEntries.map(
-              ([name, item]) => ({
-                key: name,
-                value: item.value
-              })
-            )
+            [inspectorNode.label]: inspectorNode.keys.map((key) => ({
+              key,
+              value: clientData[key].value
+            }))
           };
+          return;
         }
         if (clientDataKeys.includes(payload.nodeId)) {
           payload.state = {
-            [INSPECTOR_CLIENT_DATA_LABEL]: [
+            [INSPECTOR_STATE_SECTION_NAME]: [
               {
                 key: payload.nodeId,
                 value: clientData[payload.nodeId].value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-rc.19",
+  "version": "2.0.0-rc.20",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -33,10 +33,11 @@
     "types.d.ts"
   ],
   "dependencies": {
-    "@vue/devtools-api": "^7.6.7",
+    "@vue/devtools-api": "^7.7.2",
+    "@vue/devtools-kit": "^7.7.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
-    "@vuepress/shared": "2.0.0-rc.19"
+    "@vuepress/shared": "2.0.0-rc.20"
   },
   "publishConfig": {
     "access": "public"