chore(dev): delayed devtools plugin

Author: Akryum

packages/shell-dev-vue3/public/target.html

@@ -13,6 +13,7 @@
     <div id="app"></div>
     <div id="app2"></div>
     <div id="app3"></div>
+    <div id="delay-app"></div>
     <div id="ghost-app"></div>
     <div id="shadow"></div>
     <iframe src="/target-iframe.html" width="100%"></iframe>

packages/shell-dev-vue3/src/App.vue

@@ -18,6 +18,7 @@ import Mixins from './Mixins.vue'
 import Animation from './Animation.vue'
 
 import { h, createApp } from 'vue'
+import SimplePlugin from './devtools-plugin/simple'
 
 export default {
   name: 'MyApp',
@@ -54,7 +55,9 @@ export default {
 
   methods: {
     createApp () {
-      createApp(Child).mount('#nested-app')
+      const app = createApp(Child)
+      app.use(SimplePlugin)
+      app.mount('#nested-app')
     }
   }
 }

packages/shell-dev-vue3/src/devtools-plugin/simple.js

@@ -0,0 +1,19 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+
+export default {
+  install: (app) => {
+    setupDevtoolsPlugin({
+      id: 'simple-plugin',
+      label: 'Simple devtools plugin',
+      app
+    }, (api) => {
+      api.on.visitComponentTree((payload, ctx) => {
+        payload.treeNode.tags.push({
+          label: 'simple plugin',
+          textColor: 0xFFAAAA,
+          backgroundColor: 0xFFEEEE
+        })
+      })
+    })
+  }
+}

packages/shell-dev-vue3/src/main.js

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 import App3 from './App3.vue'
 import TestPlugin from './devtools-plugin'
+import SimplePlugin from './devtools-plugin/simple'
 import store from './store'
 
 // eslint-disable-next-line no-extend-native
@@ -33,6 +34,7 @@ app.use(TestPlugin)
 app.mount('#app')
 
 const app2 = createApp({
+  name: 'App2',
   render: () => h('h1', 'App 2')
 })
 app2.mount('#app2')
@@ -47,3 +49,12 @@ createApp({
     hide: true
   }
 }).mount('#ghost-app')
+
+setTimeout(() => {
+  const app = createApp({
+    name: 'DelayedApp',
+    render: () => h('h1', 'Delayed app')
+  })
+  app.use(SimplePlugin)
+  app.mount('#delay-app')
+}, 1000)