88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
// src/setupDevtools.ts
|
|
import { setupDevtoolsPlugin } from "@vue/devtools-api";
|
|
import { watch } from "vue";
|
|
var PLUGIN_ID = "org.vuejs.vuepress";
|
|
var PLUGIN_LABEL = "VuePress";
|
|
var PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL;
|
|
var INSPECTOR_ID = PLUGIN_ID;
|
|
var INSPECTOR_LABEL = PLUGIN_LABEL;
|
|
var INSPECTOR_CLIENT_DATA_ID = "client-data";
|
|
var INSPECTOR_CLIENT_DATA_LABEL = "Client Data";
|
|
var setupDevtools = (app, clientData) => {
|
|
setupDevtoolsPlugin(
|
|
{
|
|
// fix recursive reference
|
|
app,
|
|
id: PLUGIN_ID,
|
|
label: PLUGIN_LABEL,
|
|
packageName: "@vuepress/client",
|
|
homepage: "https://v2.vuepress.vuejs.org",
|
|
logo: "https://v2.vuepress.vuejs.org/images/hero.png",
|
|
componentStateTypes: [PLUGIN_COMPONENT_STATE_TYPE]
|
|
},
|
|
(api) => {
|
|
const clientDataEntries = Object.entries(clientData);
|
|
const clientDataKeys = Object.keys(clientData);
|
|
const clientDataValues = Object.values(clientData);
|
|
api.on.inspectComponent((payload) => {
|
|
payload.instanceData.state.push(
|
|
...clientDataEntries.map(([name, item]) => ({
|
|
type: PLUGIN_COMPONENT_STATE_TYPE,
|
|
editable: false,
|
|
key: name,
|
|
value: item.value
|
|
}))
|
|
);
|
|
});
|
|
api.addInspector({
|
|
id: INSPECTOR_ID,
|
|
label: INSPECTOR_LABEL,
|
|
icon: "article"
|
|
});
|
|
api.on.getInspectorTree((payload) => {
|
|
if (payload.inspectorId !== INSPECTOR_ID) return;
|
|
payload.rootNodes = [
|
|
{
|
|
id: INSPECTOR_CLIENT_DATA_ID,
|
|
label: INSPECTOR_CLIENT_DATA_LABEL,
|
|
children: clientDataKeys.map((name) => ({
|
|
id: name,
|
|
label: name
|
|
}))
|
|
}
|
|
];
|
|
});
|
|
api.on.getInspectorState((payload) => {
|
|
if (payload.inspectorId !== INSPECTOR_ID) return;
|
|
if (payload.nodeId === INSPECTOR_CLIENT_DATA_ID) {
|
|
payload.state = {
|
|
[INSPECTOR_CLIENT_DATA_LABEL]: clientDataEntries.map(
|
|
([name, item]) => ({
|
|
key: name,
|
|
value: item.value
|
|
})
|
|
)
|
|
};
|
|
}
|
|
if (clientDataKeys.includes(payload.nodeId)) {
|
|
payload.state = {
|
|
[INSPECTOR_CLIENT_DATA_LABEL]: [
|
|
{
|
|
key: payload.nodeId,
|
|
value: clientData[payload.nodeId].value
|
|
}
|
|
]
|
|
};
|
|
}
|
|
});
|
|
watch(clientDataValues, () => {
|
|
api.notifyComponentUpdate();
|
|
api.sendInspectorState(INSPECTOR_ID);
|
|
});
|
|
}
|
|
);
|
|
};
|
|
export {
|
|
setupDevtools
|
|
};
|