@vue/devtools-kit 7.0.7 → 7.0.9

package/dist/index.cjs

@@ -2070,7 +2070,8 @@ function formatInspectorStateValue(value, quotes = false) {
   if (result = internalStateTokenToString(value)) {
     return result;
   } else if (type === "custom") {
-    return (_a8 = value._custom.displayText) != null ? _a8 : value._custom.display;
+    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._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") {
@@ -2090,13 +2091,14 @@ function formatInspectorStateValue(value, quotes = false) {
   return value;
 }
 function getRawValue(value) {
-  var _a8, _b8;
+  var _a8, _b8, _c, _d;
   const isCustom = getInspectorStateValueType(value) === "custom";
   let inherit = {};
   if (isCustom) {
     const data = value;
-    inherit = ((_a8 = data._custom) == null ? void 0 : _a8.fields) || {};
-    value = (_b8 = data._custom) == null ? void 0 : _b8.value;
+    const nestedCustom = typeof ((_a8 = data._custom) == null ? void 0 : _a8.value) === "object" && "_custom" in data._custom.value ? getRawValue((_b8 = data._custom) == null ? void 0 : _b8.value) : { inherit: void 0, value: void 0 };
+    inherit = nestedCustom.inherit || ((_c = data._custom) == null ? void 0 : _c.fields) || {};
+    value = nestedCustom.value || ((_d = data._custom) == null ? void 0 : _d.value);
   }
   if (value && value._isArray)
     value = value.items;
@@ -3102,7 +3104,8 @@ async function registerPlugin(options) {
       ...record,
       moduleDetectives: {
         vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia
+        pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n
       }
     };
   });
@@ -3520,6 +3523,8 @@ function registerComponentsDevTools(app) {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
         if (instance) {
+          if (typeof DOMRect === "undefined")
+            return;
           payload.rect = getComponentBoundingRect(instance);
           if (payload.rect instanceof DOMRect) {
             payload.rect = {
@@ -3854,6 +3859,17 @@ function toggleComponentInspector(options) {
       el.style.display = "none";
   }
 }
+function highlight(instance) {
+  const bounds = getComponentBoundingRect(instance);
+  const name = getInstanceName(instance);
+  const container = getCotainerElement();
+  container ? update({ bounds, name }) : create({ bounds, name });
+}
+function unhighlight() {
+  const el = getCotainerElement();
+  if (el)
+    el.style.display = "none";
+}
 var inspectInstance = null;
 function inspectFn(e) {
   const target8 = e.target;
@@ -4078,6 +4094,18 @@ var DevToolsPluginApi = class {
   openInEditor(payload) {
     openInEditor(payload);
   }
+  highlightElement(instance) {
+    highlight(instance);
+  }
+  unhighlightElement() {
+    unhighlight();
+  }
+  async getComponentInstances(app) {
+    const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__;
+    const appId = appRecord.id.toString();
+    const instances = [...appRecord.instanceMap].filter(([key]) => key.split(":")[0] === appId).map(([, instance]) => instance);
+    return instances;
+  }
   // Vite only
   getVueInspector() {
     return getVueInspector();

package/dist/index.d.cts

@@ -42,7 +42,7 @@ interface InspectorCustomState {
         type?: string;
         displayText?: string;
         tooltipText?: string;
-        value?: string;
+        value?: string | InspectorCustomState;
         stateTypeName?: string;
         fields?: {
             abstract?: boolean;
@@ -51,7 +51,7 @@ interface InspectorCustomState {
 }
 interface InspectorState {
     key: string;
-    value: string | number | Record<string, unknown> | InspectorCustomState | Array<unknown>;
+    value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
     type: string;
     stateType?: string;
     stateTypeName?: string;
@@ -355,6 +355,9 @@ declare class DevToolsPluginApi {
     removeCustomCommand(actionId: CustomCommand['id']): void;
     addInspector(payload: AddInspectorApiPayload): void;
     openInEditor(payload: OpenInEditorOptions): void;
+    highlightElement(instance: any): void;
+    unhighlightElement(): void;
+    getComponentInstances(app: any): Promise<any[]>;
     getVueInspector(): Promise<VueInspector>;
     visitComponentTree(payload: Parameters<DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]>[0]): void;
     addTimelineLayer(payload: {
@@ -377,10 +380,7 @@ declare function addCustomTab(tab: CustomTab): void;
 
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
-declare function getRawValue(value: InspectorState['value']): {
-    value: string | number | Record<string, unknown> | unknown[] | InspectorCustomState;
-    inherit: {};
-};
+declare function getRawValue(value: InspectorState['value']): any;
 
 declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;

package/dist/index.d.ts

@@ -42,7 +42,7 @@ interface InspectorCustomState {
         type?: string;
         displayText?: string;
         tooltipText?: string;
-        value?: string;
+        value?: string | InspectorCustomState;
         stateTypeName?: string;
         fields?: {
             abstract?: boolean;
@@ -51,7 +51,7 @@ interface InspectorCustomState {
 }
 interface InspectorState {
     key: string;
-    value: string | number | Record<string, unknown> | InspectorCustomState | Array<unknown>;
+    value: string | number | boolean | null | Record<string, unknown> | InspectorCustomState | Array<unknown>;
     type: string;
     stateType?: string;
     stateTypeName?: string;
@@ -355,6 +355,9 @@ declare class DevToolsPluginApi {
     removeCustomCommand(actionId: CustomCommand['id']): void;
     addInspector(payload: AddInspectorApiPayload): void;
     openInEditor(payload: OpenInEditorOptions): void;
+    highlightElement(instance: any): void;
+    unhighlightElement(): void;
+    getComponentInstances(app: any): Promise<any[]>;
     getVueInspector(): Promise<VueInspector>;
     visitComponentTree(payload: Parameters<DevToolsEvent[DevToolsEvents.VISIT_COMPONENT_TREE]>[0]): void;
     addTimelineLayer(payload: {
@@ -377,10 +380,7 @@ declare function addCustomTab(tab: CustomTab): void;
 
 declare function getInspectorStateValueType(value: any, raw?: boolean): string;
 declare function formatInspectorStateValue(value: any, quotes?: boolean): any;
-declare function getRawValue(value: InspectorState['value']): {
-    value: string | number | Record<string, unknown> | unknown[] | InspectorCustomState;
-    inherit: {};
-};
+declare function getRawValue(value: InspectorState['value']): any;
 
 declare function stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;

package/dist/index.mjs

@@ -2035,7 +2035,8 @@ function formatInspectorStateValue(value, quotes = false) {
   if (result = internalStateTokenToString(value)) {
     return result;
   } else if (type === "custom") {
-    return (_a8 = value._custom.displayText) != null ? _a8 : value._custom.display;
+    const nestedName = ((_a8 = value._custom.value) == null ? void 0 : _a8._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") {
@@ -2055,13 +2056,14 @@ function formatInspectorStateValue(value, quotes = false) {
   return value;
 }
 function getRawValue(value) {
-  var _a8, _b8;
+  var _a8, _b8, _c, _d;
   const isCustom = getInspectorStateValueType(value) === "custom";
   let inherit = {};
   if (isCustom) {
     const data = value;
-    inherit = ((_a8 = data._custom) == null ? void 0 : _a8.fields) || {};
-    value = (_b8 = data._custom) == null ? void 0 : _b8.value;
+    const nestedCustom = typeof ((_a8 = data._custom) == null ? void 0 : _a8.value) === "object" && "_custom" in data._custom.value ? getRawValue((_b8 = data._custom) == null ? void 0 : _b8.value) : { inherit: void 0, value: void 0 };
+    inherit = nestedCustom.inherit || ((_c = data._custom) == null ? void 0 : _c.fields) || {};
+    value = nestedCustom.value || ((_d = data._custom) == null ? void 0 : _d.value);
   }
   if (value && value._isArray)
     value = value.items;
@@ -3067,7 +3069,8 @@ async function registerPlugin(options) {
       ...record,
       moduleDetectives: {
         vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia
+        pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n
       }
     };
   });
@@ -3485,6 +3488,8 @@ function registerComponentsDevTools(app) {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         const instance = getComponentInstance(devtoolsContext.appRecord, payload.instanceId);
         if (instance) {
+          if (typeof DOMRect === "undefined")
+            return;
           payload.rect = getComponentBoundingRect(instance);
           if (payload.rect instanceof DOMRect) {
             payload.rect = {
@@ -3819,6 +3824,17 @@ function toggleComponentInspector(options) {
       el.style.display = "none";
   }
 }
+function highlight(instance) {
+  const bounds = getComponentBoundingRect(instance);
+  const name = getInstanceName(instance);
+  const container = getCotainerElement();
+  container ? update({ bounds, name }) : create({ bounds, name });
+}
+function unhighlight() {
+  const el = getCotainerElement();
+  if (el)
+    el.style.display = "none";
+}
 var inspectInstance = null;
 function inspectFn(e) {
   const target8 = e.target;
@@ -4043,6 +4059,18 @@ var DevToolsPluginApi = class {
   openInEditor(payload) {
     openInEditor(payload);
   }
+  highlightElement(instance) {
+    highlight(instance);
+  }
+  unhighlightElement() {
+    unhighlight();
+  }
+  async getComponentInstances(app) {
+    const appRecord = app.__VUE_DEVTOOLS_APP_RECORD__;
+    const appId = appRecord.id.toString();
+    const instances = [...appRecord.instanceMap].filter(([key]) => key.split(":")[0] === appId).map(([, instance]) => instance);
+    return instances;
+  }
   // Vite only
   getVueInspector() {
     return getVueInspector();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.7",
+  "version": "7.0.9",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -21,8 +21,8 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-schema": "^7.0.7",
-    "@vue/devtools-shared": "^7.0.7"
+    "@vue/devtools-shared": "^7.0.9",
+    "@vue/devtools-schema": "^7.0.9"
   },
   "devDependencies": {
     "vue": "^3.4.4",