@vue/devtools-kit 7.0.3 → 7.0.5

package/dist/index.cjs

@@ -1594,6 +1594,7 @@ __export(src_exports, {
   fnTypeRE: () => fnTypeRE,
   formatInspectorStateValue: () => formatInspectorStateValue,
   getInspectorStateValueType: () => getInspectorStateValueType,
+  getRawValue: () => getRawValue,
   now: () => now,
   onDevToolsClientConnected: () => onDevToolsClientConnected,
   onDevToolsConnected: () => onDevToolsConnected,
@@ -1886,7 +1887,7 @@ init_cjs_shims();
 
 // src/core/component/state/constants.ts
 init_cjs_shims();
-var vueBuiltins = [
+var vueBuiltins = /* @__PURE__ */ new Set([
   "nextTick",
   "defineComponent",
   "defineAsyncComponent",
@@ -1938,7 +1939,7 @@ var vueBuiltins = [
   "resolveDirective",
   "withDirectives",
   "withModifiers"
-];
+]);
 var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
 var rawTypeRE = /^\[object (\w+)]$/;
 var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
@@ -2088,6 +2089,19 @@ function formatInspectorStateValue(value, quotes = false) {
   }
   return value;
 }
+function getRawValue(value) {
+  var _a8, _b8;
+  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;
+  }
+  if (value && value._isArray)
+    value = value.items;
+  return { value, inherit };
+}
 
 // src/core/component/state/replacer.ts
 init_cjs_shims();
@@ -2276,7 +2290,7 @@ function getStateTypeAndName(info) {
 }
 function processSetupState(instance) {
   const raw = instance.devtoolsRawSetupState || {};
-  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.includes(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
+  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
     var _a8, _b8, _c, _d;
     const value = returnError(() => toRaw(instance.setupState[key]));
     const rawData = raw[key];
@@ -3048,6 +3062,7 @@ init_cjs_shims();
 
 // src/core/plugins/components.ts
 init_cjs_shims();
+var import_perfect_debounce3 = require("perfect-debounce");
 
 // src/api/plugin.ts
 init_cjs_shims();
@@ -3059,6 +3074,9 @@ async function registerPlugin(options) {
   const { app, api } = options;
   const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app);
   plugins.forEach(async ([plugin, setupFn]) => {
+    if (plugin.packageName === "vue-query") {
+      return;
+    }
     const appRecord = await getAppRecord(plugin.app);
     if (plugin.packageName === "vue-router") {
       const id = getRouterDevToolsId(`${plugin.id}`);
@@ -3551,6 +3569,12 @@ function registerComponentsDevTools(app) {
         await api.sendInspectorState("components");
       }
     });
+    const debounceSendInspectorTree = (0, import_perfect_debounce3.debounce)(() => {
+      api.sendInspectorTree(INSPECTOR_ID);
+    }, 120);
+    const debounceSendInspectorState = (0, import_perfect_debounce3.debounce)(() => {
+      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)
@@ -3571,7 +3595,7 @@ function registerComponentsDevTools(app) {
       }
       if (!appRecord)
         return;
-      api.sendInspectorTree(INSPECTOR_ID);
+      debounceSendInspectorTree();
     });
     const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
       var _a8, _b8, _c;
@@ -3593,8 +3617,8 @@ function registerComponentsDevTools(app) {
       }
       if (!appRecord)
         return;
-      api.sendInspectorTree(INSPECTOR_ID);
-      api.sendInspectorState(INSPECTOR_ID);
+      debounceSendInspectorTree();
+      debounceSendInspectorState();
     });
     const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
       var _a8, _b8, _c;
@@ -3611,7 +3635,7 @@ function registerComponentsDevTools(app) {
         instance: component
       });
       appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
-      api.sendInspectorTree(INSPECTOR_ID);
+      debounceSendInspectorTree();
     });
     devtoolsContext.componentPluginHookBuffer = [
       componentAddedCleanup,
@@ -4218,6 +4242,7 @@ var devtools = {
   fnTypeRE,
   formatInspectorStateValue,
   getInspectorStateValueType,
+  getRawValue,
   now,
   onDevToolsClientConnected,
   onDevToolsConnected,

package/dist/index.d.cts

@@ -377,13 +377,17 @@ 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 stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;
 
 declare function now(): number;
 
-declare const vueBuiltins: string[];
+declare const vueBuiltins: Set<string>;
 declare const symbolRE: RegExp;
 declare const rawTypeRE: RegExp;
 declare const specialTypeRE: RegExp;
@@ -616,4 +620,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, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, 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, vueBuiltins };

package/dist/index.d.ts

@@ -377,13 +377,17 @@ 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 stringify<T extends object = Record<string, unknown>>(data: T): string | string[];
 declare function parse(data: string, revive?: boolean): any;
 
 declare function now(): number;
 
-declare const vueBuiltins: string[];
+declare const vueBuiltins: Set<string>;
 declare const symbolRE: RegExp;
 declare const rawTypeRE: RegExp;
 declare const specialTypeRE: RegExp;
@@ -616,4 +620,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, getRouterDevToolsId, getVueInspector, normalizeRouterInfo, now, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, rawTypeRE, removeCustomCommand, setupDevToolsPlugin, specialTypeRE, stringify, symbolRE, 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, vueBuiltins };

package/dist/index.mjs

@@ -1852,7 +1852,7 @@ init_esm_shims();
 
 // src/core/component/state/constants.ts
 init_esm_shims();
-var vueBuiltins = [
+var vueBuiltins = /* @__PURE__ */ new Set([
   "nextTick",
   "defineComponent",
   "defineAsyncComponent",
@@ -1904,7 +1904,7 @@ var vueBuiltins = [
   "resolveDirective",
   "withDirectives",
   "withModifiers"
-];
+]);
 var symbolRE = /^\[native Symbol Symbol\((.*)\)\]$/;
 var rawTypeRE = /^\[object (\w+)]$/;
 var specialTypeRE = /^\[native (\w+) (.*?)(<>((.|\s)*))?\]$/;
@@ -2054,6 +2054,19 @@ function formatInspectorStateValue(value, quotes = false) {
   }
   return value;
 }
+function getRawValue(value) {
+  var _a8, _b8;
+  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;
+  }
+  if (value && value._isArray)
+    value = value.items;
+  return { value, inherit };
+}
 
 // src/core/component/state/replacer.ts
 init_esm_shims();
@@ -2242,7 +2255,7 @@ function getStateTypeAndName(info) {
 }
 function processSetupState(instance) {
   const raw = instance.devtoolsRawSetupState || {};
-  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.includes(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
+  return Object.keys(instance.setupState).filter((key) => !vueBuiltins.has(key) && key.split(/(?=[A-Z])/)[0] !== "use").map((key) => {
     var _a8, _b8, _c, _d;
     const value = returnError(() => toRaw(instance.setupState[key]));
     const rawData = raw[key];
@@ -3014,6 +3027,7 @@ init_esm_shims();
 
 // src/core/plugins/components.ts
 init_esm_shims();
+import { debounce as debounce3 } from "perfect-debounce";
 
 // src/api/plugin.ts
 init_esm_shims();
@@ -3025,6 +3039,9 @@ async function registerPlugin(options) {
   const { app, api } = options;
   const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app);
   plugins.forEach(async ([plugin, setupFn]) => {
+    if (plugin.packageName === "vue-query") {
+      return;
+    }
     const appRecord = await getAppRecord(plugin.app);
     if (plugin.packageName === "vue-router") {
       const id = getRouterDevToolsId(`${plugin.id}`);
@@ -3517,6 +3534,12 @@ function registerComponentsDevTools(app) {
         await api.sendInspectorState("components");
       }
     });
+    const debounceSendInspectorTree = debounce3(() => {
+      api.sendInspectorTree(INSPECTOR_ID);
+    }, 120);
+    const debounceSendInspectorState = debounce3(() => {
+      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)
@@ -3537,7 +3560,7 @@ function registerComponentsDevTools(app) {
       }
       if (!appRecord)
         return;
-      api.sendInspectorTree(INSPECTOR_ID);
+      debounceSendInspectorTree();
     });
     const componentUpdatedCleanup = hook.on.componentUpdated(async (app2, uid, parentUid, component) => {
       var _a8, _b8, _c;
@@ -3559,8 +3582,8 @@ function registerComponentsDevTools(app) {
       }
       if (!appRecord)
         return;
-      api.sendInspectorTree(INSPECTOR_ID);
-      api.sendInspectorState(INSPECTOR_ID);
+      debounceSendInspectorTree();
+      debounceSendInspectorState();
     });
     const componentRemovedCleanup = hook.on.componentRemoved(async (app2, uid, parentUid, component) => {
       var _a8, _b8, _c;
@@ -3577,7 +3600,7 @@ function registerComponentsDevTools(app) {
         instance: component
       });
       appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
-      api.sendInspectorTree(INSPECTOR_ID);
+      debounceSendInspectorTree();
     });
     devtoolsContext.componentPluginHookBuffer = [
       componentAddedCleanup,
@@ -4183,6 +4206,7 @@ export {
   fnTypeRE,
   formatInspectorStateValue,
   getInspectorStateValueType,
+  getRawValue,
   now,
   onDevToolsClientConnected,
   onDevToolsConnected,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.3",
+  "version": "7.0.5",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -21,11 +21,11 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-schema": "^7.0.3",
-    "@vue/devtools-shared": "^7.0.3"
+    "@vue/devtools-schema": "^7.0.5",
+    "@vue/devtools-shared": "^7.0.5"
   },
   "devDependencies": {
-    "vue": "^3.4.0",
+    "vue": "^3.4.4",
     "vue-router": "^4.2.5"
   },
   "scripts": {