From 8d19b980c5f62d12b04bcfeebc5b5776a04fd343 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Sun, 5 Jun 2022 03:49:21 +0800 Subject: [PATCH 1/3] feat: setup devtools and remove debug component --- package.json | 1 + pnpm-lock.yaml | 6 ++ src/client/app/components/Debug.vue | 86 ----------------------------- src/client/app/devtools.ts | 41 ++++++++++++++ src/client/app/index.ts | 13 ++--- src/client/index.ts | 3 - 6 files changed, 54 insertions(+), 96 deletions(-) delete mode 100644 src/client/app/components/Debug.vue create mode 100644 src/client/app/devtools.ts diff --git a/package.json b/package.json index 6f9182433b15..27cedf18e99f 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 322d556fcc47..a0cb63f71396 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/client/app/components/Debug.vue b/src/client/app/components/Debug.vue deleted file mode 100644 index 41e926a087f0..000000000000 --- a/src/client/app/components/Debug.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - - - diff --git a/src/client/app/devtools.ts b/src/client/app/devtools.ts new file mode 100644 index 000000000000..05935e477a28 --- /dev/null +++ b/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 + }) + }) + } + ) +} diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 2e8e88d60231..d8d6e2310055 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -2,7 +2,6 @@ import { App, createApp as createClientApp, createSSRApp, - defineAsyncComponent, h, onMounted, watch @@ -11,6 +10,7 @@ import Theme from '/@theme/index' import { inBrowser, pathToFile } from './utils' import { Router, RouterSymbol, createRouter } from './router' import { siteDataRef, useData } from './data' +import { setupDevtools } from './devtools' import { useUpdateHead } from './composables/head' import { usePrefetch } from './composables/preFetch' import { dataSymbol, initData } from './data' @@ -58,12 +58,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 +74,11 @@ export function createApp() { }) } + // setup devtools in dev mode + if (import.meta.env.DEV) { + setupDevtools(app, router, data) + } + return { app, router, data } } diff --git a/src/client/index.ts b/src/client/index.ts index 96c628bf29db..a4e3fb1839cb 100644 --- a/src/client/index.ts +++ b/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 From 6e44c002c68f2b27836f9fe08840ff87537d0afc Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Sun, 5 Jun 2022 11:39:40 +0800 Subject: [PATCH 2/3] chore: tweaks --- src/client/app/index.ts | 2 +- src/client/shim.d.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/client/app/index.ts b/src/client/app/index.ts index d8d6e2310055..691efebd8009 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -75,7 +75,7 @@ export function createApp() { } // setup devtools in dev mode - if (import.meta.env.DEV) { + if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) { setupDevtools(app, router, data) } diff --git a/src/client/shim.d.ts b/src/client/shim.d.ts index 6a486e5d00ad..868fc51efbf3 100644 --- a/src/client/shim.d.ts +++ b/src/client/shim.d.ts @@ -1,6 +1,7 @@ declare const __VP_HASH_MAP__: Record declare const __ALGOLIA__: boolean declare const __CARBON__: boolean +declare const __VUE_PROD_DEVTOOLS__: boolean declare module '*.vue' { import { ComponentOptions } from 'vue' From 61910a1f05c82ae6ae1f494fbb17c746fe099dc1 Mon Sep 17 00:00:00 2001 From: meteorlxy Date: Thu, 9 Jun 2022 09:42:59 +0800 Subject: [PATCH 3/3] chore: tweaks --- src/client/app/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 691efebd8009..b46ca6732dd0 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -10,7 +10,6 @@ import Theme from '/@theme/index' import { inBrowser, pathToFile } from './utils' import { Router, RouterSymbol, createRouter } from './router' import { siteDataRef, useData } from './data' -import { setupDevtools } from './devtools' import { useUpdateHead } from './composables/head' import { usePrefetch } from './composables/preFetch' import { dataSymbol, initData } from './data' @@ -76,7 +75,9 @@ export function createApp() { // setup devtools in dev mode if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) { - setupDevtools(app, router, data) + import('./devtools').then(({ setupDevtools }) => + setupDevtools(app, router, data) + ) } return { app, router, data }