feat(vue2): iframe support

Akryum · Akryum · commit 62a8e4c39617 · 2021-06-09T12:49:47.000+02:00
diff --git a/packages/app-backend-core/src/hook.ts b/packages/app-backend-core/src/hook.ts
@@ -55,7 +55,10 @@ export function installHook (target, iframe = false) {
     }
 
     hook = {
-      Vue: null,
+      // eslint-disable-next-line accessor-pairs
+      set Vue (value) {
+        sendToParent(hook => { hook.Vue = value })
+      },
 
       on (event, fn) {
         sendToParent(hook => hook.on(event, fn))
diff --git a/packages/app-backend-core/src/legacy/scan.ts b/packages/app-backend-core/src/legacy/scan.ts
@@ -42,18 +42,30 @@ export function scan () {
   }
 
   if (isBrowser) {
-    walk(document, function (node) {
-      if (inFragment) {
-        if (node === currentFragment._fragmentEnd) {
-          inFragment = false
-          currentFragment = null
+    const walkDocument = document => {
+      walk(document, function (node) {
+        if (inFragment) {
+          if (node === currentFragment._fragmentEnd) {
+            inFragment = false
+            currentFragment = null
+          }
+          return true
         }
-        return true
-      }
-      const instance = node.__vue__
+        const instance = node.__vue__
+
+        return processInstance(instance)
+      })
+    }
+    walkDocument(document)
 
-      return processInstance(instance)
-    })
+    const iframes = document.querySelectorAll<HTMLIFrameElement>('iframe')
+    for (const iframe of iframes) {
+      try {
+        walkDocument(iframe.contentDocument)
+      } catch (e) {
+        // Ignore
+      }
+    }
   } else {
     if (Array.isArray(target.__VUE_ROOT_INSTANCES__)) {
       target.__VUE_ROOT_INSTANCES__.map(processInstance)
diff --git a/packages/shell-dev-vue2/package.json b/packages/shell-dev-vue2/package.json
@@ -6,7 +6,8 @@
     "dev": "cross-env TAILWIND_MODE=watch PORT=8100 webpack serve"
   },
   "dependencies": {
-    "@vue-devtools/shell-host": "^0.0.0"
+    "@vue-devtools/shell-host": "^0.0.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue-devtools/build-tools": "^0.0.0",
diff --git a/packages/shell-dev-vue2/public/target-iframe.html b/packages/shell-dev-vue2/public/target-iframe.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <style>
+      html, body {
+        background: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="target/iframe-app.js"></script>
+  </body>
+</html>
diff --git a/packages/shell-dev-vue2/public/target.html b/packages/shell-dev-vue2/public/target.html
@@ -7,6 +7,7 @@
   <body>
     <div id="app"></div>
     <div id="shadow"></div>
+    <iframe src="/target-iframe.html" width="100%"></iframe>
     <script src="target/hook.js"></script>
     <script src="target/target.js"></script>
   </body>
diff --git a/packages/shell-dev-vue2/src/Child.vue b/packages/shell-dev-vue2/src/Child.vue
@@ -0,0 +1,17 @@
+<script>
+export default {
+  data () {
+    return {
+      count: 0
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    {{ count }} <button @click="count++">
+      +1
+    </button>
+  </div>
+</template>
diff --git a/packages/shell-dev-vue2/src/iframe-app.js b/packages/shell-dev-vue2/src/iframe-app.js
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import Child from './Child.vue'
+
+new Vue({
+  ...Child,
+  name: 'IframeApp'
+}).$mount('#app')
diff --git a/packages/shell-dev-vue2/webpack.config.js b/packages/shell-dev-vue2/webpack.config.js
@@ -7,7 +7,8 @@ module.exports = createConfig({
     // devtools: require.resolve('@vue-devtools/shell-host/src/devtools.js'),
     backend: require.resolve('@vue-devtools/shell-host/src/backend.js'),
     hook: require.resolve('@vue-devtools/shell-host/src/hook.js'),
-    target: './src/index.js'
+    target: './src/index.js',
+    'iframe-app': './src/iframe-app.js'
   },
   output: {
     path: path.join(__dirname, '/build'),
diff --git a/yarn.lock b/yarn.lock
@@ -10343,6 +10343,11 @@ vue@^3.1.0-beta.5:
     "@vue/runtime-dom" "3.1.0-beta.6"
     "@vue/shared" "3.1.0-beta.6"
 
+vuex@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 vuex@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.1.tgz#e83c541d6f31173969efabb2c5d1c465b682887e"
