Skip to content

Commit 4a105cb

Browse files
meteorlxymeteorlxy
committed
feat(client): improve devtools and export constants (close #1625)
1 parent cd192c2 commit 4a105cb

File tree

8 files changed

+109
-40
lines changed

8 files changed

+109
-40
lines changed

‎packages/client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
},
3939
"dependencies": {
4040
"@vue/devtools-api": "^7.7.2",
41+
"@vue/devtools-kit": "^7.7.2",
4142
"@vuepress/shared": "workspace:*",
4243
"vue": "^3.5.13",
4344
"vue-router": "^4.5.0"

‎packages/client/src/app.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const createVueApp: CreateVueAppFunction = async () => {
5151

5252
// setup devtools in dev mode
5353
if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
54-
const { setupDevtools } = await import('./setupDevtools.js')
54+
const { setupDevtools } = await import('./devtools/setupDevtools.js')
5555
setupDevtools(app, globalComputed)
5656
}
5757

‎packages/client/src/devtools/constants.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { InspectorNodeConfig } from './types.js'
2+
3+
export const PLUGIN_ID = 'org.vuejs.vuepress'
4+
export const PLUGIN_LABEL = 'VuePress'
5+
6+
export const COMPONENT_STATE_TYPE = PLUGIN_LABEL
7+
8+
export const INSPECTOR_ID = PLUGIN_ID
9+
export const INSPECTOR_LABEL = PLUGIN_LABEL
10+
11+
const INSPECTOR_NODE_INTERNAL = {
12+
id: 'INTERNAL',
13+
label: 'Internal',
14+
keys: ['layouts', 'routes', 'redirects'],
15+
} as const satisfies InspectorNodeConfig
16+
17+
const INSPECTOR_NODE_SITE = {
18+
id: 'SITE',
19+
label: 'Site',
20+
keys: ['siteData', 'siteLocaleData'],
21+
} as const satisfies InspectorNodeConfig
22+
23+
const INSPECTOR_NODE_ROUTE = {
24+
id: 'ROUTE',
25+
label: 'Route',
26+
keys: ['routePath', 'routeLocale'],
27+
} as const satisfies InspectorNodeConfig
28+
29+
const INSPECTOR_NODE_PAGE = {
30+
id: 'PAGE',
31+
label: 'Page',
32+
keys: [
33+
'pageData',
34+
'pageFrontmatter',
35+
'pageLang',
36+
'pageHead',
37+
'pageHeadTitle',
38+
'pageLayout',
39+
'pageComponent',
40+
],
41+
} as const satisfies InspectorNodeConfig
42+
43+
export const INSPECTOR_NODES = {
44+
[INSPECTOR_NODE_INTERNAL.id]: INSPECTOR_NODE_INTERNAL,
45+
[INSPECTOR_NODE_SITE.id]: INSPECTOR_NODE_SITE,
46+
[INSPECTOR_NODE_ROUTE.id]: INSPECTOR_NODE_ROUTE,
47+
[INSPECTOR_NODE_PAGE.id]: INSPECTOR_NODE_PAGE,
48+
}
49+
50+
export const INSPECTOR_STATE_SECTION_NAME = 'State'

‎packages/client/src/devtools/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * as DEVTOOLS from './constants.js'

‎packages/client/src/setupDevtools.ts renamed to ‎packages/client/src/devtools/setupDevtools.ts

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,25 @@
11
import { setupDevtoolsPlugin } from '@vue/devtools-api'
22
import type { App } from 'vue'
33
import { watch } from 'vue'
4-
import type { ClientData } from './types/index.js'
5-
6-
const PLUGIN_ID = 'org.vuejs.vuepress'
7-
const PLUGIN_LABEL = 'VuePress'
8-
const PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL
9-
10-
const INSPECTOR_ID = PLUGIN_ID
11-
const INSPECTOR_LABEL = PLUGIN_LABEL
12-
const INSPECTOR_CLIENT_DATA_ID = 'client-data'
13-
const INSPECTOR_CLIENT_DATA_LABEL = 'Client Data'
14-
15-
type ClientDataKey = keyof ClientData
16-
type ClientDataValue = ClientData[ClientDataKey]
4+
import type { ClientData } from '../types/index.js'
5+
import * as DEVTOOLS from './constants.js'
6+
import type {
7+
ClientDataKey,
8+
ClientDataValue,
9+
InspectorNodeConfig,
10+
} from './types.js'
1711

1812
export const setupDevtools = (app: App, clientData: ClientData): void => {
1913
setupDevtoolsPlugin(
2014
{
2115
// fix recursive reference
2216
app: app as never,
23-
id: PLUGIN_ID,
24-
label: PLUGIN_LABEL,
17+
id: DEVTOOLS.PLUGIN_ID,
18+
label: DEVTOOLS.PLUGIN_LABEL,
2519
packageName: '@vuepress/client',
2620
homepage: 'https://vuepress.vuejs.org',
2721
logo: 'https://vuepress.vuejs.org/images/hero.png',
28-
componentStateTypes: [PLUGIN_COMPONENT_STATE_TYPE],
22+
componentStateTypes: [DEVTOOLS.COMPONENT_STATE_TYPE],
2923
},
3024
(api) => {
3125
const clientDataEntries = Object.entries(clientData) as [
@@ -39,7 +33,7 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
3933
api.on.inspectComponent((payload) => {
4034
payload.instanceData.state.push(
4135
...clientDataEntries.map(([name, item]) => ({
42-
type: PLUGIN_COMPONENT_STATE_TYPE,
36+
type: DEVTOOLS.COMPONENT_STATE_TYPE,
4337
editable: false,
4438
key: name,
4539
value: item.value,
@@ -49,38 +43,47 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
4943

5044
// setup custom inspector
5145
api.addInspector({
52-
id: INSPECTOR_ID,
53-
label: INSPECTOR_LABEL,
46+
id: DEVTOOLS.INSPECTOR_ID,
47+
label: DEVTOOLS.INSPECTOR_LABEL,
5448
icon: 'article',
5549
})
50+
5651
api.on.getInspectorTree((payload) => {
57-
if (payload.inspectorId !== INSPECTOR_ID) return
58-
payload.rootNodes = [
59-
{
60-
id: INSPECTOR_CLIENT_DATA_ID,
61-
label: INSPECTOR_CLIENT_DATA_LABEL,
62-
children: clientDataKeys.map((name) => ({
63-
id: name,
64-
label: name,
52+
if (payload.inspectorId !== DEVTOOLS.INSPECTOR_ID) return
53+
54+
payload.rootNodes = Object.values(DEVTOOLS.INSPECTOR_NODES).map(
55+
(node) => ({
56+
id: node.id,
57+
label: node.label,
58+
children: node.keys.map((key: ClientDataKey) => ({
59+
id: key,
60+
label: key,
6561
})),
66-
},
67-
]
62+
}),
63+
)
6864
})
65+
6966
api.on.getInspectorState((payload) => {
70-
if (payload.inspectorId !== INSPECTOR_ID) return
71-
if (payload.nodeId === INSPECTOR_CLIENT_DATA_ID) {
67+
if (payload.inspectorId !== DEVTOOLS.INSPECTOR_ID) return
68+
69+
// root nodes state
70+
const inspectorNode = DEVTOOLS.INSPECTOR_NODES[payload.nodeId] as
71+
| InspectorNodeConfig
72+
| undefined
73+
if (inspectorNode) {
7274
payload.state = {
73-
[INSPECTOR_CLIENT_DATA_LABEL]: clientDataEntries.map(
74-
([name, item]) => ({
75-
key: name,
76-
value: item.value,
77-
}),
78-
),
75+
[inspectorNode.label]: inspectorNode.keys.map((key) => ({
76+
key,
77+
value: clientData[key].value,
78+
})),
7979
}
80+
return
8081
}
82+
83+
// root nodes children state
8184
if (clientDataKeys.includes(payload.nodeId as ClientDataKey)) {
8285
payload.state = {
83-
[INSPECTOR_CLIENT_DATA_LABEL]: [
86+
[DEVTOOLS.INSPECTOR_STATE_SECTION_NAME]: [
8487
{
8588
key: payload.nodeId,
8689
value: clientData[payload.nodeId as ClientDataKey].value,
@@ -93,7 +96,7 @@ export const setupDevtools = (app: App, clientData: ClientData): void => {
9396
// refresh the component state and inspector state
9497
watch(clientDataValues, () => {
9598
api.notifyComponentUpdate()
96-
api.sendInspectorState(INSPECTOR_ID)
99+
api.sendInspectorState(DEVTOOLS.INSPECTOR_ID)
97100
})
98101
},
99102
)

‎packages/client/src/devtools/types.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { CustomInspectorNode } from '@vue/devtools-kit'
2+
import type { ClientData } from '../types/index.js'
3+
4+
export type ClientDataKey = keyof ClientData
5+
export type ClientDataValue = ClientData[ClientDataKey]
6+
7+
export interface InspectorNodeConfig
8+
extends Pick<CustomInspectorNode, 'id' | 'label'> {
9+
keys: ClientDataKey[]
10+
}

‎packages/client/src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export * from './components/index.js'
22
export * from './composables/index.js'
3+
export * from './devtools/index.js'
34
export * from './router/index.js'
45
export * from './resolvers.js'
56
export type * from './types/index.js'

‎pnpm-lock.yaml

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)