1
1
import { setupDevtoolsPlugin } from '@vue/devtools-api'
2
2
import { watch } from 'vue'
3
3
import type { App } from 'vue'
4
- import type { GlobalComputed } from './setupGlobalComputed .js'
4
+ import type { ClientData } from './types/index .js'
5
5
6
6
const PLUGIN_ID = 'org.vuejs.vuepress'
7
7
const PLUGIN_LABEL = 'VuePress'
8
8
const PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL
9
9
10
10
const INSPECTOR_ID = PLUGIN_ID
11
11
const INSPECTOR_LABEL = PLUGIN_LABEL
12
- const INSPECTOR_GLOBAL_COMPUTED_ID = 'global-computed '
13
- const INSPECTOR_GLOBAL_COMPUTED_LABEL = 'Global Computed '
12
+ const INSPECTOR_CLIENT_DATA_ID = 'client-data '
13
+ const INSPECTOR_CLIENT_DATA_LABEL = 'Client Data '
14
14
15
- export const setupDevtools = (
16
- app : App ,
17
- globalComputed : GlobalComputed ,
18
- ) : void => {
15
+ export const setupDevtools = ( app : App , clientData : ClientData ) : void => {
19
16
setupDevtoolsPlugin (
20
17
{
21
18
// fix recursive reference
@@ -28,14 +25,14 @@ export const setupDevtools = (
28
25
componentStateTypes : [ PLUGIN_COMPONENT_STATE_TYPE ] ,
29
26
} ,
30
27
( api ) => {
31
- const globalComputedEntries = Object . entries ( globalComputed )
32
- const globalComputedKeys = Object . keys ( globalComputed )
33
- const globalComputedValues = Object . values ( globalComputed )
28
+ const clientDataEntries = Object . entries ( clientData )
29
+ const clientDataKeys = Object . keys ( clientData )
30
+ const clientDataValues = Object . values ( clientData )
34
31
35
32
// setup component state
36
33
api . on . inspectComponent ( ( payload ) => {
37
34
payload . instanceData . state . push (
38
- ...globalComputedEntries . map ( ( [ name , item ] ) => ( {
35
+ ...clientDataEntries . map ( ( [ name , item ] ) => ( {
39
36
type : PLUGIN_COMPONENT_STATE_TYPE ,
40
37
editable : false ,
41
38
key : name ,
@@ -54,9 +51,9 @@ export const setupDevtools = (
54
51
if ( payload . inspectorId !== INSPECTOR_ID ) return
55
52
payload . rootNodes = [
56
53
{
57
- id : INSPECTOR_GLOBAL_COMPUTED_ID ,
58
- label : INSPECTOR_GLOBAL_COMPUTED_LABEL ,
59
- children : globalComputedKeys . map ( ( name ) => ( {
54
+ id : INSPECTOR_CLIENT_DATA_ID ,
55
+ label : INSPECTOR_CLIENT_DATA_LABEL ,
56
+ children : clientDataKeys . map ( ( name ) => ( {
60
57
id : name ,
61
58
label : name ,
62
59
} ) ) ,
@@ -65,30 +62,30 @@ export const setupDevtools = (
65
62
} )
66
63
api . on . getInspectorState ( ( payload ) => {
67
64
if ( payload . inspectorId !== INSPECTOR_ID ) return
68
- if ( payload . nodeId === INSPECTOR_GLOBAL_COMPUTED_ID ) {
65
+ if ( payload . nodeId === INSPECTOR_CLIENT_DATA_ID ) {
69
66
payload . state = {
70
- [ INSPECTOR_GLOBAL_COMPUTED_LABEL ] : globalComputedEntries . map (
67
+ [ INSPECTOR_CLIENT_DATA_LABEL ] : clientDataEntries . map (
71
68
( [ name , item ] ) => ( {
72
69
key : name ,
73
70
value : item . value ,
74
71
} ) ,
75
72
) ,
76
73
}
77
74
}
78
- if ( globalComputedKeys . includes ( payload . nodeId ) ) {
75
+ if ( clientDataKeys . includes ( payload . nodeId ) ) {
79
76
payload . state = {
80
- [ INSPECTOR_GLOBAL_COMPUTED_LABEL ] : [
77
+ [ INSPECTOR_CLIENT_DATA_LABEL ] : [
81
78
{
82
79
key : payload . nodeId ,
83
- value : globalComputed [ payload . nodeId ] . value ,
80
+ value : clientData [ payload . nodeId ] . value ,
84
81
} ,
85
82
] ,
86
83
}
87
84
}
88
85
} )
89
86
90
87
// refresh the component state and inspector state
91
- watch ( globalComputedValues , ( ) => {
88
+ watch ( clientDataValues , ( ) => {
92
89
api . notifyComponentUpdate ( )
93
90
api . sendInspectorState ( INSPECTOR_ID )
94
91
} )
0 commit comments