fix(compat): handle v-model deprecation warning with missing appContext

[edison1105]

close #14202

Summary by CodeRabbit

• Bug Fixes

  • Improved v-model stability for legacy custom components; deprecation warnings now handle missing app context gracefully to avoid crashes and ensure data stays synchronized.

• Tests

  • Added a test verifying v-model deprecation handling when app context is absent, confirming events update bound data and UI correctly.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Fixes a crash in compat component v-model warning by supplying an appContext in the deprecation warning payload; adds a test exercising v-model emissions when appContext is missing.

Changes

Cohort / File(s)	Summary
Runtime core compat change packages/runtime-core/src/compat/componentVModel.ts	Import createAppContext and include appContext (from vnode.ctx.appContext or createAppContext() fallback) in the COMPONENT_V_MODEL deprecation warning payload instead of passing only { type, comp }.
Test coverage packages/vue-compat/__tests__/componentVModel.spec.ts	Add test "should handle v-model deprecation warning with missing appContext" that mounts a v-model-bound child, asserts initial render, triggers an input emission, awaits update, and asserts state and DOM update without crashing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review packages/runtime-core/src/compat/componentVModel.ts to ensure the appContext fallback is safe and doesn't leak or mutate global state.
• Verify the new test reproduces the original failure mode (missing appContext) and that assertion timing (use of nextTick) is correct.

Suggested labels

ready to merge, :hammer: p3-minor-bug, scope: v2 compat

🐰 I nudged a context that once was nil,
A gentle fallback fixed the spill.
Warnings now whisper, the app stays bright,
Clicks keep bouncing through the night. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	The PR changes address the core issue by ensuring appContext is passed with the deprecation warning payload, preventing crashes when instance.appContext is accessed.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the v-model deprecation warning issue: adding appContext to the warning payload and adding a corresponding test.
Title check	✅ Passed	The title clearly and specifically describes the main fix: ensuring appContext is passed to the v-model deprecation warning to prevent crashes when it's missing.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

_{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	103 kB (-55 B)	39 kB (-8 B)	35.1 kB (+2 B)
vue.global.prod.js	161 kB (-55 B)	58.9 kB (-31 B)	52.4 kB (-142 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB	18.3 kB	16.8 kB
createApp	55.1 kB (-59 B)	21.4 kB (-23 B)	19.5 kB (-49 B)
createSSRApp	59.3 kB (-55 B)	23.1 kB (-21 B)	21.1 kB (-22 B)
defineCustomElement	60.7 kB (-55 B)	23.1 kB (-30 B)	21.1 kB (-22 B)
overall	69.4 kB (-4 B)	26.6 kB (+9 B)	24.3 kB (-21 B)

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

vue

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

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

yarn add https://pkg.pr.new/[email protected]

@vue/compat

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

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

yarn add https://pkg.pr.new/@vue/[email protected]

commit: ecf7c0d

[Copilot]

Pull request overview

This PR fixes a crash in the v-model deprecation warning system when appContext is not available. The issue occurred when the warning system tried to format component names but couldn't access the appContext.components registry, resulting in a null pointer error.

Key Changes

• Passes appContext to the deprecation warning function with a fallback to an empty context
• Adds a test case to verify the fix prevents crashes when appContext is missing

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/runtime-core/src/compat/componentVModel.ts	Imports createAppContext and passes appContext (from vnode.ctx or creates a new one) to warnDeprecation to prevent null pointer errors when formatting component names
packages/vue-compat/__tests__/componentVModel.spec.ts	Adds a regression test that verifies v-model functionality works correctly and doesn't crash when triggering the deprecation warning

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/runtime-core/src/compat/componentVModel.ts (1)

3-42: Prefer real vnode appContext before falling back to createAppContext

The new pseudo‑instance with an appContext fixes the crash by guaranteeing instance.appContext exists, which is good. However, when vnode.ctx is missing you fall back directly to createAppContext(), which creates a fresh, empty context and ignores the real app’s configuration (global config, isNativeTag, etc.) that deprecation handling might rely on.

Given that VNodes already carry their app context, consider sourcing it in this order instead:

appContext:
  vnode.appContext ||
  (vnode.ctx && vnode.ctx.appContext) ||
  createAppContext()

This preserves the actual app context when available while still preventing the crash when it truly isn’t.

If you confirm that vnode.appContext is always set in this compat path, you could even drop the createAppContext() fallback entirely and tighten the type accordingly.

packages/vue-compat/__tests__/componentVModel.spec.ts (1)

144-179: Good regression coverage; consider slightly clarifying the clicked element

This test nicely captures the #14202 scenario: it drives the compat v-model path, asserts the deprecation warning, and verifies that the app continues to work and update state/DOM instead of crashing.

One small readability tweak you might consider: the element selection

const child = vm.$el.querySelector('div')
child.click()

relies on querySelector returning the inner child <div> rather than the root container. To make the intent more explicit, you could narrow the selector (e.g. 'div > div') or add a brief comment that this is the child component’s root node. Not required, just a clarity improvement.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between edbd5ec and a99e87d.

📒 Files selected for processing (2)

• packages/runtime-core/src/compat/componentVModel.ts (2 hunks)
• packages/vue-compat/__tests__/componentVModel.spec.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

packages/vue-compat/__tests__/componentVModel.spec.ts (1)

packages/runtime-core/src/index.ts (1)

• DeprecationTypes (479-481)

packages/runtime-core/src/compat/componentVModel.ts (2)

packages/runtime-core/src/index.ts (1)

• DeprecationTypes (479-481)

packages/runtime-core/src/apiCreateApp.ts (1)

• createAppContext (224-244)

⏰ 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). (1)

• GitHub Check: Agent