11import { setupDevtoolsPlugin } from '@vue/devtools-api'
22import { watch } from 'vue'
33import type { App } from 'vue'
4- import type { GlobalComputed } from './setupGlobalComputed .js'
4+ import type { ClientData } from './types/index .js'
55
66const PLUGIN_ID = 'org.vuejs.vuepress'
77const PLUGIN_LABEL = 'VuePress'
88const PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL
99
1010const INSPECTOR_ID = PLUGIN_ID
1111const 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 '
1414
15- export const setupDevtools = (
16- app : App ,
17- globalComputed : GlobalComputed ,
18- ) : void => {
15+ export const setupDevtools = ( app : App , clientData : ClientData ) : void => {
1916 setupDevtoolsPlugin (
2017 {
2118 // fix recursive reference
@@ -28,14 +25,14 @@ export const setupDevtools = (
2825 componentStateTypes : [ PLUGIN_COMPONENT_STATE_TYPE ] ,
2926 } ,
3027 ( 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 )
3431
3532 // setup component state
3633 api . on . inspectComponent ( ( payload ) => {
3734 payload . instanceData . state . push (
38- ...globalComputedEntries . map ( ( [ name , item ] ) => ( {
35+ ...clientDataEntries . map ( ( [ name , item ] ) => ( {
3936 type : PLUGIN_COMPONENT_STATE_TYPE ,
4037 editable : false ,
4138 key : name ,
@@ -54,9 +51,9 @@ export const setupDevtools = (
5451 if ( payload . inspectorId !== INSPECTOR_ID ) return
5552 payload . rootNodes = [
5653 {
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 ) => ( {
6057 id : name ,
6158 label : name ,
6259 } ) ) ,
@@ -65,30 +62,30 @@ export const setupDevtools = (
6562 } )
6663 api . on . getInspectorState ( ( payload ) => {
6764 if ( payload . inspectorId !== INSPECTOR_ID ) return
68- if ( payload . nodeId === INSPECTOR_GLOBAL_COMPUTED_ID ) {
65+ if ( payload . nodeId === INSPECTOR_CLIENT_DATA_ID ) {
6966 payload . state = {
70- [ INSPECTOR_GLOBAL_COMPUTED_LABEL ] : globalComputedEntries . map (
67+ [ INSPECTOR_CLIENT_DATA_LABEL ] : clientDataEntries . map (
7168 ( [ name , item ] ) => ( {
7269 key : name ,
7370 value : item . value ,
7471 } ) ,
7572 ) ,
7673 }
7774 }
78- if ( globalComputedKeys . includes ( payload . nodeId ) ) {
75+ if ( clientDataKeys . includes ( payload . nodeId ) ) {
7976 payload . state = {
80- [ INSPECTOR_GLOBAL_COMPUTED_LABEL ] : [
77+ [ INSPECTOR_CLIENT_DATA_LABEL ] : [
8178 {
8279 key : payload . nodeId ,
83- value : globalComputed [ payload . nodeId ] . value ,
80+ value : clientData [ payload . nodeId ] . value ,
8481 } ,
8582 ] ,
8683 }
8784 }
8885 } )
8986
9087 // refresh the component state and inspector state
91- watch ( globalComputedValues , ( ) => {
88+ watch ( clientDataValues , ( ) => {
9289 api . notifyComponentUpdate ( )
9390 api . sendInspectorState ( INSPECTOR_ID )
9491 } )
0 commit comments