fix(runtime-core): correctly assign suspenseId to avoid conflicts with the default id (#9966)

close #9944

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.

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,

packages/sfc-playground/src/App.vue

@@ -140,8 +140,8 @@ onMounted(() => {
     :preview-options="{
       customCode: {
         importCode: `import { initCustomFormatter } from 'vue'`,
-        useCode: `initCustomFormatter()`
-      }
+        useCode: `initCustomFormatter()`,
+      },
     }"
   />
 </template>