@vue/devtools-kit
Version:
> Utility kit for DevTools.
1,419 lines • 174 kB
JavaScript
import { basename, camelize, classify, deepClone, isBrowser, isNuxtApp, isUrlString, kebabize, target } from "@vue/devtools-shared";
import { debounce } from "perfect-debounce";
import { createHooks } from "hookable";
import { createBirpc, createBirpcGroup } from "birpc";
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
//#region src/compat/index.ts
function onLegacyDevToolsPluginApiAvailable(cb) {
if (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
cb();
return;
}
Object.defineProperty(target, "__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__", {
set(value) {
if (value) cb();
},
configurable: true
});
}
//#endregion
//#region src/core/component/utils/index.ts
function getComponentTypeName(options) {
if (typeof options === "function") return options.displayName || options.name || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || "";
const name = options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name;
if (name === "index" && options.__file?.endsWith("index.vue")) return "";
return name;
}
function getComponentFileName(options) {
const file = options.__file;
if (file) return classify(basename(file, ".vue"));
}
function getComponentName(options) {
const name = options.displayName || options.name || options._componentTag;
if (name) return name;
return getComponentFileName(options);
}
function saveComponentGussedName(instance, name) {
instance.type.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ = name;
return name;
}
function getAppRecord(instance) {
if (instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__) return instance.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
else if (instance.root) return instance.appContext.app.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
}
async function getComponentId(options) {
const { app, uid, instance } = options;
try {
if (instance.__VUE_DEVTOOLS_NEXT_UID__) return instance.__VUE_DEVTOOLS_NEXT_UID__;
const appRecord = await getAppRecord(app);
if (!appRecord) return null;
const isRoot = appRecord.rootInstance === instance;
return `${appRecord.id}:${isRoot ? "root" : uid}`;
} catch (e) {}
}
function isFragment(instance) {
const subTreeType = instance.subTree?.type;
const appRecord = getAppRecord(instance);
if (appRecord) return appRecord?.types?.Fragment === subTreeType;
return false;
}
function isBeingDestroyed(instance) {
return instance._isBeingDestroyed || instance.isUnmounted;
}
/**
* Get the appropriate display name for an instance.
*
* @param {Vue} instance
* @return {string}
*/
function getInstanceName(instance) {
const name = getComponentTypeName(instance?.type || {});
if (name) return name;
if (instance?.root === instance) return "Root";
for (const key in instance.parent?.type?.components) if (instance.parent.type.components[key] === instance?.type) return saveComponentGussedName(instance, key);
for (const key in instance.appContext?.components) if (instance.appContext.components[key] === instance?.type) return saveComponentGussedName(instance, key);
const fileName = getComponentFileName(instance?.type || {});
if (fileName) return fileName;
return "Anonymous Component";
}
/**
* Returns a devtools unique id for instance.
* @param {Vue} instance
*/
function getUniqueComponentId(instance) {
return `${instance?.appContext?.app?.__VUE_DEVTOOLS_NEXT_APP_RECORD_ID__ ?? 0}:${instance === instance?.root ? "root" : instance.uid}`;
}
function getRenderKey(value) {
if (value == null) return "";
if (typeof value === "number") return value;
else if (typeof value === "string") return `'${value}'`;
else if (Array.isArray(value)) return "Array";
else return "Object";
}
function returnError(cb) {
try {
return cb();
} catch (e) {
return e;
}
}
function getComponentInstance(appRecord, instanceId) {
instanceId = instanceId || `${appRecord.id}:root`;
return appRecord.instanceMap.get(instanceId) || appRecord.instanceMap.get(":root");
}
function ensurePropertyExists(obj, key, skipObjCheck = false) {
return skipObjCheck ? key in obj : typeof obj === "object" && obj !== null ? key in obj : false;
}
//#endregion
//#region src/core/component/state/bounding-rect.ts
function createRect() {
const rect = {
top: 0,
bottom: 0,
left: 0,
right: 0,
get width() {
return rect.right - rect.left;
},
get height() {
return rect.bottom - rect.top;
}
};
return rect;
}
let range;
function getTextRect(node) {
if (!range) range = document.createRange();
range.selectNode(node);
return range.getBoundingClientRect();
}
function getFragmentRect(vnode) {
const rect = createRect();
if (!vnode.children) return rect;
for (let i = 0, l = vnode.children.length; i < l; i++) {
const childVnode = vnode.children[i];
let childRect;
if (childVnode.component) childRect = getComponentBoundingRect(childVnode.component);
else if (childVnode.el) {
const el = childVnode.el;
if (el.nodeType === 1 || el.getBoundingClientRect) childRect = el.getBoundingClientRect();
else if (el.nodeType === 3 && el.data.trim()) childRect = getTextRect(el);
}
if (childRect) mergeRects(rect, childRect);
}
return rect;
}
function mergeRects(a, b) {
if (!a.top || b.top < a.top) a.top = b.top;
if (!a.bottom || b.bottom > a.bottom) a.bottom = b.bottom;
if (!a.left || b.left < a.left) a.left = b.left;
if (!a.right || b.right > a.right) a.right = b.right;
return a;
}
const DEFAULT_RECT = {
top: 0,
left: 0,
right: 0,
bottom: 0,
width: 0,
height: 0
};
function getComponentBoundingRect(instance) {
const el = instance.subTree.el;
if (typeof window === "undefined") return DEFAULT_RECT;
if (isFragment(instance)) return getFragmentRect(instance.subTree);
else if (el?.nodeType === 1) return el?.getBoundingClientRect();
else if (instance.subTree.component) return getComponentBoundingRect(instance.subTree.component);
else return DEFAULT_RECT;
}
//#endregion
//#region src/core/component/tree/el.ts
function getRootElementsFromComponentInstance(instance) {
if (isFragment(instance)) return getFragmentRootElements(instance.subTree);
if (!instance.subTree) return [];
return [instance.subTree.el];
}
function getFragmentRootElements(vnode) {
if (!vnode.children) return [];
const list = [];
vnode.children.forEach((childVnode) => {
if (childVnode.component) list.push(...getRootElementsFromComponentInstance(childVnode.component));
else if (childVnode?.el) list.push(childVnode.el);
});
return list;
}
//#endregion
//#region src/core/component-highlighter/index.ts
const CONTAINER_ELEMENT_ID = "__vue-devtools-component-inspector__";
const CARD_ELEMENT_ID = "__vue-devtools-component-inspector__card__";
const COMPONENT_NAME_ELEMENT_ID = "__vue-devtools-component-inspector__name__";
const INDICATOR_ELEMENT_ID = "__vue-devtools-component-inspector__indicator__";
const containerStyles = {
display: "block",
zIndex: 2147483640,
position: "fixed",
backgroundColor: "#42b88325",
border: "1px solid #42b88350",
borderRadius: "5px",
transition: "all 0.1s ease-in",
pointerEvents: "none"
};
const cardStyles = {
fontFamily: "Arial, Helvetica, sans-serif",
padding: "5px 8px",
borderRadius: "4px",
textAlign: "left",
position: "absolute",
left: 0,
color: "#e9e9e9",
fontSize: "14px",
fontWeight: 600,
lineHeight: "24px",
backgroundColor: "#42b883",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
};
const indicatorStyles = {
display: "inline-block",
fontWeight: 400,
fontStyle: "normal",
fontSize: "12px",
opacity: .7
};
function getContainerElement() {
return document.getElementById(CONTAINER_ELEMENT_ID);
}
function getCardElement() {
return document.getElementById(CARD_ELEMENT_ID);
}
function getIndicatorElement() {
return document.getElementById(INDICATOR_ELEMENT_ID);
}
function getNameElement() {
return document.getElementById(COMPONENT_NAME_ELEMENT_ID);
}
function getStyles(bounds) {
return {
left: `${Math.round(bounds.left * 100) / 100}px`,
top: `${Math.round(bounds.top * 100) / 100}px`,
width: `${Math.round(bounds.width * 100) / 100}px`,
height: `${Math.round(bounds.height * 100) / 100}px`
};
}
function create(options) {
const containerEl = document.createElement("div");
containerEl.id = options.elementId ?? CONTAINER_ELEMENT_ID;
Object.assign(containerEl.style, {
...containerStyles,
...getStyles(options.bounds),
...options.style
});
const cardEl = document.createElement("span");
cardEl.id = CARD_ELEMENT_ID;
Object.assign(cardEl.style, {
...cardStyles,
top: options.bounds.top < 35 ? 0 : "-35px"
});
const nameEl = document.createElement("span");
nameEl.id = COMPONENT_NAME_ELEMENT_ID;
nameEl.innerHTML = `<${options.name}> `;
const indicatorEl = document.createElement("i");
indicatorEl.id = INDICATOR_ELEMENT_ID;
indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
Object.assign(indicatorEl.style, indicatorStyles);
cardEl.appendChild(nameEl);
cardEl.appendChild(indicatorEl);
containerEl.appendChild(cardEl);
document.body.appendChild(containerEl);
return containerEl;
}
function update(options) {
const containerEl = getContainerElement();
const cardEl = getCardElement();
const nameEl = getNameElement();
const indicatorEl = getIndicatorElement();
if (containerEl) {
Object.assign(containerEl.style, {
...containerStyles,
...getStyles(options.bounds)
});
Object.assign(cardEl.style, { top: options.bounds.top < 35 ? 0 : "-35px" });
nameEl.innerHTML = `<${options.name}> `;
indicatorEl.innerHTML = `${Math.round(options.bounds.width * 100) / 100} x ${Math.round(options.bounds.height * 100) / 100}`;
}
}
function highlight(instance) {
const bounds = getComponentBoundingRect(instance);
if (!bounds.width && !bounds.height) return;
const name = getInstanceName(instance);
getContainerElement() ? update({
bounds,
name
}) : create({
bounds,
name
});
}
function unhighlight() {
const el = getContainerElement();
if (el) el.style.display = "none";
}
let inspectInstance = null;
function inspectFn(e) {
const target = e.target;
if (target) {
const instance = target.__vueParentComponent;
if (instance) {
inspectInstance = instance;
if (instance.vnode.el) {
const bounds = getComponentBoundingRect(instance);
const name = getInstanceName(instance);
getContainerElement() ? update({
bounds,
name
}) : create({
bounds,
name
});
}
}
}
}
function selectComponentFn(e, cb) {
e.preventDefault();
e.stopPropagation();
if (inspectInstance) cb(getUniqueComponentId(inspectInstance));
}
let inspectComponentHighLighterSelectFn = null;
function cancelInspectComponentHighLighter() {
unhighlight();
window.removeEventListener("mouseover", inspectFn);
window.removeEventListener("click", inspectComponentHighLighterSelectFn, true);
inspectComponentHighLighterSelectFn = null;
}
function inspectComponentHighLighter() {
window.addEventListener("mouseover", inspectFn);
return new Promise((resolve) => {
function onSelect(e) {
e.preventDefault();
e.stopPropagation();
selectComponentFn(e, (id) => {
window.removeEventListener("click", onSelect, true);
inspectComponentHighLighterSelectFn = null;
window.removeEventListener("mouseover", inspectFn);
const el = getContainerElement();
if (el) el.style.display = "none";
resolve(JSON.stringify({ id }));
});
}
inspectComponentHighLighterSelectFn = onSelect;
window.addEventListener("click", onSelect, true);
});
}
function scrollToComponent(options) {
const instance = getComponentInstance(activeAppRecord.value, options.id);
if (instance) {
const [el] = getRootElementsFromComponentInstance(instance);
if (typeof el.scrollIntoView === "function") el.scrollIntoView({ behavior: "smooth" });
else {
const bounds = getComponentBoundingRect(instance);
const scrollTarget = document.createElement("div");
const styles = {
...getStyles(bounds),
position: "absolute"
};
Object.assign(scrollTarget.style, styles);
document.body.appendChild(scrollTarget);
scrollTarget.scrollIntoView({ behavior: "smooth" });
setTimeout(() => {
document.body.removeChild(scrollTarget);
}, 2e3);
}
setTimeout(() => {
const bounds = getComponentBoundingRect(instance);
if (bounds.width || bounds.height) {
const name = getInstanceName(instance);
const el = getContainerElement();
el ? update({
...options,
name,
bounds
}) : create({
...options,
name,
bounds
});
setTimeout(() => {
if (el) el.style.display = "none";
}, 1500);
}
}, 1200);
}
}
//#endregion
//#region src/core/component-inspector/index.ts
target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ ??= true;
function toggleComponentInspectorEnabled(enabled) {
target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
}
function waitForInspectorInit(cb) {
let total = 0;
const timer = setInterval(() => {
if (target.__VUE_INSPECTOR__) {
clearInterval(timer);
total += 30;
cb();
}
if (total >= 5e3) clearInterval(timer);
}, 30);
}
function setupInspector() {
const inspector = target.__VUE_INSPECTOR__;
const _openInEditor = inspector.openInEditor;
inspector.openInEditor = async (...params) => {
inspector.disable();
_openInEditor(...params);
};
}
function getComponentInspector() {
return new Promise((resolve) => {
function setup() {
setupInspector();
resolve(target.__VUE_INSPECTOR__);
}
if (!target.__VUE_INSPECTOR__) waitForInspectorInit(() => {
setup();
});
else setup();
});
}
//#endregion
//#region src/shared/stub-vue.ts
/**
* To prevent include a **HUGE** vue package in the final bundle of chrome ext / electron
* we stub the necessary vue module.
* This implementation is based on the 1c3327a0fa5983aa9078e3f7bb2330f572435425 commit
*/
/**
* @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/constants.ts#L17-L23)
*/
let ReactiveFlags = /* @__PURE__ */ function(ReactiveFlags) {
ReactiveFlags["SKIP"] = "__v_skip";
ReactiveFlags["IS_REACTIVE"] = "__v_isReactive";
ReactiveFlags["IS_READONLY"] = "__v_isReadonly";
ReactiveFlags["IS_SHALLOW"] = "__v_isShallow";
ReactiveFlags["RAW"] = "__v_raw";
return ReactiveFlags;
}({});
/**
* @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/reactive.ts#L330-L332)
*/
function isReadonly(value) {
return !!(value && value[ReactiveFlags.IS_READONLY]);
}
/**
* @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/reactive.ts#L312-L317)
*/
function isReactive$1(value) {
if (isReadonly(value)) return isReactive$1(value[ReactiveFlags.RAW]);
return !!(value && value[ReactiveFlags.IS_REACTIVE]);
}
function isRef$1(r) {
return !!(r && r.__v_isRef === true);
}
/**
* @from [@vue/reactivity](https://github.com/vuejs/core/blob/1c3327a0fa5983aa9078e3f7bb2330f572435425/packages/reactivity/src/reactive.ts#L372-L375)
*/
function toRaw$1(observed) {
const raw = observed && observed[ReactiveFlags.RAW];
return raw ? toRaw$1(raw) : observed;
}
//#endregion
//#region src/core/component/state/editor.ts
var StateEditor = class {
constructor() {
this.refEditor = new RefStateEditor();
}
set(object, path, value, cb) {
const sections = Array.isArray(path) ? path : path.split(".");
while (sections.length > 1) {
const section = sections.shift();
if (object instanceof Map) object = object.get(section);
else if (object instanceof Set) object = Array.from(object.values())[section];
else object = object[section];
if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
}
const field = sections[0];
const item = this.refEditor.get(object)[field];
if (cb) cb(object, field, value);
else if (this.refEditor.isRef(item)) this.refEditor.set(item, value);
else object[field] = value;
}
get(object, path) {
const sections = Array.isArray(path) ? path : path.split(".");
for (let i = 0; i < sections.length; i++) {
if (object instanceof Map) object = object.get(sections[i]);
else object = object[sections[i]];
if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
if (!object) return void 0;
}
return object;
}
has(object, path, parent = false) {
if (typeof object === "undefined") return false;
const sections = Array.isArray(path) ? path.slice() : path.split(".");
const size = !parent ? 1 : 2;
while (object && sections.length > size) {
const section = sections.shift();
object = object[section];
if (this.refEditor.isRef(object)) object = this.refEditor.get(object);
}
return object != null && Object.prototype.hasOwnProperty.call(object, sections[0]);
}
createDefaultSetCallback(state) {
return (object, field, value) => {
if (state.remove || state.newKey) if (Array.isArray(object)) object.splice(field, 1);
else if (toRaw$1(object) instanceof Map) object.delete(field);
else if (toRaw$1(object) instanceof Set) object.delete(Array.from(object.values())[field]);
else Reflect.deleteProperty(object, field);
if (!state.remove) {
const target = object[state.newKey || field];
if (this.refEditor.isRef(target)) this.refEditor.set(target, value);
else if (toRaw$1(object) instanceof Map) object.set(state.newKey || field, value);
else if (toRaw$1(object) instanceof Set) object.add(value);
else object[state.newKey || field] = value;
}
};
}
};
var RefStateEditor = class {
set(ref, value) {
if (isRef$1(ref)) ref.value = value;
else {
if (ref instanceof Set && Array.isArray(value)) {
ref.clear();
value.forEach((v) => ref.add(v));
return;
}
const currentKeys = Object.keys(value);
if (ref instanceof Map) {
const previousKeysSet = new Set(ref.keys());
currentKeys.forEach((key) => {
ref.set(key, Reflect.get(value, key));
previousKeysSet.delete(key);
});
previousKeysSet.forEach((key) => ref.delete(key));
return;
}
const previousKeysSet = new Set(Object.keys(ref));
currentKeys.forEach((key) => {
Reflect.set(ref, key, Reflect.get(value, key));
previousKeysSet.delete(key);
});
previousKeysSet.forEach((key) => Reflect.deleteProperty(ref, key));
}
}
get(ref) {
return isRef$1(ref) ? ref.value : ref;
}
isRef(ref) {
return isRef$1(ref) || isReactive$1(ref);
}
};
async function editComponentState(payload, stateEditor) {
const { path, nodeId, state, type } = payload;
const instance = getComponentInstance(activeAppRecord.value, nodeId);
if (!instance) return;
const targetPath = path.slice();
let target;
if (Object.keys(instance.props).includes(path[0])) target = instance.props;
else if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) target = instance.devtoolsRawSetupState;
else if (instance.data && Object.keys(instance.data).includes(path[0])) target = instance.data;
else target = instance.proxy;
if (target && targetPath) {
if (state.type === "object" && type === "reactive") {}
stateEditor.set(target, targetPath, state.value, stateEditor.createDefaultSetCallback(state));
}
}
const stateEditor = new StateEditor();
async function editState(payload) {
editComponentState(payload, stateEditor);
}
//#endregion
//#region src/core/timeline/storage.ts
const TIMELINE_LAYERS_STATE_STORAGE_ID = "__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS_STATE__";
function addTimelineLayersStateToStorage(state) {
if (!isBrowser || typeof localStorage === "undefined" || localStorage === null) return;
localStorage.setItem(TIMELINE_LAYERS_STATE_STORAGE_ID, JSON.stringify(state));
}
function getTimelineLayersStateFromStorage() {
if (typeof window === "undefined" || !isBrowser || typeof localStorage === "undefined" || localStorage === null) return {
recordingState: false,
mouseEventEnabled: false,
keyboardEventEnabled: false,
componentEventEnabled: false,
performanceEventEnabled: false,
selected: ""
};
const state = typeof localStorage.getItem !== "undefined" ? localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID) : null;
return state ? JSON.parse(state) : {
recordingState: false,
mouseEventEnabled: false,
keyboardEventEnabled: false,
componentEventEnabled: false,
performanceEventEnabled: false,
selected: ""
};
}
//#endregion
//#region src/ctx/timeline.ts
target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS ??= [];
const devtoolsTimelineLayers = new Proxy(target.__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS, { get(target, prop, receiver) {
return Reflect.get(target, prop, receiver);
} });
function addTimelineLayer(options, descriptor) {
devtoolsState.timelineLayersState[descriptor.id] = false;
devtoolsTimelineLayers.push({
...options,
descriptorId: descriptor.id,
appRecord: getAppRecord(descriptor.app)
});
}
function updateTimelineLayersState(state) {
const updatedState = {
...devtoolsState.timelineLayersState,
...state
};
addTimelineLayersStateToStorage(updatedState);
updateDevToolsState({ timelineLayersState: updatedState });
}
//#endregion
//#region src/ctx/inspector.ts
target.__VUE_DEVTOOLS_KIT_INSPECTOR__ ??= [];
const devtoolsInspector = new Proxy(target.__VUE_DEVTOOLS_KIT_INSPECTOR__, { get(target, prop, receiver) {
return Reflect.get(target, prop, receiver);
} });
const callInspectorUpdatedHook = debounce(() => {
devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.SEND_INSPECTOR_TO_CLIENT, getActiveInspectors());
});
function addInspector(inspector, descriptor) {
devtoolsInspector.push({
options: inspector,
descriptor,
treeFilterPlaceholder: inspector.treeFilterPlaceholder ?? "Search tree...",
stateFilterPlaceholder: inspector.stateFilterPlaceholder ?? "Search state...",
treeFilter: "",
selectedNodeId: "",
appRecord: getAppRecord(descriptor.app)
});
callInspectorUpdatedHook();
}
function getActiveInspectors() {
return devtoolsInspector.filter((inspector) => inspector.descriptor.app === activeAppRecord.value.app).filter((inspector) => inspector.descriptor.id !== "components").map((inspector) => {
const descriptor = inspector.descriptor;
const options = inspector.options;
return {
id: options.id,
label: options.label,
logo: descriptor.logo,
icon: `custom-ic-baseline-${options?.icon?.replace(/_/g, "-")}`,
packageName: descriptor.packageName,
homepage: descriptor.homepage,
pluginId: descriptor.id
};
});
}
function getInspectorInfo(id) {
const inspector = getInspector(id, activeAppRecord.value.app);
if (!inspector) return;
const descriptor = inspector.descriptor;
const options = inspector.options;
const timelineLayers = devtoolsTimelineLayers.filter((layer) => layer.descriptorId === descriptor.id).map((item) => ({
id: item.id,
label: item.label,
color: item.color
}));
return {
id: options.id,
label: options.label,
logo: descriptor.logo,
packageName: descriptor.packageName,
homepage: descriptor.homepage,
timelineLayers,
treeFilterPlaceholder: inspector.treeFilterPlaceholder,
stateFilterPlaceholder: inspector.stateFilterPlaceholder
};
}
function getInspector(id, app) {
return devtoolsInspector.find((inspector) => inspector.options.id === id && (app ? inspector.descriptor.app === app : true));
}
function getInspectorActions(id) {
return getInspector(id)?.options.actions;
}
function getInspectorNodeActions(id) {
return getInspector(id)?.options.nodeActions;
}
//#endregion
//#region src/ctx/hook.ts
let DevToolsV6PluginAPIHookKeys = /* @__PURE__ */ function(DevToolsV6PluginAPIHookKeys) {
DevToolsV6PluginAPIHookKeys["VISIT_COMPONENT_TREE"] = "visitComponentTree";
DevToolsV6PluginAPIHookKeys["INSPECT_COMPONENT"] = "inspectComponent";
DevToolsV6PluginAPIHookKeys["EDIT_COMPONENT_STATE"] = "editComponentState";
DevToolsV6PluginAPIHookKeys["GET_INSPECTOR_TREE"] = "getInspectorTree";
DevToolsV6PluginAPIHookKeys["GET_INSPECTOR_STATE"] = "getInspectorState";
DevToolsV6PluginAPIHookKeys["EDIT_INSPECTOR_STATE"] = "editInspectorState";
DevToolsV6PluginAPIHookKeys["INSPECT_TIMELINE_EVENT"] = "inspectTimelineEvent";
DevToolsV6PluginAPIHookKeys["TIMELINE_CLEARED"] = "timelineCleared";
DevToolsV6PluginAPIHookKeys["SET_PLUGIN_SETTINGS"] = "setPluginSettings";
return DevToolsV6PluginAPIHookKeys;
}({});
let DevToolsContextHookKeys = /* @__PURE__ */ function(DevToolsContextHookKeys) {
DevToolsContextHookKeys["ADD_INSPECTOR"] = "addInspector";
DevToolsContextHookKeys["SEND_INSPECTOR_TREE"] = "sendInspectorTree";
DevToolsContextHookKeys["SEND_INSPECTOR_STATE"] = "sendInspectorState";
DevToolsContextHookKeys["CUSTOM_INSPECTOR_SELECT_NODE"] = "customInspectorSelectNode";
DevToolsContextHookKeys["TIMELINE_LAYER_ADDED"] = "timelineLayerAdded";
DevToolsContextHookKeys["TIMELINE_EVENT_ADDED"] = "timelineEventAdded";
DevToolsContextHookKeys["GET_COMPONENT_INSTANCES"] = "getComponentInstances";
DevToolsContextHookKeys["GET_COMPONENT_BOUNDS"] = "getComponentBounds";
DevToolsContextHookKeys["GET_COMPONENT_NAME"] = "getComponentName";
DevToolsContextHookKeys["COMPONENT_HIGHLIGHT"] = "componentHighlight";
DevToolsContextHookKeys["COMPONENT_UNHIGHLIGHT"] = "componentUnhighlight";
return DevToolsContextHookKeys;
}({});
let DevToolsMessagingHookKeys = /* @__PURE__ */ function(DevToolsMessagingHookKeys) {
DevToolsMessagingHookKeys["SEND_INSPECTOR_TREE_TO_CLIENT"] = "sendInspectorTreeToClient";
DevToolsMessagingHookKeys["SEND_INSPECTOR_STATE_TO_CLIENT"] = "sendInspectorStateToClient";
DevToolsMessagingHookKeys["SEND_TIMELINE_EVENT_TO_CLIENT"] = "sendTimelineEventToClient";
DevToolsMessagingHookKeys["SEND_INSPECTOR_TO_CLIENT"] = "sendInspectorToClient";
DevToolsMessagingHookKeys["SEND_ACTIVE_APP_UNMOUNTED_TO_CLIENT"] = "sendActiveAppUpdatedToClient";
DevToolsMessagingHookKeys["DEVTOOLS_STATE_UPDATED"] = "devtoolsStateUpdated";
DevToolsMessagingHookKeys["DEVTOOLS_CONNECTED_UPDATED"] = "devtoolsConnectedUpdated";
DevToolsMessagingHookKeys["ROUTER_INFO_UPDATED"] = "routerInfoUpdated";
return DevToolsMessagingHookKeys;
}({});
function createDevToolsCtxHooks() {
const hooks = createHooks();
hooks.hook(DevToolsContextHookKeys.ADD_INSPECTOR, ({ inspector, plugin }) => {
addInspector(inspector, plugin.descriptor);
});
const debounceSendInspectorTree = debounce(async ({ inspectorId, plugin }) => {
if (!inspectorId || !plugin?.descriptor?.app || devtoolsState.highPerfModeEnabled) return;
const inspector = getInspector(inspectorId, plugin.descriptor.app);
const _payload = {
app: plugin.descriptor.app,
inspectorId,
filter: inspector?.treeFilter || "",
rootNodes: []
};
await new Promise((resolve) => {
hooks.callHookWith(async (callbacks) => {
await Promise.all(callbacks.map((cb) => cb(_payload)));
resolve();
}, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE);
});
hooks.callHookWith(async (callbacks) => {
await Promise.all(callbacks.map((cb) => cb({
inspectorId,
rootNodes: _payload.rootNodes
})));
}, DevToolsMessagingHookKeys.SEND_INSPECTOR_TREE_TO_CLIENT);
}, 120);
hooks.hook(DevToolsContextHookKeys.SEND_INSPECTOR_TREE, debounceSendInspectorTree);
const debounceSendInspectorState = debounce(async ({ inspectorId, plugin }) => {
if (!inspectorId || !plugin?.descriptor?.app || devtoolsState.highPerfModeEnabled) return;
const inspector = getInspector(inspectorId, plugin.descriptor.app);
const _payload = {
app: plugin.descriptor.app,
inspectorId,
nodeId: inspector?.selectedNodeId || "",
state: null
};
const ctx = { currentTab: `custom-inspector:${inspectorId}` };
if (_payload.nodeId) await new Promise((resolve) => {
hooks.callHookWith(async (callbacks) => {
await Promise.all(callbacks.map((cb) => cb(_payload, ctx)));
resolve();
}, DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE);
});
hooks.callHookWith(async (callbacks) => {
await Promise.all(callbacks.map((cb) => cb({
inspectorId,
nodeId: _payload.nodeId,
state: _payload.state
})));
}, DevToolsMessagingHookKeys.SEND_INSPECTOR_STATE_TO_CLIENT);
}, 120);
hooks.hook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, debounceSendInspectorState);
hooks.hook(DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE, ({ inspectorId, nodeId, plugin }) => {
const inspector = getInspector(inspectorId, plugin.descriptor.app);
if (!inspector) return;
inspector.selectedNodeId = nodeId;
});
hooks.hook(DevToolsContextHookKeys.TIMELINE_LAYER_ADDED, ({ options, plugin }) => {
addTimelineLayer(options, plugin.descriptor);
});
hooks.hook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, ({ options, plugin }) => {
if (devtoolsState.highPerfModeEnabled || !devtoolsState.timelineLayersState?.[plugin.descriptor.id] && ![
"performance",
"component-event",
"keyboard",
"mouse"
].includes(options.layerId)) return;
hooks.callHookWith(async (callbacks) => {
await Promise.all(callbacks.map((cb) => cb(options)));
}, DevToolsMessagingHookKeys.SEND_TIMELINE_EVENT_TO_CLIENT);
});
hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_INSTANCES, async ({ app }) => {
const appRecord = app.__VUE_DEVTOOLS_NEXT_APP_RECORD__;
if (!appRecord) return null;
const appId = appRecord.id.toString();
return [...appRecord.instanceMap].filter(([key]) => key.split(":")[0] === appId).map(([, instance]) => instance);
});
hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_BOUNDS, async ({ instance }) => {
return getComponentBoundingRect(instance);
});
hooks.hook(DevToolsContextHookKeys.GET_COMPONENT_NAME, ({ instance }) => {
return getInstanceName(instance);
});
hooks.hook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, ({ uid }) => {
const instance = activeAppRecord.value.instanceMap.get(uid);
if (instance) highlight(instance);
});
hooks.hook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT, () => {
unhighlight();
});
return hooks;
}
//#endregion
//#region src/ctx/state.ts
target.__VUE_DEVTOOLS_KIT_APP_RECORDS__ ??= [];
target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ ??= {};
target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ ??= "";
target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__ ??= [];
target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__ ??= [];
const STATE_KEY = "__VUE_DEVTOOLS_KIT_GLOBAL_STATE__";
function initStateFactory() {
return {
connected: false,
clientConnected: false,
vitePluginDetected: true,
appRecords: [],
activeAppRecordId: "",
tabs: [],
commands: [],
highPerfModeEnabled: true,
devtoolsClientDetected: {},
perfUniqueGroupId: 0,
timelineLayersState: getTimelineLayersStateFromStorage()
};
}
target[STATE_KEY] ??= initStateFactory();
const callStateUpdatedHook = debounce((state) => {
devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.DEVTOOLS_STATE_UPDATED, { state });
});
const callConnectedUpdatedHook = debounce((state, oldState) => {
devtoolsContext.hooks.callHook(DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED, {
state,
oldState
});
});
const devtoolsAppRecords = new Proxy(target.__VUE_DEVTOOLS_KIT_APP_RECORDS__, { get(_target, prop, receiver) {
if (prop === "value") return target.__VUE_DEVTOOLS_KIT_APP_RECORDS__;
return target.__VUE_DEVTOOLS_KIT_APP_RECORDS__[prop];
} });
const addDevToolsAppRecord = (app) => {
target.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = [...target.__VUE_DEVTOOLS_KIT_APP_RECORDS__, app];
};
const removeDevToolsAppRecord = (app) => {
target.__VUE_DEVTOOLS_KIT_APP_RECORDS__ = devtoolsAppRecords.value.filter((record) => record.app !== app);
};
const activeAppRecord = new Proxy(target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__, { get(_target, prop, receiver) {
if (prop === "value") return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__;
else if (prop === "id") return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__;
return target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__[prop];
} });
function updateAllStates() {
callStateUpdatedHook({
...target[STATE_KEY],
appRecords: devtoolsAppRecords.value,
activeAppRecordId: activeAppRecord.id,
tabs: target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__,
commands: target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__
});
}
function setActiveAppRecord(app) {
target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ = app;
updateAllStates();
}
function setActiveAppRecordId(id) {
target.__VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD_ID__ = id;
updateAllStates();
}
const devtoolsState = new Proxy(target[STATE_KEY], {
get(target$3, property) {
if (property === "appRecords") return devtoolsAppRecords;
else if (property === "activeAppRecordId") return activeAppRecord.id;
else if (property === "tabs") return target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
else if (property === "commands") return target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
return target[STATE_KEY][property];
},
deleteProperty(target, property) {
delete target[property];
return true;
},
set(target$4, property, value) {
target$4[property] = value;
target[STATE_KEY][property] = value;
return true;
}
});
function resetDevToolsState() {
Object.assign(target[STATE_KEY], initStateFactory());
}
function updateDevToolsState(state) {
const oldState = {
...target[STATE_KEY],
appRecords: devtoolsAppRecords.value,
activeAppRecordId: activeAppRecord.id
};
if (oldState.connected !== state.connected && state.connected || oldState.clientConnected !== state.clientConnected && state.clientConnected) callConnectedUpdatedHook(target[STATE_KEY], oldState);
Object.assign(target[STATE_KEY], state);
updateAllStates();
}
function onDevToolsConnected(fn) {
return new Promise((resolve) => {
if (devtoolsState.connected) {
fn();
resolve();
}
devtoolsContext.hooks.hook(DevToolsMessagingHookKeys.DEVTOOLS_CONNECTED_UPDATED, ({ state }) => {
if (state.connected) {
fn();
resolve();
}
});
});
}
const resolveIcon = (icon) => {
if (!icon) return;
if (icon.startsWith("baseline-")) return `custom-ic-${icon}`;
if (icon.startsWith("i-") || isUrlString(icon)) return icon;
return `custom-ic-baseline-${icon}`;
};
function addCustomTab(tab) {
const tabs = target.__VUE_DEVTOOLS_KIT_CUSTOM_TABS__;
if (tabs.some((t) => t.name === tab.name)) return;
tabs.push({
...tab,
icon: resolveIcon(tab.icon)
});
updateAllStates();
}
function addCustomCommand(action) {
const commands = target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
if (commands.some((t) => t.id === action.id)) return;
commands.push({
...action,
icon: resolveIcon(action.icon),
children: action.children ? action.children.map((child) => ({
...child,
icon: resolveIcon(child.icon)
})) : void 0
});
updateAllStates();
}
function removeCustomCommand(actionId) {
const commands = target.__VUE_DEVTOOLS_KIT_CUSTOM_COMMANDS__;
const index = commands.findIndex((t) => t.id === actionId);
if (index === -1) return;
commands.splice(index, 1);
updateAllStates();
}
function toggleClientConnected(state) {
updateDevToolsState({ clientConnected: state });
}
//#endregion
//#region src/core/open-in-editor/index.ts
function setOpenInEditorBaseUrl(url) {
target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ = url;
}
function openInEditor(options = {}) {
const { file, host, baseUrl = window.location.origin, line = 0, column = 0 } = options;
if (file) {
if (host === "chrome-extension") {
const fileName = file.replace(/\\/g, "\\\\");
const _baseUrl = window.VUE_DEVTOOLS_CONFIG?.openInEditorHost ?? "/";
fetch(`${_baseUrl}__open-in-editor?file=${encodeURI(file)}`).then((response) => {
if (!response.ok) {
const msg = `Opening component ${fileName} failed`;
console.log(`%c${msg}`, "color:red");
}
});
} else if (devtoolsState.vitePluginDetected) {
const _baseUrl = target.__VUE_DEVTOOLS_OPEN_IN_EDITOR_BASE_URL__ ?? baseUrl;
target.__VUE_INSPECTOR__.openInEditor(_baseUrl, file, line, column);
}
}
}
//#endregion
//#region src/ctx/plugin.ts
target.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__ ??= [];
const devtoolsPluginBuffer = new Proxy(target.__VUE_DEVTOOLS_KIT_PLUGIN_BUFFER__, { get(target, prop, receiver) {
return Reflect.get(target, prop, receiver);
} });
function addDevToolsPluginToBuffer(pluginDescriptor, setupFn) {
devtoolsPluginBuffer.push([pluginDescriptor, setupFn]);
}
//#endregion
//#region src/core/plugin/plugin-settings.ts
function _getSettings(settings) {
const _settings = {};
Object.keys(settings).forEach((key) => {
_settings[key] = settings[key].defaultValue;
});
return _settings;
}
function getPluginLocalKey(pluginId) {
return `__VUE_DEVTOOLS_NEXT_PLUGIN_SETTINGS__${pluginId}__`;
}
function getPluginSettingsOptions(pluginId) {
return (devtoolsPluginBuffer.find((item) => item[0].id === pluginId && !!item[0]?.settings)?.[0] ?? null)?.settings ?? null;
}
function getPluginSettings(pluginId, fallbackValue) {
const localKey = getPluginLocalKey(pluginId);
if (localKey) {
const localSettings = localStorage.getItem(localKey);
if (localSettings) return JSON.parse(localSettings);
}
if (pluginId) return _getSettings((devtoolsPluginBuffer.find((item) => item[0].id === pluginId)?.[0] ?? null)?.settings ?? {});
return _getSettings(fallbackValue);
}
function initPluginSettings(pluginId, settings) {
const localKey = getPluginLocalKey(pluginId);
if (!localStorage.getItem(localKey)) localStorage.setItem(localKey, JSON.stringify(_getSettings(settings)));
}
function setPluginSettings(pluginId, key, value) {
const localKey = getPluginLocalKey(pluginId);
const localSettings = localStorage.getItem(localKey);
const parsedLocalSettings = JSON.parse(localSettings || "{}");
const updated = {
...parsedLocalSettings,
[key]: value
};
localStorage.setItem(localKey, JSON.stringify(updated));
devtoolsContext.hooks.callHookWith((callbacks) => {
callbacks.forEach((cb) => cb({
pluginId,
key,
oldValue: parsedLocalSettings[key],
newValue: value,
settings: updated
}));
}, DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS);
}
//#endregion
//#region src/types/hook.ts
let DevToolsHooks = /* @__PURE__ */ function(DevToolsHooks) {
DevToolsHooks["APP_INIT"] = "app:init";
DevToolsHooks["APP_UNMOUNT"] = "app:unmount";
DevToolsHooks["COMPONENT_UPDATED"] = "component:updated";
DevToolsHooks["COMPONENT_ADDED"] = "component:added";
DevToolsHooks["COMPONENT_REMOVED"] = "component:removed";
DevToolsHooks["COMPONENT_EMIT"] = "component:emit";
DevToolsHooks["PERFORMANCE_START"] = "perf:start";
DevToolsHooks["PERFORMANCE_END"] = "perf:end";
DevToolsHooks["ADD_ROUTE"] = "router:add-route";
DevToolsHooks["REMOVE_ROUTE"] = "router:remove-route";
DevToolsHooks["RENDER_TRACKED"] = "render:tracked";
DevToolsHooks["RENDER_TRIGGERED"] = "render:triggered";
DevToolsHooks["APP_CONNECTED"] = "app:connected";
DevToolsHooks["SETUP_DEVTOOLS_PLUGIN"] = "devtools-plugin:setup";
return DevToolsHooks;
}({});
//#endregion
//#region src/hook/index.ts
const devtoolsHooks = target.__VUE_DEVTOOLS_HOOK ??= createHooks();
const on = {
vueAppInit(fn) {
devtoolsHooks.hook(DevToolsHooks.APP_INIT, fn);
},
vueAppUnmount(fn) {
devtoolsHooks.hook(DevToolsHooks.APP_UNMOUNT, fn);
},
vueAppConnected(fn) {
devtoolsHooks.hook(DevToolsHooks.APP_CONNECTED, fn);
},
componentAdded(fn) {
return devtoolsHooks.hook(DevToolsHooks.COMPONENT_ADDED, fn);
},
componentEmit(fn) {
return devtoolsHooks.hook(DevToolsHooks.COMPONENT_EMIT, fn);
},
componentUpdated(fn) {
return devtoolsHooks.hook(DevToolsHooks.COMPONENT_UPDATED, fn);
},
componentRemoved(fn) {
return devtoolsHooks.hook(DevToolsHooks.COMPONENT_REMOVED, fn);
},
setupDevtoolsPlugin(fn) {
devtoolsHooks.hook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, fn);
},
perfStart(fn) {
return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_START, fn);
},
perfEnd(fn) {
return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_END, fn);
}
};
function createDevToolsHook() {
return {
id: "vue-devtools-next",
devtoolsVersion: "7.0",
enabled: false,
appRecords: [],
apps: [],
events: /* @__PURE__ */ new Map(),
on(event, fn) {
if (!this.events.has(event)) this.events.set(event, []);
this.events.get(event)?.push(fn);
return () => this.off(event, fn);
},
once(event, fn) {
const onceFn = (...args) => {
this.off(event, onceFn);
fn(...args);
};
this.on(event, onceFn);
return [event, onceFn];
},
off(event, fn) {
if (this.events.has(event)) {
const eventCallbacks = this.events.get(event);
const index = eventCallbacks.indexOf(fn);
if (index !== -1) eventCallbacks.splice(index, 1);
}
},
emit(event, ...payload) {
if (this.events.has(event)) this.events.get(event).forEach((fn) => fn(...payload));
}
};
}
function subscribeDevToolsHook(hook) {
hook.on(DevToolsHooks.APP_INIT, (app, version, types) => {
if (app?._instance?.type?.devtools?.hide) return;
devtoolsHooks.callHook(DevToolsHooks.APP_INIT, app, version, types);
});
hook.on(DevToolsHooks.APP_UNMOUNT, (app) => {
devtoolsHooks.callHook(DevToolsHooks.APP_UNMOUNT, app);
});
hook.on(DevToolsHooks.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
if (app?._instance?.type?.devtools?.hide || devtoolsState.highPerfModeEnabled) return;
if (!app || typeof uid !== "number" && !uid || !component) return;
devtoolsHooks.callHook(DevToolsHooks.COMPONENT_ADDED, app, uid, parentUid, component);
});
hook.on(DevToolsHooks.COMPONENT_UPDATED, (app, uid, parentUid, component) => {
if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled) return;
devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, app, uid, parentUid, component);
});
hook.on(DevToolsHooks.COMPONENT_REMOVED, async (app, uid, parentUid, component) => {
if (!app || typeof uid !== "number" && !uid || !component || devtoolsState.highPerfModeEnabled) return;
devtoolsHooks.callHook(DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component);
});
hook.on(DevToolsHooks.COMPONENT_EMIT, async (app, instance, event, params) => {
if (!app || !instance || devtoolsState.highPerfModeEnabled) return;
devtoolsHooks.callHook(DevToolsHooks.COMPONENT_EMIT, app, instance, event, params);
});
hook.on(DevToolsHooks.PERFORMANCE_START, (app, uid, vm, type, time) => {
if (!app || devtoolsState.highPerfModeEnabled) return;
devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_START, app, uid, vm, type, time);
});
hook.on(DevToolsHooks.PERFORMANCE_END, (app, uid, vm, type, time) => {
if (!app || devtoolsState.highPerfModeEnabled) return;
devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_END, app, uid, vm, type, time);
});
hook.on(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
if (options?.target === "legacy") return;
devtoolsHooks.callHook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
});
}
const hook = {
on,
setupDevToolsPlugin(pluginDescriptor, setupFn) {
return devtoolsHooks.callHook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, pluginDescriptor, setupFn);
}
};
//#endregion
//#region src/api/v6/index.ts
var DevToolsV6PluginAPI = class {
constructor({ plugin, ctx }) {
this.hooks = ctx.hooks;
this.plugin = plugin;
}
get on() {
return {
visitComponentTree: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE, handler);
},
inspectComponent: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.INSPECT_COMPONENT, handler);
},
editComponentState: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.EDIT_COMPONENT_STATE, handler);
},
getInspectorTree: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_TREE, handler);
},
getInspectorState: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.GET_INSPECTOR_STATE, handler);
},
editInspectorState: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.EDIT_INSPECTOR_STATE, handler);
},
inspectTimelineEvent: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.INSPECT_TIMELINE_EVENT, handler);
},
timelineCleared: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.TIMELINE_CLEARED, handler);
},
setPluginSettings: (handler) => {
this.hooks.hook(DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS, handler);
}
};
}
notifyComponentUpdate(instance) {
if (devtoolsState.highPerfModeEnabled) return;
const inspector = getActiveInspectors().find((i) => i.packageName === this.plugin.descriptor.packageName);
if (inspector?.id) {
if (instance) {
const args = [
instance.appContext.app,
instance.uid,
instance.parent?.uid,
instance
];
devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, ...args);
} else devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED);
this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, {
inspectorId: inspector.id,
plugin: this.plugin
});
}
}
addInspector(options) {
this.hooks.callHook(DevToolsContextHookKeys.ADD_INSPECTOR, {
inspector: options,
plugin: this.plugin
});
if (this.plugin.descriptor.settings) initPluginSettings(options.id, this.plugin.descriptor.settings);
}
sendInspectorTree(inspectorId) {
if (devtoolsState.highPerfModeEnabled) return;
this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_TREE, {
inspectorId,
plugin: this.plugin
});
}
sendInspectorState(inspectorId) {
if (devtoolsState.highPerfModeEnabled) return;
this.hooks.callHook(DevToolsContextHookKeys.SEND_INSPECTOR_STATE, {
inspectorId,
plugin: this.plugin
});
}
selectInspectorNode(inspectorId, nodeId) {
this.hooks.callHook(DevToolsContextHookKeys.CUSTOM_INSPECTOR_SELECT_NODE, {
inspectorId,
nodeId,
plugin: this.plugin
});
}
visitComponentTree(payload) {
return this.hooks.callHook(DevToolsV6PluginAPIHookKeys.VISIT_COMPONENT_TREE, payload);
}
now() {
if (devtoolsState.highPerfModeEnabled) return 0;
return Date.now();
}
addTimelineLayer(options) {
this.hooks.callHook(DevToolsContextHookKeys.TIMELINE_LAYER_ADDED, {
options,
plugin: this.plugin
});
}
addTimelineEvent(options) {
if (devtoolsState.highPerfModeEnabled) return;
this.hooks.callHook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, {
options,
plugin: this.plugin
});
}
getSettings(pluginId) {
return getPluginSettings(pluginId ?? this.plugin.descriptor.id, this.plugin.descriptor.settings);
}
getComponentInstances(app) {
return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_INSTANCES, { app });
}
getComponentBounds(instance) {
return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_BOUNDS, { instance });
}
getComponentName(instance) {
return this.hooks.callHook(DevToolsContextHookKeys.GET_COMPONENT_NAME, { instance });
}
highlightElement(instance) {
const uid = instance.__VUE_DEVTOOLS_NEXT_UID__;
return this.hooks.callHook(DevToolsContextHookKeys.COMPONENT_HIGHLIGHT, { uid });
}
unhighlightElement() {
return this.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT);
}
};
//#endregion
//#region src/api/index.ts
const DevToolsPluginAPI = DevToolsV6PluginAPI;
//#endregion
//#region src/core/component/state/constants.ts
const vueBuiltins = new Set([
"nextTick",
"defineComponent",
"defineAsyncComponent",
"defineCustomElement",
"ref",
"computed",
"reactive",
"readonly",
"watchEffect",
"watchPostEffect",
"watchSyncEffect",
"watch",
"isRef",
"unref",
"toRef",
"toRefs",
"isProxy",
"isReactive",
"isReadonly",
"shallowRef",
"triggerRef",
"customRef",
"shallowReactive",
"shallowReadonly",
"toRaw",
"markRaw",
"effectScope",
"getCurrentScope",
"onScopeDispose",
"onMounted",
"onUpdated",
"onUnmounted",
"onBeforeMount",
"onBeforeUpdate",
"onBeforeUnmount",
"onErrorCaptured",
"onRenderTracked",
"onRenderTriggered",
"onActivated",
"onDeactivated",
"onServerPrefetch",
"provide",
"inject",
"h",
"mergeProps",
"cloneVNode",
"isVNode",
"resolveComponent",
"resolveDirective",
"withDirectives",
"withModifiers"
]);
const symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
const rawTypeRE = /^\[object (\w+)\]$/;
const specialTypeRE = /^\[native (\w+) (.*?)(<>(([\s\S])*))?\]$/;
const fnTypeRE = /^(?:function|class) (\w+)/;
const MAX_STRING_SIZE = 1e4;
const MAX_ARRAY_SIZE = 5e3;
const UNDEFINED = "__vue_devtool_undefined__";
const INFINITY = "__vue_devtool_infinity__";
const NEGATIVE_INFINITY = "__vue_devtool_negative_infinity__";
const NAN = "__vue_devtool_nan__";
const ESC = {
"<": "<",
">": ">",
"\"": """,
"&": "&"
};
//#endregion
//#region src/core/component/state/is.ts
function isVueInstance(value) {
if (!ensurePropertyExists(value, "_")) return false;
if (!isPlainObject(value._)) return false;
return Object.keys(value._).includes("vnode");
}
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function isPrimitive$1(data) {
if (data == null) return true;
const type = typeof data;
ret