feat: setup devtools and remove debug component (#721)

package.json

@@ -74,6 +74,7 @@
     "@docsearch/css": "^3.0.0",
     "@docsearch/js": "^3.0.0",
     "@vitejs/plugin-vue": "^2.3.2",
+    "@vue/devtools-api": "^6.1.4",
     "@vueuse/core": "^8.5.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "shiki": "^0.10.1",

src/client/app/devtools.ts

@@ -0,0 +1,41 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import type { App } from 'vue'
+import type { Router } from './router'
+import type { VitePressData } from './data'
+
+const COMPONENT_STATE_TYPE = 'VitePress'
+
+export const setupDevtools = (
+  app: App,
+  router: Router,
+  data: VitePressData
+): void => {
+  setupDevtoolsPlugin(
+    {
+      // fix recursive reference
+      app: app as any,
+      id: 'org.vuejs.vitepress',
+      label: 'VitePress',
+      packageName: 'vitepress',
+      homepage: 'https://vitepress.vuejs.org',
+      componentStateTypes: [COMPONENT_STATE_TYPE]
+    },
+    (api) => {
+      api.on.inspectComponent((payload) => {
+        payload.instanceData.state.push({
+          type: COMPONENT_STATE_TYPE,
+          key: 'route',
+          value: router.route,
+          editable: false
+        })
+
+        payload.instanceData.state.push({
+          type: COMPONENT_STATE_TYPE,
+          key: 'data',
+          value: data,
+          editable: false
+        })
+      })
+    }
+  )
+}

src/client/app/index.ts

@@ -2,7 +2,6 @@ import {
   App,
   createApp as createClientApp,
   createSSRApp,
-  defineAsyncComponent,
   h,
   onMounted,
   watch
@@ -58,12 +57,6 @@ export function createApp() {
   // install global components
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
-  app.component(
-    'Debug',
-    import.meta.env.PROD
-      ? () => null
-      : defineAsyncComponent(() => import('./components/Debug.vue'))
-  )
 
   // expose $frontmatter
   Object.defineProperty(app.config.globalProperties, '$frontmatter', {
@@ -80,6 +73,13 @@ export function createApp() {
     })
   }
 
+  // setup devtools in dev mode
+  if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) {
+    import('./devtools').then(({ setupDevtools }) =>
+      setupDevtools(app, router, data)
+    )
+  }
+
   return { app, router, data }
 }
 

src/client/index.ts

@@ -24,6 +24,3 @@ export { inBrowser, withBase } from './app/utils'
 
 // components
 export { Content } from './app/components/Content'
-
-import _Debug from './app/components/Debug.vue'
-export const Debug = _Debug as import('vue').ComponentOptions

src/client/shim.d.ts

@@ -1,6 +1,7 @@
 declare const __VP_HASH_MAP__: Record<string, string>
 declare const __ALGOLIA__: boolean
 declare const __CARBON__: boolean
+declare const __VUE_PROD_DEVTOOLS__: boolean
 
 declare module '*.vue' {
   import { ComponentOptions } from 'vue'