vue-hooks-plus
Version:
Vue hooks library
182 lines (181 loc) • 6.7 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const devtoolsApi = require("@vue/devtools-api");
const utils = require("./utils");
const devToolsStore = require("./store");
const vue = require("vue");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const devToolsStore__default = /* @__PURE__ */ _interopDefaultLegacy(devToolsStore);
const pluginId = "vue-hooks-plus";
const pluginName = "Vue Hooks Plus \u{1F36D}";
const pluginLogo = "https://raw.githubusercontent.com/InhiblabCore/vue-hooks-plus/c3b984112610ef3fb21140a0beb27b4a228fe0b3/packages/hooks/docs/public/logo.svg";
let currentStateId;
const controlMap = /* @__PURE__ */ new Map();
function setupDevtools(app) {
devtoolsApi.setupDevtoolsPlugin(
{
id: pluginId,
label: pluginName,
packageName: "vue-hooks-plus",
homepage: "https://inhiblabcore.github.io/docs/hooks",
logo: pluginLogo,
app,
settings: {
baseSort: {
type: "choice",
component: "button-group",
label: "Sort Cache Entries",
options: [
{
label: "ASC",
value: 1
},
{
label: "DESC",
value: -1
}
],
defaultValue: 1
}
}
},
(api) => {
api.addTimelineLayer({
id: pluginId,
label: pluginName,
color: 16767308
});
api.addInspector({
id: pluginId,
label: pluginName,
icon: "api",
treeFilterPlaceholder: "Search useRequest",
actions: [
{
icon: "delete",
tooltip: "Clear useRequest root ",
action: () => {
devToolsStore__default.default.reset(currentStateId);
api.sendInspectorTree(pluginId);
api.sendInspectorState(pluginId);
}
}
]
});
devToolsStore__default.default.subscribe((event) => {
devToolsStore__default.default.update(event.key, { time: event.time, type: event.type });
api.sendInspectorTree(pluginId);
api.sendInspectorState(pluginId);
api.addTimelineEvent({
layerId: pluginId,
event: {
title: event.type,
subtitle: `data: ${JSON.stringify(event.data)}`,
time: api.now(),
data: {
...event
}
}
});
});
api.on.getInspectorTree((payload) => {
if (payload.inspectorId === pluginId) {
controlMap.clear();
const settings = api.getSettings();
const queries = devToolsStore__default.default.getAll();
let sortedArray = [];
if (settings.baseSort === 1) {
sortedArray = Array.from(queries.entries()).sort(
(a, b) => {
var _a, _b, _c, _d;
return ((_b = (_a = b[1]) == null ? void 0 : _a.time) != null ? _b : 0) - ((_d = (_c = a[1]) == null ? void 0 : _c.time) != null ? _d : 0);
}
);
} else {
sortedArray = Array.from(queries.entries()).sort(
(a, b) => {
var _a, _b, _c, _d;
return ((_b = (_a = a[1]) == null ? void 0 : _a.time) != null ? _b : 0) - ((_d = (_c = b[1]) == null ? void 0 : _c.time) != null ? _d : 0);
}
);
}
const filtered = sortedArray.filter((item) => new RegExp(payload.filter, "g").test(item[0])).map((item) => {
var _a, _b, _c;
return {
id: item[0],
label: item[0],
tags: ((_a = item[1]) == null ? void 0 : _a.type) ? [
{
label: `${(_b = item[1]) == null ? void 0 : _b.type}`,
textColor: 16777215,
backgroundColor: utils.getRequestTagBg((_c = item[1]) == null ? void 0 : _c.type)
}
] : []
};
});
payload.rootNodes = [
{
id: "vue-hooks-plus-useRequest",
label: "useRequest",
tags: [
{
label: "Root",
textColor: 16777215,
backgroundColor: 4372611
}
],
children: filtered != null ? filtered : []
}
];
}
});
api.on.getInspectorState((payload) => {
var _a, _b, _c;
currentStateId = payload.nodeId;
let pluginsIndex = 0;
if (payload.inspectorId === pluginId) {
const queries = devToolsStore__default.default.getAll();
if (payload.nodeId) {
const currentSource = queries.get(payload.nodeId);
if (!currentSource) {
return;
}
payload.state = {
Details: [
{
key: "Key",
value: payload.nodeId
},
{
key: "Request Name",
value: currentSource.requestName
}
],
"Data Explorer": Object.keys(currentSource.instance.state).map((item) => ({
key: item,
value: vue.unref(currentSource.instance.state[item])
})),
Option: Object.keys(currentSource.instance.options).map((item) => ({
key: item,
value: currentSource.instance.options[item]
})),
["Plugins \u{1F9E9}"]: (_c = (_b = (_a = currentSource.instance.pluginImpls) == null ? void 0 : _a.map((_, index) => {
var _a2, _b2, _c2, _d, _e, _f;
const pluginName2 = (_c2 = (_b2 = (_a2 = currentSource == null ? void 0 : currentSource.instance) == null ? void 0 : _a2.pluginImpls) == null ? void 0 : _b2[index]) == null ? void 0 : _c2.name;
if (!pluginName2) {
if (index !== pluginsIndex)
pluginsIndex++;
}
return {
key: pluginName2 ? pluginName2 : `plugin ${pluginsIndex}`,
value: (_f = (_e = (_d = currentSource == null ? void 0 : currentSource.instance) == null ? void 0 : _d.pluginImpls) == null ? void 0 : _e[index]) != null ? _f : null
};
})) == null ? void 0 : _b.filter((item) => Object.keys(item.value).length !== 0)) != null ? _c : []
};
}
}
});
}
);
}
exports.setupDevtools = setupDevtools;