From 06f5d4286f99d70ad0080305852248a63d75d67d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=86=E5=BE=B7=E9=9D=96?=
 <ludejing@ludejingdeMacBook-Pro.local>
Date: Sat, 21 Dec 2024 19:35:23 +0800
Subject: [PATCH] feat: fix to #750 :enhance devtools container management with
 mutation observer

---
 packages/overlay/src/main.ts | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/overlay/src/main.ts b/packages/overlay/src/main.ts
index 221649317..1dfa47186 100644
--- a/packages/overlay/src/main.ts
+++ b/packages/overlay/src/main.ts
@@ -1,15 +1,15 @@
-import type { Component } from 'vue'
+import type { Component, App as VueAppType } from 'vue'
 import { createApp, h } from 'vue'
-
 import App from './App.vue'
 
+let app: VueAppType
 function createDevToolsContainer(App: Component) {
   const CONTAINER_ID = '__vue-devtools-container__'
   const el = document.createElement('div')
   el.setAttribute('id', CONTAINER_ID)
   el.setAttribute('data-v-inspector-ignore', 'true')
   document.getElementsByTagName('body')[0].appendChild(el)
-  const app = createApp({
+  app = createApp({
     render: () => h(App),
     devtools: {
       hide: true,
@@ -19,3 +19,22 @@ function createDevToolsContainer(App: Component) {
 }
 
 createDevToolsContainer(App)
+
+const targetNode = document.body
+const config = { childList: true, attributes: false }
+const observer = new MutationObserver(callback)
+observer.observe(targetNode, config)
+
+let init = false
+function callback(mutationsList, observer) {
+  for (const mutation of mutationsList) {
+    if (mutation.type === 'childList' && init === false) {
+      if (app) {
+        app.unmount()
+      }
+      createDevToolsContainer(App)
+      init = true
+      observer.disconnect()
+    }
+  }
+}