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[] = [] 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()`, + }, }" />