feat(kit): support devtools in iframe (#886)

Author: alexzhang1030

packages/applet/src/modules/components/index.vue

@@ -220,10 +220,11 @@ const devtoolsState = useDevToolsState()
 const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
   label: app.name + (app.version ? ` (${app.version})` : ''),
   value: app.id,
+  iframe: app.iframe,
 })))
 
 const normalizedAppRecords = computed(() => appRecords.value.map(app => ({
-  label: app.label,
+  label: app.label + (app.iframe ? ` (iframe: ${app.iframe})` : ''),
   id: app.value,
 })))
 

packages/core/src/rpc/global.ts

@@ -30,6 +30,7 @@ function getDevToolsState() {
       name: item.name,
       version: item.version,
       routerId: item.routerId,
+      iframe: item.iframe,
     })),
     activeAppRecordId: state.activeAppRecordId,
     timelineLayersState: state.timelineLayersState,

packages/devtools-kit/src/core/app/index.ts

@@ -1,6 +1,7 @@
-import { target } from '@vue/devtools-shared'
+import { isBrowser, target } from '@vue/devtools-shared'
 import slug from 'speakingurl'
 import { AppRecord, VueAppInstance } from '../../types'
+import { getRootElementsFromComponentInstance } from '../component/tree/el'
 
 const appRecordInfo = target.__VUE_DEVTOOLS_NEXT_APP_RECORD_INFO__ ??= {
   id: 0,
@@ -52,6 +53,7 @@ export function createAppRecord(app: VueAppInstance['appContext']['app'], types:
     appRecordInfo.id++
     const name = getAppRecordName(app, appRecordInfo.id.toString())
     const id = getAppRecordId(app, slug(name))
+    const [el] = getRootElementsFromComponentInstance(rootInstance) as /* type-compatible, this is returning VNode[] */ unknown as HTMLElement[]
 
     const record: AppRecord = {
       id,
@@ -60,6 +62,7 @@ export function createAppRecord(app: VueAppInstance['appContext']['app'], types:
       instanceMap: new Map(),
       perfGroupIds: new Map(),
       rootInstance,
+      iframe: isBrowser && document !== el?.ownerDocument ? el?.ownerDocument?.location?.pathname : undefined,
     }
 
     app.__VUE_DEVTOOLS_NEXT_APP_RECORD__ = record

packages/devtools-kit/src/core/iframe/index.ts

@@ -0,0 +1,98 @@
+export function detectIframeApp(target: Window | typeof globalThis, inIframe = false) {
+  if (inIframe) {
+    function sendEventToParent(cb) {
+      try {
+        // @ts-expect-error skip type check
+        const hook = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__
+        if (hook) {
+          cb(hook)
+        }
+      }
+      catch (e) {
+        // Ignore
+      }
+    }
+
+    const hook = {
+      id: 'vue-devtools-next',
+      devtoolsVersion: '7.0',
+      on: (event, cb) => {
+        sendEventToParent((hook) => {
+          hook.on(event, cb)
+        })
+      },
+      once: (event, cb) => {
+        sendEventToParent((hook) => {
+          hook.once(event, cb)
+        })
+      },
+      off: (event, cb) => {
+        sendEventToParent((hook) => {
+          hook.off(event, cb)
+        })
+      },
+      emit: (event, ...payload) => {
+        sendEventToParent((hook) => {
+          hook.emit(event, ...payload)
+        })
+      },
+    }
+
+    Object.defineProperty(target, '__VUE_DEVTOOLS_GLOBAL_HOOK__', {
+      get() {
+        return hook
+      },
+      configurable: true,
+    })
+  }
+
+  function injectVueHookToIframe(iframe) {
+    if (iframe.__vdevtools__injected) {
+      return
+    }
+    try {
+      iframe.__vdevtools__injected = true
+      const inject = () => {
+        console.log('inject', iframe)
+        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) {
+          // Ignore
+        }
+      }
+      inject()
+      iframe.addEventListener('load', () => inject())
+    }
+    catch (e) {
+      // Ignore
+    }
+  }
+
+  // detect iframe app to inject vue hook
+  function injectVueHookToIframes() {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const iframes = Array.from(document.querySelectorAll<HTMLIFrameElement>('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)
+    }
+  }, 1000)
+}

packages/devtools-kit/src/core/index.ts

@@ -18,11 +18,14 @@ import {
 import { createDevToolsHook, hook, subscribeDevToolsHook } from '../hook'
 import { DevToolsHooks } from '../types'
 import { createAppRecord, removeAppRecordId } from './app'
+import { detectIframeApp } from './iframe'
 import { callDevToolsPluginSetupFn, createComponentsDevToolsPlugin, registerDevToolsPlugin, removeRegisteredPluginApp, setupDevToolsPlugin } from './plugin'
 import { initPluginSettings } from './plugin/plugin-settings'
 import { normalizeRouterInfo } from './router'
 
 export function initDevTools() {
+  detectIframeApp(target)
+
   updateDevToolsState({
     vitePluginDetected: getDevToolsEnv().vitePluginDetected,
   })
@@ -136,6 +139,7 @@ export function initDevTools() {
       get() {
         return _devtoolsHook
       },
+      configurable: true,
     })
   }
   else {

packages/devtools-kit/src/types/app.ts

@@ -53,4 +53,5 @@ export interface AppRecord {
   perfGroupIds: Map<string, { groupId: number, time: number }>
   rootInstance: VueAppInstance
   routerId?: string
+  iframe?: string
 }

packages/playground/multi-app/index.html

@@ -9,6 +9,7 @@
   <body>
     <div id="app"></div>
     <div id="app2"></div>
+    <div id="app3"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

packages/playground/multi-app/src/components/Iframe/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Srcdoc from './srcdoc.html?raw'
+</script>
+
+<template>
+  <div class="m-auto mt-5 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
+    <iframe
+      sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
+      :srcdoc="Srcdoc"
+    />
+  </div>
+</template>

packages/playground/multi-app/src/components/Iframe/srcdoc.html

@@ -0,0 +1,46 @@
+<html>
+  <head>
+    <script type="importmap">
+      {
+        "imports": {
+          "vue": "https://play.vuejs.org/vue.runtime.esm-browser.js"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { createApp, h, ref } from 'vue'
+
+      const app = createApp({
+        setup() {
+          const counter = ref(0)
+
+          return {
+            counter,
+          }
+        },
+
+        render(ctx) {
+          return h(
+            'div',
+            {
+              style: {
+                color: 'black',
+                display: 'flex',
+                'flex-wrap': 'wrap',
+                'justify-content': 'center',
+                'align-items': 'center',
+                height: '100vh',
+              },
+            },
+            h('h1', { style: { width: '100%' } }, 'App3 in iframe'),
+            h('count', `${ctx.counter}`),
+            h('div', h('button', { onClick: () => ctx.counter++ }, '++')),
+          )
+        },
+      }).mount('#app')
+    </script>
+  </body>
+</html>

packages/playground/multi-app/src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 
 import App2 from './App2.vue'
 import App from './App.vue'
+import Iframe from './components/Iframe/index.vue'
 
 import './style.css'
 import 'uno.css'
@@ -10,6 +11,10 @@ const app = createApp(App)
 
 const app2 = createApp(App2)
 
+const app3 = createApp(Iframe)
+
 app.mount('#app')
 
 app2.mount('#app2')
+
+app3.mount('#app3')