From 7d1226f657bad2dc483e55ecf2eae80bd74bb32b Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Thu, 7 Mar 2024 15:31:42 +0800
Subject: [PATCH 1/2] fix(repl): Avoid duplicate formatter mounts

---
 packages/runtime-core/src/customFormatter.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index abd3a329922..30d4b20c832 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -24,6 +24,7 @@ export function initCustomFormatter() {
   // custom formatter for Chrome
   // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
   const formatter = {
+    __formater_key: 'vue-custom-formatter',
     header(obj: unknown) {
       // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
       if (!isObject(obj)) {
@@ -198,7 +199,12 @@ export function initCustomFormatter() {
   }
 
   if ((window as any).devtoolsFormatters) {
-    ;(window as any).devtoolsFormatters.push(formatter)
+    const has = (window as any).devtoolsFormatters.some(
+      (v: typeof formatter) => {
+        return v.__formater_key && v.__formater_key === formatter.__formater_key
+      },
+    )
+    !has && (window as any).devtoolsFormatters.push(formatter)
   } else {
     ;(window as any).devtoolsFormatters = [formatter]
   }

From 02ec9696439727185b591f62ebde7b0e0e229bc5 Mon Sep 17 00:00:00 2001
From: baiwusanyu-c <740132583@qq.com>
Date: Wed, 13 Mar 2024 18:39:06 +0800
Subject: [PATCH 2/2] fix(repl): updated code

---
 packages/runtime-core/src/customFormatter.ts | 9 ++-------
 packages/sfc-playground/src/App.vue          | 8 +++++++-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index 30d4b20c832..9cda478345c 100644
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -24,7 +24,7 @@ export function initCustomFormatter() {
   // custom formatter for Chrome
   // https://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html
   const formatter = {
-    __formater_key: 'vue-custom-formatter',
+    __vue_custom_formatter: true,
     header(obj: unknown) {
       // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
       if (!isObject(obj)) {
@@ -199,12 +199,7 @@ export function initCustomFormatter() {
   }
 
   if ((window as any).devtoolsFormatters) {
-    const has = (window as any).devtoolsFormatters.some(
-      (v: typeof formatter) => {
-        return v.__formater_key && v.__formater_key === formatter.__formater_key
-      },
-    )
-    !has && (window as any).devtoolsFormatters.push(formatter)
+    ;(window as any).devtoolsFormatters.push(formatter)
   } else {
     ;(window as any).devtoolsFormatters = [formatter]
   }
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 4b62519ce6e..7501b200ce8 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -129,7 +129,13 @@ onMounted(() => {
     :preview-options="{
       customCode: {
         importCode: `import { initCustomFormatter } from 'vue'`,
-        useCode: `initCustomFormatter()`,
+        useCode: `if (window.devtoolsFormatters) {
+    const index = window.devtoolsFormatters.findIndex((v) => v.__vue_custom_formatter)
+    window.devtoolsFormatters.splice(index, 1)
+    initCustomFormatter()
+  } else {
+    initCustomFormatter()
+  }`,
       },
     }"
   />