fix(transition): skip enter guard while hmr updating

[edison1105]

close #14608

Summary by CodeRabbit

• Bug Fixes

  • Fixed transition enter flow to properly execute during Hot Module Replacement updates, resolving issues with out-in transition mode when child components are reloaded.

• Tests

  • Added E2E test for transitions with KeepAlive and Hot Module Replacement reload cycles.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 05c96df7-3135-41ce-8ace-e1a0564815fe

📥 Commits

Reviewing files that changed from the base of the PR and between 691b590 and 4d26ba3.

📒 Files selected for processing (1)

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

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

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

---

📝 Walkthrough

Walkthrough

The PR fixes a display issue that occurs when Transition and KeepAlive are used together during HMR. The solution introduces HMR state tracking to allow the transition's enter phase to proceed during module reloads, even when a leave transition is in progress. Changes include a new HMR helper, conditional logic in BaseTransition, state management in renderer mounting, and an E2E test validating the fix.

Changes

Cohort / File(s)	Summary
HMR State Management packages/runtime-core/src/hmr.ts	Added setHmrUpdating helper function that sets the isHmrUpdating flag and returns the previous value, using try/finally to ensure state restoration even on early exit.
Transition Enter Logic packages/runtime-core/src/components/BaseTransition.ts	Imported isHmrUpdating and modified enter-path early-return guard to only suppress the "prevent enter if leave in progress" check when HMR is not actively updating.
Renderer Hook Execution packages/runtime-core/src/renderer.ts	Extended HMR import and wrapped post-render hook execution in mountElement with HMR state management via setHmrUpdating, ensuring prior state is restored in finally block.
E2E Test Coverage packages/vue/__tests__/e2e/Transition.spec.ts	Added test case validating Transition with KeepAlive behaves correctly during HMR reload, verifying intermediate DOM state and final rendered output.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• fix(transition): prevent enter if leave is in progress #14443: Directly modifies the same enter-path guard in BaseTransition.ts that prevents vnode from entering when in leavingVNodesCache.
• fix(hmr): prevent update unmounting component during HMR reload #13815: Adjusts HMR update guards around instance updates using similar isHmrUpdating state management patterns.
• fix(hmr): avoid hydration for hmr updating #12262: Modifies HMR state helpers and renderer mounting logic related to transition lifecycle.

Suggested labels

scope: transition, scope: hmr, :hammer: p3-minor-bug

Suggested reviewers

• johnsoncodehk

Poem

🐰 A rabbit leaps through code with care,
When HMR dances in the air,
Transitions blend and KeepAlive sways,
State restored through try/finally's grace,
Enter flows, leaves may wait—hop hooray! 🌿✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: fixing transition behavior by skipping the enter guard during HMR updates, which directly addresses the linked issue #14608.
Linked Issues check	✅ Passed	The PR implements a targeted fix for the HMR + Transition + KeepAlive display issue by introducing HMR state tracking to suppress the enter guard during HMR updates, with supporting test coverage validating the fix.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the HMR transition issue: HMR state management in hmr.ts, conditional guard logic in BaseTransition.ts, renderer hook wrapping in renderer.ts, and E2E test validation.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch edison/fix/14608

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	105 kB	39.7 kB	35.7 kB
vue.global.prod.js	163 kB	59.7 kB	53.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.2 kB	18.7 kB	17.2 kB
createApp	56.3 kB	21.8 kB	19.9 kB
createSSRApp	60.6 kB	23.5 kB	21.5 kB
defineCustomElement	62.5 kB	23.7 kB	21.6 kB
overall	70.7 kB	27.1 kB	24.7 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14611

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

yarn add https://pkg.pr.new/@vue/compiler-core@14611.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14611

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

yarn add https://pkg.pr.new/@vue/compiler-dom@14611.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14611

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@14611.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14611

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@14611.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14611

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

yarn add https://pkg.pr.new/@vue/reactivity@14611.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14611

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

yarn add https://pkg.pr.new/@vue/runtime-core@14611.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14611

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

yarn add https://pkg.pr.new/@vue/runtime-dom@14611.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14611

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

yarn add https://pkg.pr.new/@vue/server-renderer@14611.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14611

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

yarn add https://pkg.pr.new/@vue/shared@14611.tgz

vue

pnpm add https://pkg.pr.new/vue@14611

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

yarn add https://pkg.pr.new/vue@14611.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14611

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

yarn add https://pkg.pr.new/@vue/compat@14611.tgz

commit: 4d26ba3

[edison1105]

/ecosystem-ci run

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/runtime-core/src/renderer.ts`:
- Around line 741-749: The HMR flag set by setHmrUpdating inside the callback
passed to queuePostRenderEffect can leak if any hook throws; update the callback
so it captures prev = setHmrUpdating(isHmr) (when __DEV__), then executes
invokeVNodeHook(vnodeHook,...), transition!.enter(el), and
invokeDirectiveHook(...) inside a try block and always restore the HMR flag in a
finally block by calling setHmrUpdating(prev). Ensure you still only call
setHmrUpdating when __DEV__ and preserve usage of vnodeHook, invokeVNodeHook,
needCallTransitionHooks/transition.enter, and invokeDirectiveHook.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d26de5e0-0ab6-4c68-ab01-c4a067500edd

📥 Commits

Reviewing files that changed from the base of the PR and between d61d803 and 691b590.

📒 Files selected for processing (4)

• packages/runtime-core/src/components/BaseTransition.ts
• packages/runtime-core/src/hmr.ts
• packages/runtime-core/src/renderer.ts
• packages/vue/__tests__/e2e/Transition.spec.ts

[vue-bot]

📝 Ran ecosystem CI: Open

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

[themavik]

test review body

[themavik]

nit: setHmrUpdating naming

[themavik]

nit: setHmrUpdating returns the previous flag via try/finally; the name reads like a setter-only. Consider renaming to swapHmrUpdating or a one-line comment so the pattern is obvious at the call site in renderer.ts.