From 06488047c184dae3070d0008379716690edceb46 Mon Sep 17 00:00:00 2001
From: yangxiuxiu <79584569+RicardoErii@users.noreply.github.com>
Date: Wed, 3 Jan 2024 17:22:06 +0800
Subject: [PATCH] fix(runtime-core): correctly assign suspenseId to avoid
 conflicts with the default id (#9966)

close #9944
---
 .../runtime-core/__tests__/components/Suspense.spec.ts     | 2 ++
 packages/runtime-core/src/components/Suspense.ts           | 7 ++++++-
 packages/sfc-playground/src/App.vue                        | 4 ++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index f8f2064ebbd..203937aa526 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -24,12 +24,14 @@ import {
 } from '@vue/runtime-test'
 import { createApp, defineComponent } from 'vue'
 import type { RawSlots } from 'packages/runtime-core/src/componentSlots'
+import { resetSuspenseId } from '../../src/components/Suspense'
 
 describe('Suspense', () => {
   const deps: Promise<any>[] = []
 
   beforeEach(() => {
     deps.length = 0
+    resetSuspenseId()
   })
 
   // a simple async factory for testing purposes only.
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 411ef054ca1..01aeb6188b2 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/packages/runtime-core/src/components/Suspense.ts
@@ -50,6 +50,11 @@ export const isSuspense = (type: any): boolean => type.__isSuspense
 // incrementing unique id for every pending branch
 let suspenseId = 0
 
+/**
+ * For testing only
+ */
+export const resetSuspenseId = () => (suspenseId = 0)
+
 // Suspense exposes a component-like API, and is treated like a component
 // in the compiler, but internally it's a special built-in type that hooks
 // directly into the renderer.
@@ -476,7 +481,7 @@ function createSuspenseBoundary(
     hiddenContainer,
     anchor,
     deps: 0,
-    pendingId: 0,
+    pendingId: suspenseId++,
     timeout: typeof timeout === 'number' ? timeout : -1,
     activeBranch: null,
     pendingBranch: null,
diff --git a/packages/sfc-playground/src/App.vue b/packages/sfc-playground/src/App.vue
index 200ac550d8f..cadd39f4baa 100644
--- a/packages/sfc-playground/src/App.vue
+++ b/packages/sfc-playground/src/App.vue
@@ -140,8 +140,8 @@ onMounted(() => {
     :preview-options="{
       customCode: {
         importCode: `import { initCustomFormatter } from 'vue'`,
-        useCode: `initCustomFormatter()`
-      }
+        useCode: `initCustomFormatter()`,
+      },
     }"
   />
 </template>