123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645 |
- // src/client.ts
- import { isBrowser, target } from "@vue/devtools-shared";
- function setDevToolsClientUrl(url) {
- target.__VUE_DEVTOOLS_CLIENT_URL__ = url;
- }
- function getDevToolsClientUrl() {
- var _a;
- return (_a = target.__VUE_DEVTOOLS_CLIENT_URL__) != null ? _a : (() => {
- if (isBrowser) {
- const devtoolsMeta = document.querySelector("meta[name=__VUE_DEVTOOLS_CLIENT_URL__]");
- if (devtoolsMeta)
- return devtoolsMeta.getAttribute("content");
- }
- return "";
- })();
- }
- // src/rpc/global.ts
- import { devtools, DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected, updateDevToolsClientDetected, updateTimelineLayersState } from "@vue/devtools-kit";
- // ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
- function flatHooks(configHooks, hooks3 = {}, parentName) {
- for (const key in configHooks) {
- const subHook = configHooks[key];
- const name = parentName ? `${parentName}:${key}` : key;
- if (typeof subHook === "object" && subHook !== null) {
- flatHooks(subHook, hooks3, name);
- } else if (typeof subHook === "function") {
- hooks3[name] = subHook;
- }
- }
- return hooks3;
- }
- var defaultTask = { run: (function_) => function_() };
- var _createTask = () => defaultTask;
- var createTask = typeof console.createTask !== "undefined" ? console.createTask : _createTask;
- function serialTaskCaller(hooks3, args) {
- const name = args.shift();
- const task = createTask(name);
- return hooks3.reduce(
- (promise, hookFunction) => promise.then(() => task.run(() => hookFunction(...args))),
- Promise.resolve()
- );
- }
- function parallelTaskCaller(hooks3, args) {
- const name = args.shift();
- const task = createTask(name);
- return Promise.all(hooks3.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 (e) {
- }
- }
- 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 hooks3 = flatHooks(configHooks);
- const removeFns = Object.keys(hooks3).map(
- (key) => this.hook(key, hooks3[key])
- );
- return () => {
- for (const unreg of removeFns.splice(0, removeFns.length)) {
- unreg();
- }
- };
- }
- removeHooks(configHooks) {
- const hooks3 = flatHooks(configHooks);
- for (const key in hooks3) {
- this.removeHook(key, hooks3[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();
- }
- // src/rpc/global.ts
- var hooks = createHooks();
- var DevToolsMessagingEvents = /* @__PURE__ */ ((DevToolsMessagingEvents2) => {
- DevToolsMessagingEvents2["INSPECTOR_TREE_UPDATED"] = "inspector-tree-updated";
- DevToolsMessagingEvents2["INSPECTOR_STATE_UPDATED"] = "inspector-state-updated";
- DevToolsMessagingEvents2["DEVTOOLS_STATE_UPDATED"] = "devtools-state-updated";
- DevToolsMessagingEvents2["ROUTER_INFO_UPDATED"] = "router-info-updated";
- DevToolsMessagingEvents2["TIMELINE_EVENT_UPDATED"] = "timeline-event-updated";
- DevToolsMessagingEvents2["INSPECTOR_UPDATED"] = "inspector-updated";
- DevToolsMessagingEvents2["ACTIVE_APP_UNMOUNTED"] = "active-app-updated";
- DevToolsMessagingEvents2["DESTROY_DEVTOOLS_CLIENT"] = "destroy-devtools-client";
- DevToolsMessagingEvents2["RELOAD_DEVTOOLS_CLIENT"] = "reload-devtools-client";
- return DevToolsMessagingEvents2;
- })(DevToolsMessagingEvents || {});
- function getDevToolsState() {
- var _a;
- const state = devtools.ctx.state;
- return {
- connected: state.connected,
- clientConnected: true,
- vueVersion: ((_a = state == null ? void 0 : state.activeAppRecord) == null ? void 0 : _a.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
- })),
- activeAppRecordId: state.activeAppRecordId,
- timelineLayersState: state.timelineLayersState
- };
- }
- var functions = {
- 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;
- },
- devtoolsState: () => {
- return getDevToolsState();
- },
- async getInspectorTree(payload) {
- const res = await devtools.ctx.api.getInspectorTree(payload);
- return stringify(res);
- },
- async getInspectorState(payload) {
- const inspector = getInspector(payload.inspectorId);
- if (inspector)
- inspector.selectedNodeId = payload.nodeId;
- const res = await devtools.ctx.api.getInspectorState(payload);
- return stringify(res);
- },
- 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) {
- var _a;
- const nodeActions = getInspectorNodeActions(inspectorId);
- if (nodeActions == null ? void 0 : nodeActions.length) {
- const item = nodeActions[actionIndex];
- (_a = item.action) == null ? void 0 : _a.call(item, nodeId);
- }
- },
- callInspectorAction(inspectorId, actionIndex) {
- var _a;
- const actions = getInspectorActions(inspectorId);
- if (actions == null ? void 0 : actions.length) {
- const item = actions[actionIndex];
- (_a = item.action) == null ? void 0 : _a.call(item);
- }
- },
- openInEditor(options) {
- return devtools.ctx.api.openInEditor(options);
- },
- async checkVueInspectorDetected() {
- return !!await devtools.ctx.api.getVueInspector();
- },
- async enableVueInspector() {
- var _a, _b, _c;
- const inspector = await ((_c = (_b = (_a = devtools) == null ? void 0 : _a.api) == null ? void 0 : _b.getVueInspector) == null ? void 0 : _c.call(_b));
- 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) {
- var _a;
- return (_a = devtoolsRouter.value) == null ? void 0 : _a.push(path).catch(() => ({}));
- },
- getMatchedRoutes(path) {
- var _a, _b, _c;
- const c = console.warn;
- console.warn = () => {
- };
- const matched = (_c = (_b = (_a = devtoolsRouter.value) == null ? void 0 : _a.resolve) == null ? void 0 : _b.call(_a, {
- path: path || "/"
- }).matched) != null ? _c : [];
- 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);
- },
- // listen to devtools server events
- initDevToolsServerListener() {
- const rpcServer2 = getRpcServer();
- const broadcast = rpcServer2.broadcast;
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT, (payload) => {
- broadcast.emit("inspector-tree-updated" /* INSPECTOR_TREE_UPDATED */, stringify(payload));
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT, (payload) => {
- broadcast.emit("inspector-state-updated" /* INSPECTOR_STATE_UPDATED */, stringify(payload));
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, () => {
- broadcast.emit("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, getDevToolsState());
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, ({ state }) => {
- broadcast.emit("router-info-updated" /* ROUTER_INFO_UPDATED */, state);
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT, (payload) => {
- broadcast.emit("timeline-event-updated" /* TIMELINE_EVENT_UPDATED */, stringify(payload));
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, (payload) => {
- broadcast.emit("inspector-updated" /* INSPECTOR_UPDATED */, payload);
- });
- devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT, () => {
- broadcast.emit("active-app-updated" /* ACTIVE_APP_UNMOUNTED */);
- });
- }
- };
- var rpc = new Proxy({
- value: {},
- functions: {}
- }, {
- get(target2, property) {
- const _rpc = getRpcClient();
- if (property === "value") {
- return _rpc;
- } else if (property === "functions") {
- return _rpc.$functions;
- }
- }
- });
- var rpcServer = new Proxy({
- value: {},
- functions: {}
- }, {
- get(target2, 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() {
- var _a, _b;
- (_b = (_a = rpc.value) == null ? void 0 : _a.heartbeat) == null ? void 0 : _b.call(_a).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);
- }
- // src/rpc/vite.ts
- import { createRpcClient, createRpcServer, getViteRpcClient } from "@vue/devtools-kit";
- var hooks2 = createHooks();
- var viteRpcFunctions = {
- on: (event, handler) => {
- hooks2.hook(event, handler);
- },
- off: (event, handler) => {
- hooks2.removeHook(event, handler);
- },
- once: (event, handler) => {
- hooks2.hookOnce(event, handler);
- },
- emit: (event, ...args) => {
- hooks2.callHook(event, ...args);
- },
- heartbeat: () => {
- return true;
- }
- };
- var viteRpc = new Proxy({
- value: {},
- functions: {}
- }, {
- get(target2, property) {
- const _rpc = getViteRpcClient();
- if (property === "value") {
- return _rpc;
- } else if (property === "functions") {
- return _rpc == null ? void 0 : _rpc.$functions;
- }
- }
- });
- function onViteRpcConnected(callback) {
- let timer = null;
- function heartbeat() {
- var _a, _b;
- (_b = (_a = viteRpc.value) == null ? void 0 : _a.heartbeat) == null ? void 0 : _b.call(_a).then(() => {
- clearTimeout(timer);
- callback();
- }).catch(() => ({}));
- timer = setTimeout(() => {
- heartbeat();
- }, 80);
- }
- heartbeat();
- }
- function createViteClientRpc() {
- createRpcClient(viteRpcFunctions, {
- preset: "vite"
- });
- }
- function createViteServerRpc(functions2) {
- createRpcServer(functions2, {
- preset: "vite"
- });
- }
- // src/vue-plugin/devtools-state.ts
- import { computed, inject, onUnmounted, ref, watch } from "vue";
- var 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 getDevToolsState2() {
- onRpcConnected(() => {
- rpc.value.devtoolsState().then((data) => {
- updateState(data);
- });
- rpc.functions.off("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, updateState);
- rpc.functions.on("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, updateState);
- });
- }
- return {
- getDevToolsState: getDevToolsState2,
- connected,
- clientConnected,
- vueVersion,
- tabs,
- commands,
- vitePluginDetected,
- appRecords,
- activeAppRecordId,
- timelineLayersState
- };
- }
- function useDevToolsState() {
- return inject(VueDevToolsStateSymbol);
- }
- var 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());
- }
- export {
- DevToolsMessagingEvents,
- VueDevToolsVuePlugin,
- createDevToolsStateContext,
- createViteClientRpc,
- createViteServerRpc,
- functions,
- getDevToolsClientUrl,
- onDevToolsConnected,
- onRpcConnected,
- onRpcSeverReady,
- onViteRpcConnected,
- refreshCurrentPageData,
- rpc,
- rpcServer,
- setDevToolsClientUrl,
- useDevToolsState,
- viteRpc,
- viteRpcFunctions
- };
|