@vue/devtools-kit 7.0.8 → 7.0.10

package/dist/index.cjs

@@ -1746,18 +1746,39 @@ function normalizeRouterInfo(appRecord) {
     const routesMap = /* @__PURE__ */ new Map();
     return ((router == null ? void 0 : router.getRoutes()) || []).filter((i) => !routesMap.has(i.path) && routesMap.set(i.path, 1));
   };
-  function init() {
-    var _a8;
-    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
-    const currentRoute = router == null ? void 0 : router.currentRoute.value;
-    const routes = getRoutes(router).map((item) => {
-      const { path, name, children } = item;
+  function filterRoutes(routes) {
+    return routes.map((item) => {
+      let { path, name, children } = item;
+      if (children == null ? void 0 : children.length)
+        children = filterRoutes(children);
       return {
         path,
         name,
         children
       };
     });
+  }
+  function filterCurrentRoute(route) {
+    if (route) {
+      const { fullPath, hash, href, path, name, matched, params, query } = route;
+      return {
+        fullPath,
+        hash,
+        href,
+        path,
+        name,
+        params,
+        query,
+        matched: filterRoutes(matched)
+      };
+    }
+    return route;
+  }
+  function init() {
+    var _a8;
+    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
+    const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
+    const routes = filterRoutes(getRoutes(router));
     const c = console.warn;
     console.warn = () => {
     };
@@ -2070,7 +2091,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 +2112,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 +3125,8 @@ async function registerPlugin(options) {
       ...record,
       moduleDetectives: {
         vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia
+        pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n
       }
     };
   });
@@ -3856,6 +3880,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;
@@ -4080,6 +4115,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

@@ -1711,18 +1711,39 @@ function normalizeRouterInfo(appRecord) {
     const routesMap = /* @__PURE__ */ new Map();
     return ((router == null ? void 0 : router.getRoutes()) || []).filter((i) => !routesMap.has(i.path) && routesMap.set(i.path, 1));
   };
-  function init() {
-    var _a8;
-    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
-    const currentRoute = router == null ? void 0 : router.currentRoute.value;
-    const routes = getRoutes(router).map((item) => {
-      const { path, name, children } = item;
+  function filterRoutes(routes) {
+    return routes.map((item) => {
+      let { path, name, children } = item;
+      if (children == null ? void 0 : children.length)
+        children = filterRoutes(children);
       return {
         path,
         name,
         children
       };
     });
+  }
+  function filterCurrentRoute(route) {
+    if (route) {
+      const { fullPath, hash, href, path, name, matched, params, query } = route;
+      return {
+        fullPath,
+        hash,
+        href,
+        path,
+        name,
+        params,
+        query,
+        matched: filterRoutes(matched)
+      };
+    }
+    return route;
+  }
+  function init() {
+    var _a8;
+    const router = (_a8 = appRecord.app) == null ? void 0 : _a8.config.globalProperties.$router;
+    const currentRoute = filterCurrentRoute(router == null ? void 0 : router.currentRoute.value);
+    const routes = filterRoutes(getRoutes(router));
     const c = console.warn;
     console.warn = () => {
     };
@@ -2035,7 +2056,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 +2077,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 +3090,8 @@ async function registerPlugin(options) {
       ...record,
       moduleDetectives: {
         vueRouter: !!globalProperties.$router,
-        pinia: !!globalProperties.$pinia
+        pinia: !!globalProperties.$pinia,
+        vueI18n: !!globalProperties.$i18n
       }
     };
   });
@@ -3821,6 +3845,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;
@@ -4045,6 +4080,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.8",
+  "version": "7.0.10",
   "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.8",
-    "@vue/devtools-shared": "^7.0.8"
+    "@vue/devtools-schema": "^7.0.10",
+    "@vue/devtools-shared": "^7.0.10"
   },
   "devDependencies": {
     "vue": "^3.4.4",