first commit
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 webfansplz
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
# @vue/devtools-core
|
||||
|
||||
> Internal core functions shared across @vue/devtools packages.
|
||||
+544
@@ -0,0 +1,544 @@
|
||||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
||||
let _vue_devtools_shared = require("@vue/devtools-shared");
|
||||
let _vue_devtools_kit = require("@vue/devtools-kit");
|
||||
let vue = require("vue");
|
||||
//#region src/client.ts
|
||||
function setDevToolsClientUrl(url) {
|
||||
_vue_devtools_shared.target.__VUE_DEVTOOLS_CLIENT_URL__ = url;
|
||||
}
|
||||
function getDevToolsClientUrl() {
|
||||
return _vue_devtools_shared.target.__VUE_DEVTOOLS_CLIENT_URL__ ?? (() => {
|
||||
if (_vue_devtools_shared.isBrowser) {
|
||||
const devtoolsMeta = document.querySelector("meta[name=__VUE_DEVTOOLS_CLIENT_URL__]");
|
||||
if (devtoolsMeta) return devtoolsMeta.getAttribute("content");
|
||||
}
|
||||
return "";
|
||||
})();
|
||||
}
|
||||
//#endregion
|
||||
//#region ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
|
||||
function flatHooks(configHooks, hooks = {}, parentName) {
|
||||
for (const key in configHooks) {
|
||||
const subHook = configHooks[key];
|
||||
const name = parentName ? `${parentName}:${key}` : key;
|
||||
if (typeof subHook === "object" && subHook !== null) flatHooks(subHook, hooks, name);
|
||||
else if (typeof subHook === "function") hooks[name] = subHook;
|
||||
}
|
||||
return hooks;
|
||||
}
|
||||
const defaultTask = { run: (function_) => function_() };
|
||||
const _createTask = () => defaultTask;
|
||||
const createTask = typeof console.createTask !== "undefined" ? console.createTask : _createTask;
|
||||
function serialTaskCaller(hooks, args) {
|
||||
const task = createTask(args.shift());
|
||||
return hooks.reduce((promise, hookFunction) => promise.then(() => task.run(() => hookFunction(...args))), Promise.resolve());
|
||||
}
|
||||
function parallelTaskCaller(hooks, args) {
|
||||
const task = createTask(args.shift());
|
||||
return Promise.all(hooks.map((hook) => task.run(() => hook(...args))));
|
||||
}
|
||||
function callEachWith(callbacks, arg0) {
|
||||
for (const callback of [...callbacks]) callback(arg0);
|
||||
}
|
||||
var Hookable = class {
|
||||
constructor() {
|
||||
this._hooks = {};
|
||||
this._before = void 0;
|
||||
this._after = void 0;
|
||||
this._deprecatedMessages = void 0;
|
||||
this._deprecatedHooks = {};
|
||||
this.hook = this.hook.bind(this);
|
||||
this.callHook = this.callHook.bind(this);
|
||||
this.callHookWith = this.callHookWith.bind(this);
|
||||
}
|
||||
hook(name, function_, options = {}) {
|
||||
if (!name || typeof function_ !== "function") return () => {};
|
||||
const originalName = name;
|
||||
let dep;
|
||||
while (this._deprecatedHooks[name]) {
|
||||
dep = this._deprecatedHooks[name];
|
||||
name = dep.to;
|
||||
}
|
||||
if (dep && !options.allowDeprecated) {
|
||||
let message = dep.message;
|
||||
if (!message) message = `${originalName} hook has been deprecated` + (dep.to ? `, please use ${dep.to}` : "");
|
||||
if (!this._deprecatedMessages) this._deprecatedMessages = /* @__PURE__ */ new Set();
|
||||
if (!this._deprecatedMessages.has(message)) {
|
||||
console.warn(message);
|
||||
this._deprecatedMessages.add(message);
|
||||
}
|
||||
}
|
||||
if (!function_.name) try {
|
||||
Object.defineProperty(function_, "name", {
|
||||
get: () => "_" + name.replace(/\W+/g, "_") + "_hook_cb",
|
||||
configurable: true
|
||||
});
|
||||
} catch {}
|
||||
this._hooks[name] = this._hooks[name] || [];
|
||||
this._hooks[name].push(function_);
|
||||
return () => {
|
||||
if (function_) {
|
||||
this.removeHook(name, function_);
|
||||
function_ = void 0;
|
||||
}
|
||||
};
|
||||
}
|
||||
hookOnce(name, function_) {
|
||||
let _unreg;
|
||||
let _function = (...arguments_) => {
|
||||
if (typeof _unreg === "function") _unreg();
|
||||
_unreg = void 0;
|
||||
_function = void 0;
|
||||
return function_(...arguments_);
|
||||
};
|
||||
_unreg = this.hook(name, _function);
|
||||
return _unreg;
|
||||
}
|
||||
removeHook(name, function_) {
|
||||
if (this._hooks[name]) {
|
||||
const index = this._hooks[name].indexOf(function_);
|
||||
if (index !== -1) this._hooks[name].splice(index, 1);
|
||||
if (this._hooks[name].length === 0) delete this._hooks[name];
|
||||
}
|
||||
}
|
||||
deprecateHook(name, deprecated) {
|
||||
this._deprecatedHooks[name] = typeof deprecated === "string" ? { to: deprecated } : deprecated;
|
||||
const _hooks = this._hooks[name] || [];
|
||||
delete this._hooks[name];
|
||||
for (const hook of _hooks) this.hook(name, hook);
|
||||
}
|
||||
deprecateHooks(deprecatedHooks) {
|
||||
Object.assign(this._deprecatedHooks, deprecatedHooks);
|
||||
for (const name in deprecatedHooks) this.deprecateHook(name, deprecatedHooks[name]);
|
||||
}
|
||||
addHooks(configHooks) {
|
||||
const hooks = flatHooks(configHooks);
|
||||
const removeFns = Object.keys(hooks).map((key) => this.hook(key, hooks[key]));
|
||||
return () => {
|
||||
for (const unreg of removeFns.splice(0, removeFns.length)) unreg();
|
||||
};
|
||||
}
|
||||
removeHooks(configHooks) {
|
||||
const hooks = flatHooks(configHooks);
|
||||
for (const key in hooks) this.removeHook(key, hooks[key]);
|
||||
}
|
||||
removeAllHooks() {
|
||||
for (const key in this._hooks) delete this._hooks[key];
|
||||
}
|
||||
callHook(name, ...arguments_) {
|
||||
arguments_.unshift(name);
|
||||
return this.callHookWith(serialTaskCaller, name, ...arguments_);
|
||||
}
|
||||
callHookParallel(name, ...arguments_) {
|
||||
arguments_.unshift(name);
|
||||
return this.callHookWith(parallelTaskCaller, name, ...arguments_);
|
||||
}
|
||||
callHookWith(caller, name, ...arguments_) {
|
||||
const event = this._before || this._after ? {
|
||||
name,
|
||||
args: arguments_,
|
||||
context: {}
|
||||
} : void 0;
|
||||
if (this._before) callEachWith(this._before, event);
|
||||
const result = caller(name in this._hooks ? [...this._hooks[name]] : [], arguments_);
|
||||
if (result instanceof Promise) return result.finally(() => {
|
||||
if (this._after && event) callEachWith(this._after, event);
|
||||
});
|
||||
if (this._after && event) callEachWith(this._after, event);
|
||||
return result;
|
||||
}
|
||||
beforeEach(function_) {
|
||||
this._before = this._before || [];
|
||||
this._before.push(function_);
|
||||
return () => {
|
||||
if (this._before !== void 0) {
|
||||
const index = this._before.indexOf(function_);
|
||||
if (index !== -1) this._before.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
afterEach(function_) {
|
||||
this._after = this._after || [];
|
||||
this._after.push(function_);
|
||||
return () => {
|
||||
if (this._after !== void 0) {
|
||||
const index = this._after.indexOf(function_);
|
||||
if (index !== -1) this._after.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
function createHooks() {
|
||||
return new Hookable();
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/global.ts
|
||||
const hooks$1 = createHooks();
|
||||
let DevToolsMessagingEvents = /* @__PURE__ */ function(DevToolsMessagingEvents) {
|
||||
DevToolsMessagingEvents["INSPECTOR_TREE_UPDATED"] = "inspector-tree-updated";
|
||||
DevToolsMessagingEvents["INSPECTOR_STATE_UPDATED"] = "inspector-state-updated";
|
||||
DevToolsMessagingEvents["DEVTOOLS_STATE_UPDATED"] = "devtools-state-updated";
|
||||
DevToolsMessagingEvents["ROUTER_INFO_UPDATED"] = "router-info-updated";
|
||||
DevToolsMessagingEvents["TIMELINE_EVENT_UPDATED"] = "timeline-event-updated";
|
||||
DevToolsMessagingEvents["INSPECTOR_UPDATED"] = "inspector-updated";
|
||||
DevToolsMessagingEvents["ACTIVE_APP_UNMOUNTED"] = "active-app-updated";
|
||||
DevToolsMessagingEvents["DESTROY_DEVTOOLS_CLIENT"] = "destroy-devtools-client";
|
||||
DevToolsMessagingEvents["RELOAD_DEVTOOLS_CLIENT"] = "reload-devtools-client";
|
||||
return DevToolsMessagingEvents;
|
||||
}({});
|
||||
function getDevToolsState() {
|
||||
const state = _vue_devtools_kit.devtools.ctx.state;
|
||||
return {
|
||||
connected: state.connected,
|
||||
clientConnected: true,
|
||||
vueVersion: state?.activeAppRecord?.version || "",
|
||||
tabs: state.tabs,
|
||||
commands: state.commands,
|
||||
vitePluginDetected: state.vitePluginDetected,
|
||||
appRecords: state.appRecords.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
version: item.version,
|
||||
routerId: item.routerId,
|
||||
iframe: item.iframe
|
||||
})),
|
||||
activeAppRecordId: state.activeAppRecordId,
|
||||
timelineLayersState: state.timelineLayersState
|
||||
};
|
||||
}
|
||||
const functions = {
|
||||
on: (event, handler) => {
|
||||
hooks$1.hook(event, handler);
|
||||
},
|
||||
off: (event, handler) => {
|
||||
hooks$1.removeHook(event, handler);
|
||||
},
|
||||
once: (event, handler) => {
|
||||
hooks$1.hookOnce(event, handler);
|
||||
},
|
||||
emit: (event, ...args) => {
|
||||
hooks$1.callHook(event, ...args);
|
||||
},
|
||||
heartbeat: () => {
|
||||
return true;
|
||||
},
|
||||
devtoolsState: () => {
|
||||
return getDevToolsState();
|
||||
},
|
||||
async getInspectorTree(payload) {
|
||||
return (0, _vue_devtools_kit.stringify)(await _vue_devtools_kit.devtools.ctx.api.getInspectorTree(payload));
|
||||
},
|
||||
async getInspectorState(payload) {
|
||||
const inspector = (0, _vue_devtools_kit.getInspector)(payload.inspectorId);
|
||||
if (inspector) inspector.selectedNodeId = payload.nodeId;
|
||||
return (0, _vue_devtools_kit.stringify)(await _vue_devtools_kit.devtools.ctx.api.getInspectorState(payload));
|
||||
},
|
||||
async editInspectorState(payload) {
|
||||
return await _vue_devtools_kit.devtools.ctx.api.editInspectorState(payload);
|
||||
},
|
||||
sendInspectorState(id) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.sendInspectorState(id);
|
||||
},
|
||||
inspectComponentInspector() {
|
||||
return _vue_devtools_kit.devtools.ctx.api.inspectComponentInspector();
|
||||
},
|
||||
cancelInspectComponentInspector() {
|
||||
return _vue_devtools_kit.devtools.ctx.api.cancelInspectComponentInspector();
|
||||
},
|
||||
getComponentRenderCode(id) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.getComponentRenderCode(id);
|
||||
},
|
||||
scrollToComponent(id) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.scrollToComponent(id);
|
||||
},
|
||||
inspectDOM(id) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.inspectDOM(id);
|
||||
},
|
||||
getInspectorNodeActions(id) {
|
||||
return (0, _vue_devtools_kit.getInspectorNodeActions)(id);
|
||||
},
|
||||
getInspectorActions(id) {
|
||||
return (0, _vue_devtools_kit.getInspectorActions)(id);
|
||||
},
|
||||
updateTimelineLayersState(state) {
|
||||
return (0, _vue_devtools_kit.updateTimelineLayersState)(state);
|
||||
},
|
||||
callInspectorNodeAction(inspectorId, actionIndex, nodeId) {
|
||||
const nodeActions = (0, _vue_devtools_kit.getInspectorNodeActions)(inspectorId);
|
||||
if (nodeActions?.length) nodeActions[actionIndex].action?.(nodeId);
|
||||
},
|
||||
callInspectorAction(inspectorId, actionIndex) {
|
||||
const actions = (0, _vue_devtools_kit.getInspectorActions)(inspectorId);
|
||||
if (actions?.length) actions[actionIndex].action?.();
|
||||
},
|
||||
openInEditor(options) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.openInEditor(options);
|
||||
},
|
||||
async checkVueInspectorDetected() {
|
||||
return !!await _vue_devtools_kit.devtools.ctx.api.getVueInspector();
|
||||
},
|
||||
async enableVueInspector() {
|
||||
const inspector = await _vue_devtools_kit.devtools?.api?.getVueInspector?.();
|
||||
if (inspector) await inspector.enable();
|
||||
},
|
||||
async toggleApp(id, options) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.toggleApp(id, options);
|
||||
},
|
||||
updatePluginSettings(pluginId, key, value) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.updatePluginSettings(pluginId, key, value);
|
||||
},
|
||||
getPluginSettings(pluginId) {
|
||||
return _vue_devtools_kit.devtools.ctx.api.getPluginSettings(pluginId);
|
||||
},
|
||||
getRouterInfo() {
|
||||
return _vue_devtools_kit.devtoolsRouterInfo;
|
||||
},
|
||||
navigate(path) {
|
||||
return _vue_devtools_kit.devtoolsRouter.value?.push(path).catch(() => ({}));
|
||||
},
|
||||
getMatchedRoutes(path) {
|
||||
const c = console.warn;
|
||||
console.warn = () => {};
|
||||
const matched = _vue_devtools_kit.devtoolsRouter.value?.resolve?.({ path: path || "/" }).matched ?? [];
|
||||
console.warn = c;
|
||||
return matched;
|
||||
},
|
||||
toggleClientConnected(state) {
|
||||
(0, _vue_devtools_kit.toggleClientConnected)(state);
|
||||
},
|
||||
getCustomInspector() {
|
||||
return (0, _vue_devtools_kit.getActiveInspectors)();
|
||||
},
|
||||
getInspectorInfo(id) {
|
||||
return (0, _vue_devtools_kit.getInspectorInfo)(id);
|
||||
},
|
||||
highlighComponent(uid) {
|
||||
return _vue_devtools_kit.devtools.ctx.hooks.callHook(_vue_devtools_kit.DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid });
|
||||
},
|
||||
unhighlight() {
|
||||
return _vue_devtools_kit.devtools.ctx.hooks.callHook(_vue_devtools_kit.DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT);
|
||||
},
|
||||
updateDevToolsClientDetected(params) {
|
||||
(0, _vue_devtools_kit.updateDevToolsClientDetected)(params);
|
||||
},
|
||||
initDevToolsServerListener() {
|
||||
const broadcast = (0, _vue_devtools_kit.getRpcServer)().broadcast;
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, (0, _vue_devtools_kit.stringify)(payload));
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, (0, _vue_devtools_kit.stringify)(payload));
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, () => {
|
||||
broadcast.emit(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, getDevToolsState());
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, ({ state }) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, state);
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, (0, _vue_devtools_kit.stringify)(payload));
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_UPDATED, payload);
|
||||
});
|
||||
_vue_devtools_kit.devtools.ctx.hooks.hook(_vue_devtools_kit.DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT, () => {
|
||||
broadcast.emit(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED);
|
||||
});
|
||||
}
|
||||
};
|
||||
const rpc = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = (0, _vue_devtools_kit.getRpcClient)();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc.$functions;
|
||||
} });
|
||||
const rpcServer = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = (0, _vue_devtools_kit.getRpcServer)();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc.functions;
|
||||
} });
|
||||
function onRpcConnected(callback) {
|
||||
let timer = null;
|
||||
let retryCount = 0;
|
||||
function heartbeat() {
|
||||
rpc.value?.heartbeat?.().then(() => {
|
||||
callback();
|
||||
clearTimeout(timer);
|
||||
}).catch(() => {});
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
if (retryCount >= 30) clearTimeout(timer);
|
||||
retryCount++;
|
||||
heartbeat();
|
||||
}, retryCount * 200 + 200);
|
||||
heartbeat();
|
||||
}
|
||||
function onRpcSeverReady(callback) {
|
||||
let timer = null;
|
||||
const timeout = 120;
|
||||
function heartbeat() {
|
||||
if (rpcServer.value.clients.length > 0) {
|
||||
callback();
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
heartbeat();
|
||||
}, timeout);
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/vite.ts
|
||||
const hooks = createHooks();
|
||||
const viteRpcFunctions = {
|
||||
on: (event, handler) => {
|
||||
hooks.hook(event, handler);
|
||||
},
|
||||
off: (event, handler) => {
|
||||
hooks.removeHook(event, handler);
|
||||
},
|
||||
once: (event, handler) => {
|
||||
hooks.hookOnce(event, handler);
|
||||
},
|
||||
emit: (event, ...args) => {
|
||||
hooks.callHook(event, ...args);
|
||||
},
|
||||
heartbeat: () => {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const viteRpc = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = (0, _vue_devtools_kit.getViteRpcClient)();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc?.$functions;
|
||||
} });
|
||||
function onViteRpcConnected(callback) {
|
||||
let timer = null;
|
||||
function heartbeat() {
|
||||
viteRpc.value?.heartbeat?.().then(() => {
|
||||
clearTimeout(timer);
|
||||
callback();
|
||||
}).catch(() => ({}));
|
||||
timer = setTimeout(() => {
|
||||
heartbeat();
|
||||
}, 80);
|
||||
}
|
||||
heartbeat();
|
||||
}
|
||||
function createViteClientRpc() {
|
||||
(0, _vue_devtools_kit.createRpcClient)(viteRpcFunctions, { preset: "vite" });
|
||||
}
|
||||
function createViteServerRpc(functions) {
|
||||
(0, _vue_devtools_kit.createRpcServer)(functions, { preset: "vite" });
|
||||
}
|
||||
//#endregion
|
||||
//#region src/vue-plugin/devtools-state.ts
|
||||
const VueDevToolsStateSymbol = Symbol.for("__VueDevToolsStateSymbol__");
|
||||
function VueDevToolsVuePlugin() {
|
||||
return { install(app) {
|
||||
const state = createDevToolsStateContext();
|
||||
state.getDevToolsState();
|
||||
app.provide(VueDevToolsStateSymbol, state);
|
||||
app.config.globalProperties.$getDevToolsState = state.getDevToolsState;
|
||||
app.config.globalProperties.$disconnectDevToolsClient = () => {
|
||||
state.clientConnected.value = false;
|
||||
state.connected.value = false;
|
||||
};
|
||||
} };
|
||||
}
|
||||
function createDevToolsStateContext() {
|
||||
const connected = (0, vue.ref)(false);
|
||||
const clientConnected = (0, vue.ref)(false);
|
||||
const vueVersion = (0, vue.ref)("");
|
||||
const tabs = (0, vue.ref)([]);
|
||||
const commands = (0, vue.ref)([]);
|
||||
const vitePluginDetected = (0, vue.ref)(false);
|
||||
const appRecords = (0, vue.ref)([]);
|
||||
const activeAppRecordId = (0, vue.ref)("");
|
||||
const timelineLayersState = (0, vue.ref)({});
|
||||
function updateState(data) {
|
||||
connected.value = data.connected;
|
||||
clientConnected.value = data.clientConnected;
|
||||
vueVersion.value = data.vueVersion || "";
|
||||
tabs.value = data.tabs;
|
||||
commands.value = data.commands;
|
||||
vitePluginDetected.value = data.vitePluginDetected;
|
||||
appRecords.value = data.appRecords;
|
||||
activeAppRecordId.value = data.activeAppRecordId;
|
||||
timelineLayersState.value = data.timelineLayersState;
|
||||
}
|
||||
function getDevToolsState() {
|
||||
onRpcConnected(() => {
|
||||
rpc.value.devtoolsState().then((data) => {
|
||||
updateState(data);
|
||||
});
|
||||
rpc.functions.off(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState);
|
||||
rpc.functions.on(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState);
|
||||
});
|
||||
}
|
||||
return {
|
||||
getDevToolsState,
|
||||
connected,
|
||||
clientConnected,
|
||||
vueVersion,
|
||||
tabs,
|
||||
commands,
|
||||
vitePluginDetected,
|
||||
appRecords,
|
||||
activeAppRecordId,
|
||||
timelineLayersState
|
||||
};
|
||||
}
|
||||
function useDevToolsState() {
|
||||
return (0, vue.inject)(VueDevToolsStateSymbol);
|
||||
}
|
||||
const fns = [];
|
||||
function onDevToolsConnected(fn) {
|
||||
const { connected, clientConnected } = useDevToolsState();
|
||||
fns.push(fn);
|
||||
(0, vue.onUnmounted)(() => {
|
||||
fns.splice(fns.indexOf(fn), 1);
|
||||
});
|
||||
const devtoolsReady = (0, vue.computed)(() => clientConnected.value && connected.value);
|
||||
if (devtoolsReady.value) fn();
|
||||
else {
|
||||
const stop = (0, vue.watch)(devtoolsReady, (v) => {
|
||||
if (v) {
|
||||
fn();
|
||||
stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
fns.splice(fns.indexOf(fn), 1);
|
||||
};
|
||||
}
|
||||
function refreshCurrentPageData() {
|
||||
fns.forEach((fn) => fn());
|
||||
}
|
||||
//#endregion
|
||||
exports.DevToolsMessagingEvents = DevToolsMessagingEvents;
|
||||
exports.VueDevToolsVuePlugin = VueDevToolsVuePlugin;
|
||||
exports.createDevToolsStateContext = createDevToolsStateContext;
|
||||
exports.createViteClientRpc = createViteClientRpc;
|
||||
exports.createViteServerRpc = createViteServerRpc;
|
||||
exports.functions = functions;
|
||||
exports.getDevToolsClientUrl = getDevToolsClientUrl;
|
||||
exports.onDevToolsConnected = onDevToolsConnected;
|
||||
exports.onRpcConnected = onRpcConnected;
|
||||
exports.onRpcSeverReady = onRpcSeverReady;
|
||||
exports.onViteRpcConnected = onViteRpcConnected;
|
||||
exports.refreshCurrentPageData = refreshCurrentPageData;
|
||||
exports.rpc = rpc;
|
||||
exports.rpcServer = rpcServer;
|
||||
exports.setDevToolsClientUrl = setDevToolsClientUrl;
|
||||
exports.useDevToolsState = useDevToolsState;
|
||||
exports.viteRpc = viteRpc;
|
||||
exports.viteRpcFunctions = viteRpcFunctions;
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
import * as _vue_devtools_kit0 from "@vue/devtools-kit";
|
||||
import { AppRecord, CustomCommand, CustomTab, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions, Router, RouterInfo, getRpcClient, getRpcServer, getViteRpcClient } from "@vue/devtools-kit";
|
||||
import * as vue from "vue";
|
||||
import { App, Ref } from "vue";
|
||||
|
||||
//#region src/client.d.ts
|
||||
declare function setDevToolsClientUrl(url: string): void;
|
||||
declare function getDevToolsClientUrl(): any;
|
||||
//#endregion
|
||||
//#region src/rpc/global.d.ts
|
||||
declare enum DevToolsMessagingEvents {
|
||||
INSPECTOR_TREE_UPDATED = "inspector-tree-updated",
|
||||
INSPECTOR_STATE_UPDATED = "inspector-state-updated",
|
||||
DEVTOOLS_STATE_UPDATED = "devtools-state-updated",
|
||||
ROUTER_INFO_UPDATED = "router-info-updated",
|
||||
TIMELINE_EVENT_UPDATED = "timeline-event-updated",
|
||||
INSPECTOR_UPDATED = "inspector-updated",
|
||||
ACTIVE_APP_UNMOUNTED = "active-app-updated",
|
||||
DESTROY_DEVTOOLS_CLIENT = "destroy-devtools-client",
|
||||
RELOAD_DEVTOOLS_CLIENT = "reload-devtools-client"
|
||||
}
|
||||
declare const functions: {
|
||||
on: (event: string, handler: Function) => void;
|
||||
off: (event: string, handler: Function) => void;
|
||||
once: (event: string, handler: Function) => void;
|
||||
emit: (event: string, ...args: any[]) => void;
|
||||
heartbeat: () => boolean;
|
||||
devtoolsState: () => {
|
||||
connected: boolean;
|
||||
clientConnected: boolean;
|
||||
vueVersion: string;
|
||||
tabs: _vue_devtools_kit0.CustomTab[];
|
||||
commands: _vue_devtools_kit0.CustomCommand[];
|
||||
vitePluginDetected: boolean;
|
||||
appRecords: {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string | undefined;
|
||||
routerId: string | undefined;
|
||||
iframe: string | undefined;
|
||||
}[];
|
||||
activeAppRecordId: string;
|
||||
timelineLayersState: Record<string, boolean>;
|
||||
};
|
||||
getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], "inspectorId" | "filter">): Promise<string>;
|
||||
getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], "inspectorId" | "nodeId">): Promise<string>;
|
||||
editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): Promise<void>;
|
||||
sendInspectorState(id: string): void;
|
||||
inspectComponentInspector(): Promise<string>;
|
||||
cancelInspectComponentInspector(): void;
|
||||
getComponentRenderCode(id: string): any;
|
||||
scrollToComponent(id: string): void;
|
||||
inspectDOM(id: string): void;
|
||||
getInspectorNodeActions(id: string): {
|
||||
icon: string;
|
||||
tooltip?: string;
|
||||
action: (nodeId: string) => void | Promise<void>;
|
||||
}[] | undefined;
|
||||
getInspectorActions(id: string): {
|
||||
icon: string;
|
||||
tooltip?: string;
|
||||
action: () => void | Promise<void>;
|
||||
}[] | undefined;
|
||||
updateTimelineLayersState(state: Record<string, boolean>): void;
|
||||
callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
|
||||
callInspectorAction(inspectorId: string, actionIndex: number): void;
|
||||
openInEditor(options: OpenInEditorOptions): void;
|
||||
checkVueInspectorDetected(): Promise<boolean>;
|
||||
enableVueInspector(): Promise<void>;
|
||||
toggleApp(id: string, options?: {
|
||||
inspectingComponent?: boolean;
|
||||
}): Promise<void>;
|
||||
updatePluginSettings(pluginId: string, key: string, value: string): void;
|
||||
getPluginSettings(pluginId: string): {
|
||||
options: Record<string, {
|
||||
label: string;
|
||||
description?: string;
|
||||
} & ({
|
||||
type: "boolean";
|
||||
defaultValue: boolean;
|
||||
} | {
|
||||
type: "choice";
|
||||
defaultValue: string | number;
|
||||
options: {
|
||||
value: string | number;
|
||||
label: string;
|
||||
}[];
|
||||
component?: "select" | "button-group";
|
||||
} | {
|
||||
type: "text";
|
||||
defaultValue: string;
|
||||
})> | null;
|
||||
values: any;
|
||||
};
|
||||
getRouterInfo(): RouterInfo;
|
||||
navigate(path: string): Promise<Awaited<ReturnType<Router["push"]>> | Record<string, never>> | undefined;
|
||||
getMatchedRoutes(path: string): RouterInfo["routes"];
|
||||
toggleClientConnected(state: boolean): void;
|
||||
getCustomInspector(): {
|
||||
id: string;
|
||||
label: string;
|
||||
logo: string;
|
||||
icon: string;
|
||||
packageName: string | undefined;
|
||||
homepage: string | undefined;
|
||||
pluginId: string;
|
||||
}[];
|
||||
getInspectorInfo(id: string): {
|
||||
id: string;
|
||||
label: string;
|
||||
logo: string | undefined;
|
||||
packageName: string | undefined;
|
||||
homepage: string | undefined;
|
||||
timelineLayers: {
|
||||
id: string;
|
||||
label: string;
|
||||
color: number;
|
||||
}[];
|
||||
treeFilterPlaceholder: string;
|
||||
stateFilterPlaceholder: string;
|
||||
} | undefined;
|
||||
highlighComponent(uid: string): Promise<any>;
|
||||
unhighlight(): Promise<any>;
|
||||
updateDevToolsClientDetected(params: Record<string, boolean>): void;
|
||||
initDevToolsServerListener(): void;
|
||||
};
|
||||
type RPCFunctions = typeof functions;
|
||||
declare const rpc: {
|
||||
value: ReturnType<typeof getRpcClient<RPCFunctions>>;
|
||||
functions: ReturnType<typeof getRpcClient<RPCFunctions>>;
|
||||
};
|
||||
declare const rpcServer: {
|
||||
value: ReturnType<typeof getRpcServer<RPCFunctions>>;
|
||||
functions: ReturnType<typeof getRpcServer<RPCFunctions>>;
|
||||
};
|
||||
declare function onRpcConnected(callback: () => void): void;
|
||||
declare function onRpcSeverReady(callback: () => void): void;
|
||||
//#endregion
|
||||
//#region src/rpc/types.d.ts
|
||||
type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'wasm' | 'other';
|
||||
interface AssetInfo {
|
||||
path: string;
|
||||
type: AssetType;
|
||||
publicPath: string;
|
||||
relativePath: string;
|
||||
filePath: string;
|
||||
size: number;
|
||||
mtime: number;
|
||||
}
|
||||
interface ImageMeta {
|
||||
width: number;
|
||||
height: number;
|
||||
orientation?: number;
|
||||
type?: string;
|
||||
mimeType?: string;
|
||||
}
|
||||
interface AssetImporter {
|
||||
url: string;
|
||||
id: string | null;
|
||||
}
|
||||
interface AssetEntry {
|
||||
path: string;
|
||||
content: string;
|
||||
encoding?: BufferEncoding;
|
||||
override?: boolean;
|
||||
}
|
||||
interface CodeSnippet {
|
||||
code: string;
|
||||
lang: string;
|
||||
name: string;
|
||||
docs?: string;
|
||||
}
|
||||
interface ModuleInfo {
|
||||
id: string;
|
||||
plugins: {
|
||||
name: string;
|
||||
transform?: number;
|
||||
resolveId?: number;
|
||||
}[];
|
||||
deps: string[];
|
||||
virtual: boolean;
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/vite.d.ts
|
||||
declare const viteRpcFunctions: {
|
||||
on: (event: string, handler: Function) => void;
|
||||
off: (event: string, handler: Function) => void;
|
||||
once: (event: string, handler: Function) => void;
|
||||
emit: (event: string, ...args: any[]) => void;
|
||||
heartbeat: () => boolean;
|
||||
};
|
||||
type ViteRPCFunctions = typeof viteRpcFunctions & {
|
||||
getStaticAssets: () => Promise<AssetInfo[]>;
|
||||
getAssetImporters: (url: string) => Promise<AssetImporter[]>;
|
||||
getImageMeta: (filepath: string) => Promise<ImageMeta>;
|
||||
getTextAssetContent: (filepath: string, limit?: number) => Promise<string>;
|
||||
getRoot: () => Promise<string>;
|
||||
getGraphModules: () => Promise<ModuleInfo[]>;
|
||||
};
|
||||
declare const viteRpc: {
|
||||
value: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
|
||||
functions: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
|
||||
};
|
||||
declare function onViteRpcConnected(callback: () => void): void;
|
||||
declare function createViteClientRpc(): void;
|
||||
declare function createViteServerRpc(functions: Record<string, any>): void;
|
||||
//#endregion
|
||||
//#region src/vue-plugin/devtools-state.d.ts
|
||||
interface DevToolsState {
|
||||
connected: boolean;
|
||||
clientConnected: boolean;
|
||||
vueVersion: string;
|
||||
tabs: CustomTab[];
|
||||
commands: CustomCommand[];
|
||||
vitePluginDetected: boolean;
|
||||
appRecords: AppRecord[];
|
||||
activeAppRecordId: string;
|
||||
timelineLayersState: Record<string, boolean>;
|
||||
}
|
||||
type DevToolsRefState = { [P in keyof DevToolsState]: Ref<DevToolsState[P]> };
|
||||
declare function VueDevToolsVuePlugin(): {
|
||||
install(app: App): void;
|
||||
};
|
||||
declare function createDevToolsStateContext(): {
|
||||
getDevToolsState: () => void;
|
||||
connected: Ref<boolean, boolean>;
|
||||
clientConnected: Ref<boolean, boolean>;
|
||||
vueVersion: Ref<string, string>;
|
||||
tabs: Ref<{
|
||||
name: string;
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
view: {
|
||||
type: "iframe";
|
||||
src: string;
|
||||
persistent?: boolean | undefined;
|
||||
} | {
|
||||
type: "vnode";
|
||||
vnode: vue.VNode;
|
||||
} | {
|
||||
type: "sfc";
|
||||
sfc: string;
|
||||
};
|
||||
category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
|
||||
}[], CustomTab[] | {
|
||||
name: string;
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
view: {
|
||||
type: "iframe";
|
||||
src: string;
|
||||
persistent?: boolean | undefined;
|
||||
} | {
|
||||
type: "vnode";
|
||||
vnode: vue.VNode;
|
||||
} | {
|
||||
type: "sfc";
|
||||
sfc: string;
|
||||
};
|
||||
category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
|
||||
}[]>;
|
||||
commands: Ref<{
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
icon?: string | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
children?: {
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
id: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
}[] | undefined;
|
||||
}[], CustomCommand[] | {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
icon?: string | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
children?: {
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
id: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
}[] | undefined;
|
||||
}[]>;
|
||||
vitePluginDetected: Ref<boolean, boolean>;
|
||||
appRecords: Ref<{
|
||||
id: string;
|
||||
name: string;
|
||||
app?: _vue_devtools_kit0.App;
|
||||
version?: string | undefined;
|
||||
types?: Record<string, string | symbol> | undefined;
|
||||
instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
|
||||
perfGroupIds: Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}> & Omit<Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}>, keyof Map<any, any>>;
|
||||
rootInstance: _vue_devtools_kit0.VueAppInstance;
|
||||
routerId?: string | undefined;
|
||||
iframe?: string | undefined;
|
||||
}[], AppRecord[] | {
|
||||
id: string;
|
||||
name: string;
|
||||
app?: _vue_devtools_kit0.App;
|
||||
version?: string | undefined;
|
||||
types?: Record<string, string | symbol> | undefined;
|
||||
instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
|
||||
perfGroupIds: Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}> & Omit<Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}>, keyof Map<any, any>>;
|
||||
rootInstance: _vue_devtools_kit0.VueAppInstance;
|
||||
routerId?: string | undefined;
|
||||
iframe?: string | undefined;
|
||||
}[]>;
|
||||
activeAppRecordId: Ref<string, string>;
|
||||
timelineLayersState: Ref<Record<string, boolean>, Record<string, boolean>>;
|
||||
};
|
||||
declare function useDevToolsState(): DevToolsRefState;
|
||||
declare function onDevToolsConnected(fn: () => void): () => void;
|
||||
declare function refreshCurrentPageData(): void;
|
||||
//#endregion
|
||||
export { AssetEntry, AssetImporter, AssetInfo, AssetType, CodeSnippet, DevToolsMessagingEvents, ImageMeta, ModuleInfo, RPCFunctions, ViteRPCFunctions, VueDevToolsVuePlugin, createDevToolsStateContext, createViteClientRpc, createViteServerRpc, functions, getDevToolsClientUrl, onDevToolsConnected, onRpcConnected, onRpcSeverReady, onViteRpcConnected, refreshCurrentPageData, rpc, rpcServer, setDevToolsClientUrl, useDevToolsState, viteRpc, viteRpcFunctions };
|
||||
+348
@@ -0,0 +1,348 @@
|
||||
import * as _vue_devtools_kit0 from "@vue/devtools-kit";
|
||||
import { AppRecord, CustomCommand, CustomTab, DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions, Router, RouterInfo, getRpcClient, getRpcServer, getViteRpcClient } from "@vue/devtools-kit";
|
||||
import * as vue from "vue";
|
||||
import { App, Ref } from "vue";
|
||||
|
||||
//#region src/client.d.ts
|
||||
declare function setDevToolsClientUrl(url: string): void;
|
||||
declare function getDevToolsClientUrl(): any;
|
||||
//#endregion
|
||||
//#region src/rpc/global.d.ts
|
||||
declare enum DevToolsMessagingEvents {
|
||||
INSPECTOR_TREE_UPDATED = "inspector-tree-updated",
|
||||
INSPECTOR_STATE_UPDATED = "inspector-state-updated",
|
||||
DEVTOOLS_STATE_UPDATED = "devtools-state-updated",
|
||||
ROUTER_INFO_UPDATED = "router-info-updated",
|
||||
TIMELINE_EVENT_UPDATED = "timeline-event-updated",
|
||||
INSPECTOR_UPDATED = "inspector-updated",
|
||||
ACTIVE_APP_UNMOUNTED = "active-app-updated",
|
||||
DESTROY_DEVTOOLS_CLIENT = "destroy-devtools-client",
|
||||
RELOAD_DEVTOOLS_CLIENT = "reload-devtools-client"
|
||||
}
|
||||
declare const functions: {
|
||||
on: (event: string, handler: Function) => void;
|
||||
off: (event: string, handler: Function) => void;
|
||||
once: (event: string, handler: Function) => void;
|
||||
emit: (event: string, ...args: any[]) => void;
|
||||
heartbeat: () => boolean;
|
||||
devtoolsState: () => {
|
||||
connected: boolean;
|
||||
clientConnected: boolean;
|
||||
vueVersion: string;
|
||||
tabs: _vue_devtools_kit0.CustomTab[];
|
||||
commands: _vue_devtools_kit0.CustomCommand[];
|
||||
vitePluginDetected: boolean;
|
||||
appRecords: {
|
||||
id: string;
|
||||
name: string;
|
||||
version: string | undefined;
|
||||
routerId: string | undefined;
|
||||
iframe: string | undefined;
|
||||
}[];
|
||||
activeAppRecordId: string;
|
||||
timelineLayersState: Record<string, boolean>;
|
||||
};
|
||||
getInspectorTree(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE], "inspectorId" | "filter">): Promise<string>;
|
||||
getInspectorState(payload: Pick<DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE], "inspectorId" | "nodeId">): Promise<string>;
|
||||
editInspectorState(payload: DevToolsV6PluginAPIHookPayloads[DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE]): Promise<void>;
|
||||
sendInspectorState(id: string): void;
|
||||
inspectComponentInspector(): Promise<string>;
|
||||
cancelInspectComponentInspector(): void;
|
||||
getComponentRenderCode(id: string): any;
|
||||
scrollToComponent(id: string): void;
|
||||
inspectDOM(id: string): void;
|
||||
getInspectorNodeActions(id: string): {
|
||||
icon: string;
|
||||
tooltip?: string;
|
||||
action: (nodeId: string) => void | Promise<void>;
|
||||
}[] | undefined;
|
||||
getInspectorActions(id: string): {
|
||||
icon: string;
|
||||
tooltip?: string;
|
||||
action: () => void | Promise<void>;
|
||||
}[] | undefined;
|
||||
updateTimelineLayersState(state: Record<string, boolean>): void;
|
||||
callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string): void;
|
||||
callInspectorAction(inspectorId: string, actionIndex: number): void;
|
||||
openInEditor(options: OpenInEditorOptions): void;
|
||||
checkVueInspectorDetected(): Promise<boolean>;
|
||||
enableVueInspector(): Promise<void>;
|
||||
toggleApp(id: string, options?: {
|
||||
inspectingComponent?: boolean;
|
||||
}): Promise<void>;
|
||||
updatePluginSettings(pluginId: string, key: string, value: string): void;
|
||||
getPluginSettings(pluginId: string): {
|
||||
options: Record<string, {
|
||||
label: string;
|
||||
description?: string;
|
||||
} & ({
|
||||
type: "boolean";
|
||||
defaultValue: boolean;
|
||||
} | {
|
||||
type: "choice";
|
||||
defaultValue: string | number;
|
||||
options: {
|
||||
value: string | number;
|
||||
label: string;
|
||||
}[];
|
||||
component?: "select" | "button-group";
|
||||
} | {
|
||||
type: "text";
|
||||
defaultValue: string;
|
||||
})> | null;
|
||||
values: any;
|
||||
};
|
||||
getRouterInfo(): RouterInfo;
|
||||
navigate(path: string): Promise<Awaited<ReturnType<Router["push"]>> | Record<string, never>> | undefined;
|
||||
getMatchedRoutes(path: string): RouterInfo["routes"];
|
||||
toggleClientConnected(state: boolean): void;
|
||||
getCustomInspector(): {
|
||||
id: string;
|
||||
label: string;
|
||||
logo: string;
|
||||
icon: string;
|
||||
packageName: string | undefined;
|
||||
homepage: string | undefined;
|
||||
pluginId: string;
|
||||
}[];
|
||||
getInspectorInfo(id: string): {
|
||||
id: string;
|
||||
label: string;
|
||||
logo: string | undefined;
|
||||
packageName: string | undefined;
|
||||
homepage: string | undefined;
|
||||
timelineLayers: {
|
||||
id: string;
|
||||
label: string;
|
||||
color: number;
|
||||
}[];
|
||||
treeFilterPlaceholder: string;
|
||||
stateFilterPlaceholder: string;
|
||||
} | undefined;
|
||||
highlighComponent(uid: string): Promise<any>;
|
||||
unhighlight(): Promise<any>;
|
||||
updateDevToolsClientDetected(params: Record<string, boolean>): void;
|
||||
initDevToolsServerListener(): void;
|
||||
};
|
||||
type RPCFunctions = typeof functions;
|
||||
declare const rpc: {
|
||||
value: ReturnType<typeof getRpcClient<RPCFunctions>>;
|
||||
functions: ReturnType<typeof getRpcClient<RPCFunctions>>;
|
||||
};
|
||||
declare const rpcServer: {
|
||||
value: ReturnType<typeof getRpcServer<RPCFunctions>>;
|
||||
functions: ReturnType<typeof getRpcServer<RPCFunctions>>;
|
||||
};
|
||||
declare function onRpcConnected(callback: () => void): void;
|
||||
declare function onRpcSeverReady(callback: () => void): void;
|
||||
//#endregion
|
||||
//#region src/rpc/types.d.ts
|
||||
type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'wasm' | 'other';
|
||||
interface AssetInfo {
|
||||
path: string;
|
||||
type: AssetType;
|
||||
publicPath: string;
|
||||
relativePath: string;
|
||||
filePath: string;
|
||||
size: number;
|
||||
mtime: number;
|
||||
}
|
||||
interface ImageMeta {
|
||||
width: number;
|
||||
height: number;
|
||||
orientation?: number;
|
||||
type?: string;
|
||||
mimeType?: string;
|
||||
}
|
||||
interface AssetImporter {
|
||||
url: string;
|
||||
id: string | null;
|
||||
}
|
||||
interface AssetEntry {
|
||||
path: string;
|
||||
content: string;
|
||||
encoding?: BufferEncoding;
|
||||
override?: boolean;
|
||||
}
|
||||
interface CodeSnippet {
|
||||
code: string;
|
||||
lang: string;
|
||||
name: string;
|
||||
docs?: string;
|
||||
}
|
||||
interface ModuleInfo {
|
||||
id: string;
|
||||
plugins: {
|
||||
name: string;
|
||||
transform?: number;
|
||||
resolveId?: number;
|
||||
}[];
|
||||
deps: string[];
|
||||
virtual: boolean;
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/vite.d.ts
|
||||
declare const viteRpcFunctions: {
|
||||
on: (event: string, handler: Function) => void;
|
||||
off: (event: string, handler: Function) => void;
|
||||
once: (event: string, handler: Function) => void;
|
||||
emit: (event: string, ...args: any[]) => void;
|
||||
heartbeat: () => boolean;
|
||||
};
|
||||
type ViteRPCFunctions = typeof viteRpcFunctions & {
|
||||
getStaticAssets: () => Promise<AssetInfo[]>;
|
||||
getAssetImporters: (url: string) => Promise<AssetImporter[]>;
|
||||
getImageMeta: (filepath: string) => Promise<ImageMeta>;
|
||||
getTextAssetContent: (filepath: string, limit?: number) => Promise<string>;
|
||||
getRoot: () => Promise<string>;
|
||||
getGraphModules: () => Promise<ModuleInfo[]>;
|
||||
};
|
||||
declare const viteRpc: {
|
||||
value: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
|
||||
functions: ReturnType<typeof getViteRpcClient<ViteRPCFunctions>>;
|
||||
};
|
||||
declare function onViteRpcConnected(callback: () => void): void;
|
||||
declare function createViteClientRpc(): void;
|
||||
declare function createViteServerRpc(functions: Record<string, any>): void;
|
||||
//#endregion
|
||||
//#region src/vue-plugin/devtools-state.d.ts
|
||||
interface DevToolsState {
|
||||
connected: boolean;
|
||||
clientConnected: boolean;
|
||||
vueVersion: string;
|
||||
tabs: CustomTab[];
|
||||
commands: CustomCommand[];
|
||||
vitePluginDetected: boolean;
|
||||
appRecords: AppRecord[];
|
||||
activeAppRecordId: string;
|
||||
timelineLayersState: Record<string, boolean>;
|
||||
}
|
||||
type DevToolsRefState = { [P in keyof DevToolsState]: Ref<DevToolsState[P]> };
|
||||
declare function VueDevToolsVuePlugin(): {
|
||||
install(app: App): void;
|
||||
};
|
||||
declare function createDevToolsStateContext(): {
|
||||
getDevToolsState: () => void;
|
||||
connected: Ref<boolean, boolean>;
|
||||
clientConnected: Ref<boolean, boolean>;
|
||||
vueVersion: Ref<string, string>;
|
||||
tabs: Ref<{
|
||||
name: string;
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
view: {
|
||||
type: "iframe";
|
||||
src: string;
|
||||
persistent?: boolean | undefined;
|
||||
} | {
|
||||
type: "vnode";
|
||||
vnode: vue.VNode;
|
||||
} | {
|
||||
type: "sfc";
|
||||
sfc: string;
|
||||
};
|
||||
category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
|
||||
}[], CustomTab[] | {
|
||||
name: string;
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
view: {
|
||||
type: "iframe";
|
||||
src: string;
|
||||
persistent?: boolean | undefined;
|
||||
} | {
|
||||
type: "vnode";
|
||||
vnode: vue.VNode;
|
||||
} | {
|
||||
type: "sfc";
|
||||
sfc: string;
|
||||
};
|
||||
category?: ("app" | "pinned" | "modules" | "advanced") | undefined;
|
||||
}[]>;
|
||||
commands: Ref<{
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
icon?: string | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
children?: {
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
id: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
}[] | undefined;
|
||||
}[], CustomCommand[] | {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
icon?: string | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
children?: {
|
||||
icon?: string | undefined;
|
||||
title: string;
|
||||
id: string;
|
||||
description?: string | undefined;
|
||||
order?: number | undefined;
|
||||
action?: {
|
||||
type: "url";
|
||||
src: string;
|
||||
} | undefined;
|
||||
}[] | undefined;
|
||||
}[]>;
|
||||
vitePluginDetected: Ref<boolean, boolean>;
|
||||
appRecords: Ref<{
|
||||
id: string;
|
||||
name: string;
|
||||
app?: _vue_devtools_kit0.App;
|
||||
version?: string | undefined;
|
||||
types?: Record<string, string | symbol> | undefined;
|
||||
instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
|
||||
perfGroupIds: Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}> & Omit<Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}>, keyof Map<any, any>>;
|
||||
rootInstance: _vue_devtools_kit0.VueAppInstance;
|
||||
routerId?: string | undefined;
|
||||
iframe?: string | undefined;
|
||||
}[], AppRecord[] | {
|
||||
id: string;
|
||||
name: string;
|
||||
app?: _vue_devtools_kit0.App;
|
||||
version?: string | undefined;
|
||||
types?: Record<string, string | symbol> | undefined;
|
||||
instanceMap: Map<string, any> & Omit<Map<string, any>, keyof Map<any, any>>;
|
||||
perfGroupIds: Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}> & Omit<Map<string, {
|
||||
groupId: number;
|
||||
time: number;
|
||||
}>, keyof Map<any, any>>;
|
||||
rootInstance: _vue_devtools_kit0.VueAppInstance;
|
||||
routerId?: string | undefined;
|
||||
iframe?: string | undefined;
|
||||
}[]>;
|
||||
activeAppRecordId: Ref<string, string>;
|
||||
timelineLayersState: Ref<Record<string, boolean>, Record<string, boolean>>;
|
||||
};
|
||||
declare function useDevToolsState(): DevToolsRefState;
|
||||
declare function onDevToolsConnected(fn: () => void): () => void;
|
||||
declare function refreshCurrentPageData(): void;
|
||||
//#endregion
|
||||
export { AssetEntry, AssetImporter, AssetInfo, AssetType, CodeSnippet, DevToolsMessagingEvents, ImageMeta, ModuleInfo, RPCFunctions, ViteRPCFunctions, VueDevToolsVuePlugin, createDevToolsStateContext, createViteClientRpc, createViteServerRpc, functions, getDevToolsClientUrl, onDevToolsConnected, onRpcConnected, onRpcSeverReady, onViteRpcConnected, refreshCurrentPageData, rpc, rpcServer, setDevToolsClientUrl, useDevToolsState, viteRpc, viteRpcFunctions };
|
||||
+526
@@ -0,0 +1,526 @@
|
||||
import { isBrowser, target } from "@vue/devtools-shared";
|
||||
import { DevToolsContextHookKeys, DevToolsMessagingHookKeys, createRpcClient, createRpcServer, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, getViteRpcClient, stringify, toggleClientConnected, updateDevToolsClientDetected, updateTimelineLayersState } from "@vue/devtools-kit";
|
||||
import { computed, inject, onUnmounted, ref, watch } from "vue";
|
||||
//#region src/client.ts
|
||||
function setDevToolsClientUrl(url) {
|
||||
target.__VUE_DEVTOOLS_CLIENT_URL__ = url;
|
||||
}
|
||||
function getDevToolsClientUrl() {
|
||||
return target.__VUE_DEVTOOLS_CLIENT_URL__ ?? (() => {
|
||||
if (isBrowser) {
|
||||
const devtoolsMeta = document.querySelector("meta[name=__VUE_DEVTOOLS_CLIENT_URL__]");
|
||||
if (devtoolsMeta) return devtoolsMeta.getAttribute("content");
|
||||
}
|
||||
return "";
|
||||
})();
|
||||
}
|
||||
//#endregion
|
||||
//#region ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
|
||||
function flatHooks(configHooks, hooks = {}, parentName) {
|
||||
for (const key in configHooks) {
|
||||
const subHook = configHooks[key];
|
||||
const name = parentName ? `${parentName}:${key}` : key;
|
||||
if (typeof subHook === "object" && subHook !== null) flatHooks(subHook, hooks, name);
|
||||
else if (typeof subHook === "function") hooks[name] = subHook;
|
||||
}
|
||||
return hooks;
|
||||
}
|
||||
const defaultTask = { run: (function_) => function_() };
|
||||
const _createTask = () => defaultTask;
|
||||
const createTask = typeof console.createTask !== "undefined" ? console.createTask : _createTask;
|
||||
function serialTaskCaller(hooks, args) {
|
||||
const task = createTask(args.shift());
|
||||
return hooks.reduce((promise, hookFunction) => promise.then(() => task.run(() => hookFunction(...args))), Promise.resolve());
|
||||
}
|
||||
function parallelTaskCaller(hooks, args) {
|
||||
const task = createTask(args.shift());
|
||||
return Promise.all(hooks.map((hook) => task.run(() => hook(...args))));
|
||||
}
|
||||
function callEachWith(callbacks, arg0) {
|
||||
for (const callback of [...callbacks]) callback(arg0);
|
||||
}
|
||||
var Hookable = class {
|
||||
constructor() {
|
||||
this._hooks = {};
|
||||
this._before = void 0;
|
||||
this._after = void 0;
|
||||
this._deprecatedMessages = void 0;
|
||||
this._deprecatedHooks = {};
|
||||
this.hook = this.hook.bind(this);
|
||||
this.callHook = this.callHook.bind(this);
|
||||
this.callHookWith = this.callHookWith.bind(this);
|
||||
}
|
||||
hook(name, function_, options = {}) {
|
||||
if (!name || typeof function_ !== "function") return () => {};
|
||||
const originalName = name;
|
||||
let dep;
|
||||
while (this._deprecatedHooks[name]) {
|
||||
dep = this._deprecatedHooks[name];
|
||||
name = dep.to;
|
||||
}
|
||||
if (dep && !options.allowDeprecated) {
|
||||
let message = dep.message;
|
||||
if (!message) message = `${originalName} hook has been deprecated` + (dep.to ? `, please use ${dep.to}` : "");
|
||||
if (!this._deprecatedMessages) this._deprecatedMessages = /* @__PURE__ */ new Set();
|
||||
if (!this._deprecatedMessages.has(message)) {
|
||||
console.warn(message);
|
||||
this._deprecatedMessages.add(message);
|
||||
}
|
||||
}
|
||||
if (!function_.name) try {
|
||||
Object.defineProperty(function_, "name", {
|
||||
get: () => "_" + name.replace(/\W+/g, "_") + "_hook_cb",
|
||||
configurable: true
|
||||
});
|
||||
} catch {}
|
||||
this._hooks[name] = this._hooks[name] || [];
|
||||
this._hooks[name].push(function_);
|
||||
return () => {
|
||||
if (function_) {
|
||||
this.removeHook(name, function_);
|
||||
function_ = void 0;
|
||||
}
|
||||
};
|
||||
}
|
||||
hookOnce(name, function_) {
|
||||
let _unreg;
|
||||
let _function = (...arguments_) => {
|
||||
if (typeof _unreg === "function") _unreg();
|
||||
_unreg = void 0;
|
||||
_function = void 0;
|
||||
return function_(...arguments_);
|
||||
};
|
||||
_unreg = this.hook(name, _function);
|
||||
return _unreg;
|
||||
}
|
||||
removeHook(name, function_) {
|
||||
if (this._hooks[name]) {
|
||||
const index = this._hooks[name].indexOf(function_);
|
||||
if (index !== -1) this._hooks[name].splice(index, 1);
|
||||
if (this._hooks[name].length === 0) delete this._hooks[name];
|
||||
}
|
||||
}
|
||||
deprecateHook(name, deprecated) {
|
||||
this._deprecatedHooks[name] = typeof deprecated === "string" ? { to: deprecated } : deprecated;
|
||||
const _hooks = this._hooks[name] || [];
|
||||
delete this._hooks[name];
|
||||
for (const hook of _hooks) this.hook(name, hook);
|
||||
}
|
||||
deprecateHooks(deprecatedHooks) {
|
||||
Object.assign(this._deprecatedHooks, deprecatedHooks);
|
||||
for (const name in deprecatedHooks) this.deprecateHook(name, deprecatedHooks[name]);
|
||||
}
|
||||
addHooks(configHooks) {
|
||||
const hooks = flatHooks(configHooks);
|
||||
const removeFns = Object.keys(hooks).map((key) => this.hook(key, hooks[key]));
|
||||
return () => {
|
||||
for (const unreg of removeFns.splice(0, removeFns.length)) unreg();
|
||||
};
|
||||
}
|
||||
removeHooks(configHooks) {
|
||||
const hooks = flatHooks(configHooks);
|
||||
for (const key in hooks) this.removeHook(key, hooks[key]);
|
||||
}
|
||||
removeAllHooks() {
|
||||
for (const key in this._hooks) delete this._hooks[key];
|
||||
}
|
||||
callHook(name, ...arguments_) {
|
||||
arguments_.unshift(name);
|
||||
return this.callHookWith(serialTaskCaller, name, ...arguments_);
|
||||
}
|
||||
callHookParallel(name, ...arguments_) {
|
||||
arguments_.unshift(name);
|
||||
return this.callHookWith(parallelTaskCaller, name, ...arguments_);
|
||||
}
|
||||
callHookWith(caller, name, ...arguments_) {
|
||||
const event = this._before || this._after ? {
|
||||
name,
|
||||
args: arguments_,
|
||||
context: {}
|
||||
} : void 0;
|
||||
if (this._before) callEachWith(this._before, event);
|
||||
const result = caller(name in this._hooks ? [...this._hooks[name]] : [], arguments_);
|
||||
if (result instanceof Promise) return result.finally(() => {
|
||||
if (this._after && event) callEachWith(this._after, event);
|
||||
});
|
||||
if (this._after && event) callEachWith(this._after, event);
|
||||
return result;
|
||||
}
|
||||
beforeEach(function_) {
|
||||
this._before = this._before || [];
|
||||
this._before.push(function_);
|
||||
return () => {
|
||||
if (this._before !== void 0) {
|
||||
const index = this._before.indexOf(function_);
|
||||
if (index !== -1) this._before.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
afterEach(function_) {
|
||||
this._after = this._after || [];
|
||||
this._after.push(function_);
|
||||
return () => {
|
||||
if (this._after !== void 0) {
|
||||
const index = this._after.indexOf(function_);
|
||||
if (index !== -1) this._after.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
function createHooks() {
|
||||
return new Hookable();
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/global.ts
|
||||
const hooks$1 = createHooks();
|
||||
let DevToolsMessagingEvents = /* @__PURE__ */ function(DevToolsMessagingEvents) {
|
||||
DevToolsMessagingEvents["INSPECTOR_TREE_UPDATED"] = "inspector-tree-updated";
|
||||
DevToolsMessagingEvents["INSPECTOR_STATE_UPDATED"] = "inspector-state-updated";
|
||||
DevToolsMessagingEvents["DEVTOOLS_STATE_UPDATED"] = "devtools-state-updated";
|
||||
DevToolsMessagingEvents["ROUTER_INFO_UPDATED"] = "router-info-updated";
|
||||
DevToolsMessagingEvents["TIMELINE_EVENT_UPDATED"] = "timeline-event-updated";
|
||||
DevToolsMessagingEvents["INSPECTOR_UPDATED"] = "inspector-updated";
|
||||
DevToolsMessagingEvents["ACTIVE_APP_UNMOUNTED"] = "active-app-updated";
|
||||
DevToolsMessagingEvents["DESTROY_DEVTOOLS_CLIENT"] = "destroy-devtools-client";
|
||||
DevToolsMessagingEvents["RELOAD_DEVTOOLS_CLIENT"] = "reload-devtools-client";
|
||||
return DevToolsMessagingEvents;
|
||||
}({});
|
||||
function getDevToolsState() {
|
||||
const state = devtools.ctx.state;
|
||||
return {
|
||||
connected: state.connected,
|
||||
clientConnected: true,
|
||||
vueVersion: state?.activeAppRecord?.version || "",
|
||||
tabs: state.tabs,
|
||||
commands: state.commands,
|
||||
vitePluginDetected: state.vitePluginDetected,
|
||||
appRecords: state.appRecords.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
version: item.version,
|
||||
routerId: item.routerId,
|
||||
iframe: item.iframe
|
||||
})),
|
||||
activeAppRecordId: state.activeAppRecordId,
|
||||
timelineLayersState: state.timelineLayersState
|
||||
};
|
||||
}
|
||||
const functions = {
|
||||
on: (event, handler) => {
|
||||
hooks$1.hook(event, handler);
|
||||
},
|
||||
off: (event, handler) => {
|
||||
hooks$1.removeHook(event, handler);
|
||||
},
|
||||
once: (event, handler) => {
|
||||
hooks$1.hookOnce(event, handler);
|
||||
},
|
||||
emit: (event, ...args) => {
|
||||
hooks$1.callHook(event, ...args);
|
||||
},
|
||||
heartbeat: () => {
|
||||
return true;
|
||||
},
|
||||
devtoolsState: () => {
|
||||
return getDevToolsState();
|
||||
},
|
||||
async getInspectorTree(payload) {
|
||||
return stringify(await devtools.ctx.api.getInspectorTree(payload));
|
||||
},
|
||||
async getInspectorState(payload) {
|
||||
const inspector = getInspector(payload.inspectorId);
|
||||
if (inspector) inspector.selectedNodeId = payload.nodeId;
|
||||
return stringify(await devtools.ctx.api.getInspectorState(payload));
|
||||
},
|
||||
async editInspectorState(payload) {
|
||||
return await devtools.ctx.api.editInspectorState(payload);
|
||||
},
|
||||
sendInspectorState(id) {
|
||||
return devtools.ctx.api.sendInspectorState(id);
|
||||
},
|
||||
inspectComponentInspector() {
|
||||
return devtools.ctx.api.inspectComponentInspector();
|
||||
},
|
||||
cancelInspectComponentInspector() {
|
||||
return devtools.ctx.api.cancelInspectComponentInspector();
|
||||
},
|
||||
getComponentRenderCode(id) {
|
||||
return devtools.ctx.api.getComponentRenderCode(id);
|
||||
},
|
||||
scrollToComponent(id) {
|
||||
return devtools.ctx.api.scrollToComponent(id);
|
||||
},
|
||||
inspectDOM(id) {
|
||||
return devtools.ctx.api.inspectDOM(id);
|
||||
},
|
||||
getInspectorNodeActions(id) {
|
||||
return getInspectorNodeActions(id);
|
||||
},
|
||||
getInspectorActions(id) {
|
||||
return getInspectorActions(id);
|
||||
},
|
||||
updateTimelineLayersState(state) {
|
||||
return updateTimelineLayersState(state);
|
||||
},
|
||||
callInspectorNodeAction(inspectorId, actionIndex, nodeId) {
|
||||
const nodeActions = getInspectorNodeActions(inspectorId);
|
||||
if (nodeActions?.length) nodeActions[actionIndex].action?.(nodeId);
|
||||
},
|
||||
callInspectorAction(inspectorId, actionIndex) {
|
||||
const actions = getInspectorActions(inspectorId);
|
||||
if (actions?.length) actions[actionIndex].action?.();
|
||||
},
|
||||
openInEditor(options) {
|
||||
return devtools.ctx.api.openInEditor(options);
|
||||
},
|
||||
async checkVueInspectorDetected() {
|
||||
return !!await devtools.ctx.api.getVueInspector();
|
||||
},
|
||||
async enableVueInspector() {
|
||||
const inspector = await devtools?.api?.getVueInspector?.();
|
||||
if (inspector) await inspector.enable();
|
||||
},
|
||||
async toggleApp(id, options) {
|
||||
return devtools.ctx.api.toggleApp(id, options);
|
||||
},
|
||||
updatePluginSettings(pluginId, key, value) {
|
||||
return devtools.ctx.api.updatePluginSettings(pluginId, key, value);
|
||||
},
|
||||
getPluginSettings(pluginId) {
|
||||
return devtools.ctx.api.getPluginSettings(pluginId);
|
||||
},
|
||||
getRouterInfo() {
|
||||
return devtoolsRouterInfo;
|
||||
},
|
||||
navigate(path) {
|
||||
return devtoolsRouter.value?.push(path).catch(() => ({}));
|
||||
},
|
||||
getMatchedRoutes(path) {
|
||||
const c = console.warn;
|
||||
console.warn = () => {};
|
||||
const matched = devtoolsRouter.value?.resolve?.({ path: path || "/" }).matched ?? [];
|
||||
console.warn = c;
|
||||
return matched;
|
||||
},
|
||||
toggleClientConnected(state) {
|
||||
toggleClientConnected(state);
|
||||
},
|
||||
getCustomInspector() {
|
||||
return getActiveInspectors();
|
||||
},
|
||||
getInspectorInfo(id) {
|
||||
return getInspectorInfo(id);
|
||||
},
|
||||
highlighComponent(uid) {
|
||||
return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid });
|
||||
},
|
||||
unhighlight() {
|
||||
return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT);
|
||||
},
|
||||
updateDevToolsClientDetected(params) {
|
||||
updateDevToolsClientDetected(params);
|
||||
},
|
||||
initDevToolsServerListener() {
|
||||
const broadcast = getRpcServer().broadcast;
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_TREE_UPDATED, stringify(payload));
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_STATE_UPDATED, stringify(payload));
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, () => {
|
||||
broadcast.emit(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, getDevToolsState());
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, ({ state }) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.ROUTER_INFO_UPDATED, state);
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, stringify(payload));
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, (payload) => {
|
||||
broadcast.emit(DevToolsMessagingEvents.INSPECTOR_UPDATED, payload);
|
||||
});
|
||||
devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT, () => {
|
||||
broadcast.emit(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED);
|
||||
});
|
||||
}
|
||||
};
|
||||
const rpc = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = getRpcClient();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc.$functions;
|
||||
} });
|
||||
const rpcServer = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = getRpcServer();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc.functions;
|
||||
} });
|
||||
function onRpcConnected(callback) {
|
||||
let timer = null;
|
||||
let retryCount = 0;
|
||||
function heartbeat() {
|
||||
rpc.value?.heartbeat?.().then(() => {
|
||||
callback();
|
||||
clearTimeout(timer);
|
||||
}).catch(() => {});
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
if (retryCount >= 30) clearTimeout(timer);
|
||||
retryCount++;
|
||||
heartbeat();
|
||||
}, retryCount * 200 + 200);
|
||||
heartbeat();
|
||||
}
|
||||
function onRpcSeverReady(callback) {
|
||||
let timer = null;
|
||||
const timeout = 120;
|
||||
function heartbeat() {
|
||||
if (rpcServer.value.clients.length > 0) {
|
||||
callback();
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}
|
||||
timer = setInterval(() => {
|
||||
heartbeat();
|
||||
}, timeout);
|
||||
}
|
||||
//#endregion
|
||||
//#region src/rpc/vite.ts
|
||||
const hooks = createHooks();
|
||||
const viteRpcFunctions = {
|
||||
on: (event, handler) => {
|
||||
hooks.hook(event, handler);
|
||||
},
|
||||
off: (event, handler) => {
|
||||
hooks.removeHook(event, handler);
|
||||
},
|
||||
once: (event, handler) => {
|
||||
hooks.hookOnce(event, handler);
|
||||
},
|
||||
emit: (event, ...args) => {
|
||||
hooks.callHook(event, ...args);
|
||||
},
|
||||
heartbeat: () => {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const viteRpc = new Proxy({
|
||||
value: {},
|
||||
functions: {}
|
||||
}, { get(target, property) {
|
||||
const _rpc = getViteRpcClient();
|
||||
if (property === "value") return _rpc;
|
||||
else if (property === "functions") return _rpc?.$functions;
|
||||
} });
|
||||
function onViteRpcConnected(callback) {
|
||||
let timer = null;
|
||||
function heartbeat() {
|
||||
viteRpc.value?.heartbeat?.().then(() => {
|
||||
clearTimeout(timer);
|
||||
callback();
|
||||
}).catch(() => ({}));
|
||||
timer = setTimeout(() => {
|
||||
heartbeat();
|
||||
}, 80);
|
||||
}
|
||||
heartbeat();
|
||||
}
|
||||
function createViteClientRpc() {
|
||||
createRpcClient(viteRpcFunctions, { preset: "vite" });
|
||||
}
|
||||
function createViteServerRpc(functions) {
|
||||
createRpcServer(functions, { preset: "vite" });
|
||||
}
|
||||
//#endregion
|
||||
//#region src/vue-plugin/devtools-state.ts
|
||||
const VueDevToolsStateSymbol = Symbol.for("__VueDevToolsStateSymbol__");
|
||||
function VueDevToolsVuePlugin() {
|
||||
return { install(app) {
|
||||
const state = createDevToolsStateContext();
|
||||
state.getDevToolsState();
|
||||
app.provide(VueDevToolsStateSymbol, state);
|
||||
app.config.globalProperties.$getDevToolsState = state.getDevToolsState;
|
||||
app.config.globalProperties.$disconnectDevToolsClient = () => {
|
||||
state.clientConnected.value = false;
|
||||
state.connected.value = false;
|
||||
};
|
||||
} };
|
||||
}
|
||||
function createDevToolsStateContext() {
|
||||
const connected = ref(false);
|
||||
const clientConnected = ref(false);
|
||||
const vueVersion = ref("");
|
||||
const tabs = ref([]);
|
||||
const commands = ref([]);
|
||||
const vitePluginDetected = ref(false);
|
||||
const appRecords = ref([]);
|
||||
const activeAppRecordId = ref("");
|
||||
const timelineLayersState = ref({});
|
||||
function updateState(data) {
|
||||
connected.value = data.connected;
|
||||
clientConnected.value = data.clientConnected;
|
||||
vueVersion.value = data.vueVersion || "";
|
||||
tabs.value = data.tabs;
|
||||
commands.value = data.commands;
|
||||
vitePluginDetected.value = data.vitePluginDetected;
|
||||
appRecords.value = data.appRecords;
|
||||
activeAppRecordId.value = data.activeAppRecordId;
|
||||
timelineLayersState.value = data.timelineLayersState;
|
||||
}
|
||||
function getDevToolsState() {
|
||||
onRpcConnected(() => {
|
||||
rpc.value.devtoolsState().then((data) => {
|
||||
updateState(data);
|
||||
});
|
||||
rpc.functions.off(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState);
|
||||
rpc.functions.on(DevToolsMessagingEvents.DEVTOOLS_STATE_UPDATED, updateState);
|
||||
});
|
||||
}
|
||||
return {
|
||||
getDevToolsState,
|
||||
connected,
|
||||
clientConnected,
|
||||
vueVersion,
|
||||
tabs,
|
||||
commands,
|
||||
vitePluginDetected,
|
||||
appRecords,
|
||||
activeAppRecordId,
|
||||
timelineLayersState
|
||||
};
|
||||
}
|
||||
function useDevToolsState() {
|
||||
return inject(VueDevToolsStateSymbol);
|
||||
}
|
||||
const fns = [];
|
||||
function onDevToolsConnected(fn) {
|
||||
const { connected, clientConnected } = useDevToolsState();
|
||||
fns.push(fn);
|
||||
onUnmounted(() => {
|
||||
fns.splice(fns.indexOf(fn), 1);
|
||||
});
|
||||
const devtoolsReady = computed(() => clientConnected.value && connected.value);
|
||||
if (devtoolsReady.value) fn();
|
||||
else {
|
||||
const stop = watch(devtoolsReady, (v) => {
|
||||
if (v) {
|
||||
fn();
|
||||
stop();
|
||||
}
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
fns.splice(fns.indexOf(fn), 1);
|
||||
};
|
||||
}
|
||||
function refreshCurrentPageData() {
|
||||
fns.forEach((fn) => fn());
|
||||
}
|
||||
//#endregion
|
||||
export { DevToolsMessagingEvents, VueDevToolsVuePlugin, createDevToolsStateContext, createViteClientRpc, createViteServerRpc, functions, getDevToolsClientUrl, onDevToolsConnected, onRpcConnected, onRpcSeverReady, onViteRpcConnected, refreshCurrentPageData, rpc, rpcServer, setDevToolsClientUrl, useDevToolsState, viteRpc, viteRpcFunctions };
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "@vue/devtools-core",
|
||||
"type": "module",
|
||||
"version": "8.2.1",
|
||||
"author": "webfansplz",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"directory": "packages/core",
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vuejs/devtools.git"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"require": "./dist/index.cjs"
|
||||
}
|
||||
},
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"server.d.ts"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/devtools-kit": "^8.2.1",
|
||||
"@vue/devtools-shared": "^8.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vue": "^3.5.22"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsdown --clean",
|
||||
"prepare:type": "tsdown --dts-only",
|
||||
"stub": "tsdown --watch --onSuccess 'tsdown --dts-only'"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user