@vue/devtools-kit 7.7.6 → 7.7.7

package/dist/index.cjs

@@ -4552,18 +4552,21 @@ function getAppRecordId(app, defaultId) {
   return id;
 }
 function createAppRecord(app, types) {
+  var _a25, _b25;
   const rootInstance = getAppRootInstance(app);
   if (rootInstance) {
     appRecordInfo.id++;
     const name = getAppRecordName(app, appRecordInfo.id.toString());
     const id = getAppRecordId(app, (0, import_speakingurl.default)(name));
+    const [el] = getRootElementsFromComponentInstance(rootInstance);
     const record = {
       id,
       name,
       types,
       instanceMap: /* @__PURE__ */ new Map(),
       perfGroupIds: /* @__PURE__ */ new Map(),
-      rootInstance
+      rootInstance,
+      iframe: import_devtools_shared20.isBrowser && document !== (el == null ? void 0 : el.ownerDocument) ? (_b25 = (_a25 = el == null ? void 0 : el.ownerDocument) == null ? void 0 : _a25.location) == null ? void 0 : _b25.pathname : void 0
     };
     app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record;
     const rootId = `${record.id}:root`;
@@ -4575,9 +4578,96 @@ function createAppRecord(app, types) {
   }
 }
 
+// src/core/iframe/index.ts
+init_cjs_shims();
+function detectIframeApp(target22, inIframe = false) {
+  if (inIframe) {
+    let sendEventToParent2 = function(cb) {
+      try {
+        const hook3 = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+        if (hook3) {
+          cb(hook3);
+        }
+      } catch (e) {
+      }
+    };
+    var sendEventToParent = sendEventToParent2;
+    const hook2 = {
+      id: "vue-devtools-next",
+      devtoolsVersion: "7.0",
+      on: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.on(event, cb);
+        });
+      },
+      once: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.once(event, cb);
+        });
+      },
+      off: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.off(event, cb);
+        });
+      },
+      emit: (event, ...payload) => {
+        sendEventToParent2((hook3) => {
+          hook3.emit(event, ...payload);
+        });
+      }
+    };
+    Object.defineProperty(target22, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
+      get() {
+        return hook2;
+      },
+      configurable: true
+    });
+  }
+  function injectVueHookToIframe(iframe) {
+    if (iframe.__vdevtools__injected) {
+      return;
+    }
+    try {
+      iframe.__vdevtools__injected = true;
+      const inject = () => {
+        try {
+          iframe.contentWindow.__VUE_DEVTOOLS_IFRAME__ = iframe;
+          const script = iframe.contentDocument.createElement("script");
+          script.textContent = `;(${detectIframeApp.toString()})(window, true)`;
+          iframe.contentDocument.documentElement.appendChild(script);
+          script.parentNode.removeChild(script);
+        } catch (e) {
+        }
+      };
+      inject();
+      iframe.addEventListener("load", () => inject());
+    } catch (e) {
+    }
+  }
+  function injectVueHookToIframes() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const iframes = Array.from(document.querySelectorAll("iframe:not([data-vue-devtools-ignore])"));
+    for (const iframe of iframes) {
+      injectVueHookToIframe(iframe);
+    }
+  }
+  injectVueHookToIframes();
+  let iframeAppChecks = 0;
+  const iframeAppCheckTimer = setInterval(() => {
+    injectVueHookToIframes();
+    iframeAppChecks++;
+    if (iframeAppChecks >= 5) {
+      clearInterval(iframeAppCheckTimer);
+    }
+  }, 1e3);
+}
+
 // src/core/index.ts
 function initDevTools() {
   var _a25;
+  detectIframeApp(import_devtools_shared21.target);
   updateDevToolsState({
     vitePluginDetected: getDevToolsEnv().vitePluginDetected
   });
@@ -4597,8 +4687,10 @@ function initDevTools() {
     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;");
-    const url = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
-    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    const legacyChromeUrl = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
+    const legacyFirefoxUrl = "https://addons.mozilla.org/firefox/addon/vue-js-devtools-v6-legacy";
+    console.log(`%cThe legacy version of chrome extension that supports both Vue 2 and Vue 3 has been moved to %c ${legacyChromeUrl}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    console.log(`%cThe legacy version of firefox extension that supports both Vue 2 and Vue 3 has been moved to %c ${legacyFirefoxUrl}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
     console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 500; font-size: 14px;");
     console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
   });
@@ -4660,7 +4752,8 @@ function initDevTools() {
     Object.defineProperty(import_devtools_shared21.target, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
       get() {
         return _devtoolsHook;
-      }
+      },
+      configurable: true
     });
   } else {
     if (!import_devtools_shared21.isNuxtApp) {

package/dist/index.d.cts

@@ -62,6 +62,7 @@ interface AppRecord {
     }>;
     rootInstance: VueAppInstance;
     routerId?: string;
+    iframe?: string;
 }
 
 interface CustomCommandAction {

package/dist/index.d.ts

@@ -62,6 +62,7 @@ interface AppRecord {
     }>;
     rootInstance: VueAppInstance;
     routerId?: string;
+    iframe?: string;
 }
 
 interface CustomCommandAction {

package/dist/index.js

@@ -4421,7 +4421,7 @@ var devtoolsContext = target11.__VUE_DEVTOOLS_KIT_CONTEXT__;
 // src/core/app/index.ts
 init_esm_shims();
 var import_speakingurl = __toESM(require_speakingurl2(), 1);
-import { target as target12 } from "@vue/devtools-shared";
+import { isBrowser as isBrowser3, target as target12 } from "@vue/devtools-shared";
 var _a17, _b17;
 var appRecordInfo = (_b17 = (_a17 = target12).__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__) != null ? _b17 : _a17.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ = {
   id: 0,
@@ -4460,18 +4460,21 @@ function getAppRecordId(app, defaultId) {
   return id;
 }
 function createAppRecord(app, types) {
+  var _a25, _b25;
   const rootInstance = getAppRootInstance(app);
   if (rootInstance) {
     appRecordInfo.id++;
     const name = getAppRecordName(app, appRecordInfo.id.toString());
     const id = getAppRecordId(app, (0, import_speakingurl.default)(name));
+    const [el] = getRootElementsFromComponentInstance(rootInstance);
     const record = {
       id,
       name,
       types,
       instanceMap: /* @__PURE__ */ new Map(),
       perfGroupIds: /* @__PURE__ */ new Map(),
-      rootInstance
+      rootInstance,
+      iframe: isBrowser3 && document !== (el == null ? void 0 : el.ownerDocument) ? (_b25 = (_a25 = el == null ? void 0 : el.ownerDocument) == null ? void 0 : _a25.location) == null ? void 0 : _b25.pathname : void 0
     };
     app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record;
     const rootId = `${record.id}:root`;
@@ -4483,9 +4486,96 @@ function createAppRecord(app, types) {
   }
 }
 
+// src/core/iframe/index.ts
+init_esm_shims();
+function detectIframeApp(target22, inIframe = false) {
+  if (inIframe) {
+    let sendEventToParent2 = function(cb) {
+      try {
+        const hook3 = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+        if (hook3) {
+          cb(hook3);
+        }
+      } catch (e) {
+      }
+    };
+    var sendEventToParent = sendEventToParent2;
+    const hook2 = {
+      id: "vue-devtools-next",
+      devtoolsVersion: "7.0",
+      on: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.on(event, cb);
+        });
+      },
+      once: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.once(event, cb);
+        });
+      },
+      off: (event, cb) => {
+        sendEventToParent2((hook3) => {
+          hook3.off(event, cb);
+        });
+      },
+      emit: (event, ...payload) => {
+        sendEventToParent2((hook3) => {
+          hook3.emit(event, ...payload);
+        });
+      }
+    };
+    Object.defineProperty(target22, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
+      get() {
+        return hook2;
+      },
+      configurable: true
+    });
+  }
+  function injectVueHookToIframe(iframe) {
+    if (iframe.__vdevtools__injected) {
+      return;
+    }
+    try {
+      iframe.__vdevtools__injected = true;
+      const inject = () => {
+        try {
+          iframe.contentWindow.__VUE_DEVTOOLS_IFRAME__ = iframe;
+          const script = iframe.contentDocument.createElement("script");
+          script.textContent = `;(${detectIframeApp.toString()})(window, true)`;
+          iframe.contentDocument.documentElement.appendChild(script);
+          script.parentNode.removeChild(script);
+        } catch (e) {
+        }
+      };
+      inject();
+      iframe.addEventListener("load", () => inject());
+    } catch (e) {
+    }
+  }
+  function injectVueHookToIframes() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const iframes = Array.from(document.querySelectorAll("iframe:not([data-vue-devtools-ignore])"));
+    for (const iframe of iframes) {
+      injectVueHookToIframe(iframe);
+    }
+  }
+  injectVueHookToIframes();
+  let iframeAppChecks = 0;
+  const iframeAppCheckTimer = setInterval(() => {
+    injectVueHookToIframes();
+    iframeAppChecks++;
+    if (iframeAppChecks >= 5) {
+      clearInterval(iframeAppCheckTimer);
+    }
+  }, 1e3);
+}
+
 // src/core/index.ts
 function initDevTools() {
   var _a25;
+  detectIframeApp(target13);
   updateDevToolsState({
     vitePluginDetected: getDevToolsEnv().vitePluginDetected
   });
@@ -4505,8 +4595,10 @@ function initDevTools() {
     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;");
-    const url = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
-    console.log(`%cThe legacy version that supports both Vue 2 and Vue 3 has been moved to %c ${url}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    const legacyChromeUrl = "https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp";
+    const legacyFirefoxUrl = "https://addons.mozilla.org/firefox/addon/vue-js-devtools-v6-legacy";
+    console.log(`%cThe legacy version of chrome extension that supports both Vue 2 and Vue 3 has been moved to %c ${legacyChromeUrl}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
+    console.log(`%cThe legacy version of firefox extension that supports both Vue 2 and Vue 3 has been moved to %c ${legacyFirefoxUrl}`, "font-size: 14px;", "text-decoration: underline; cursor: pointer;font-size: 14px;");
     console.log("%cPlease install and enable only the legacy version for your Vue2 app.", "font-bold: 500; font-size: 14px;");
     console.log("%c[_____Vue DevTools v7 log_____]", "color: red; font-bold: 600; font-size: 16px;");
   });
@@ -4568,7 +4660,8 @@ function initDevTools() {
     Object.defineProperty(target13, "__VUE_DEVTOOLS_GLOBAL_HOOK__", {
       get() {
         return _devtoolsHook;
-      }
+      },
+      configurable: true
     });
   } else {
     if (!isNuxtApp) {
@@ -5853,7 +5946,7 @@ init_esm_shims();
 
 // src/messaging/presets/iframe/client.ts
 init_esm_shims();
-import { isBrowser as isBrowser3 } from "@vue/devtools-shared";
+import { isBrowser as isBrowser4 } from "@vue/devtools-shared";
 
 // src/messaging/presets/iframe/context.ts
 init_esm_shims();
@@ -5869,7 +5962,7 @@ function setIframeServerContext(context) {
 
 // src/messaging/presets/iframe/client.ts
 function createIframeClientChannel() {
-  if (!isBrowser3) {
+  if (!isBrowser4) {
     return {
       post: (data) => {
       },
@@ -5896,9 +5989,9 @@ function createIframeClientChannel() {
 
 // src/messaging/presets/iframe/server.ts
 init_esm_shims();
-import { isBrowser as isBrowser4 } from "@vue/devtools-shared";
+import { isBrowser as isBrowser5 } from "@vue/devtools-shared";
 function createIframeServerChannel() {
-  if (!isBrowser4) {
+  if (!isBrowser5) {
     return {
       post: (data) => {
       },

package/package.json

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