From 23cd61423c1201eb948a21d6be0a8b9049080ce0 Mon Sep 17 00:00:00 2001
From: =?utf8?q?=E7=99=BD=E9=9B=BE=E4=B8=89=E8=AF=AD?=
 <32354856+baiwusanyu-c@users.noreply.github.com>
Date: Thu, 11 Jul 2024 17:30:41 +0800
Subject: [PATCH] chore(repl): avoid duplicate formatter mounts (#10472)

close #10466
---
 packages/runtime-core/src/customFormatter.ts | 1 +
 packages/sfc-playground/src/App.vue          | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index abd3a32992..9cda478345 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 = {
+    __vue_custom_formatter: true,
     header(obj: unknown) {
       // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
       if (!isObject(obj)) {
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 4b62519ce6..7501b200ce 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()
+  }`,
       },
     }"
   />
-- 
2.47.3