feat(client): add vue-devtools support

Author: meteorlxy

.eslintrc.js

@@ -6,6 +6,8 @@ module.exports = {
     __VUEPRESS_DEV__: 'readonly',
     __VUEPRESS_SSR__: 'readonly',
     __VUE_HMR_RUNTIME__: 'readonly',
+    __VUE_OPTIONS_API__: 'readonly',
+    __VUE_PROD_DEVTOOLS__: 'readonly',
   },
   overrides: [
     {

.vscode/settings.json

@@ -32,6 +32,7 @@
     "shiki",
     "slugify",
     "unmount",
+    "vuejs",
     "vuepress",
     "vueuse",
     "zoomable"

packages/@vuepress/client/package.json

@@ -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"

packages/@vuepress/client/src/app.ts

@@ -22,6 +22,7 @@ import {
 } from './composables'
 import { provideGlobalComputed } from './provideGlobalComputed'
 import { registerGlobalComponents } from './registerGlobalComponents'
+import { setupDevtools } from './setupDevtools'
 
 /**
  * - use `createApp` in dev mode
@@ -83,9 +84,14 @@ export const createVueApp: CreateVueAppFunction = 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) {

packages/@vuepress/client/src/provideGlobalComputed.ts

@@ -19,19 +19,45 @@ import {
 } 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 const provideGlobalComputed = (app: App, router: Router): void => {
+export const provideGlobalComputed = (
+  app: App,
+  router: Router
+): GlobalComputed => {
   // create global computed
   const routeLocale = computed(() =>
     resolveRouteLocale(siteData.value.locales, router.currentRoute.value.path)
@@ -63,6 +89,7 @@ export const provideGlobalComputed = (app: App, router: Router): void => {
   // 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 },
@@ -71,11 +98,23 @@ export const provideGlobalComputed = (app: App, router: Router): void => {
     $siteLocale: { get: () => siteLocaleData.value },
     $withBase: { get: () => withBase },
   })
+
+  return {
+    pageData,
+    pageFrontmatter,
+    pageHead,
+    pageHeadTitle,
+    pageLang,
+    routeLocale,
+    siteData,
+    siteLocaleData,
+  }
 }
 
 declare module '@vue/runtime-core' {
   export interface ComponentCustomProperties {
     $frontmatter: PageFrontmatter
+    $head: PageHead
     $headTitle: PageHeadTitle
     $lang: PageLang
     $page: PageData

packages/@vuepress/client/src/setupDevtools.ts

@@ -0,0 +1,32 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import type { App } from 'vue'
+import type { GlobalComputed } from './provideGlobalComputed'
+
+export const setupDevtools = (
+  app: App,
+  globalComputed: GlobalComputed
+): void => {
+  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,
+          }))
+        )
+      })
+    }
+  )
+}

packages/@vuepress/client/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

yarn.lock

@@ -2879,6 +2879,11 @@
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz#5b499647e929c35baf2a66a399578f9aa4601142"
   integrity sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q==
 
+"@vue/devtools-api@^6.0.0-beta.21.1":
+  version "6.0.0-beta.21.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
+  integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
+
 "@vue/[email protected]":
   version "3.2.26"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.26.tgz#6d8f20a4aa2d19728f25de99962addbe7c4d03e9"