perf: 优化开发模式下 devtools 主题数据预览

This commit is contained in:
pengzhanbo 2024-01-07 01:48:31 +08:00
parent d5306d9a49
commit 36aa6c99b5
2 changed files with 70 additions and 6 deletions

View File

@ -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,
}],
}
}
})
},
)
}

View File

@ -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,
}],
}
}
})
},
)
}