From 5639e700511e45d076ec95b3957494896c8a2357 Mon Sep 17 00:00:00 2001
From: Guillaume <guillaume.b.chau@gmail.com>
Date: Wed, 9 Jun 2021 13:45:50 +0200
Subject: [PATCH] chore(dev): delayed devtools plugin

---
 packages/shell-dev-vue3/public/target.html    |  1 +
 packages/shell-dev-vue3/src/App.vue           |  5 ++++-
 .../src/devtools-plugin/simple.js             | 19 +++++++++++++++++++
 packages/shell-dev-vue3/src/main.js           | 11 +++++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 packages/shell-dev-vue3/src/devtools-plugin/simple.js

diff --git a/packages/shell-dev-vue3/public/target.html b/packages/shell-dev-vue3/public/target.html
index f2c35574b..d52cffb7a 100644
--- a/packages/shell-dev-vue3/public/target.html
+++ b/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>
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue
index 53e38ae41..cdbf56b64 100644
--- a/packages/shell-dev-vue3/src/App.vue
+++ b/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')
     }
   }
 }
diff --git a/packages/shell-dev-vue3/src/devtools-plugin/simple.js b/packages/shell-dev-vue3/src/devtools-plugin/simple.js
new file mode 100644
index 000000000..88ec16312
--- /dev/null
+++ b/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
+        })
+      })
+    })
+  }
+}
diff --git a/packages/shell-dev-vue3/src/main.js b/packages/shell-dev-vue3/src/main.js
index dcb3234f6..ac41998de 100644
--- a/packages/shell-dev-vue3/src/main.js
+++ b/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)