@vue/devtools-kit 7.0.13 → 7.0.14

package/dist/index.cjs

@@ -1607,6 +1607,7 @@ __export(src_exports, {
   symbolRE: () => symbolRE,
   toEdit: () => toEdit,
   toSubmit: () => toSubmit,
+  toggleComponentInspectorEnabled: () => toggleComponentInspectorEnabled,
   vueBuiltins: () => vueBuiltins
 });
 module.exports = __toCommonJS(src_exports);
@@ -1665,10 +1666,10 @@ function createDevToolsHook() {
     apps: {},
     events: /* @__PURE__ */ new Map(),
     on(event, fn) {
-      var _a8;
+      var _a9;
       if (!this.events.has(event))
         this.events.set(event, []);
-      (_a8 = this.events.get(event)) == null ? void 0 : _a8.push(fn);
+      (_a9 = this.events.get(event)) == null ? void 0 : _a9.push(fn);
       return () => this.off(event, fn);
     },
     once(event, fn) {
@@ -1696,14 +1697,14 @@ function createDevToolsHook() {
 function subscribeDevToolsHook() {
   const hook2 = import_devtools_shared.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
   hook2.on(import_devtools_schema.DevToolsHooks.APP_INIT, (app, version) => {
-    var _a8, _b8, _c;
-    if ((_c = (_b8 = (_a8 = app == null ? void 0 : app._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+    var _a9, _b9, _c;
+    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
       return;
     devtoolsHooks.callHook(import_devtools_schema.DevToolsHooks.APP_INIT, app, version);
   });
   hook2.on(import_devtools_schema.DevToolsHooks.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
-    var _a8, _b8, _c;
-    if ((_c = (_b8 = (_a8 = app == null ? void 0 : app._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+    var _a9, _b9, _c;
+    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
       return;
     if (!app || typeof uid !== "number" && !uid || !component)
       return;
@@ -1777,8 +1778,8 @@ function normalizeRouterInfo(appRecord) {
     return route;
   }
   function init() {
-    var _a8;
-    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
+    var _a9;
+    const router = (_a9 = appRecord.app) == null ? void 0 : _a9.config.globalProperties.$router;
     const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
     const routes = filterRoutes(getRoutes(router));
     const c = console.warn;
@@ -1840,14 +1841,14 @@ var devtoolsState = new Proxy(import_devtools_shared3.target[StateKey], {
     return import_devtools_shared3.target[StateKey][property];
   },
   set(target8, property, value) {
-    var _a8;
+    var _a9;
     const oldState = { ...import_devtools_shared3.target[StateKey] };
     target8[property] = value;
     import_devtools_shared3.target[StateKey][property] = value;
     if (property === "activeAppRecord") {
       import_devtools_shared3.target[ContextKey].appRecord = value;
       import_devtools_shared3.target[ContextKey].api = value.api;
-      import_devtools_shared3.target[ContextKey].inspector = (_a8 = value.inspector) != null ? _a8 : [];
+      import_devtools_shared3.target[ContextKey].inspector = (_a9 = value.inspector) != null ? _a9 : [];
       normalizeRouterInfo(value);
       import_devtools_shared3.target[ContextKey].routerInfo = devtoolsRouterInfo;
     }
@@ -2025,21 +2026,21 @@ async function getComponentId(options) {
   }
 }
 function isFragment(instance) {
-  var _a8;
-  const subTreeType = (_a8 = instance.subTree) == null ? void 0 : _a8.type;
+  var _a9;
+  const subTreeType = (_a9 = instance.subTree) == null ? void 0 : _a9.type;
   return subTreeType === import_vue.Fragment;
 }
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
 }
 function getInstanceName(instance) {
-  var _a8, _b8, _c;
+  var _a9, _b9, _c;
   const name = getComponentTypeName(instance.type || {});
   if (name)
     return name;
   if (instance.root === instance)
     return "Root";
-  for (const key in (_b8 = (_a8 = instance.parent) == null ? void 0 : _a8.type) == null ? void 0 : _b8.components) {
+  for (const key in (_b9 = (_a9 = instance.parent) == null ? void 0 : _a9.type) == null ? void 0 : _b9.components) {
     if (instance.parent.type.components[key] === instance.type)
       return saveComponentGussedName(instance, key);
   }
@@ -2053,8 +2054,8 @@ function getInstanceName(instance) {
   return "Anonymous Component";
 }
 function getUniqueComponentId(instance) {
-  var _a8, _b8, _c;
-  const appId = (_c = (_b8 = (_a8 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a8.app) == null ? void 0 : _b8.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
+  var _a9, _b9, _c;
+  const appId = (_c = (_b9 = (_a9 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a9.app) == null ? void 0 : _b9.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
   const instanceId = instance === instance.root ? "root" : instance.uid;
   return `${appId}:${instanceId}`;
 }
@@ -2258,7 +2259,7 @@ function getStateTypeAndName(info) {
 function processSetupState(instance) {
   const raw = instance.devtoolsRawSetupState || {};
   return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
-    var _a8, _b8, _c, _d;
+    var _a9, _b9, _c, _d;
     const value = returnError(() => toRaw(instance.setupState[key]));
     const rawData = raw[key];
     let result;
@@ -2267,7 +2268,7 @@ function processSetupState(instance) {
       const info = getSetupStateType(rawData);
       const { stateType, stateTypeName } = getStateTypeAndName(info);
       const isState = info.ref || info.computed || info.reactive;
-      const raw2 = ((_b8 = (_a8 = rawData.effect) == null ? void 0 : _a8.raw) == null ? void 0 : _b8.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+      const raw2 = ((_b9 = (_a9 = rawData.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
       if (stateType)
         isOtherType = false;
       result = {
@@ -2297,8 +2298,8 @@ function processComputed(instance, mergedType) {
       type: type2,
       key,
       value: returnError(() => {
-        var _a8;
-        return (_a8 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a8[key];
+        var _a9;
+        return (_a9 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a9[key];
       }),
       editable: typeof def.set === "function"
     });
@@ -2360,10 +2361,10 @@ function processRefs(instance) {
   }));
 }
 function processEventListeners(instance) {
-  var _a8;
+  var _a9;
   const emitsDefinition = instance.type.emits;
   const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition != null ? emitsDefinition : {});
-  const keys = Object.keys((_a8 = instance.vnode.props) != null ? _a8 : {});
+  const keys = Object.keys((_a9 = instance.vnode.props) != null ? _a9 : {});
   const result = [];
   for (const key of keys) {
     const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/);
@@ -2584,13 +2585,13 @@ function getHTMLElementDetails(value) {
   }
 }
 function getObjectDetails(object) {
-  var _a8, _b8, _c, _d;
+  var _a9, _b9, _c, _d;
   const info = getSetupStateType(object);
   const isState = info.ref || info.computed || info.reactive;
   if (isState) {
     const stateTypeName = info.computed ? "Computed" : info.ref ? "Ref" : info.reactive ? "Reactive" : null;
     const value = toRaw(info.reactive ? object : object._value);
-    const raw = ((_b8 = (_a8 = object.effect) == null ? void 0 : _a8.raw) == null ? void 0 : _b8.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+    const raw = ((_b9 = (_a9 = object.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
     return {
       _custom: {
         type: stateTypeName == null ? void 0 : stateTypeName.toLowerCase(),
@@ -2612,7 +2613,7 @@ function getObjectDetails(object) {
 
 // src/core/component/state/replacer.ts
 function stringifyReplacer(key) {
-  var _a8;
+  var _a9;
   if (key === "compilerOptions")
     return;
   const val = this[key];
@@ -2668,7 +2669,7 @@ function stringifyReplacer(key) {
       return `[native VNode <${val.tag}>]`;
     } else if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
       return getHTMLElementDetails(val);
-    } else if (((_a8 = val.constructor) == null ? void 0 : _a8.name) === "Store" && val._wrappedGetters) {
+    } else if (((_a9 = val.constructor) == null ? void 0 : _a9.name) === "Store" && val._wrappedGetters) {
       return "[object Store]";
     } else if (val.currentRoute) {
       return "[object Router]";
@@ -2704,7 +2705,7 @@ function reviveMap(val) {
   return result;
 }
 function revive(val) {
-  var _a8;
+  var _a9;
   if (val === UNDEFINED) {
     return void 0;
   } else if (val === INFINITY) {
@@ -2716,7 +2717,7 @@ function revive(val) {
   } else if (val && val._custom) {
     const { _custom: custom } = val;
     if (custom.type === "component")
-      return (_a8 = devtoolsContext.appRecord) == null ? void 0 : _a8.instanceMap.get(custom.id);
+      return (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.instanceMap.get(custom.id);
     else if (custom.type === "map")
       return reviveMap(val);
     else if (custom.type === "set")
@@ -2878,7 +2879,7 @@ function getInspectorStateValueType(value, raw = true) {
   }
 }
 function formatInspectorStateValue(value, quotes = false) {
-  var _a8, _b8;
+  var _a9, _b9;
   let result;
   const type = getInspectorStateValueType(value, false);
   if (type !== "custom" && (value == null ? void 0 : value._custom))
@@ -2886,14 +2887,14 @@ function formatInspectorStateValue(value, quotes = false) {
   if (result = internalStateTokenToString(value)) {
     return result;
   } else if (type === "custom") {
-    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
+    const nestedName = ((_a9 = value._custom.value) == null ? void 0 : _a9._custom) && formatInspectorStateValue(value._custom.value);
     return nestedName || value._custom.displayText || value._custom.display;
   } else if (type === "array") {
     return `Array[${value.length}]`;
   } else if (type === "plain-object") {
     return `Object${Object.keys(value).length ? "" : " (empty)"}`;
   } else if (type == null ? void 0 : type.includes("native")) {
-    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
+    return escape((_b9 = specialTypeRE.exec(value)) == null ? void 0 : _b9[2]);
   } else if (typeof value === "string") {
     const typeMatch = value.match(rawTypeRE);
     if (typeMatch)
@@ -2907,14 +2908,14 @@ function formatInspectorStateValue(value, quotes = false) {
   return value;
 }
 function getRawValue(value) {
-  var _a8, _b8;
+  var _a9, _b9;
   const isCustom = getInspectorStateValueType(value) === "custom";
   let inherit = {};
   if (isCustom) {
     const data = value;
-    const customValue = (_a8 = data._custom) == null ? void 0 : _a8.value;
+    const customValue = (_a9 = data._custom) == null ? void 0 : _a9.value;
     const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRawValue(customValue) : { inherit: void 0, value: void 0 };
-    inherit = nestedCustom.inherit || ((_b8 = data._custom) == null ? void 0 : _b8.fields) || {};
+    inherit = nestedCustom.inherit || ((_b9 = data._custom) == null ? void 0 : _b9.fields) || {};
     value = nestedCustom.value || customValue;
   }
   if (value && value._isArray)
@@ -2933,7 +2934,7 @@ function stringify(data) {
   return stringifyCircularAutoChunks(data, stringifyReplacer);
 }
 function parse(data, revive2 = false) {
-  if (!data)
+  if (data == void 0)
     return {};
   return revive2 ? parseCircularAutoChunks(data, reviver) : parseCircularAutoChunks(data);
 }
@@ -3140,8 +3141,8 @@ async function registerPlugin(options) {
     setupFn(api);
   });
   devtoolsState.appRecords = devtoolsState.appRecords.map((record) => {
-    var _a8, _b8;
-    const globalProperties = (_b8 = (_a8 = record.app) == null ? void 0 : _a8.config) == null ? void 0 : _b8.globalProperties;
+    var _a9, _b9;
+    const globalProperties = (_b9 = (_a9 = record.app) == null ? void 0 : _a9.config) == null ? void 0 : _b9.globalProperties;
     if (!globalProperties)
       return record;
     return {
@@ -3249,7 +3250,7 @@ var ComponentWalker = class {
    * @return {object}
    */
   async capture(instance, depth) {
-    var _a8;
+    var _a9;
     if (!instance)
       return null;
     const id = this.captureId(instance);
@@ -3304,7 +3305,7 @@ var ComponentWalker = class {
     } else {
       treeNode.domOrder = [-1];
     }
-    if ((_a8 = instance.suspense) == null ? void 0 : _a8.suspenseKey) {
+    if ((_a9 = instance.suspense) == null ? void 0 : _a9.suspenseKey) {
       treeNode.tags.push({
         label: instance.suspense.suspenseKey,
         backgroundColor: 14979812,
@@ -3329,8 +3330,8 @@ var ComponentWalker = class {
    * @return {Vue|Array}
    */
   async findQualifiedChildren(instance, depth) {
-    var _a8;
-    if (this.componentFilter.isQualified(instance) && !((_a8 = instance.type.devtools) == null ? void 0 : _a8.hide)) {
+    var _a9;
+    if (this.componentFilter.isQualified(instance) && !((_a9 = instance.type.devtools) == null ? void 0 : _a9.hide)) {
       return [await this.capture(instance, depth)];
     } else if (instance.subTree) {
       const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
@@ -3350,8 +3351,8 @@ var ComponentWalker = class {
    */
   async findQualifiedChildrenFromList(instances, depth) {
     instances = instances.filter((child) => {
-      var _a8;
-      return !isBeingDestroyed(child) && !((_a8 = child.type.devtools) == null ? void 0 : _a8.hide);
+      var _a9;
+      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
     if (!this.componentFilter.filter)
       return Promise.all(instances.map((child) => this.capture(child, depth)));
@@ -3379,8 +3380,8 @@ var ComponentWalker = class {
       }
     }
     return list.filter((child) => {
-      var _a8;
-      return !isBeingDestroyed(child) && !((_a8 = child.type.devtools) == null ? void 0 : _a8.hide);
+      var _a9;
+      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
   }
   /**
@@ -3404,11 +3405,11 @@ var ComponentWalker = class {
 // src/core/component/state/index.ts
 init_cjs_shims();
 function getInstanceState(params) {
-  var _a8;
+  var _a9;
   const instance = getComponentInstance(devtoolsContext.appRecord, params.instanceId);
   const id = getUniqueComponentId(instance);
   const name = getInstanceName(instance);
-  const file = (_a8 = instance == null ? void 0 : instance.type) == null ? void 0 : _a8.__file;
+  const file = (_a9 = instance == null ? void 0 : instance.type) == null ? void 0 : _a9.__file;
   const state = processInstanceState(instance);
   return {
     id,
@@ -3598,13 +3599,13 @@ function registerComponentsDevTools(app) {
       }
     });
     api.on.getInspectorState(async (payload) => {
-      var _a8;
+      var _a9;
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const result = getInstanceState({
           instanceId: payload.nodeId
         });
         const componentInstance = result.instance;
-        const app2 = (_a8 = result.instance) == null ? void 0 : _a8.appContext.app;
+        const app2 = (_a9 = result.instance) == null ? void 0 : _a9.appContext.app;
         const _payload = {
           componentInstance,
           app: app2,
@@ -3629,8 +3630,8 @@ function registerComponentsDevTools(app) {
       api.sendInspectorState(INSPECTOR_ID);
     }, 120);
     const componentAddedCleanup = hook.on.componentAdded(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3651,8 +3652,8 @@ function registerComponentsDevTools(app) {
       debounceSendInspectorTree();
     });
     const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3674,8 +3675,8 @@ function registerComponentsDevTools(app) {
       debounceSendInspectorState();
     });
     const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3750,6 +3751,11 @@ function removeCustomCommand(actionId) {
 // src/core/vue-inspector/index.ts
 init_cjs_shims();
 var import_devtools_shared10 = require("@vue/devtools-shared");
+var _a7, _b7;
+(_b7 = (_a7 = import_devtools_shared10.target).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b7 : _a7.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
+function toggleComponentInspectorEnabled(enabled) {
+  import_devtools_shared10.target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
+}
 function waitForInspectorInit(cb) {
   let total = 0;
   const timer = setInterval(() => {
@@ -3773,6 +3779,8 @@ function setupInspector() {
 }
 function getVueInspector() {
   return new Promise((resolve) => {
+    if (!import_devtools_shared10.target.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__)
+      resolve(null);
     function setup() {
       setupInspector();
       resolve(import_devtools_shared10.target.__VUE_INSPECTOR__);
@@ -3824,7 +3832,7 @@ var indicatorStyles = {
   fontSize: "12px",
   opacity: 0.7
 };
-function getCotainerElement() {
+function getContainerElement() {
   return document.getElementById(CONTAINER_ELEMENT_ID);
 }
 function getCardElement() {
@@ -3845,9 +3853,9 @@ function getStyles(bounds) {
   };
 }
 function create(options) {
-  var _a8;
+  var _a9;
   const containerEl = document.createElement("div");
-  containerEl.id = (_a8 = options.elementId) != null ? _a8 : CONTAINER_ELEMENT_ID;
+  containerEl.id = (_a9 = options.elementId) != null ? _a9 : CONTAINER_ELEMENT_ID;
   Object.assign(containerEl.style, {
     ...containerStyles,
     ...getStyles(options.bounds),
@@ -3873,7 +3881,7 @@ function create(options) {
   return containerEl;
 }
 function update(options) {
-  const containerEl = getCotainerElement();
+  const containerEl = getContainerElement();
   const cardEl = getCardElement();
   const nameEl = getNameElement();
   const indicatorEl = getIndicatorElement();
@@ -3894,11 +3902,11 @@ function toggleComponentInspector(options) {
     const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
     if (instance && (options.bounds.width || options.bounds.height)) {
       const name = getInstanceName(instance);
-      const el = getCotainerElement();
+      const el = getContainerElement();
       el ? update({ ...options, name }) : create({ ...options, name });
     }
   } else {
-    const el = getCotainerElement();
+    const el = getContainerElement();
     if (el)
       el.style.display = "none";
   }
@@ -3906,11 +3914,11 @@ function toggleComponentInspector(options) {
 function highlight(instance) {
   const bounds = getComponentBoundingRect(instance);
   const name = getInstanceName(instance);
-  const container = getCotainerElement();
+  const container = getContainerElement();
   container ? update({ bounds, name }) : create({ bounds, name });
 }
 function unhighlight() {
-  const el = getCotainerElement();
+  const el = getContainerElement();
   if (el)
     el.style.display = "none";
 }
@@ -3925,18 +3933,18 @@ function inspectFn(e) {
       if (el) {
         const bounds = getComponentBoundingRect(instance);
         const name = getInstanceName(instance);
-        const container = getCotainerElement();
+        const container = getContainerElement();
         container ? update({ bounds, name }) : create({ bounds, name });
       }
     }
   }
 }
 function selectComponentFn(e, cb) {
-  var _a8;
+  var _a9;
   e.preventDefault();
   e.stopPropagation();
   if (inspectInstance) {
-    const app = (_a8 = devtoolsContext.appRecord) == null ? void 0 : _a8.app;
+    const app = (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.app;
     getComponentId({
       app,
       uid: app.uid,
@@ -3955,7 +3963,7 @@ function inspectComponentInspector() {
       selectComponentFn(e, (id) => {
         window.removeEventListener("click", onSelect);
         window.removeEventListener("mouseover", inspectFn);
-        const el = getCotainerElement();
+        const el = getContainerElement();
         if (el)
           el.style.display = "none";
         resolve(JSON.stringify({ id }));
@@ -3992,7 +4000,7 @@ function scrollToComponent(options) {
       const bounds = getComponentBoundingRect(instance);
       if (bounds.width || bounds.height) {
         const name = getInstanceName(instance);
-        const el2 = getCotainerElement();
+        const el2 = getContainerElement();
         el2 ? update({ ...options, name, bounds }) : create({ ...options, name, bounds });
         setTimeout(() => {
           if (el2)
@@ -4127,12 +4135,12 @@ var DevToolsPluginApi = class {
     removeCustomCommand(actionId);
   }
   addInspector(payload) {
-    var _a8;
+    var _a9;
     addInspector({
       id: payload.id,
       nodeId: "",
       filter: "",
-      treeFilterPlaceholder: (_a8 = payload.treeFilterPlaceholder) != null ? _a8 : ""
+      treeFilterPlaceholder: (_a9 = payload.treeFilterPlaceholder) != null ? _a9 : ""
     });
   }
   openInEditor(payload) {
@@ -4176,20 +4184,20 @@ var DevToolsPluginApi = class {
 init_cjs_shims();
 var import_devtools_shared11 = require("@vue/devtools-shared");
 var import_speakingurl = __toESM(require_speakingurl2(), 1);
-var _a7, _b7;
-var appRecordInfo = (_b7 = (_a7 = import_devtools_shared11.target).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b7 : _a7.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
+var _a8, _b8;
+var appRecordInfo = (_b8 = (_a8 = import_devtools_shared11.target).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
   id: 0,
   appIds: /* @__PURE__ */ new Set()
 };
 function getAppRecordName(app, fallbackName) {
-  var _a8;
-  return ((_a8 = app == null ? void 0 : app._component) == null ? void 0 : _a8.name) || `App ${fallbackName}`;
+  var _a9;
+  return ((_a9 = app == null ? void 0 : app._component) == null ? void 0 : _a9.name) || `App ${fallbackName}`;
 }
 function getAppRootInstance(app) {
-  var _a8, _b8, _c, _d;
+  var _a9, _b9, _c, _d;
   if (app._instance)
     return app._instance;
-  else if ((_b8 = (_a8 = app._container) == null ? void 0 : _a8._vnode) == null ? void 0 : _b8.component)
+  else if ((_b9 = (_a9 = app._container) == null ? void 0 : _a9._vnode) == null ? void 0 : _b9.component)
     return (_d = (_c = app._container) == null ? void 0 : _c._vnode) == null ? void 0 : _d.component;
 }
 function getAppRecordId(app, defaultId) {
@@ -4230,23 +4238,23 @@ function createAppRecord(app) {
 
 // src/core/general/index.ts
 function initDevTools() {
-  var _a8, _b8, _c;
+  var _a9, _b9, _c;
   devtoolsState.vitePluginDetected = !!import_devtools_shared12.target.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__;
-  const isNewDevTools = ((_a8 = import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a8.id) === "vue-devtools-next";
+  const isNewDevTools = ((_a9 = import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a9.id) === "vue-devtools-next";
   if (import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isNewDevTools)
     return;
   if (import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
     Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
   else
     import_devtools_shared12.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  (_c = (_b8 = import_devtools_shared12.target).__VUE_DEVTOOLS_APP_RECORDS__) != null ? _c : _b8.__VUE_DEVTOOLS_APP_RECORDS__ = [];
+  (_c = (_b9 = import_devtools_shared12.target).__VUE_DEVTOOLS_APP_RECORDS__) != null ? _c : _b9.__VUE_DEVTOOLS_APP_RECORDS__ = [];
   hook.on.setupDevtoolsPlugin(collectRegisteredPlugin);
   hook.on.vueAppInit(async (app, version) => {
-    var _a9;
+    var _a10;
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();
     devtoolsState.appRecords = [
-      ...(_a9 = devtoolsState.appRecords) != null ? _a9 : [],
+      ...(_a10 = devtoolsState.appRecords) != null ? _a10 : [],
       {
         ...record,
         app,
@@ -4331,5 +4339,6 @@ var devtools = {
   symbolRE,
   toEdit,
   toSubmit,
+  toggleComponentInspectorEnabled,
   vueBuiltins
 });

package/dist/index.d.cts

@@ -35,7 +35,8 @@ interface VueInspector {
     openInEditor: (baseUrl: string, file: string, line: number, column: number) => void;
     onUpdated: () => void;
 }
-declare function getVueInspector(): Promise<VueInspector>;
+declare function toggleComponentInspectorEnabled(enabled: boolean): void;
+declare function getVueInspector(): Promise<VueInspector | null>;
 
 interface InspectorCustomState {
     _custom?: {
@@ -358,7 +359,7 @@ declare class DevToolsPluginApi {
     highlightElement(instance: any): void;
     unhighlightElement(): void;
     getComponentInstances(app: any): Promise<any[]>;
-    getVueInspector(): Promise<VueInspector>;
+    getVueInspector(): Promise<VueInspector | null>;
     visitComponentTree(payload: Parameters<DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]>[0]): void;
     addTimelineLayer(payload: {
         id: string;
@@ -622,4 +623,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, vueBuiltins };
+export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, toggleComponentInspectorEnabled, vueBuiltins };

package/dist/index.d.ts

@@ -35,7 +35,8 @@ interface VueInspector {
     openInEditor: (baseUrl: string, file: string, line: number, column: number) => void;
     onUpdated: () => void;
 }
-declare function getVueInspector(): Promise<VueInspector>;
+declare function toggleComponentInspectorEnabled(enabled: boolean): void;
+declare function getVueInspector(): Promise<VueInspector | null>;
 
 interface InspectorCustomState {
     _custom?: {
@@ -358,7 +359,7 @@ declare class DevToolsPluginApi {
     highlightElement(instance: any): void;
     unhighlightElement(): void;
     getComponentInstances(app: any): Promise<any[]>;
-    getVueInspector(): Promise<VueInspector>;
+    getVueInspector(): Promise<VueInspector | null>;
     visitComponentTree(payload: Parameters<DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]>[0]): void;
     addTimelineLayer(payload: {
         id: string;
@@ -622,4 +623,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, vueBuiltins };
+export { type AddInspectorApiPayload, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, ESC, INFINITY, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, MAX_ARRAY_SIZE, MAX_STRING_SIZE, type ModuleIframeView, type ModuleVNodeView, type ModuleView, NAN, NEGATIVE_INFINITY, type OpenInEditorOptions, type PropPath, type RouterInfo, RouterKey, type ScrollToComponentOptions, type TimelineEvent, type TimelineEventData, type ToggleComponentInspectorOptions, UNDEFINED, type VueInspector, addCustomCommand, addCustomTab, devtools, devtoolsRouterInfo, fnTypeRE, formatInspectorStateValue, getInspectorStateValueType, getRawValue, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, toEdit, toSubmit, toggleComponentInspectorEnabled, vueBuiltins };

package/dist/{index.mjs → index.js}

@@ -1628,10 +1628,10 @@ function createDevToolsHook() {
     apps: {},
     events: /* @__PURE__ */ new Map(),
     on(event, fn) {
-      var _a8;
+      var _a9;
       if (!this.events.has(event))
         this.events.set(event, []);
-      (_a8 = this.events.get(event)) == null ? void 0 : _a8.push(fn);
+      (_a9 = this.events.get(event)) == null ? void 0 : _a9.push(fn);
       return () => this.off(event, fn);
     },
     once(event, fn) {
@@ -1659,14 +1659,14 @@ function createDevToolsHook() {
 function subscribeDevToolsHook() {
   const hook2 = target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
   hook2.on(DevToolsHooks.APP_INIT, (app, version) => {
-    var _a8, _b8, _c;
-    if ((_c = (_b8 = (_a8 = app == null ? void 0 : app._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+    var _a9, _b9, _c;
+    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
       return;
     devtoolsHooks.callHook(DevToolsHooks.APP_INIT, app, version);
   });
   hook2.on(DevToolsHooks.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
-    var _a8, _b8, _c;
-    if ((_c = (_b8 = (_a8 = app == null ? void 0 : app._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+    var _a9, _b9, _c;
+    if ((_c = (_b9 = (_a9 = app == null ? void 0 : app._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
       return;
     if (!app || typeof uid !== "number" && !uid || !component)
       return;
@@ -1740,8 +1740,8 @@ function normalizeRouterInfo(appRecord) {
     return route;
   }
   function init() {
-    var _a8;
-    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
+    var _a9;
+    const router = (_a9 = appRecord.app) == null ? void 0 : _a9.config.globalProperties.$router;
     const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
     const routes = filterRoutes(getRoutes(router));
     const c = console.warn;
@@ -1803,14 +1803,14 @@ var devtoolsState = new Proxy(global2[StateKey], {
     return global2[StateKey][property];
   },
   set(target8, property, value) {
-    var _a8;
+    var _a9;
     const oldState = { ...global2[StateKey] };
     target8[property] = value;
     global2[StateKey][property] = value;
     if (property === "activeAppRecord") {
       global2[ContextKey].appRecord = value;
       global2[ContextKey].api = value.api;
-      global2[ContextKey].inspector = (_a8 = value.inspector) != null ? _a8 : [];
+      global2[ContextKey].inspector = (_a9 = value.inspector) != null ? _a9 : [];
       normalizeRouterInfo(value);
       global2[ContextKey].routerInfo = devtoolsRouterInfo;
     }
@@ -1988,21 +1988,21 @@ async function getComponentId(options) {
   }
 }
 function isFragment(instance) {
-  var _a8;
-  const subTreeType = (_a8 = instance.subTree) == null ? void 0 : _a8.type;
+  var _a9;
+  const subTreeType = (_a9 = instance.subTree) == null ? void 0 : _a9.type;
   return subTreeType === Fragment;
 }
 function isBeingDestroyed(instance) {
   return instance._isBeingDestroyed || instance.isUnmounted;
 }
 function getInstanceName(instance) {
-  var _a8, _b8, _c;
+  var _a9, _b9, _c;
   const name = getComponentTypeName(instance.type || {});
   if (name)
     return name;
   if (instance.root === instance)
     return "Root";
-  for (const key in (_b8 = (_a8 = instance.parent) == null ? void 0 : _a8.type) == null ? void 0 : _b8.components) {
+  for (const key in (_b9 = (_a9 = instance.parent) == null ? void 0 : _a9.type) == null ? void 0 : _b9.components) {
     if (instance.parent.type.components[key] === instance.type)
       return saveComponentGussedName(instance, key);
   }
@@ -2016,8 +2016,8 @@ function getInstanceName(instance) {
   return "Anonymous Component";
 }
 function getUniqueComponentId(instance) {
-  var _a8, _b8, _c;
-  const appId = (_c = (_b8 = (_a8 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a8.app) == null ? void 0 : _b8.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
+  var _a9, _b9, _c;
+  const appId = (_c = (_b9 = (_a9 = instance == null ? void 0 : instance.appContext) == null ? void 0 : _a9.app) == null ? void 0 : _b9.__VUE_DEVTOOLS_APP_RECORD_ID__) != null ? _c : 0;
   const instanceId = instance === instance.root ? "root" : instance.uid;
   return `${appId}:${instanceId}`;
 }
@@ -2221,7 +2221,7 @@ function getStateTypeAndName(info) {
 function processSetupState(instance) {
   const raw = instance.devtoolsRawSetupState || {};
   return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
-    var _a8, _b8, _c, _d;
+    var _a9, _b9, _c, _d;
     const value = returnError(() => toRaw(instance.setupState[key]));
     const rawData = raw[key];
     let result;
@@ -2230,7 +2230,7 @@ function processSetupState(instance) {
       const info = getSetupStateType(rawData);
       const { stateType, stateTypeName } = getStateTypeAndName(info);
       const isState = info.ref || info.computed || info.reactive;
-      const raw2 = ((_b8 = (_a8 = rawData.effect) == null ? void 0 : _a8.raw) == null ? void 0 : _b8.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+      const raw2 = ((_b9 = (_a9 = rawData.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = rawData.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
       if (stateType)
         isOtherType = false;
       result = {
@@ -2260,8 +2260,8 @@ function processComputed(instance, mergedType) {
       type: type2,
       key,
       value: returnError(() => {
-        var _a8;
-        return (_a8 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a8[key];
+        var _a9;
+        return (_a9 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a9[key];
       }),
       editable: typeof def.set === "function"
     });
@@ -2323,10 +2323,10 @@ function processRefs(instance) {
   }));
 }
 function processEventListeners(instance) {
-  var _a8;
+  var _a9;
   const emitsDefinition = instance.type.emits;
   const declaredEmits = Array.isArray(emitsDefinition) ? emitsDefinition : Object.keys(emitsDefinition != null ? emitsDefinition : {});
-  const keys = Object.keys((_a8 = instance.vnode.props) != null ? _a8 : {});
+  const keys = Object.keys((_a9 = instance.vnode.props) != null ? _a9 : {});
   const result = [];
   for (const key of keys) {
     const [prefix, ...eventNameParts] = key.split(/(?=[A-Z])/);
@@ -2547,13 +2547,13 @@ function getHTMLElementDetails(value) {
   }
 }
 function getObjectDetails(object) {
-  var _a8, _b8, _c, _d;
+  var _a9, _b9, _c, _d;
   const info = getSetupStateType(object);
   const isState = info.ref || info.computed || info.reactive;
   if (isState) {
     const stateTypeName = info.computed ? "Computed" : info.ref ? "Ref" : info.reactive ? "Reactive" : null;
     const value = toRaw(info.reactive ? object : object._value);
-    const raw = ((_b8 = (_a8 = object.effect) == null ? void 0 : _a8.raw) == null ? void 0 : _b8.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
+    const raw = ((_b9 = (_a9 = object.effect) == null ? void 0 : _a9.raw) == null ? void 0 : _b9.toString()) || ((_d = (_c = object.effect) == null ? void 0 : _c.fn) == null ? void 0 : _d.toString());
     return {
       _custom: {
         type: stateTypeName == null ? void 0 : stateTypeName.toLowerCase(),
@@ -2575,7 +2575,7 @@ function getObjectDetails(object) {
 
 // src/core/component/state/replacer.ts
 function stringifyReplacer(key) {
-  var _a8;
+  var _a9;
   if (key === "compilerOptions")
     return;
   const val = this[key];
@@ -2631,7 +2631,7 @@ function stringifyReplacer(key) {
       return `[native VNode <${val.tag}>]`;
     } else if (typeof HTMLElement !== "undefined" && val instanceof HTMLElement) {
       return getHTMLElementDetails(val);
-    } else if (((_a8 = val.constructor) == null ? void 0 : _a8.name) === "Store" && val._wrappedGetters) {
+    } else if (((_a9 = val.constructor) == null ? void 0 : _a9.name) === "Store" && val._wrappedGetters) {
       return "[object Store]";
     } else if (val.currentRoute) {
       return "[object Router]";
@@ -2667,7 +2667,7 @@ function reviveMap(val) {
   return result;
 }
 function revive(val) {
-  var _a8;
+  var _a9;
   if (val === UNDEFINED) {
     return void 0;
   } else if (val === INFINITY) {
@@ -2679,7 +2679,7 @@ function revive(val) {
   } else if (val && val._custom) {
     const { _custom: custom } = val;
     if (custom.type === "component")
-      return (_a8 = devtoolsContext.appRecord) == null ? void 0 : _a8.instanceMap.get(custom.id);
+      return (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.instanceMap.get(custom.id);
     else if (custom.type === "map")
       return reviveMap(val);
     else if (custom.type === "set")
@@ -2841,7 +2841,7 @@ function getInspectorStateValueType(value, raw = true) {
   }
 }
 function formatInspectorStateValue(value, quotes = false) {
-  var _a8, _b8;
+  var _a9, _b9;
   let result;
   const type = getInspectorStateValueType(value, false);
   if (type !== "custom" && (value == null ? void 0 : value._custom))
@@ -2849,14 +2849,14 @@ function formatInspectorStateValue(value, quotes = false) {
   if (result = internalStateTokenToString(value)) {
     return result;
   } else if (type === "custom") {
-    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._custom) && formatInspectorStateValue(value._custom.value);
+    const nestedName = ((_a9 = value._custom.value) == null ? void 0 : _a9._custom) && formatInspectorStateValue(value._custom.value);
     return nestedName || value._custom.displayText || value._custom.display;
   } else if (type === "array") {
     return `Array[${value.length}]`;
   } else if (type === "plain-object") {
     return `Object${Object.keys(value).length ? "" : " (empty)"}`;
   } else if (type == null ? void 0 : type.includes("native")) {
-    return escape((_b8 = specialTypeRE.exec(value)) == null ? void 0 : _b8[2]);
+    return escape((_b9 = specialTypeRE.exec(value)) == null ? void 0 : _b9[2]);
   } else if (typeof value === "string") {
     const typeMatch = value.match(rawTypeRE);
     if (typeMatch)
@@ -2870,14 +2870,14 @@ function formatInspectorStateValue(value, quotes = false) {
   return value;
 }
 function getRawValue(value) {
-  var _a8, _b8;
+  var _a9, _b9;
   const isCustom = getInspectorStateValueType(value) === "custom";
   let inherit = {};
   if (isCustom) {
     const data = value;
-    const customValue = (_a8 = data._custom) == null ? void 0 : _a8.value;
+    const customValue = (_a9 = data._custom) == null ? void 0 : _a9.value;
     const nestedCustom = typeof customValue === "object" && customValue !== null && "_custom" in customValue ? getRawValue(customValue) : { inherit: void 0, value: void 0 };
-    inherit = nestedCustom.inherit || ((_b8 = data._custom) == null ? void 0 : _b8.fields) || {};
+    inherit = nestedCustom.inherit || ((_b9 = data._custom) == null ? void 0 : _b9.fields) || {};
     value = nestedCustom.value || customValue;
   }
   if (value && value._isArray)
@@ -2896,7 +2896,7 @@ function stringify(data) {
   return stringifyCircularAutoChunks(data, stringifyReplacer);
 }
 function parse(data, revive2 = false) {
-  if (!data)
+  if (data == void 0)
     return {};
   return revive2 ? parseCircularAutoChunks(data, reviver) : parseCircularAutoChunks(data);
 }
@@ -3103,8 +3103,8 @@ async function registerPlugin(options) {
     setupFn(api);
   });
   devtoolsState.appRecords = devtoolsState.appRecords.map((record) => {
-    var _a8, _b8;
-    const globalProperties = (_b8 = (_a8 = record.app) == null ? void 0 : _a8.config) == null ? void 0 : _b8.globalProperties;
+    var _a9, _b9;
+    const globalProperties = (_b9 = (_a9 = record.app) == null ? void 0 : _a9.config) == null ? void 0 : _b9.globalProperties;
     if (!globalProperties)
       return record;
     return {
@@ -3212,7 +3212,7 @@ var ComponentWalker = class {
    * @return {object}
    */
   async capture(instance, depth) {
-    var _a8;
+    var _a9;
     if (!instance)
       return null;
     const id = this.captureId(instance);
@@ -3267,7 +3267,7 @@ var ComponentWalker = class {
     } else {
       treeNode.domOrder = [-1];
     }
-    if ((_a8 = instance.suspense) == null ? void 0 : _a8.suspenseKey) {
+    if ((_a9 = instance.suspense) == null ? void 0 : _a9.suspenseKey) {
       treeNode.tags.push({
         label: instance.suspense.suspenseKey,
         backgroundColor: 14979812,
@@ -3292,8 +3292,8 @@ var ComponentWalker = class {
    * @return {Vue|Array}
    */
   async findQualifiedChildren(instance, depth) {
-    var _a8;
-    if (this.componentFilter.isQualified(instance) && !((_a8 = instance.type.devtools) == null ? void 0 : _a8.hide)) {
+    var _a9;
+    if (this.componentFilter.isQualified(instance) && !((_a9 = instance.type.devtools) == null ? void 0 : _a9.hide)) {
       return [await this.capture(instance, depth)];
     } else if (instance.subTree) {
       const list = this.isKeepAlive(instance) ? this.getKeepAliveCachedInstances(instance) : this.getInternalInstanceChildren(instance.subTree);
@@ -3313,8 +3313,8 @@ var ComponentWalker = class {
    */
   async findQualifiedChildrenFromList(instances, depth) {
     instances = instances.filter((child) => {
-      var _a8;
-      return !isBeingDestroyed(child) && !((_a8 = child.type.devtools) == null ? void 0 : _a8.hide);
+      var _a9;
+      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
     if (!this.componentFilter.filter)
       return Promise.all(instances.map((child) => this.capture(child, depth)));
@@ -3342,8 +3342,8 @@ var ComponentWalker = class {
       }
     }
     return list.filter((child) => {
-      var _a8;
-      return !isBeingDestroyed(child) && !((_a8 = child.type.devtools) == null ? void 0 : _a8.hide);
+      var _a9;
+      return !isBeingDestroyed(child) && !((_a9 = child.type.devtools) == null ? void 0 : _a9.hide);
     });
   }
   /**
@@ -3367,11 +3367,11 @@ var ComponentWalker = class {
 // src/core/component/state/index.ts
 init_esm_shims();
 function getInstanceState(params) {
-  var _a8;
+  var _a9;
   const instance = getComponentInstance(devtoolsContext.appRecord, params.instanceId);
   const id = getUniqueComponentId(instance);
   const name = getInstanceName(instance);
-  const file = (_a8 = instance == null ? void 0 : instance.type) == null ? void 0 : _a8.__file;
+  const file = (_a9 = instance == null ? void 0 : instance.type) == null ? void 0 : _a9.__file;
   const state = processInstanceState(instance);
   return {
     id,
@@ -3561,13 +3561,13 @@ function registerComponentsDevTools(app) {
       }
     });
     api.on.getInspectorState(async (payload) => {
-      var _a8;
+      var _a9;
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const result = getInstanceState({
           instanceId: payload.nodeId
         });
         const componentInstance = result.instance;
-        const app2 = (_a8 = result.instance) == null ? void 0 : _a8.appContext.app;
+        const app2 = (_a9 = result.instance) == null ? void 0 : _a9.appContext.app;
         const _payload = {
           componentInstance,
           app: app2,
@@ -3592,8 +3592,8 @@ function registerComponentsDevTools(app) {
       api.sendInspectorState(INSPECTOR_ID);
     }, 120);
     const componentAddedCleanup = hook.on.componentAdded(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3614,8 +3614,8 @@ function registerComponentsDevTools(app) {
       debounceSendInspectorTree();
     });
     const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3637,8 +3637,8 @@ function registerComponentsDevTools(app) {
       debounceSendInspectorState();
     });
     const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
-      var _a8, _b8, _c;
-      if ((_c = (_b8 = (_a8 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a8.type) == null ? void 0 : _b8.devtools) == null ? void 0 : _c.hide)
+      var _a9, _b9, _c;
+      if ((_c = (_b9 = (_a9 = app2 == null ? void 0 : app2._instance) == null ? void 0 : _a9.type) == null ? void 0 : _b9.devtools) == null ? void 0 : _c.hide)
         return;
       if (!app2 || typeof uid !== "number" && !uid || !component)
         return;
@@ -3713,6 +3713,11 @@ function removeCustomCommand(actionId) {
 // src/core/vue-inspector/index.ts
 init_esm_shims();
 import { target as target5 } from "@vue/devtools-shared";
+var _a7, _b7;
+(_b7 = (_a7 = target5).__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__) != null ? _b7 : _a7.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = true;
+function toggleComponentInspectorEnabled(enabled) {
+  target5.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__ = enabled;
+}
 function waitForInspectorInit(cb) {
   let total = 0;
   const timer = setInterval(() => {
@@ -3736,6 +3741,8 @@ function setupInspector() {
 }
 function getVueInspector() {
   return new Promise((resolve) => {
+    if (!target5.__VUE_DEVTOOLS_COMPONENT_INSPECTOR_ENABLED__)
+      resolve(null);
     function setup() {
       setupInspector();
       resolve(target5.__VUE_INSPECTOR__);
@@ -3787,7 +3794,7 @@ var indicatorStyles = {
   fontSize: "12px",
   opacity: 0.7
 };
-function getCotainerElement() {
+function getContainerElement() {
   return document.getElementById(CONTAINER_ELEMENT_ID);
 }
 function getCardElement() {
@@ -3808,9 +3815,9 @@ function getStyles(bounds) {
   };
 }
 function create(options) {
-  var _a8;
+  var _a9;
   const containerEl = document.createElement("div");
-  containerEl.id = (_a8 = options.elementId) != null ? _a8 : CONTAINER_ELEMENT_ID;
+  containerEl.id = (_a9 = options.elementId) != null ? _a9 : CONTAINER_ELEMENT_ID;
   Object.assign(containerEl.style, {
     ...containerStyles,
     ...getStyles(options.bounds),
@@ -3836,7 +3843,7 @@ function create(options) {
   return containerEl;
 }
 function update(options) {
-  const containerEl = getCotainerElement();
+  const containerEl = getContainerElement();
   const cardEl = getCardElement();
   const nameEl = getNameElement();
   const indicatorEl = getIndicatorElement();
@@ -3857,11 +3864,11 @@ function toggleComponentInspector(options) {
     const instance = getComponentInstance(devtoolsContext.appRecord, options.id);
     if (instance && (options.bounds.width || options.bounds.height)) {
       const name = getInstanceName(instance);
-      const el = getCotainerElement();
+      const el = getContainerElement();
       el ? update({ ...options, name }) : create({ ...options, name });
     }
   } else {
-    const el = getCotainerElement();
+    const el = getContainerElement();
     if (el)
       el.style.display = "none";
   }
@@ -3869,11 +3876,11 @@ function toggleComponentInspector(options) {
 function highlight(instance) {
   const bounds = getComponentBoundingRect(instance);
   const name = getInstanceName(instance);
-  const container = getCotainerElement();
+  const container = getContainerElement();
   container ? update({ bounds, name }) : create({ bounds, name });
 }
 function unhighlight() {
-  const el = getCotainerElement();
+  const el = getContainerElement();
   if (el)
     el.style.display = "none";
 }
@@ -3888,18 +3895,18 @@ function inspectFn(e) {
       if (el) {
         const bounds = getComponentBoundingRect(instance);
         const name = getInstanceName(instance);
-        const container = getCotainerElement();
+        const container = getContainerElement();
         container ? update({ bounds, name }) : create({ bounds, name });
       }
     }
   }
 }
 function selectComponentFn(e, cb) {
-  var _a8;
+  var _a9;
   e.preventDefault();
   e.stopPropagation();
   if (inspectInstance) {
-    const app = (_a8 = devtoolsContext.appRecord) == null ? void 0 : _a8.app;
+    const app = (_a9 = devtoolsContext.appRecord) == null ? void 0 : _a9.app;
     getComponentId({
       app,
       uid: app.uid,
@@ -3918,7 +3925,7 @@ function inspectComponentInspector() {
       selectComponentFn(e, (id) => {
         window.removeEventListener("click", onSelect);
         window.removeEventListener("mouseover", inspectFn);
-        const el = getCotainerElement();
+        const el = getContainerElement();
         if (el)
           el.style.display = "none";
         resolve(JSON.stringify({ id }));
@@ -3955,7 +3962,7 @@ function scrollToComponent(options) {
       const bounds = getComponentBoundingRect(instance);
       if (bounds.width || bounds.height) {
         const name = getInstanceName(instance);
-        const el2 = getCotainerElement();
+        const el2 = getContainerElement();
         el2 ? update({ ...options, name, bounds }) : create({ ...options, name, bounds });
         setTimeout(() => {
           if (el2)
@@ -4090,12 +4097,12 @@ var DevToolsPluginApi = class {
     removeCustomCommand(actionId);
   }
   addInspector(payload) {
-    var _a8;
+    var _a9;
     addInspector({
       id: payload.id,
       nodeId: "",
       filter: "",
-      treeFilterPlaceholder: (_a8 = payload.treeFilterPlaceholder) != null ? _a8 : ""
+      treeFilterPlaceholder: (_a9 = payload.treeFilterPlaceholder) != null ? _a9 : ""
     });
   }
   openInEditor(payload) {
@@ -4139,20 +4146,20 @@ var DevToolsPluginApi = class {
 init_esm_shims();
 var import_speakingurl = __toESM(require_speakingurl2(), 1);
 import { target as target6 } from "@vue/devtools-shared";
-var _a7, _b7;
-var appRecordInfo = (_b7 = (_a7 = target6).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b7 : _a7.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
+var _a8, _b8;
+var appRecordInfo = (_b8 = (_a8 = target6).__VUE_DEVTOOLS_APP_RECROD_INFO__) != null ? _b8 : _a8.__VUE_DEVTOOLS_APP_RECROD_INFO__ = {
   id: 0,
   appIds: /* @__PURE__ */ new Set()
 };
 function getAppRecordName(app, fallbackName) {
-  var _a8;
-  return ((_a8 = app == null ? void 0 : app._component) == null ? void 0 : _a8.name) || `App ${fallbackName}`;
+  var _a9;
+  return ((_a9 = app == null ? void 0 : app._component) == null ? void 0 : _a9.name) || `App ${fallbackName}`;
 }
 function getAppRootInstance(app) {
-  var _a8, _b8, _c, _d;
+  var _a9, _b9, _c, _d;
   if (app._instance)
     return app._instance;
-  else if ((_b8 = (_a8 = app._container) == null ? void 0 : _a8._vnode) == null ? void 0 : _b8.component)
+  else if ((_b9 = (_a9 = app._container) == null ? void 0 : _a9._vnode) == null ? void 0 : _b9.component)
     return (_d = (_c = app._container) == null ? void 0 : _c._vnode) == null ? void 0 : _d.component;
 }
 function getAppRecordId(app, defaultId) {
@@ -4193,23 +4200,23 @@ function createAppRecord(app) {
 
 // src/core/general/index.ts
 function initDevTools() {
-  var _a8, _b8, _c;
+  var _a9, _b9, _c;
   devtoolsState.vitePluginDetected = !!target7.__VUE_DEVTOOLS_VITE_PLUGIN_DETECTED__;
-  const isNewDevTools = ((_a8 = target7.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a8.id) === "vue-devtools-next";
+  const isNewDevTools = ((_a9 = target7.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a9.id) === "vue-devtools-next";
   if (target7.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isNewDevTools)
     return;
   if (target7.__VUE_DEVTOOLS_GLOBAL_HOOK__)
     Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
   else
     target7.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  (_c = (_b8 = target7).__VUE_DEVTOOLS_APP_RECORDS__) != null ? _c : _b8.__VUE_DEVTOOLS_APP_RECORDS__ = [];
+  (_c = (_b9 = target7).__VUE_DEVTOOLS_APP_RECORDS__) != null ? _c : _b9.__VUE_DEVTOOLS_APP_RECORDS__ = [];
   hook.on.setupDevtoolsPlugin(collectRegisteredPlugin);
   hook.on.vueAppInit(async (app, version) => {
-    var _a9;
+    var _a10;
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();
     devtoolsState.appRecords = [
-      ...(_a9 = devtoolsState.appRecords) != null ? _a9 : [],
+      ...(_a10 = devtoolsState.appRecords) != null ? _a10 : [],
       {
         ...record,
         app,
@@ -4293,5 +4300,6 @@ export {
   symbolRE,
   toEdit,
   toSubmit,
+  toggleComponentInspectorEnabled,
   vueBuiltins
 };

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.13",
+  "version": "7.0.14",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
   "files": [
     "dist"
   ],
@@ -21,8 +20,8 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-schema": "^7.0.13",
-    "@vue/devtools-shared": "^7.0.13"
+    "@vue/devtools-schema": "^7.0.14",
+    "@vue/devtools-shared": "^7.0.14"
   },
   "devDependencies": {
     "vue": "^3.4.15",