index.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. // src/client.ts
  2. import { isBrowser, target } from "@vue/devtools-shared";
  3. function setDevToolsClientUrl(url) {
  4. target.__VUE_DEVTOOLS_CLIENT_URL__ = url;
  5. }
  6. function getDevToolsClientUrl() {
  7. var _a;
  8. return (_a = target.__VUE_DEVTOOLS_CLIENT_URL__) != null ? _a : (() => {
  9. if (isBrowser) {
  10. const devtoolsMeta = document.querySelector("meta[name=__VUE_DEVTOOLS_CLIENT_URL__]");
  11. if (devtoolsMeta)
  12. return devtoolsMeta.getAttribute("content");
  13. }
  14. return "";
  15. })();
  16. }
  17. // src/rpc/global.ts
  18. import { devtools, DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected, updateDevToolsClientDetected, updateTimelineLayersState } from "@vue/devtools-kit";
  19. // ../../node_modules/.pnpm/hookable@5.5.3/node_modules/hookable/dist/index.mjs
  20. function flatHooks(configHooks, hooks3 = {}, parentName) {
  21. for (const key in configHooks) {
  22. const subHook = configHooks[key];
  23. const name = parentName ? `${parentName}:${key}` : key;
  24. if (typeof subHook === "object" && subHook !== null) {
  25. flatHooks(subHook, hooks3, name);
  26. } else if (typeof subHook === "function") {
  27. hooks3[name] = subHook;
  28. }
  29. }
  30. return hooks3;
  31. }
  32. var defaultTask = { run: (function_) => function_() };
  33. var _createTask = () => defaultTask;
  34. var createTask = typeof console.createTask !== "undefined" ? console.createTask : _createTask;
  35. function serialTaskCaller(hooks3, args) {
  36. const name = args.shift();
  37. const task = createTask(name);
  38. return hooks3.reduce(
  39. (promise, hookFunction) => promise.then(() => task.run(() => hookFunction(...args))),
  40. Promise.resolve()
  41. );
  42. }
  43. function parallelTaskCaller(hooks3, args) {
  44. const name = args.shift();
  45. const task = createTask(name);
  46. return Promise.all(hooks3.map((hook) => task.run(() => hook(...args))));
  47. }
  48. function callEachWith(callbacks, arg0) {
  49. for (const callback of [...callbacks]) {
  50. callback(arg0);
  51. }
  52. }
  53. var Hookable = class {
  54. constructor() {
  55. this._hooks = {};
  56. this._before = void 0;
  57. this._after = void 0;
  58. this._deprecatedMessages = void 0;
  59. this._deprecatedHooks = {};
  60. this.hook = this.hook.bind(this);
  61. this.callHook = this.callHook.bind(this);
  62. this.callHookWith = this.callHookWith.bind(this);
  63. }
  64. hook(name, function_, options = {}) {
  65. if (!name || typeof function_ !== "function") {
  66. return () => {
  67. };
  68. }
  69. const originalName = name;
  70. let dep;
  71. while (this._deprecatedHooks[name]) {
  72. dep = this._deprecatedHooks[name];
  73. name = dep.to;
  74. }
  75. if (dep && !options.allowDeprecated) {
  76. let message = dep.message;
  77. if (!message) {
  78. message = `${originalName} hook has been deprecated` + (dep.to ? `, please use ${dep.to}` : "");
  79. }
  80. if (!this._deprecatedMessages) {
  81. this._deprecatedMessages = /* @__PURE__ */ new Set();
  82. }
  83. if (!this._deprecatedMessages.has(message)) {
  84. console.warn(message);
  85. this._deprecatedMessages.add(message);
  86. }
  87. }
  88. if (!function_.name) {
  89. try {
  90. Object.defineProperty(function_, "name", {
  91. get: () => "_" + name.replace(/\W+/g, "_") + "_hook_cb",
  92. configurable: true
  93. });
  94. } catch (e) {
  95. }
  96. }
  97. this._hooks[name] = this._hooks[name] || [];
  98. this._hooks[name].push(function_);
  99. return () => {
  100. if (function_) {
  101. this.removeHook(name, function_);
  102. function_ = void 0;
  103. }
  104. };
  105. }
  106. hookOnce(name, function_) {
  107. let _unreg;
  108. let _function = (...arguments_) => {
  109. if (typeof _unreg === "function") {
  110. _unreg();
  111. }
  112. _unreg = void 0;
  113. _function = void 0;
  114. return function_(...arguments_);
  115. };
  116. _unreg = this.hook(name, _function);
  117. return _unreg;
  118. }
  119. removeHook(name, function_) {
  120. if (this._hooks[name]) {
  121. const index = this._hooks[name].indexOf(function_);
  122. if (index !== -1) {
  123. this._hooks[name].splice(index, 1);
  124. }
  125. if (this._hooks[name].length === 0) {
  126. delete this._hooks[name];
  127. }
  128. }
  129. }
  130. deprecateHook(name, deprecated) {
  131. this._deprecatedHooks[name] = typeof deprecated === "string" ? { to: deprecated } : deprecated;
  132. const _hooks = this._hooks[name] || [];
  133. delete this._hooks[name];
  134. for (const hook of _hooks) {
  135. this.hook(name, hook);
  136. }
  137. }
  138. deprecateHooks(deprecatedHooks) {
  139. Object.assign(this._deprecatedHooks, deprecatedHooks);
  140. for (const name in deprecatedHooks) {
  141. this.deprecateHook(name, deprecatedHooks[name]);
  142. }
  143. }
  144. addHooks(configHooks) {
  145. const hooks3 = flatHooks(configHooks);
  146. const removeFns = Object.keys(hooks3).map(
  147. (key) => this.hook(key, hooks3[key])
  148. );
  149. return () => {
  150. for (const unreg of removeFns.splice(0, removeFns.length)) {
  151. unreg();
  152. }
  153. };
  154. }
  155. removeHooks(configHooks) {
  156. const hooks3 = flatHooks(configHooks);
  157. for (const key in hooks3) {
  158. this.removeHook(key, hooks3[key]);
  159. }
  160. }
  161. removeAllHooks() {
  162. for (const key in this._hooks) {
  163. delete this._hooks[key];
  164. }
  165. }
  166. callHook(name, ...arguments_) {
  167. arguments_.unshift(name);
  168. return this.callHookWith(serialTaskCaller, name, ...arguments_);
  169. }
  170. callHookParallel(name, ...arguments_) {
  171. arguments_.unshift(name);
  172. return this.callHookWith(parallelTaskCaller, name, ...arguments_);
  173. }
  174. callHookWith(caller, name, ...arguments_) {
  175. const event = this._before || this._after ? { name, args: arguments_, context: {} } : void 0;
  176. if (this._before) {
  177. callEachWith(this._before, event);
  178. }
  179. const result = caller(
  180. name in this._hooks ? [...this._hooks[name]] : [],
  181. arguments_
  182. );
  183. if (result instanceof Promise) {
  184. return result.finally(() => {
  185. if (this._after && event) {
  186. callEachWith(this._after, event);
  187. }
  188. });
  189. }
  190. if (this._after && event) {
  191. callEachWith(this._after, event);
  192. }
  193. return result;
  194. }
  195. beforeEach(function_) {
  196. this._before = this._before || [];
  197. this._before.push(function_);
  198. return () => {
  199. if (this._before !== void 0) {
  200. const index = this._before.indexOf(function_);
  201. if (index !== -1) {
  202. this._before.splice(index, 1);
  203. }
  204. }
  205. };
  206. }
  207. afterEach(function_) {
  208. this._after = this._after || [];
  209. this._after.push(function_);
  210. return () => {
  211. if (this._after !== void 0) {
  212. const index = this._after.indexOf(function_);
  213. if (index !== -1) {
  214. this._after.splice(index, 1);
  215. }
  216. }
  217. };
  218. }
  219. };
  220. function createHooks() {
  221. return new Hookable();
  222. }
  223. // src/rpc/global.ts
  224. var hooks = createHooks();
  225. var DevToolsMessagingEvents = /* @__PURE__ */ ((DevToolsMessagingEvents2) => {
  226. DevToolsMessagingEvents2["INSPECTOR_TREE_UPDATED"] = "inspector-tree-updated";
  227. DevToolsMessagingEvents2["INSPECTOR_STATE_UPDATED"] = "inspector-state-updated";
  228. DevToolsMessagingEvents2["DEVTOOLS_STATE_UPDATED"] = "devtools-state-updated";
  229. DevToolsMessagingEvents2["ROUTER_INFO_UPDATED"] = "router-info-updated";
  230. DevToolsMessagingEvents2["TIMELINE_EVENT_UPDATED"] = "timeline-event-updated";
  231. DevToolsMessagingEvents2["INSPECTOR_UPDATED"] = "inspector-updated";
  232. DevToolsMessagingEvents2["ACTIVE_APP_UNMOUNTED"] = "active-app-updated";
  233. DevToolsMessagingEvents2["DESTROY_DEVTOOLS_CLIENT"] = "destroy-devtools-client";
  234. DevToolsMessagingEvents2["RELOAD_DEVTOOLS_CLIENT"] = "reload-devtools-client";
  235. return DevToolsMessagingEvents2;
  236. })(DevToolsMessagingEvents || {});
  237. function getDevToolsState() {
  238. var _a;
  239. const state = devtools.ctx.state;
  240. return {
  241. connected: state.connected,
  242. clientConnected: true,
  243. vueVersion: ((_a = state == null ? void 0 : state.activeAppRecord) == null ? void 0 : _a.version) || "",
  244. tabs: state.tabs,
  245. commands: state.commands,
  246. vitePluginDetected: state.vitePluginDetected,
  247. appRecords: state.appRecords.map((item) => ({
  248. id: item.id,
  249. name: item.name,
  250. version: item.version,
  251. routerId: item.routerId
  252. })),
  253. activeAppRecordId: state.activeAppRecordId,
  254. timelineLayersState: state.timelineLayersState
  255. };
  256. }
  257. var functions = {
  258. on: (event, handler) => {
  259. hooks.hook(event, handler);
  260. },
  261. off: (event, handler) => {
  262. hooks.removeHook(event, handler);
  263. },
  264. once: (event, handler) => {
  265. hooks.hookOnce(event, handler);
  266. },
  267. emit: (event, ...args) => {
  268. hooks.callHook(event, ...args);
  269. },
  270. heartbeat: () => {
  271. return true;
  272. },
  273. devtoolsState: () => {
  274. return getDevToolsState();
  275. },
  276. async getInspectorTree(payload) {
  277. const res = await devtools.ctx.api.getInspectorTree(payload);
  278. return stringify(res);
  279. },
  280. async getInspectorState(payload) {
  281. const inspector = getInspector(payload.inspectorId);
  282. if (inspector)
  283. inspector.selectedNodeId = payload.nodeId;
  284. const res = await devtools.ctx.api.getInspectorState(payload);
  285. return stringify(res);
  286. },
  287. async editInspectorState(payload) {
  288. return await devtools.ctx.api.editInspectorState(payload);
  289. },
  290. sendInspectorState(id) {
  291. return devtools.ctx.api.sendInspectorState(id);
  292. },
  293. inspectComponentInspector() {
  294. return devtools.ctx.api.inspectComponentInspector();
  295. },
  296. cancelInspectComponentInspector() {
  297. return devtools.ctx.api.cancelInspectComponentInspector();
  298. },
  299. getComponentRenderCode(id) {
  300. return devtools.ctx.api.getComponentRenderCode(id);
  301. },
  302. scrollToComponent(id) {
  303. return devtools.ctx.api.scrollToComponent(id);
  304. },
  305. inspectDOM(id) {
  306. return devtools.ctx.api.inspectDOM(id);
  307. },
  308. getInspectorNodeActions(id) {
  309. return getInspectorNodeActions(id);
  310. },
  311. getInspectorActions(id) {
  312. return getInspectorActions(id);
  313. },
  314. updateTimelineLayersState(state) {
  315. return updateTimelineLayersState(state);
  316. },
  317. callInspectorNodeAction(inspectorId, actionIndex, nodeId) {
  318. var _a;
  319. const nodeActions = getInspectorNodeActions(inspectorId);
  320. if (nodeActions == null ? void 0 : nodeActions.length) {
  321. const item = nodeActions[actionIndex];
  322. (_a = item.action) == null ? void 0 : _a.call(item, nodeId);
  323. }
  324. },
  325. callInspectorAction(inspectorId, actionIndex) {
  326. var _a;
  327. const actions = getInspectorActions(inspectorId);
  328. if (actions == null ? void 0 : actions.length) {
  329. const item = actions[actionIndex];
  330. (_a = item.action) == null ? void 0 : _a.call(item);
  331. }
  332. },
  333. openInEditor(options) {
  334. return devtools.ctx.api.openInEditor(options);
  335. },
  336. async checkVueInspectorDetected() {
  337. return !!await devtools.ctx.api.getVueInspector();
  338. },
  339. async enableVueInspector() {
  340. var _a, _b, _c;
  341. const inspector = await ((_c = (_b = (_a = devtools) == null ? void 0 : _a.api) == null ? void 0 : _b.getVueInspector) == null ? void 0 : _c.call(_b));
  342. if (inspector)
  343. await inspector.enable();
  344. },
  345. async toggleApp(id, options) {
  346. return devtools.ctx.api.toggleApp(id, options);
  347. },
  348. updatePluginSettings(pluginId, key, value) {
  349. return devtools.ctx.api.updatePluginSettings(pluginId, key, value);
  350. },
  351. getPluginSettings(pluginId) {
  352. return devtools.ctx.api.getPluginSettings(pluginId);
  353. },
  354. getRouterInfo() {
  355. return devtoolsRouterInfo;
  356. },
  357. navigate(path) {
  358. var _a;
  359. return (_a = devtoolsRouter.value) == null ? void 0 : _a.push(path).catch(() => ({}));
  360. },
  361. getMatchedRoutes(path) {
  362. var _a, _b, _c;
  363. const c = console.warn;
  364. console.warn = () => {
  365. };
  366. const matched = (_c = (_b = (_a = devtoolsRouter.value) == null ? void 0 : _a.resolve) == null ? void 0 : _b.call(_a, {
  367. path: path || "/"
  368. }).matched) != null ? _c : [];
  369. console.warn = c;
  370. return matched;
  371. },
  372. toggleClientConnected(state) {
  373. toggleClientConnected(state);
  374. },
  375. getCustomInspector() {
  376. return getActiveInspectors();
  377. },
  378. getInspectorInfo(id) {
  379. return getInspectorInfo(id);
  380. },
  381. highlighComponent(uid) {
  382. return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid });
  383. },
  384. unhighlight() {
  385. return devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT);
  386. },
  387. updateDevToolsClientDetected(params) {
  388. updateDevToolsClientDetected(params);
  389. },
  390. // listen to devtools server events
  391. initDevToolsServerListener() {
  392. const rpcServer2 = getRpcServer();
  393. const broadcast = rpcServer2.broadcast;
  394. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT, (payload) => {
  395. broadcast.emit("inspector-tree-updated" /* INSPECTOR_TREE_UPDATED */, stringify(payload));
  396. });
  397. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT, (payload) => {
  398. broadcast.emit("inspector-state-updated" /* INSPECTOR_STATE_UPDATED */, stringify(payload));
  399. });
  400. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, () => {
  401. broadcast.emit("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, getDevToolsState());
  402. });
  403. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.ROUTER_INFO_UPDATED, ({ state }) => {
  404. broadcast.emit("router-info-updated" /* ROUTER_INFO_UPDATED */, state);
  405. });
  406. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT, (payload) => {
  407. broadcast.emit("timeline-event-updated" /* TIMELINE_EVENT_UPDATED */, stringify(payload));
  408. });
  409. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, (payload) => {
  410. broadcast.emit("inspector-updated" /* INSPECTOR_UPDATED */, payload);
  411. });
  412. devtools.ctx.hooks.hook(DevToolsMessagingHookKeys.SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT, () => {
  413. broadcast.emit("active-app-updated" /* ACTIVE_APP_UNMOUNTED */);
  414. });
  415. }
  416. };
  417. var rpc = new Proxy({
  418. value: {},
  419. functions: {}
  420. }, {
  421. get(target2, property) {
  422. const _rpc = getRpcClient();
  423. if (property === "value") {
  424. return _rpc;
  425. } else if (property === "functions") {
  426. return _rpc.$functions;
  427. }
  428. }
  429. });
  430. var rpcServer = new Proxy({
  431. value: {},
  432. functions: {}
  433. }, {
  434. get(target2, property) {
  435. const _rpc = getRpcServer();
  436. if (property === "value") {
  437. return _rpc;
  438. } else if (property === "functions") {
  439. return _rpc.functions;
  440. }
  441. }
  442. });
  443. function onRpcConnected(callback) {
  444. let timer = null;
  445. let retryCount = 0;
  446. function heartbeat() {
  447. var _a, _b;
  448. (_b = (_a = rpc.value) == null ? void 0 : _a.heartbeat) == null ? void 0 : _b.call(_a).then(() => {
  449. callback();
  450. clearTimeout(timer);
  451. }).catch(() => {
  452. });
  453. }
  454. timer = setInterval(() => {
  455. if (retryCount >= 30) {
  456. clearTimeout(timer);
  457. }
  458. retryCount++;
  459. heartbeat();
  460. }, retryCount * 200 + 200);
  461. heartbeat();
  462. }
  463. function onRpcSeverReady(callback) {
  464. let timer = null;
  465. const timeout = 120;
  466. function heartbeat() {
  467. if (rpcServer.value.clients.length > 0) {
  468. callback();
  469. clearTimeout(timer);
  470. }
  471. }
  472. timer = setInterval(() => {
  473. heartbeat();
  474. }, timeout);
  475. }
  476. // src/rpc/vite.ts
  477. import { createRpcClient, createRpcServer, getViteRpcClient } from "@vue/devtools-kit";
  478. var hooks2 = createHooks();
  479. var viteRpcFunctions = {
  480. on: (event, handler) => {
  481. hooks2.hook(event, handler);
  482. },
  483. off: (event, handler) => {
  484. hooks2.removeHook(event, handler);
  485. },
  486. once: (event, handler) => {
  487. hooks2.hookOnce(event, handler);
  488. },
  489. emit: (event, ...args) => {
  490. hooks2.callHook(event, ...args);
  491. },
  492. heartbeat: () => {
  493. return true;
  494. }
  495. };
  496. var viteRpc = new Proxy({
  497. value: {},
  498. functions: {}
  499. }, {
  500. get(target2, property) {
  501. const _rpc = getViteRpcClient();
  502. if (property === "value") {
  503. return _rpc;
  504. } else if (property === "functions") {
  505. return _rpc == null ? void 0 : _rpc.$functions;
  506. }
  507. }
  508. });
  509. function onViteRpcConnected(callback) {
  510. let timer = null;
  511. function heartbeat() {
  512. var _a, _b;
  513. (_b = (_a = viteRpc.value) == null ? void 0 : _a.heartbeat) == null ? void 0 : _b.call(_a).then(() => {
  514. clearTimeout(timer);
  515. callback();
  516. }).catch(() => ({}));
  517. timer = setTimeout(() => {
  518. heartbeat();
  519. }, 80);
  520. }
  521. heartbeat();
  522. }
  523. function createViteClientRpc() {
  524. createRpcClient(viteRpcFunctions, {
  525. preset: "vite"
  526. });
  527. }
  528. function createViteServerRpc(functions2) {
  529. createRpcServer(functions2, {
  530. preset: "vite"
  531. });
  532. }
  533. // src/vue-plugin/devtools-state.ts
  534. import { computed, inject, onUnmounted, ref, watch } from "vue";
  535. var VueDevToolsStateSymbol = Symbol.for("__VueDevToolsStateSymbol__");
  536. function VueDevToolsVuePlugin() {
  537. return {
  538. install(app) {
  539. const state = createDevToolsStateContext();
  540. state.getDevToolsState();
  541. app.provide(VueDevToolsStateSymbol, state);
  542. app.config.globalProperties.$getDevToolsState = state.getDevToolsState;
  543. app.config.globalProperties.$disconnectDevToolsClient = () => {
  544. state.clientConnected.value = false;
  545. state.connected.value = false;
  546. };
  547. }
  548. };
  549. }
  550. function createDevToolsStateContext() {
  551. const connected = ref(false);
  552. const clientConnected = ref(false);
  553. const vueVersion = ref("");
  554. const tabs = ref([]);
  555. const commands = ref([]);
  556. const vitePluginDetected = ref(false);
  557. const appRecords = ref([]);
  558. const activeAppRecordId = ref("");
  559. const timelineLayersState = ref({});
  560. function updateState(data) {
  561. connected.value = data.connected;
  562. clientConnected.value = data.clientConnected;
  563. vueVersion.value = data.vueVersion || "";
  564. tabs.value = data.tabs;
  565. commands.value = data.commands;
  566. vitePluginDetected.value = data.vitePluginDetected;
  567. appRecords.value = data.appRecords;
  568. activeAppRecordId.value = data.activeAppRecordId;
  569. timelineLayersState.value = data.timelineLayersState;
  570. }
  571. function getDevToolsState2() {
  572. onRpcConnected(() => {
  573. rpc.value.devtoolsState().then((data) => {
  574. updateState(data);
  575. });
  576. rpc.functions.off("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, updateState);
  577. rpc.functions.on("devtools-state-updated" /* DEVTOOLS_STATE_UPDATED */, updateState);
  578. });
  579. }
  580. return {
  581. getDevToolsState: getDevToolsState2,
  582. connected,
  583. clientConnected,
  584. vueVersion,
  585. tabs,
  586. commands,
  587. vitePluginDetected,
  588. appRecords,
  589. activeAppRecordId,
  590. timelineLayersState
  591. };
  592. }
  593. function useDevToolsState() {
  594. return inject(VueDevToolsStateSymbol);
  595. }
  596. var fns = [];
  597. function onDevToolsConnected(fn) {
  598. const { connected, clientConnected } = useDevToolsState();
  599. fns.push(fn);
  600. onUnmounted(() => {
  601. fns.splice(fns.indexOf(fn), 1);
  602. });
  603. const devtoolsReady = computed(() => clientConnected.value && connected.value);
  604. if (devtoolsReady.value) {
  605. fn();
  606. } else {
  607. const stop = watch(devtoolsReady, (v) => {
  608. if (v) {
  609. fn();
  610. stop();
  611. }
  612. });
  613. }
  614. return () => {
  615. fns.splice(fns.indexOf(fn), 1);
  616. };
  617. }
  618. function refreshCurrentPageData() {
  619. fns.forEach((fn) => fn());
  620. }
  621. export {
  622. DevToolsMessagingEvents,
  623. VueDevToolsVuePlugin,
  624. createDevToolsStateContext,
  625. createViteClientRpc,
  626. createViteServerRpc,
  627. functions,
  628. getDevToolsClientUrl,
  629. onDevToolsConnected,
  630. onRpcConnected,
  631. onRpcSeverReady,
  632. onViteRpcConnected,
  633. refreshCurrentPageData,
  634. rpc,
  635. rpcServer,
  636. setDevToolsClientUrl,
  637. useDevToolsState,
  638. viteRpc,
  639. viteRpcFunctions
  640. };