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

pnpm-lock.yaml

@@ -26,6 +26,7 @@ importers:
       '@types/polka': ^0.5.3
       '@types/prompts': ^2.0.14
       '@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
       chokidar: ^3.5.1
@@ -74,6 +75,7 @@ importers:
       '@docsearch/css': 3.1.0
       '@docsearch/js': 3.1.0
       '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.33
+      '@vue/devtools-api': 6.1.4
       '@vueuse/core': 8.5.0_vue@3.2.33
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.10.1
@@ -722,6 +724,10 @@ packages:
       '@vue/shared': 3.2.33
     dev: false
 
+  /@vue/devtools-api/6.1.4:
+    resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==}
+    dev: false
+
   /@vue/reactivity-transform/3.2.33:
     resolution: {integrity: sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==}
     dependencies:

src/client/app/components/Debug.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, reactive } from 'vue'
-import { useData } from '../data'
-
-const data = useData()
-const el = ref<HTMLElement | null>(null)
-const open = ref(false)
-
-// FIXME: remove in next Vue release
-const tempData = reactive(data)
-
-watch(open, (value) => {
-  if (!value) {
-    el.value!.scrollTop = 0
-  }
-})
-</script>
-
-<template>
-  <div class="debug" :class="{ open }" ref="el" @click="open = !open">
-    <p class="title">Debug</p>
-    <pre class="block">{{ tempData }}</pre>
-  </div>
-</template>
-
-<style scoped>
-.debug {
-  box-sizing: border-box;
-  position: fixed;
-  right: 8px;
-  bottom: 8px;
-  z-index: 9999;
-  border-radius: 4px;
-  width: 74px;
-  height: 32px;
-  color: #eeeeee;
-  overflow: hidden;
-  cursor: pointer;
-  background-color: rgba(0, 0, 0, 0.85);
-  transition: all 0.15s ease;
-}
-
-.debug:hover {
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.debug.open {
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  margin-top: 0;
-  border-radius: 0;
-  padding: 0 0;
-  overflow: scroll;
-}
-
-@media (min-width: 512px) {
-  .debug.open {
-    width: 512px;
-  }
-}
-
-.debug.open:hover {
-  background-color: rgba(0, 0, 0, 0.85);
-}
-
-.title {
-  margin: 0;
-  padding: 6px 16px 6px;
-  line-height: 20px;
-  font-size: 13px;
-}
-
-.block {
-  margin: 2px 0 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.16);
-  padding: 8px 16px;
-  font-family: Hack, monospace;
-  font-size: 13px;
-}
-
-.block + .block {
-  margin-top: 8px;
-}
-</style>

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'