@vue/devtools-kit 7.0.15 → 7.0.16

package/dist/index.cjs

@@ -1846,23 +1846,26 @@ function collectDevToolsPlugin(pluginDescriptor, setupFn) {
 function setupDevToolsPlugin(pluginDescriptor, setupFn) {
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn);
 }
-function registerPlugin(app, api) {
-  const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app);
-  plugins.forEach(async ([plugin, setupFn]) => {
-    if (plugin.packageName === "vue-query") {
-      return;
-    }
-    if (plugin.packageName === "vue-router") {
-      const id = getRouterDevToolsId(`${plugin.id}`);
-      if (plugin.app === app) {
-        devtoolsAppRecords.value = devtoolsAppRecords.value.map((item) => ({
-          ...item,
-          routerId: id
-        }));
-      }
+function setupExternalPlugin(plugin, app, api) {
+  const [pluginDescriptor, setupFn] = plugin;
+  if (pluginDescriptor.app !== app)
+    return;
+  if (pluginDescriptor.packageName === "vue-query") {
+    return;
+  }
+  if (pluginDescriptor.packageName === "vue-router") {
+    const id = getRouterDevToolsId(`${pluginDescriptor.id}`);
+    if (pluginDescriptor.app === app) {
+      devtoolsAppRecords.value = devtoolsAppRecords.value.map((item) => ({
+        ...item,
+        routerId: id
+      }));
     }
-    setupFn(api);
-  });
+  }
+  setupFn(api);
+}
+function registerPlugin(app, api) {
+  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
   devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
     var _a10, _b10;
     const globalProperties = (_b10 = (_a10 = record.app) == null ? void 0 : _a10.config) == null ? void 0 : _b10.globalProperties;
@@ -2396,8 +2399,22 @@ var RefStateEditor = class {
     if ((0, import_vue2.isRef)(ref)) {
       ref.value = value;
     } else {
-      const previousKeysSet = new Set(Object.keys(ref));
+      if (ref instanceof Set && Array.isArray(value)) {
+        ref.clear();
+        value.forEach((v) => ref.add(v));
+        return;
+      }
       const currentKeys = Object.keys(value);
+      if (ref instanceof Map) {
+        const previousKeysSet2 = new Set(ref.keys());
+        currentKeys.forEach((key) => {
+          ref.set(key, Reflect.get(value, key));
+          previousKeysSet2.delete(key);
+        });
+        previousKeysSet2.forEach((key) => ref.delete(key));
+        return;
+      }
+      const previousKeysSet = new Set(Object.keys(ref));
       currentKeys.forEach((key) => {
         Reflect.set(ref, key, Reflect.get(value, key));
         previousKeysSet.delete(key);
@@ -3053,10 +3070,6 @@ async function toggleActiveAppRecord(id) {
     const api = new DevToolsPluginApi();
     appRecord.api = api;
     setActiveAppRecord(appRecord);
-    window.postMessage({
-      event: "toggle-app-record",
-      target: "vue-devtools"
-    });
   }
 }
 
@@ -3945,6 +3958,9 @@ var on2 = {
   },
   editComponentState() {
   },
+  componentUpdated(fn) {
+    apiHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+  },
   // #endregion compatible with old devtools
   // router
   routerInfoUpdated(fn) {
@@ -4086,6 +4102,7 @@ var DevToolsPluginApi = class {
     apiHooks.callHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, ...params);
   }
   notifyComponentUpdate() {
+    apiHooks.callHook("component:updated" /* COMPONENT_UPDATED */);
   }
   now() {
     return now();
@@ -4332,7 +4349,13 @@ function initDevTools() {
     Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
   else
     import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  hook.on.setupDevtoolsPlugin(collectDevToolsPlugin);
+  hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
+    collectDevToolsPlugin(pluginDescriptor, setupFn);
+    const { app, api } = devtoolsAppRecords.active || {};
+    if (!app || !api)
+      return;
+    setupExternalPlugin([pluginDescriptor, setupFn], app, api);
+  });
   hook.on.vueAppInit(async (app, version) => {
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();

package/dist/index.d.cts

@@ -474,6 +474,7 @@ declare enum DevToolsEvents {
     DEVTOOLS_CONNECTED_UPDATED = "devtools:connected-updated",
     ROUTER_INFO_UPDATED = "router-info:updated",
     COMPONENT_STATE_INSPECT = "component-state:inspect",
+    COMPONENT_UPDATED = "component:updated",
     TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
@@ -513,6 +514,7 @@ interface DevToolsEvent {
     }) => void;
     [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void;
     [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void;
+    [DevToolsEvents.COMPONENT_UPDATED]: () => void;
 }
 type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>;
 
@@ -526,6 +528,7 @@ declare const on: {
     readonly sendInspectorState: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
     readonly editInspectorState: (fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
     readonly editComponentState: () => void;
+    readonly componentUpdated: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) => void;
     readonly routerInfoUpdated: (fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
     readonly getComponentBoundingRect: (fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
     readonly customTabsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
@@ -573,6 +576,12 @@ declare class DevToolsPluginApi {
     getVueInspector(): Promise<ComponentInspector>;
 }
 
+declare const hook: VueHooks;
+
+declare const devtoolsState: DevToolsState;
+
+declare const devtoolsContext: DevToolsContext;
+
 declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
 
 declare function initDevTools(): void;
@@ -596,6 +605,14 @@ declare function parse(data: string, revive?: boolean): any;
 
 declare const UNDEFINED = "__vue_devtool_undefined__";
 
+interface DevToolsType {
+    state: typeof devtoolsState;
+    context: typeof devtoolsContext;
+    hook: typeof hook;
+    init: typeof initDevTools;
+    get api(): typeof devtoolsContext.api;
+}
+
 declare const devtools: {
     state: DevToolsState;
     context: DevToolsContext;
@@ -604,4 +621,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, unhighlight, updateInspector };
+export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, unhighlight, updateInspector };

package/dist/index.d.ts

@@ -474,6 +474,7 @@ declare enum DevToolsEvents {
     DEVTOOLS_CONNECTED_UPDATED = "devtools:connected-updated",
     ROUTER_INFO_UPDATED = "router-info:updated",
     COMPONENT_STATE_INSPECT = "component-state:inspect",
+    COMPONENT_UPDATED = "component:updated",
     TOGGLE_COMPONENT_HIGHLIGHTER = "component-highlighter:toggle",
     GET_COMPONENT_BOUNDING_RECT = "component-bounding-rect:get",
     SCROLL_TO_COMPONENT = "scroll-to-component",
@@ -513,6 +514,7 @@ interface DevToolsEvent {
     }) => void;
     [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void;
     [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void;
+    [DevToolsEvents.COMPONENT_UPDATED]: () => void;
 }
 type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>;
 
@@ -526,6 +528,7 @@ declare const on: {
     readonly sendInspectorState: (fn: DevToolsEvent[DevToolsEvents.SEND_INSPECTOR_STATE]) => void;
     readonly editInspectorState: (fn: DevToolsEvent[DevToolsEvents.EDIT_INSPECTOR_STATE]) => void;
     readonly editComponentState: () => void;
+    readonly componentUpdated: (fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) => void;
     readonly routerInfoUpdated: (fn: DevToolsEvent[DevToolsEvents.ROUTER_INFO_UPDATED]) => void;
     readonly getComponentBoundingRect: (fn: DevToolsEvent[DevToolsEvents.GET_COMPONENT_BOUNDING_RECT]) => void;
     readonly customTabsUpdated: (fn: DevToolsEvent[DevToolsEvents.CUSTOM_TABS_UPDATED]) => void;
@@ -573,6 +576,12 @@ declare class DevToolsPluginApi {
     getVueInspector(): Promise<ComponentInspector>;
 }
 
+declare const hook: VueHooks;
+
+declare const devtoolsState: DevToolsState;
+
+declare const devtoolsContext: DevToolsContext;
+
 declare function setDevToolsEnv(env: Partial<DevToolsEnv>): void;
 
 declare function initDevTools(): void;
@@ -596,6 +605,14 @@ declare function parse(data: string, revive?: boolean): any;
 
 declare const UNDEFINED = "__vue_devtool_undefined__";
 
+interface DevToolsType {
+    state: typeof devtoolsState;
+    context: typeof devtoolsContext;
+    hook: typeof hook;
+    init: typeof initDevTools;
+    get api(): typeof devtoolsContext.api;
+}
+
 declare const devtools: {
     state: DevToolsState;
     context: DevToolsContext;
@@ -604,4 +621,4 @@ declare const devtools: {
     readonly api: DevToolsPluginApi;
 };
 
-export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, unhighlight, updateInspector };
+export { type AddInspectorApiPayload, type AppRecord, type ComponentBoundingRect, type ComponentBoundingRectApiPayload, type ComponentHighLighterOptions, type ComponentInspector, type ComponentTreeNode, type CustomCommand, type CustomCommandAction, type CustomTab, type DevToolsContext, type DevToolsEnv, type DevToolsEvent$1 as DevToolsEvent, type DevToolsHook, DevToolsHooks, type DevToolsState, type DevToolsType, type Inspector, type InspectorApiPayload, type InspectorCustomState, type InspectorNodeTag, type InspectorState, type InspectorStateApiPayload, type InspectorStateEditorPayload, type InspectorTreeApiPayload, type OpenInEditorOptions, type PluginApi, type PluginDescriptor, type PluginSettingsItem, type PluginSetupFunction, type PropPath, type RouterInfo, type ScrollToComponentOptions, type TimelineEvent, type TimelineLayerItem, UNDEFINED, type VueAppInstance, type VueHooks, addCustomCommand, addCustomTab, addInspector, addTimelineLayer, type customTypeEnums, devtools, formatInspectorStateValue, getComponentInspector, getInspector, getInspectorStateValueType, getRaw, getTimelineLayer, highlight, inspectComponentHighLighter, onDevToolsClientConnected, onDevToolsConnected, openInEditor, parse, removeCustomCommand, scrollToComponent, setDevToolsEnv, setupDevToolsPlugin, stringify, toEdit, toSubmit, toggleComponentHighLighter, toggleComponentInspectorEnabled, unhighlight, updateInspector };

package/dist/index.js

@@ -1819,23 +1819,26 @@ function collectDevToolsPlugin(pluginDescriptor, setupFn) {
 function setupDevToolsPlugin(pluginDescriptor, setupFn) {
   return hook.setupDevToolsPlugin(pluginDescriptor, setupFn);
 }
-function registerPlugin(app, api) {
-  const plugins = devtoolsState.pluginBuffer.filter(([plugin]) => plugin.app === app);
-  plugins.forEach(async ([plugin, setupFn]) => {
-    if (plugin.packageName === "vue-query") {
-      return;
-    }
-    if (plugin.packageName === "vue-router") {
-      const id = getRouterDevToolsId(`${plugin.id}`);
-      if (plugin.app === app) {
-        devtoolsAppRecords.value = devtoolsAppRecords.value.map((item) => ({
-          ...item,
-          routerId: id
-        }));
-      }
+function setupExternalPlugin(plugin, app, api) {
+  const [pluginDescriptor, setupFn] = plugin;
+  if (pluginDescriptor.app !== app)
+    return;
+  if (pluginDescriptor.packageName === "vue-query") {
+    return;
+  }
+  if (pluginDescriptor.packageName === "vue-router") {
+    const id = getRouterDevToolsId(`${pluginDescriptor.id}`);
+    if (pluginDescriptor.app === app) {
+      devtoolsAppRecords.value = devtoolsAppRecords.value.map((item) => ({
+        ...item,
+        routerId: id
+      }));
     }
-    setupFn(api);
-  });
+  }
+  setupFn(api);
+}
+function registerPlugin(app, api) {
+  devtoolsState.pluginBuffer.forEach((plugin) => setupExternalPlugin(plugin, app, api));
   devtoolsAppRecords.value = devtoolsAppRecords.value.map((record) => {
     var _a10, _b10;
     const globalProperties = (_b10 = (_a10 = record.app) == null ? void 0 : _a10.config) == null ? void 0 : _b10.globalProperties;
@@ -2369,8 +2372,22 @@ var RefStateEditor = class {
     if (isRef(ref)) {
       ref.value = value;
     } else {
-      const previousKeysSet = new Set(Object.keys(ref));
+      if (ref instanceof Set && Array.isArray(value)) {
+        ref.clear();
+        value.forEach((v) => ref.add(v));
+        return;
+      }
       const currentKeys = Object.keys(value);
+      if (ref instanceof Map) {
+        const previousKeysSet2 = new Set(ref.keys());
+        currentKeys.forEach((key) => {
+          ref.set(key, Reflect.get(value, key));
+          previousKeysSet2.delete(key);
+        });
+        previousKeysSet2.forEach((key) => ref.delete(key));
+        return;
+      }
+      const previousKeysSet = new Set(Object.keys(ref));
       currentKeys.forEach((key) => {
         Reflect.set(ref, key, Reflect.get(value, key));
         previousKeysSet.delete(key);
@@ -3026,10 +3043,6 @@ async function toggleActiveAppRecord(id) {
     const api = new DevToolsPluginApi();
     appRecord.api = api;
     setActiveAppRecord(appRecord);
-    window.postMessage({
-      event: "toggle-app-record",
-      target: "vue-devtools"
-    });
   }
 }
 
@@ -3918,6 +3931,9 @@ var on2 = {
   },
   editComponentState() {
   },
+  componentUpdated(fn) {
+    apiHooks.hook("component:updated" /* COMPONENT_UPDATED */, fn);
+  },
   // #endregion compatible with old devtools
   // router
   routerInfoUpdated(fn) {
@@ -4059,6 +4075,7 @@ var DevToolsPluginApi = class {
     apiHooks.callHook("component-tree:visit" /* VISIT_COMPONENT_TREE */, ...params);
   }
   notifyComponentUpdate() {
+    apiHooks.callHook("component:updated" /* COMPONENT_UPDATED */);
   }
   now() {
     return now();
@@ -4305,7 +4322,13 @@ function initDevTools() {
     Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
   else
     target8.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  hook.on.setupDevtoolsPlugin(collectDevToolsPlugin);
+  hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
+    collectDevToolsPlugin(pluginDescriptor, setupFn);
+    const { app, api } = devtoolsAppRecords.active || {};
+    if (!app || !api)
+      return;
+    setupExternalPlugin([pluginDescriptor, setupFn], app, api);
+  });
   hook.on.vueAppInit(async (app, version) => {
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.15",
+  "version": "7.0.16",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -25,12 +25,12 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-shared": "^7.0.15"
+    "@vue/devtools-shared": "^7.0.16"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
   },
   "scripts": {
     "build": "tsup --clean",