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 1/2] 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()
+    }
+  }
+}

From 036995238bc457b41998f803d69aad19d7995935 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:43:25 +0800
Subject: [PATCH 2/2] fix: update app initialization logic in devtools
 container management

---
 packages/overlay/src/main.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/overlay/src/main.ts b/packages/overlay/src/main.ts
index 1dfa47186..aefb35dbf 100644
--- a/packages/overlay/src/main.ts
+++ b/packages/overlay/src/main.ts
@@ -2,7 +2,7 @@ import type { Component, App as VueAppType } from 'vue'
 import { createApp, h } from 'vue'
 import App from './App.vue'
 
-let app: VueAppType
+let app: VueAppType | null = null
 function createDevToolsContainer(App: Component) {
   const CONTAINER_ID = '__vue-devtools-container__'
   const el = document.createElement('div')
@@ -25,15 +25,15 @@ const config = { childList: true, attributes: false }
 const observer = new MutationObserver(callback)
 observer.observe(targetNode, config)
 
-let init = false
+let isInitialized = false
 function callback(mutationsList, observer) {
   for (const mutation of mutationsList) {
-    if (mutation.type === 'childList' && init === false) {
+    if (mutation.type === 'childList' && isInitialized === false) {
       if (app) {
         app.unmount()
       }
       createDevToolsContainer(App)
-      init = true
+      isInitialized = true
       observer.disconnect()
     }
   }