@vuepress/client 2.0.0-beta.33 → 2.0.0-beta.34

package/lib/app.js

@@ -9,6 +9,7 @@ import { createMemoryHistory, createRouter, createWebHistory, RouterView, START_
 import { pageData, resolvePageData, setupUpdateHead, siteData, } from './composables';
 import { provideGlobalComputed } from './provideGlobalComputed';
 import { registerGlobalComponents } from './registerGlobalComponents';
+import { setupDevtools } from './setupDevtools';
 /**
  * - use `createApp` in dev mode
  * - use `createSSRApp` in build mode
@@ -60,9 +61,13 @@ export const createVueApp = async () => {
             ]);
         }
     });
-    // global computed and global components
-    provideGlobalComputed(app, router);
+    // global components and computed
     registerGlobalComponents(app);
+    const globalComputed = provideGlobalComputed(app, router);
+    // setup devtools in dev mode
+    if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+        setupDevtools(app, globalComputed);
+    }
     // invoke all clientAppEnhances
     for (const clientAppEnhance of clientAppEnhances) {
         await clientAppEnhance({ app, router, siteData });

package/lib/provideGlobalComputed.d.ts

@@ -1,14 +1,28 @@
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
-import type { PageData, PageFrontmatter, PageHeadTitle, PageLang, RouteLocale, SiteData, SiteLocaleData } from './composables';
+import type { PageData, PageDataRef, PageFrontmatter, PageFrontmatterRef, PageHead, PageHeadRef, PageHeadTitle, PageHeadTitleRef, PageLang, PageLangRef, RouteLocale, RouteLocaleRef, SiteData, SiteDataRef, SiteLocaleData, SiteLocaleDataRef } from './composables';
 import { withBase } from './utils';
+/**
+ * Vuepress client global computed
+ */
+export interface GlobalComputed {
+    pageData: PageDataRef;
+    pageFrontmatter: PageFrontmatterRef;
+    pageHead: PageHeadRef;
+    pageHeadTitle: PageHeadTitleRef;
+    pageLang: PageLangRef;
+    routeLocale: RouteLocaleRef;
+    siteData: SiteDataRef;
+    siteLocaleData: SiteLocaleDataRef;
+}
 /**
  * Create and provide global computed
  */
-export declare const provideGlobalComputed: (app: App, router: Router) => void;
+export declare const provideGlobalComputed: (app: App, router: Router) => GlobalComputed;
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
         $frontmatter: PageFrontmatter;
+        $head: PageHead;
         $headTitle: PageHeadTitle;
         $lang: PageLang;
         $page: PageData;

package/lib/provideGlobalComputed.js

@@ -22,6 +22,7 @@ export const provideGlobalComputed = (app, router) => {
     // provide global helpers
     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 },
@@ -30,4 +31,14 @@ export const provideGlobalComputed = (app, router) => {
         $siteLocale: { get: () => siteLocaleData.value },
         $withBase: { get: () => withBase },
     });
+    return {
+        pageData,
+        pageFrontmatter,
+        pageHead,
+        pageHeadTitle,
+        pageLang,
+        routeLocale,
+        siteData,
+        siteLocaleData,
+    };
 };

package/lib/setupDevtools.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vue';
+import type { GlobalComputed } from './provideGlobalComputed';
+export declare const setupDevtools: (app: App, globalComputed: GlobalComputed) => void;

package/lib/setupDevtools.js

@@ -0,0 +1,21 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+export const setupDevtools = (app, globalComputed) => {
+    setupDevtoolsPlugin({
+        app,
+        id: 'org.vuejs.vuepress',
+        label: 'VuePress',
+        packageName: '@vuepress/client',
+        homepage: 'https://v2.vuepress.vuejs.org',
+        logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
+        componentStateTypes: ['VuePress'],
+    }, (api) => {
+        api.on.inspectComponent((payload) => {
+            payload.instanceData.state.push(...Object.entries(globalComputed).map(([name, item]) => ({
+                type: 'VuePress',
+                key: name,
+                editable: false,
+                value: item.value,
+            })));
+        });
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuepress/client",
-  "version": "2.0.0-beta.33",
+  "version": "2.0.0-beta.34",
   "description": "Client package of VuePress",
   "keywords": [
     "vuepress",
@@ -29,6 +29,7 @@
     "copy": "cpx \"src/**/*.{d.ts,css}\" lib"
   },
   "dependencies": {
+    "@vue/devtools-api": "^6.0.0-beta.21.1",
     "@vuepress/shared": "2.0.0-beta.33",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12"
@@ -40,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0934a5d6685922e0dc6391622b00a3b89140492c"
+  "gitHead": "aba907994697f4d0a691f2e3668dad4bea388f20"
 }

package/types.d.ts

@@ -2,3 +2,5 @@ declare const __VUEPRESS_VERSION__: string
 declare const __VUEPRESS_DEV__: boolean
 declare const __VUEPRESS_SSR__: boolean
 declare const __VUE_HMR_RUNTIME__: Record<string, any>
+declare const __VUE_OPTIONS_API__: boolean
+declare const __VUE_PROD_DEVTOOLS__: boolean