fix(suspense): don't immediately resolve suspense on last dep unmount

[edison1105]

close #13453

because new vnodes may contain async components

Summary by CodeRabbit

• Bug Fixes
  • Improved handling of asynchronous dependencies in Suspense components during dynamic updates, ensuring correct rendering when async components are added or removed.
• Tests
  • Added a test to verify dynamic addition and removal of async components within Suspense boundaries.

[coderabbitai[bot]]

Walkthrough

Removed legacy logic in unmountComponent that decremented a parent Suspense's pending deps and possibly resolved the boundary during unmount; added a test that exercises adding/removing async deps during Suspense patching. No public APIs changed.

Changes

Cohort / File(s)	Change Summary
Runtime core renderer packages/runtime-core/src/renderer.ts	Deleted conditional block in unmountComponent that decremented parent Suspense deps and invoked resolve() when unmounting unresolved async components.
Suspense tests packages/runtime-core/__tests__/components/Suspense.spec.ts	Added test add new async deps during patching and imports (renderList, renderSlot) to validate dynamic add/remove of async deps within Suspense.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant Unmount as unmountComponent
  participant Suspense as ParentSuspense
  participant AsyncComp as AsyncComponent

  rect rgb(240,248,255)
    note right of Unmount: Old flow (before change)
    AsyncComp->>Unmount: unmount (unresolved)
    Unmount->>Suspense: decrement deps
    Suspense->>Suspense: if deps == 0 -> resolve()
    Suspense-->>AsyncComp: resolve/cleanup
  end

  rect rgb(255,250,240)
    note right of Unmount: New flow (after change)
    AsyncComp->>Unmount: unmount (unresolved)
    Unmount-->>AsyncComp: cleanup (no parent deps change)
    Suspense->>Suspense: resolution occurs only when async resolves or other existing paths trigger it
  end

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Fix error when <slot> is used inside <Suspense> and components are unmounted (#13453)	✅

Out-of-scope changes

(No out-of-scope changes detected.)

Possibly related PRs

• vuejs/core#13560 — Modifies Suspense handling and placeholder/anchor tracking; strongly related to handling unresolved async components and mounting/patching behavior.

Poem

"I nibbled old deps, then hopped away,
No more late decrements leading astray.
Slots and suspense can dance in the sun,
A rabbit's quick fix — now tests pass, well done! 🐇"

[!TIP]

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between d88b2f4983d0f94cc077f01ba7779bf7945760cf and 9caf40eada142b41d12cdf7400fcccfb8806ec2c.

📒 Files selected for processing (2)

• packages/runtime-core/__tests__/components/Suspense.spec.ts (2 hunks)
• packages/runtime-core/src/renderer.ts (0 hunks)

💤 Files with no reviewable changes (1)

• packages/runtime-core/src/renderer.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/runtime-core/tests/components/Suspense.spec.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: continuous-release
• GitHub Check: test / lint-and-test-dts
• GitHub Check: test / unit-test
• GitHub Check: test / e2e-test
• GitHub Check: continuous-release

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch edison/fix/13453

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (-129 B)	38.4 kB (-35 B)	34.6 kB (+34 B)
vue.global.prod.js	159 kB (-129 B)	58.6 kB (-31 B)	52.2 kB (-34 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.5 kB (-129 B)	18.2 kB (-48 B)	16.7 kB (-36 B)
createApp	54.5 kB (-129 B)	21.2 kB (-46 B)	19.4 kB (+16 B)
createSSRApp	58.7 kB (-129 B)	22.9 kB (-44 B)	20.9 kB (-29 B)
defineCustomElement	59.4 kB (-129 B)	22.8 kB (-51 B)	20.8 kB (-34 B)
overall	68.5 kB (-129 B)	26.4 kB (-35 B)	24.1 kB (+18 B)

[pkg-pr-new[bot]]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13456

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13456

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13456

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13456

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13456

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13456

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13456

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13456

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13456

vue

npm i https://pkg.pr.new/vue@13456

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13456

commit: 9caf40e

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	:white_check_mark: success	:white_check_mark: success
nuxt	:white_check_mark: success	:white_check_mark: success
radix-vue	:white_check_mark: success	:white_check_mark: success
pinia	:white_check_mark: success	:white_check_mark: success
router	:white_check_mark: success	:white_check_mark: success
vitepress	:white_check_mark: success	:white_check_mark: success
test-utils	:white_check_mark: success	:white_check_mark: success
quasar	:white_check_mark: success	:white_check_mark: success
vite-plugin-vue	:white_check_mark: success	:white_check_mark: success
vant	:white_check_mark: success	:white_check_mark: success
vue-i18n	:white_check_mark: success	:white_check_mark: success
primevue	:white_check_mark: success	:white_check_mark: success
vueuse	:white_check_mark: success	:white_check_mark: success
vuetify	:white_check_mark: success	:white_check_mark: success
vue-simple-compiler	:white_check_mark: success	:white_check_mark: success
vue-macros	:x: failure	:x: failure