feat(plugin-theme-data): add devtools support

Author: meteorlxy

packages/@vuepress/plugin-theme-data/package.json

@@ -29,6 +29,7 @@
     "copy": "cpx \"src/**/*.d.ts\" lib"
   },
   "dependencies": {
+    "@vue/devtools-api": "^6.0.0-beta.21.1",
     "@vuepress/client": "2.0.0-beta.33",
     "@vuepress/core": "2.0.0-beta.33",
     "@vuepress/shared": "2.0.0-beta.33",

packages/@vuepress/plugin-theme-data/src/client/clientAppEnhance.ts

@@ -1,3 +1,4 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
 import { defineClientAppEnhance, routeLocaleSymbol } from '@vuepress/client'
 import { computed } from 'vue'
 import {
@@ -28,4 +29,37 @@ export default defineClientAppEnhance(({ app }) => {
       },
     },
   })
+
+  // setup devtools in dev mode
+  if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+    setupDevtoolsPlugin(
+      {
+        app,
+        id: 'org.vuejs.vuepress.plugin-theme-data',
+        label: 'VuePress Theme Data Plugin',
+        packageName: '@vuepress/plugin-theme-data',
+        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(
+            {
+              type: 'VuePress',
+              key: 'themeData',
+              editable: false,
+              value: themeData.value,
+            },
+            {
+              type: 'VuePress',
+              key: 'themeLocaleData',
+              editable: false,
+              value: themeLocaleData.value,
+            }
+          )
+        })
+      }
+    )
+  }
 })