From 36aa6c99b527e3f90641f770d9c349bda99d805e Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 7 Jan 2024 01:48:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=BC=80=E5=8F=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=20devtools=20=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugins/plugin-blog-data/src/client/config.ts | 38 +++++++++++++++++--
 .../src/client/clientConfig.ts                | 38 +++++++++++++++++--
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/plugins/plugin-blog-data/src/client/config.ts b/plugins/plugin-blog-data/src/client/config.ts
index c1f026b5..53d15727 100644
--- a/plugins/plugin-blog-data/src/client/config.ts
+++ b/plugins/plugin-blog-data/src/client/config.ts
@@ -8,15 +8,27 @@ export default defineClientConfig({
   enhance({ app }) {
     const blogPostData = useBlogPostData()
 
+    Object.defineProperties(app.config.globalProperties, {
+      $blogPostData: {
+        get() {
+          return blogPostData.value
+        },
+      },
+    })
+
     // setup devtools in dev mode
     if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+      const PLUGIN_ID = 'org.vuejs.vuepress'
+      const PLUGIN_LABEL = 'VuePress'
+      const INSPECTOR_ID = PLUGIN_ID
+
       setupDevtoolsPlugin(
         {
           // fix recursive reference
           app: app as any,
-          id: 'org.vuepress-plume.plugin-blog-data',
-          label: 'VuePress Blog Data Plugin',
-          packageName: '@vuepress/plugin-blog-data',
+          id: PLUGIN_ID,
+          label: PLUGIN_LABEL,
+          packageName: '@vuepress-plume/plugin-blog-data',
           homepage: 'https://pengzhanbo.cn',
           logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
           componentStateTypes: ['VuePress'],
@@ -30,6 +42,26 @@ export default defineClientConfig({
               value: blogPostData.value,
             })
           })
+          api.on.getInspectorTree((payload) => {
+            if (payload.inspectorId !== INSPECTOR_ID)
+              return
+            payload.rootNodes.push({
+              id: 'blog_post_data',
+              label: 'Blog Post Data',
+            })
+          })
+          api.on.getInspectorState((payload) => {
+            if (payload.inspectorId !== INSPECTOR_ID)
+              return
+            if (payload.nodeId === 'blog_post_data') {
+              payload.state = {
+                BlogPostData: [{
+                  key: 'blogPostData',
+                  value: blogPostData.value,
+                }],
+              }
+            }
+          })
         },
       )
     }
diff --git a/plugins/plugin-notes-data/src/client/clientConfig.ts b/plugins/plugin-notes-data/src/client/clientConfig.ts
index 7bc00bfc..06a45e15 100644
--- a/plugins/plugin-notes-data/src/client/clientConfig.ts
+++ b/plugins/plugin-notes-data/src/client/clientConfig.ts
@@ -8,15 +8,27 @@ export default defineClientConfig({
   enhance({ app }) {
     const notesData = useNotesData()
 
+    Object.defineProperties(app.config.globalProperties, {
+      $notesData: {
+        get() {
+          return notesData.value
+        },
+      },
+    })
+
     // setup devtools in dev mode
     if (__VUEPRESS_DEV__ || __VUE_PROD_DEVTOOLS__) {
+      const PLUGIN_ID = 'org.vuejs.vuepress'
+      const PLUGIN_LABEL = 'VuePress'
+      const INSPECTOR_ID = PLUGIN_ID
+
       setupDevtoolsPlugin(
         {
           // fix recursive reference
           app: app as any,
-          id: 'org.vuepress-plume.plugin-notes-data',
-          label: 'VuePress Notes Data Plugin',
-          packageName: '@vuepress/plugin-notes-data',
+          id: PLUGIN_ID,
+          label: PLUGIN_LABEL,
+          packageName: '@vuepress-plume/plugin-notes-data',
           homepage: 'https://pengzhanbo.cn',
           logo: 'https://v2.vuepress.vuejs.org/images/hero.png',
           componentStateTypes: ['VuePress'],
@@ -30,6 +42,26 @@ export default defineClientConfig({
               value: notesData.value,
             })
           })
+          api.on.getInspectorTree((payload) => {
+            if (payload.inspectorId !== INSPECTOR_ID)
+              return
+            payload.rootNodes.push({
+              id: 'notes_data',
+              label: 'Notes Data',
+            })
+          })
+          api.on.getInspectorState((payload) => {
+            if (payload.inspectorId !== INSPECTOR_ID)
+              return
+            if (payload.nodeId === 'notes_data') {
+              payload.state = {
+                NotesData: [{
+                  key: 'notesData',
+                  value: notesData.value,
+                }],
+              }
+            }
+          })
         },
       )
     }