@vue/devtools-kit 7.6.1 → 7.6.3

package/dist/index.cjs

@@ -33,9 +33,9 @@ var __toESM = (mod, isNodeMode, target22) => (target22 = mod != null ? __create(
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.14__@swc+core@1.5.29_jiti@2.0.0__utvtwgyeu6xd57udthcnogp47u/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/cjs_shims.js
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.14__@swc+core@1.5.29_jiti@2.0.0__utvtwgyeu6xd57udthcnogp47u/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1954,10 +1954,15 @@ async function editComponentState(payload, stateEditor2) {
     return;
   const targetPath = path.slice();
   let target22;
-  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0]))
+  if (Object.keys(instance.props).includes(path[0])) {
+    target22 = instance.props;
+  } else if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
     target22 = instance.devtoolsRawSetupState;
-  if (instance.data && Object.keys(instance.data).includes(path[0]))
+  } else if (instance.data && Object.keys(instance.data).includes(path[0])) {
     target22 = instance.data;
+  } else {
+    target22 = instance.proxy;
+  }
   if (target22 && targetPath) {
     if (state.type === "object" && type === "reactive") {
     }
@@ -2176,6 +2181,8 @@ function update(options) {
 }
 function highlight(instance) {
   const bounds = getComponentBoundingRect(instance);
+  if (!bounds.width && !bounds.height)
+    return;
   const name = getInstanceName(instance);
   const container = getContainerElement();
   container ? update({ bounds, name }) : create({ bounds, name });
@@ -2420,9 +2427,12 @@ var callInspectorUpdatedHook = (0, import_perfect_debounce.debounce)(() => {
   devtoolsContext.hooks.callHook("sendInspectorToClient" /* SEND_INSPECTOR_TO_CLIENT */, getActiveInspectors());
 });
 function addInspector(inspector, descriptor) {
+  var _a25, _b25;
   devtoolsInspector.push({
     options: inspector,
     descriptor,
+    treeFilterPlaceholder: (_a25 = inspector.treeFilterPlaceholder) != null ? _a25 : "Search tree...",
+    stateFilterPlaceholder: (_b25 = inspector.stateFilterPlaceholder) != null ? _b25 : "Search state...",
     treeFilter: "",
     selectedNodeId: "",
     appRecord: getAppRecord(descriptor.app)
@@ -2462,7 +2472,9 @@ function getInspectorInfo(id) {
     logo: descriptor.logo,
     packageName: descriptor.packageName,
     homepage: descriptor.homepage,
-    timelineLayers
+    timelineLayers,
+    treeFilterPlaceholder: inspector.treeFilterPlaceholder,
+    stateFilterPlaceholder: inspector.stateFilterPlaceholder
   };
 }
 function getInspector(id, app) {
@@ -3017,8 +3029,7 @@ function createDevToolsHook() {
     }
   };
 }
-function subscribeDevToolsHook() {
-  const hook2 = import_devtools_shared10.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+function subscribeDevToolsHook(hook2) {
   hook2.on("app:init" /* APP_INIT */, (app, version, types) => {
     var _a25, _b25, _c;
     if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
@@ -3404,8 +3415,9 @@ function resolveMergedOptions(instance) {
   return options;
 }
 function processProps(instance) {
+  var _a25;
   const props = [];
-  const propDefinitions = instance.type.props;
+  const propDefinitions = (_a25 = instance == null ? void 0 : instance.type) == null ? void 0 : _a25.props;
   for (const key in instance.props) {
     const propDefinition = propDefinitions ? propDefinitions[key] : null;
     const camelizeKey = (0, import_devtools_shared11.camelize)(key);
@@ -3413,6 +3425,7 @@ function processProps(instance) {
       type: "props",
       key: camelizeKey,
       value: returnError(() => instance.props[key]),
+      editable: true,
       meta: propDefinition ? {
         type: propDefinition.type ? getPropType(propDefinition.type) : "any",
         required: !!propDefinition.required,
@@ -4546,14 +4559,16 @@ function initDevTools() {
   const isDevToolsNext = ((_a25 = import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a25.id) === "vue-devtools-next";
   if (import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
     return;
-  if (!import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
-    import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  } else {
-    if (!import_devtools_shared21.isNuxtApp) {
-      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
+  const _devtoolsHook = createDevToolsHook();
+  if (import_devtools_shared21.target.__VUE_DEVTOOLS_HOOK_REPLAY__) {
+    try {
+      import_devtools_shared21.target.__VUE_DEVTOOLS_HOOK_REPLAY__.forEach((cb) => cb(_devtoolsHook));
+      import_devtools_shared21.target.__VUE_DEVTOOLS_HOOK_REPLAY__ = [];
+    } catch (e) {
+      console.error("[vue-devtools] Error during hook replay", e);
     }
   }
-  import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.once("init", (Vue) => {
+  _devtoolsHook.once("init", (Vue) => {
     import_devtools_shared21.target.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true;
     console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
     console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 500; font-size: 14px;");
@@ -4576,7 +4591,7 @@ function initDevTools() {
   onLegacyDevToolsPluginApiAvailable(() => {
     const normalizedPluginBuffer = devtoolsPluginBuffer.filter(([item]) => item.id !== "components");
     normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
-      import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
+      _devtoolsHook.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
     });
   });
   hook.on.vueAppInit(async (app, version, types) => {
@@ -4597,7 +4612,7 @@ function initDevTools() {
     updateDevToolsState({
       connected: true
     });
-    import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push(app);
+    _devtoolsHook.apps.push(app);
   });
   hook.on.vueAppUnmount(async (app) => {
     const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
@@ -4615,7 +4630,18 @@ function initDevTools() {
     import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.splice(import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.indexOf(app), 1);
     removeRegisteredPluginApp(app);
   });
-  subscribeDevToolsHook();
+  subscribeDevToolsHook(_devtoolsHook);
+  if (!import_devtools_shared21.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    Object.defineProperty(import_devtools_shared21.target, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
+      get() {
+        return _devtoolsHook;
+      }
+    });
+  } else {
+    if (!import_devtools_shared21.isNuxtApp) {
+      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, _devtoolsHook);
+    }
+  }
 }
 function onDevToolsClientConnected(fn) {
   return new Promise((resolve) => {

package/dist/index.d.cts

@@ -537,6 +537,8 @@ declare function setDevToolsEnv(env: Partial<any>): void;
 interface DevToolsKitInspector {
     options: CustomInspectorOptions;
     descriptor: PluginDescriptor;
+    treeFilterPlaceholder: string;
+    stateFilterPlaceholder: string;
     treeFilter: string;
     selectedNodeId: string;
     appRecord: unknown;
@@ -564,6 +566,8 @@ declare function getInspectorInfo(id: string): {
         label: string;
         color: number;
     }[];
+    treeFilterPlaceholder: string;
+    stateFilterPlaceholder: string;
 } | undefined;
 declare function getInspector(id: string, app?: App$1): DevToolsKitInspector | undefined;
 declare function getInspectorActions(id: string): {

package/dist/index.d.ts

@@ -537,6 +537,8 @@ declare function setDevToolsEnv(env: Partial<any>): void;
 interface DevToolsKitInspector {
     options: CustomInspectorOptions;
     descriptor: PluginDescriptor;
+    treeFilterPlaceholder: string;
+    stateFilterPlaceholder: string;
     treeFilter: string;
     selectedNodeId: string;
     appRecord: unknown;
@@ -564,6 +566,8 @@ declare function getInspectorInfo(id: string): {
         label: string;
         color: number;
     }[];
+    treeFilterPlaceholder: string;
+    stateFilterPlaceholder: string;
 } | undefined;
 declare function getInspector(id: string, app?: App$1): DevToolsKitInspector | undefined;
 declare function getInspectorActions(id: string): {

package/dist/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target22) => (target22 = mod != null ? __create(
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.14__@swc+core@1.5.29_jiti@2.0.0__utvtwgyeu6xd57udthcnogp47u/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.3.0_@microsoft+api-extractor@7.43.0_@types+node@20.16.14__@swc+core@1.5.29_jiti@2.0.0__utvtwgyeu6xd57udthcnogp47u/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.3.5_@microsoft+api-extractor@7.43.0_@types+node@22.9.0__@swc+core@1.5.29_jiti@2.0.0_po_lnt5yfvawfblpk67opvcdwbq7u/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1863,10 +1863,15 @@ async function editComponentState(payload, stateEditor2) {
     return;
   const targetPath = path.slice();
   let target22;
-  if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0]))
+  if (Object.keys(instance.props).includes(path[0])) {
+    target22 = instance.props;
+  } else if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
     target22 = instance.devtoolsRawSetupState;
-  if (instance.data && Object.keys(instance.data).includes(path[0]))
+  } else if (instance.data && Object.keys(instance.data).includes(path[0])) {
     target22 = instance.data;
+  } else {
+    target22 = instance.proxy;
+  }
   if (target22 && targetPath) {
     if (state.type === "object" && type === "reactive") {
     }
@@ -2085,6 +2090,8 @@ function update(options) {
 }
 function highlight(instance) {
   const bounds = getComponentBoundingRect(instance);
+  if (!bounds.width && !bounds.height)
+    return;
   const name = getInstanceName(instance);
   const container = getContainerElement();
   container ? update({ bounds, name }) : create({ bounds, name });
@@ -2329,9 +2336,12 @@ var callInspectorUpdatedHook = debounce(() => {
   devtoolsContext.hooks.callHook("sendInspectorToClient" /* SEND_INSPECTOR_TO_CLIENT */, getActiveInspectors());
 });
 function addInspector(inspector, descriptor) {
+  var _a25, _b25;
   devtoolsInspector.push({
     options: inspector,
     descriptor,
+    treeFilterPlaceholder: (_a25 = inspector.treeFilterPlaceholder) != null ? _a25 : "Search tree...",
+    stateFilterPlaceholder: (_b25 = inspector.stateFilterPlaceholder) != null ? _b25 : "Search state...",
     treeFilter: "",
     selectedNodeId: "",
     appRecord: getAppRecord(descriptor.app)
@@ -2371,7 +2381,9 @@ function getInspectorInfo(id) {
     logo: descriptor.logo,
     packageName: descriptor.packageName,
     homepage: descriptor.homepage,
-    timelineLayers
+    timelineLayers,
+    treeFilterPlaceholder: inspector.treeFilterPlaceholder,
+    stateFilterPlaceholder: inspector.stateFilterPlaceholder
   };
 }
 function getInspector(id, app) {
@@ -2926,8 +2938,7 @@ function createDevToolsHook() {
     }
   };
 }
-function subscribeDevToolsHook() {
-  const hook2 = target7.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+function subscribeDevToolsHook(hook2) {
   hook2.on("app:init" /* APP_INIT */, (app, version, types) => {
     var _a25, _b25, _c;
     if ((_c = (_b25 = (_a25 = app == null ? void 0 : app._instance) == null ? void 0 : _a25.type) == null ? void 0 : _b25.devtools) == null ? void 0 : _c.hide)
@@ -3313,8 +3324,9 @@ function resolveMergedOptions(instance) {
   return options;
 }
 function processProps(instance) {
+  var _a25;
   const props = [];
-  const propDefinitions = instance.type.props;
+  const propDefinitions = (_a25 = instance == null ? void 0 : instance.type) == null ? void 0 : _a25.props;
   for (const key in instance.props) {
     const propDefinition = propDefinitions ? propDefinitions[key] : null;
     const camelizeKey = camelize(key);
@@ -3322,6 +3334,7 @@ function processProps(instance) {
       type: "props",
       key: camelizeKey,
       value: returnError(() => instance.props[key]),
+      editable: true,
       meta: propDefinition ? {
         type: propDefinition.type ? getPropType(propDefinition.type) : "any",
         required: !!propDefinition.required,
@@ -4455,14 +4468,16 @@ function initDevTools() {
   const isDevToolsNext = ((_a25 = target13.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a25.id) === "vue-devtools-next";
   if (target13.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
     return;
-  if (!target13.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
-    target13.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
-  } else {
-    if (!isNuxtApp) {
-      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
+  const _devtoolsHook = createDevToolsHook();
+  if (target13.__VUE_DEVTOOLS_HOOK_REPLAY__) {
+    try {
+      target13.__VUE_DEVTOOLS_HOOK_REPLAY__.forEach((cb) => cb(_devtoolsHook));
+      target13.__VUE_DEVTOOLS_HOOK_REPLAY__ = [];
+    } catch (e) {
+      console.error("[vue-devtools] Error during hook replay", e);
     }
   }
-  target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.once("init", (Vue) => {
+  _devtoolsHook.once("init", (Vue) => {
     target13.__VUE_DEVTOOLS_VUE2_APP_DETECTED__ = true;
     console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
     console.log("%cVue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.", "font-bold: 500; font-size: 14px;");
@@ -4485,7 +4500,7 @@ function initDevTools() {
   onLegacyDevToolsPluginApiAvailable(() => {
     const normalizedPluginBuffer = devtoolsPluginBuffer.filter(([item]) => item.id !== "components");
     normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
-      target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
+      _devtoolsHook.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
     });
   });
   hook.on.vueAppInit(async (app, version, types) => {
@@ -4506,7 +4521,7 @@ function initDevTools() {
     updateDevToolsState({
       connected: true
     });
-    target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.push(app);
+    _devtoolsHook.apps.push(app);
   });
   hook.on.vueAppUnmount(async (app) => {
     const activeRecords = devtoolsAppRecords.value.filter((appRecord) => appRecord.app !== app);
@@ -4524,7 +4539,18 @@ function initDevTools() {
     target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.splice(target13.__VUE_DEVTOOLS_GLOBAL_HOOK__.apps.indexOf(app), 1);
     removeRegisteredPluginApp(app);
   });
-  subscribeDevToolsHook();
+  subscribeDevToolsHook(_devtoolsHook);
+  if (!target13.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    Object.defineProperty(target13, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
+      get() {
+        return _devtoolsHook;
+      }
+    });
+  } else {
+    if (!isNuxtApp) {
+      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, _devtoolsHook);
+    }
+  }
 }
 function onDevToolsClientConnected(fn) {
   return new Promise((resolve) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.6.1",
+  "version": "7.6.3",
   "author": "webfansplz",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
     "superjson": "^2.2.1",
-    "@vue/devtools-shared": "^7.6.1"
+    "@vue/devtools-shared": "^7.6.3"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",