@vue/devtools-core
Advanced tools
Comparing version 7.0.16 to 7.0.17
import * as mitt from 'mitt'; | ||
import { EventType, Handler } from 'mitt'; | ||
import { DevToolsType, AppRecord, CustomTab, CustomCommand } from '@vue/devtools-kit'; | ||
import { Plugin, Ref } from 'vue'; | ||
import * as _vue_devtools_kit from '@vue/devtools-kit'; | ||
import { DevToolsType, AppRecord, CustomTab, CustomCommand, DevToolsState, ComponentTreeNode, InspectorState, RouterInfo, TimelineEvent } from '@vue/devtools-kit'; | ||
import { ViteDevServer } from 'vite'; | ||
@@ -29,4 +30,4 @@ | ||
declare function defineDevToolsAction<T>(name: string, action: (devtools: DevToolsType, ...args: any[]) => T | Promise<T>): (...args: any[]) => Promise<T>; | ||
declare function defineDevToolsListener<T>(fn: (devtools: DevToolsType, callback: Function) => void, options?: { | ||
declare function defineDevToolsAction<T>(name: string, action: (devtools: DevToolsType, ...args: any[]) => T | Promise<T>): (...args: any[]) => Promise<T | undefined>; | ||
declare function defineDevToolsListener<T>(name: string, fn: (devtools: DevToolsType, callback: Function) => void, options?: { | ||
parser?: 'json' | 'devtools'; | ||
@@ -85,2 +86,96 @@ }): (listener: (payload: T) => void) => () => void; | ||
export { Bridge, type BridgeAdapterOptions, type BridgeInstanceType, type DevToolsPluginOptions, type DevtoolsBridgeAppRecord, HandShakeClient, HandShakeEvents, HandShakeServer, callViteClientListener, callViteServerAction, createDevToolsVuePlugin, defineDevToolsAction, defineDevToolsListener, defineViteClientListener, defineViteServerAction, getDevToolsClientUrl, initViteClientHotContext, initViteServerContext, prepareInjection, setDevToolsClientUrl, setupAppBridge, setupDevToolsBridge, useDevToolsBridge, useDevToolsState }; | ||
type AssetType = 'image' | 'font' | 'video' | 'audio' | 'text' | 'json' | 'other'; | ||
interface AssetInfo { | ||
path: string; | ||
type: AssetType; | ||
publicPath: string; | ||
filePath: string; | ||
size: number; | ||
mtime: number; | ||
} | ||
interface ImageMeta { | ||
width: number; | ||
height: number; | ||
orientation?: number; | ||
type?: string; | ||
mimeType?: string; | ||
} | ||
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; | ||
} | ||
declare const checkVueInspectorDetected: (...args: any[]) => Promise<boolean | undefined>; | ||
declare const enableVueInspector: (...args: any[]) => Promise<void | undefined>; | ||
declare const toggleApp: (...args: any[]) => Promise<void | undefined>; | ||
declare const editInspectorState: (...args: any[]) => Promise<void | undefined>; | ||
declare const openInEditor: (...args: any[]) => Promise<void | undefined>; | ||
declare const getInspectorTree: (...args: any[]) => Promise<string | undefined>; | ||
declare const getComponentBoundingRect: (...args: any[]) => Promise<string | undefined>; | ||
declare const inspectComponentInspector: (...args: any[]) => Promise<string | undefined>; | ||
declare const toggleComponentInspector: (...args: any[]) => Promise<void | undefined>; | ||
declare const scrollToComponent: (...args: any[]) => Promise<void | undefined>; | ||
declare const getInspectorState: (...args: any[]) => Promise<string | undefined>; | ||
declare const updateInspectorTreeId: (...args: any[]) => Promise<void | undefined>; | ||
declare const unhighlightElement: (...args: any[]) => Promise<void | undefined>; | ||
declare const getRouterInfo: (...args: any[]) => Promise<string | undefined>; | ||
declare const navigateAction: (...args: any[]) => Promise<void | undefined>; | ||
declare const getMatchedRoutes: (...args: any[]) => Promise<string | undefined>; | ||
declare const getTimelineLayer: (...args: any[]) => Promise<_vue_devtools_kit.TimelineLayerItem[] | undefined>; | ||
declare const getDevToolsState: (...args: any[]) => Promise<{ | ||
connected: boolean; | ||
clientConnected: boolean; | ||
vueVersion: string; | ||
tabs: _vue_devtools_kit.CustomTab[]; | ||
commands: _vue_devtools_kit.CustomCommand[]; | ||
vitePluginDetected: boolean; | ||
appRecords: { | ||
id: string | number; | ||
name: string; | ||
version: string | undefined; | ||
routerId: string | undefined; | ||
moduleDetectives: { | ||
vueRouter: boolean; | ||
pinia: boolean; | ||
vueI18n: boolean; | ||
} | undefined; | ||
}[]; | ||
activeAppRecordId: string | null; | ||
} | undefined>; | ||
declare const onDevToolsStateUpdated: (listener: (payload: DevToolsState & { | ||
vueVersion: string; | ||
}) => void) => () => void; | ||
declare const onCustomTabsUpdated: (listener: (payload: CustomTab[]) => void) => () => void; | ||
declare const onCustomCommandsUpdated: (listener: (payload: CustomCommand[]) => void) => () => void; | ||
declare const onInspectorTreeUpdated: (listener: (payload: { | ||
inspectorId: string; | ||
data: ComponentTreeNode[]; | ||
}) => void) => () => void; | ||
declare const onInspectorStateUpdated: (listener: (payload: { | ||
inspectorId: string; | ||
state?: InspectorState[] | undefined; | ||
getters?: InspectorState[] | undefined; | ||
}) => void) => () => void; | ||
declare const onRouterInfoUpdated: (listener: (payload: RouterInfo) => void) => () => void; | ||
declare const onAddTimelineEvent: (listener: (payload: TimelineEvent) => void) => () => void; | ||
export { type AssetEntry, type AssetInfo, type AssetType, Bridge, type BridgeAdapterOptions, type BridgeInstanceType, type CodeSnippet, type DevToolsPluginOptions, type DevtoolsBridgeAppRecord, HandShakeClient, HandShakeEvents, HandShakeServer, type ImageMeta, type ModuleInfo, callViteClientListener, callViteServerAction, checkVueInspectorDetected, createDevToolsVuePlugin, defineDevToolsAction, defineDevToolsListener, defineViteClientListener, defineViteServerAction, editInspectorState, enableVueInspector, getComponentBoundingRect, getDevToolsClientUrl, getDevToolsState, getInspectorState, getInspectorTree, getMatchedRoutes, getRouterInfo, getTimelineLayer, initViteClientHotContext, initViteServerContext, inspectComponentInspector, navigateAction, onAddTimelineEvent, onCustomCommandsUpdated, onCustomTabsUpdated, onDevToolsStateUpdated, onInspectorStateUpdated, onInspectorTreeUpdated, onRouterInfoUpdated, openInEditor, prepareInjection, scrollToComponent, setDevToolsClientUrl, setupAppBridge, setupDevToolsBridge, toggleApp, toggleComponentInspector, unhighlightElement, updateInspectorTreeId, useDevToolsBridge, useDevToolsState }; |
@@ -0,8 +1,145 @@ | ||
var __defProp = Object.defineProperty; | ||
var __export = (target4, all) => { | ||
for (var name in all) | ||
__defProp(target4, name, { get: all[name], enumerable: true }); | ||
}; | ||
// src/vue-plugin.ts | ||
import { inject, ref } from "vue"; | ||
// src/bridge/api.ts | ||
import { parse } from "@vue/devtools-kit"; | ||
import { nanoid } from "nanoid"; | ||
// src/bridge-events/devtools-listeners.ts | ||
var devtools_listeners_exports = {}; | ||
__export(devtools_listeners_exports, { | ||
onAddTimelineEvent: () => onAddTimelineEvent, | ||
onCustomCommandsUpdated: () => onCustomCommandsUpdated, | ||
onCustomTabsUpdated: () => onCustomTabsUpdated, | ||
onDevToolsStateUpdated: () => onDevToolsStateUpdated, | ||
onInspectorStateUpdated: () => onInspectorStateUpdated, | ||
onInspectorTreeUpdated: () => onInspectorTreeUpdated, | ||
onRouterInfoUpdated: () => onRouterInfoUpdated | ||
}); | ||
// src/bridge/app.ts | ||
import { devtools, stringify as stringify2 } from "@vue/devtools-kit"; | ||
// src/bridge-events/devtools-actions.ts | ||
var devtools_actions_exports = {}; | ||
__export(devtools_actions_exports, { | ||
checkVueInspectorDetected: () => checkVueInspectorDetected, | ||
editInspectorState: () => editInspectorState, | ||
enableVueInspector: () => enableVueInspector, | ||
getComponentBoundingRect: () => getComponentBoundingRect, | ||
getDevToolsState: () => getDevToolsState, | ||
getInspectorState: () => getInspectorState, | ||
getInspectorTree: () => getInspectorTree, | ||
getMatchedRoutes: () => getMatchedRoutes, | ||
getRouterInfo: () => getRouterInfo, | ||
getTimelineLayer: () => getTimelineLayer, | ||
inspectComponentInspector: () => inspectComponentInspector, | ||
navigateAction: () => navigateAction, | ||
openInEditor: () => openInEditor, | ||
scrollToComponent: () => scrollToComponent, | ||
toggleApp: () => toggleApp, | ||
toggleComponentInspector: () => toggleComponentInspector, | ||
unhighlightElement: () => unhighlightElement, | ||
updateInspectorTreeId: () => updateInspectorTreeId | ||
}); | ||
import { stringify } from "@vue/devtools-kit"; | ||
var checkVueInspectorDetected = defineDevToolsAction("devtools:check-vue-inspector-detected", async (devtools4) => { | ||
var _a, _b; | ||
return !!await ((_b = (_a = devtools4 == null ? void 0 : devtools4.api) == null ? void 0 : _a.getVueInspector) == null ? void 0 : _b.call(_a)); | ||
}); | ||
var enableVueInspector = defineDevToolsAction("devtools:enable-vue-inspector", async (devtools4) => { | ||
var _a, _b; | ||
const inspector = await ((_b = (_a = devtools4 == null ? void 0 : devtools4.api) == null ? void 0 : _a.getVueInspector) == null ? void 0 : _b.call(_a)); | ||
if (inspector) | ||
await inspector.enable(); | ||
}); | ||
var toggleApp = defineDevToolsAction("devtools:toggle-app", async (devtools4, id) => { | ||
await devtools4.api.toggleApp(id); | ||
}); | ||
var editInspectorState = defineDevToolsAction("devtools:edit-inspector-state", (devtools4, payload) => { | ||
devtools4.api.editInspectorState(payload); | ||
}); | ||
var openInEditor = defineDevToolsAction("devtools:open-in-editor", (devtools4, file) => { | ||
devtools4.api.openInEditor({ file }); | ||
}); | ||
var getInspectorTree = defineDevToolsAction("devtools:inspector-tree", async (devtools4, payload) => { | ||
const res = await devtools4.api.getInspectorTree(payload); | ||
return stringify(res); | ||
}); | ||
var getComponentBoundingRect = defineDevToolsAction("devtools:get-component-bounding-rect", (devtools4, payload) => { | ||
return devtools4.api.getComponentBoundingRect(payload); | ||
}); | ||
var inspectComponentInspector = defineDevToolsAction("devtools:inspect-component-inspector", (devtools4) => { | ||
return devtools4.api.inspectComponentInspector(); | ||
}); | ||
var toggleComponentInspector = defineDevToolsAction("devtools:toggle-component-inspector", (devtools4, payload) => { | ||
return devtools4.api.toggleComponentInspector(payload); | ||
}); | ||
var scrollToComponent = defineDevToolsAction("devtools:scroll-to-component", (devtools4, payload) => { | ||
return devtools4.api.scrollToComponent(payload); | ||
}); | ||
var getInspectorState = defineDevToolsAction("devtools:inspector-state", async (devtools4, payload) => { | ||
const res = await devtools4.api.getInspectorState(payload); | ||
return stringify(res); | ||
}); | ||
var updateInspectorTreeId = defineDevToolsAction("devtools:update-inspector-tree-id", (devtools4, payload) => { | ||
devtools4.context.activeInspectorTreeId = payload; | ||
}); | ||
var unhighlightElement = defineDevToolsAction("devtools:unhighlight-element", (devtools4, payload) => { | ||
return devtools4.api.unhighlightElement(); | ||
}); | ||
var getRouterInfo = defineDevToolsAction("devtools:router-info", (devtools4) => { | ||
return JSON.stringify(devtools4.context.routerInfo); | ||
}); | ||
var navigateAction = defineDevToolsAction("devtools:router-navigate", (devtools4, payload) => { | ||
var _a; | ||
(_a = devtools4.context.router) == null ? void 0 : _a.push(payload).catch((e) => e); | ||
}); | ||
var getMatchedRoutes = defineDevToolsAction("devtools:matched-routes", (devtools4, path) => { | ||
var _a, _b; | ||
const c = console.warn; | ||
console.warn = () => { | ||
}; | ||
const matched = (_b = (_a = devtools4.context.router) == null ? void 0 : _a.resolve({ | ||
path: path || "/" | ||
}).matched) != null ? _b : []; | ||
console.warn = c; | ||
return JSON.stringify(matched); | ||
}); | ||
var getTimelineLayer = defineDevToolsAction("devtools:get-timeline-layer", (devtools4) => { | ||
return devtools4.context.timelineLayer; | ||
}); | ||
var getDevToolsState = defineDevToolsAction("devtools:get-state", (devtools4) => { | ||
var _a, _b; | ||
return { | ||
connected: devtools4.state.connected, | ||
clientConnected: devtools4.state.clientConnected, | ||
vueVersion: ((_b = (_a = devtools4.state) == null ? void 0 : _a.activeAppRecord) == null ? void 0 : _b.version) || "", | ||
tabs: devtools4.state.tabs, | ||
commands: devtools4.state.commands, | ||
vitePluginDetected: devtools4.state.vitePluginDetected, | ||
appRecords: devtools4.state.appRecords.map((item) => ({ | ||
id: item.id, | ||
name: item.name, | ||
version: item.version, | ||
routerId: item.routerId, | ||
moduleDetectives: item.moduleDetectives | ||
})), | ||
activeAppRecordId: devtools4.state.activeAppRecordId | ||
}; | ||
}); | ||
// src/bridge-events/index.ts | ||
function initDevToolsAEvent() { | ||
Object.values(devtools_actions_exports).forEach((action) => { | ||
action(); | ||
}); | ||
Object.values(devtools_listeners_exports).forEach((action) => { | ||
action(() => { | ||
}); | ||
}); | ||
} | ||
// src/bridge/shared.ts | ||
@@ -13,2 +150,7 @@ import { target } from "@vue/devtools-shared"; | ||
var BRIDGE_GLOBAL_VAR_KEY = "__vue_devtools_bridge__"; | ||
var BRIDGE_TARET_KEY = "__vue_devtools_bridge_target__"; | ||
var BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY = "devtools:bridge-action-events"; | ||
var BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY = "devtools:bridge-listener-events"; | ||
var devtoolsActionEvents = target[BRIDGE_DEVTOOLS_ACTION_EVENTS_KEY] = /* @__PURE__ */ new Map(); | ||
var devtoolsListenerEvents = target[BRIDGE_DEVTOOLS_LISTENER_EVENTS_KEY] = /* @__PURE__ */ new Map(); | ||
function getBridgeInstance() { | ||
@@ -20,41 +162,204 @@ return target[BRIDGE_GLOBAL_VAR_KEY]; | ||
} | ||
function setBridgeTarget(t) { | ||
target[BRIDGE_TARET_KEY] = t; | ||
} | ||
function getBridgeTarget() { | ||
return target[BRIDGE_TARET_KEY]; | ||
} | ||
// src/bridge/app.ts | ||
function setupAppBridge(bridge) { | ||
setBridgeTarget("app"); | ||
initDevToolsAEvent(); | ||
bridge.on(BRIDGE_DEVTOOLS_ACTION_KEY, async (payload) => { | ||
const action = devtoolsActionEvents.get(payload.name); | ||
if (action) { | ||
const result = await action(devtools, ...payload.args); | ||
bridge.emit(payload.key, result); | ||
} | ||
}); | ||
bridge.on(BRIDGE_DEVTOOLS_LISTENER_KEY, async (payload) => { | ||
const listener = devtoolsListenerEvents.get(payload.name); | ||
if (listener) { | ||
listener(devtools, (res) => { | ||
const stringifyFn = payload.parser === "devtools" ? stringify2 : JSON.stringify; | ||
bridge.emit(payload.key, stringifyFn(res)); | ||
}); | ||
} | ||
}); | ||
} | ||
// src/bridge/devtools.ts | ||
function setupDevToolsBridge(bridge) { | ||
setBridgeInstance(bridge); | ||
setBridgeTarget("devtools"); | ||
} | ||
// src/bridge/api.ts | ||
import { parse } from "@vue/devtools-kit"; | ||
import { nanoid } from "nanoid"; | ||
function defineDevToolsAction(name, action) { | ||
return async (...args) => { | ||
const bridge = getBridgeInstance(); | ||
const uniqueEventKey = nanoid(); | ||
return await new Promise((resolve) => { | ||
bridge.once(uniqueEventKey, (e) => { | ||
resolve(e); | ||
const target4 = getBridgeTarget(); | ||
if (target4 === "devtools") { | ||
const bridge = getBridgeInstance(); | ||
const uniqueEventKey = nanoid(); | ||
return await new Promise((resolve) => { | ||
bridge.once(uniqueEventKey, (e) => { | ||
resolve(e); | ||
}); | ||
bridge.emit(BRIDGE_DEVTOOLS_ACTION_KEY, { | ||
name, | ||
key: uniqueEventKey, | ||
args | ||
}); | ||
}); | ||
bridge.emit(BRIDGE_DEVTOOLS_ACTION_KEY, { | ||
} else { | ||
devtoolsActionEvents.set(name, action); | ||
} | ||
}; | ||
} | ||
function defineDevToolsListener(name, fn, options = {}) { | ||
return (listener) => { | ||
const target4 = getBridgeTarget(); | ||
if (target4 === "devtools") { | ||
const { | ||
parser = "devtools" | ||
} = options; | ||
const parserFn = parser === "devtools" ? parse : JSON.parse; | ||
const bridge = getBridgeInstance(); | ||
const uniqueEventKey = nanoid(); | ||
const off = bridge.on(uniqueEventKey, (e) => { | ||
listener(parserFn(e)); | ||
}); | ||
bridge.emit(BRIDGE_DEVTOOLS_LISTENER_KEY, { | ||
key: uniqueEventKey, | ||
name, | ||
key: uniqueEventKey, | ||
action: `${action}`, | ||
args | ||
parser | ||
}); | ||
}); | ||
return off; | ||
} else { | ||
devtoolsListenerEvents.set(name, fn); | ||
return () => { | ||
}; | ||
} | ||
}; | ||
} | ||
function defineDevToolsListener(fn, options = {}) { | ||
return (listener) => { | ||
const { | ||
parser = "devtools" | ||
} = options; | ||
const parserFn = parser === "devtools" ? parse : JSON.parse; | ||
const bridge = getBridgeInstance(); | ||
const uniqueEventKey = nanoid(); | ||
const off = bridge.on(uniqueEventKey, (e) => { | ||
listener(parserFn(e)); | ||
// src/bridge/core.ts | ||
import { NOOP } from "@vue/devtools-shared"; | ||
import mitt from "mitt"; | ||
var Bridge = class { | ||
constructor(adapter = { | ||
tracker: NOOP, | ||
trigger: NOOP | ||
}) { | ||
this.emitter = mitt(); | ||
this.adapter = adapter; | ||
this.adapter.tracker((message) => { | ||
this._emit(message.event, message.data); | ||
}); | ||
bridge.emit(BRIDGE_DEVTOOLS_LISTENER_KEY, { | ||
key: uniqueEventKey, | ||
action: `${fn}`, | ||
parser | ||
} | ||
_on(eventName, handler) { | ||
this.emitter.on(eventName, handler); | ||
} | ||
off(eventName, handler) { | ||
this.emitter.off(eventName, handler); | ||
} | ||
_emit(eventName, data) { | ||
this.emitter.emit(eventName, data); | ||
} | ||
on(eventName, handler) { | ||
this._on(eventName, handler); | ||
return () => this.off(eventName, handler); | ||
} | ||
once(eventName, handler) { | ||
const onceHandler = (...args) => { | ||
handler(...args); | ||
this.off(eventName, onceHandler); | ||
}; | ||
this._on(eventName, onceHandler); | ||
} | ||
emit(eventName, data) { | ||
this.adapter.trigger({ | ||
event: eventName, | ||
data | ||
}); | ||
return off; | ||
}; | ||
} | ||
this._emit(eventName, data); | ||
} | ||
removeAllListeners() { | ||
this.emitter.all.clear(); | ||
} | ||
}; | ||
// src/bridge-events/devtools-listeners.ts | ||
var onDevToolsStateUpdated = defineDevToolsListener("devtools:on-state-updated", (devtools4, callback) => { | ||
function setPayload(payload) { | ||
var _a; | ||
return { | ||
vueVersion: ((_a = payload == null ? void 0 : payload.activeAppRecord) == null ? void 0 : _a.version) || "", | ||
connected: payload.connected, | ||
clientConnected: payload.clientConnected, | ||
tabs: payload.tabs, | ||
commands: payload.commands, | ||
vitePluginDetected: payload.vitePluginDetected, | ||
appRecords: payload.appRecords.map((item) => ({ | ||
id: item.id, | ||
name: item.name, | ||
version: item.version, | ||
routerId: item.routerId, | ||
moduleDetectives: item.moduleDetectives | ||
})), | ||
activeAppRecordId: payload.activeAppRecordId | ||
}; | ||
} | ||
function subscribe() { | ||
devtools4.api.on.devtoolsStateUpdated((payload) => { | ||
callback(setPayload(payload)); | ||
}); | ||
} | ||
if (devtools4 == null ? void 0 : devtools4.api) { | ||
subscribe(); | ||
} else { | ||
const timer = setInterval(() => { | ||
if (devtools4.state.connected) { | ||
const payload = devtools4.state; | ||
callback(setPayload(payload)); | ||
subscribe(); | ||
clearInterval(timer); | ||
} | ||
}, 10); | ||
} | ||
}); | ||
var onCustomTabsUpdated = defineDevToolsListener("devtools:on-custom-tabs-updated", (devtools4, callback) => { | ||
devtools4.api.on.customTabsUpdated((payload) => { | ||
callback(payload); | ||
}); | ||
}); | ||
var onCustomCommandsUpdated = defineDevToolsListener("devtools:on-custom-commands-updated", (devtools4, callback) => { | ||
devtools4.api.on.customCommandsUpdated((payload) => { | ||
callback(payload); | ||
}); | ||
}); | ||
var onInspectorTreeUpdated = defineDevToolsListener("devtools:on-inspector-tree-updated", (devtools4, callback) => { | ||
devtools4.api.on.sendInspectorTree((payload) => { | ||
callback(payload); | ||
}); | ||
}); | ||
var onInspectorStateUpdated = defineDevToolsListener("devtools:on-inspector-state-updated", (devtools4, callback) => { | ||
devtools4.api.on.sendInspectorState((payload) => { | ||
callback(payload); | ||
}); | ||
}); | ||
var onRouterInfoUpdated = defineDevToolsListener("devtools:on-router-info-updated", (devtools4, callback) => { | ||
devtools4.api.on.routerInfoUpdated((payload) => { | ||
callback(payload); | ||
}); | ||
}, { parser: "json" }); | ||
var onAddTimelineEvent = defineDevToolsListener("devtools:on-add-timeline-event", (devtools4, callback) => { | ||
devtools4.api.on.addTimelineEvent((payload) => { | ||
callback(payload); | ||
}); | ||
}); | ||
// src/vue-plugin.ts | ||
@@ -72,60 +377,4 @@ function initDevToolsState() { | ||
function init() { | ||
const getDevToolsState = defineDevToolsAction("devtools:get-state", (devtools4) => { | ||
var _a, _b; | ||
return { | ||
connected: devtools4.state.connected, | ||
clientConnected: devtools4.state.clientConnected, | ||
vueVersion: ((_b = (_a = devtools4.state) == null ? void 0 : _a.activeAppRecord) == null ? void 0 : _b.version) || "", | ||
tabs: devtools4.state.tabs, | ||
commands: devtools4.state.commands, | ||
vitePluginDetected: devtools4.state.vitePluginDetected, | ||
appRecords: devtools4.state.appRecords.map((item) => ({ | ||
id: item.id, | ||
name: item.name, | ||
version: item.version, | ||
routerId: item.routerId, | ||
moduleDetectives: item.moduleDetectives | ||
})), | ||
activeAppRecordId: devtools4.state.activeAppRecordId | ||
}; | ||
}); | ||
const onDevToolsStateUpdated = defineDevToolsListener((devtools4, callback) => { | ||
function setPayload(payload) { | ||
var _a; | ||
return { | ||
vueVersion: ((_a = payload == null ? void 0 : payload.activeAppRecord) == null ? void 0 : _a.version) || "", | ||
connected: payload.connected, | ||
clientConnected: payload.clientConnected, | ||
tabs: payload.tabs, | ||
commands: payload.commands, | ||
vitePluginDetected: payload.vitePluginDetected, | ||
appRecords: payload.appRecords.map((item) => ({ | ||
id: item.id, | ||
name: item.name, | ||
version: item.version, | ||
routerId: item.routerId, | ||
moduleDetectives: item.moduleDetectives | ||
})), | ||
activeAppRecordId: payload.activeAppRecordId | ||
}; | ||
} | ||
function subscribe() { | ||
devtools4.api.on.devtoolsStateUpdated((payload) => { | ||
callback(setPayload(payload)); | ||
}); | ||
} | ||
if (devtools4 == null ? void 0 : devtools4.api) { | ||
subscribe(); | ||
} else { | ||
const timer = setInterval(() => { | ||
if (devtools4.state.connected) { | ||
const payload = devtools4.state; | ||
callback(setPayload(payload)); | ||
subscribe(); | ||
clearInterval(timer); | ||
} | ||
}, 10); | ||
} | ||
}); | ||
getDevToolsState().then((data) => { | ||
getDevToolsState().then((_data) => { | ||
const data = _data; | ||
connected.value = data.connected; | ||
@@ -208,71 +457,2 @@ clientConnected.value = data.clientConnected; | ||
// src/bridge/app.ts | ||
import { devtools, stringify } from "@vue/devtools-kit"; | ||
function setupAppBridge(bridge) { | ||
bridge.on(BRIDGE_DEVTOOLS_ACTION_KEY, async (payload) => { | ||
const action = new Function("devtools", "...args", `return (${payload.action})(devtools, ...args)`); | ||
const result = await action(devtools, ...payload.args); | ||
bridge.emit(payload.key, result); | ||
}); | ||
bridge.on(BRIDGE_DEVTOOLS_LISTENER_KEY, async (payload) => { | ||
const action = new Function(`return ${payload.action}`); | ||
const callback = action(); | ||
callback(devtools, (res) => { | ||
const stringifyFn = payload.parser === "devtools" ? stringify : JSON.stringify; | ||
bridge.emit(payload.key, stringifyFn(res)); | ||
}); | ||
}); | ||
} | ||
// src/bridge/devtools.ts | ||
function setupDevToolsBridge(bridge) { | ||
setBridgeInstance(bridge); | ||
} | ||
// src/bridge/core.ts | ||
import { NOOP } from "@vue/devtools-shared"; | ||
import mitt from "mitt"; | ||
var Bridge = class { | ||
constructor(adapter = { | ||
tracker: NOOP, | ||
trigger: NOOP | ||
}) { | ||
this.emitter = mitt(); | ||
this.adapter = adapter; | ||
this.adapter.tracker((message) => { | ||
this._emit(message.event, message.data); | ||
}); | ||
} | ||
_on(eventName, handler) { | ||
this.emitter.on(eventName, handler); | ||
} | ||
off(eventName, handler) { | ||
this.emitter.off(eventName, handler); | ||
} | ||
_emit(eventName, data) { | ||
this.emitter.emit(eventName, data); | ||
} | ||
on(eventName, handler) { | ||
this._on(eventName, handler); | ||
return () => this.off(eventName, handler); | ||
} | ||
once(eventName, handler) { | ||
const onceHandler = (...args) => { | ||
handler(...args); | ||
this.off(eventName, onceHandler); | ||
}; | ||
this._on(eventName, onceHandler); | ||
} | ||
emit(eventName, data) { | ||
this.adapter.trigger({ | ||
event: eventName, | ||
data | ||
}); | ||
this._emit(eventName, data); | ||
} | ||
removeAllListeners() { | ||
this.emitter.all.clear(); | ||
} | ||
}; | ||
// src/handshake.ts | ||
@@ -359,3 +539,3 @@ import { devtools as devtools2 } from "@vue/devtools-kit"; | ||
// ../../node_modules/.pnpm/vite-hot-client@0.2.3_vite@5.1.4/node_modules/vite-hot-client/dist/index.mjs | ||
// ../../node_modules/.pnpm/vite-hot-client@0.2.3_vite@5.1.5/node_modules/vite-hot-client/dist/index.mjs | ||
async function getViteClient(base = "/", warning = true) { | ||
@@ -468,2 +648,3 @@ var _a; | ||
callViteServerAction, | ||
checkVueInspectorDetected, | ||
createDevToolsVuePlugin, | ||
@@ -474,11 +655,35 @@ defineDevToolsAction, | ||
defineViteServerAction, | ||
editInspectorState, | ||
enableVueInspector, | ||
getComponentBoundingRect, | ||
getDevToolsClientUrl, | ||
getDevToolsState, | ||
getInspectorState, | ||
getInspectorTree, | ||
getMatchedRoutes, | ||
getRouterInfo, | ||
getTimelineLayer, | ||
initViteClientHotContext, | ||
initViteServerContext, | ||
inspectComponentInspector, | ||
navigateAction, | ||
onAddTimelineEvent, | ||
onCustomCommandsUpdated, | ||
onCustomTabsUpdated, | ||
onDevToolsStateUpdated, | ||
onInspectorStateUpdated, | ||
onInspectorTreeUpdated, | ||
onRouterInfoUpdated, | ||
openInEditor, | ||
prepareInjection, | ||
scrollToComponent, | ||
setDevToolsClientUrl, | ||
setupAppBridge, | ||
setupDevToolsBridge, | ||
toggleApp, | ||
toggleComponentInspector, | ||
unhighlightElement, | ||
updateInspectorTreeId, | ||
useDevToolsBridge, | ||
useDevToolsState | ||
}; |
{ | ||
"name": "@vue/devtools-core", | ||
"type": "module", | ||
"version": "7.0.16", | ||
"version": "7.0.17", | ||
"author": "webfansplz", | ||
@@ -24,4 +24,4 @@ "license": "MIT", | ||
"vite-hot-client": "^0.2.3", | ||
"@vue/devtools-kit": "^7.0.16", | ||
"@vue/devtools-shared": "^7.0.16" | ||
"@vue/devtools-kit": "^7.0.17", | ||
"@vue/devtools-shared": "^7.0.17" | ||
}, | ||
@@ -28,0 +28,0 @@ "devDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
66635
1567
2
Updated@vue/devtools-kit@^7.0.17
Updated@vue/devtools-shared@^7.0.17