enhance the warning when use undeclared variable in template

[caozhong1996]

fix: #4305

No idea how to add test, because it will broken other test. So I add !__TEST__ to avoid test fail.😢

You can clone this project: https://github.com/caozhong1996/v3-warn-demo.

I added those code in vue.js:

// line 7468
} else if (
  !(key[0] === '$' || key[0] === '_')
) {
  warn$1(
    `Property ${JSON.stringify(key)} was accessed during render ` +
      `but is not defined on instance.`
  )
}

Summary by CodeRabbit

• New Features

  • Improved warning messages in development mode when accessing undeclared properties in templates, helping users identify undefined variables during render.

• Tests

  • Added a test to verify that warnings are correctly emitted for undeclared variables used in templates.

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38 kB	34.2 kB
vue.global.prod.js	159 kB	57.9 kB	51.4 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.7 kB
createApp	55 kB	21.3 kB	19.4 kB
createSSRApp	59 kB	23 kB	20.9 kB
defineCustomElement	59.8 kB	22.8 kB	20.8 kB
overall	68.7 kB	26.3 kB	24 kB

[pkg-pr-new[bot]]

Open in Stackblitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-dom

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

@vue/runtime-core

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

@vue/server-renderer

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

@vue/shared

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

@vue/compat

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

vue

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

commit: d516036

[edison1105]

No idea how to add test, because it will broken other test

Could you please try to add an e2e test case?

[caozhong1996]

No idea how to add test, because it will broken other test

Could you please try to add an e2e test case?

Done, I almost forgot about this pr, I'm glad to see that you're still persisting in maintaining vue-next. It has been a really long time, salute🫡 @edison1105

[coderabbitai[bot]]

Walkthrough

A new conditional warning was added in the Vue runtime core to notify developers when undeclared properties are accessed during render, specifically for non-reserved keys. Additionally, a test was introduced to verify that warnings are emitted for undeclared template variables and event handlers.

Changes

File(s)	Change Summary
packages/runtime-core/src/componentPublicInstance.ts	Added a conditional branch to emit a warning when a non-reserved, undeclared property is accessed.
packages/vue/tests/index.spec.ts	Added a test to check that undeclared template variables and handlers trigger appropriate warnings.

Sequence Diagram(s)

sequenceDiagram
    participant Template as Template Render
    participant Proxy as PublicInstanceProxyHandlers
    participant DevWarn as Warning System

    Template->>Proxy: Access property (e.g., "handler")
    alt Property is undeclared and not reserved
        Proxy->>DevWarn: Emit warning about undeclared property
    else Property is declared or reserved
        Proxy-->>Template: Return property value
    end

Assessment against linked issues

Objective	Addressed	Explanation
Emit warning when undeclared handler or variable is accessed in template (#4305)	✅

Suggested labels

ready to merge, :hammer: p3-minor-bug

Poem

🐇
In the garden of Vue where handlers grow,
A warning now whispers when secrets don’t show.
If you forget to declare, the console will say,
“Hey, little rabbit, you’ve lost your way!”
With tests to ensure all warnings appear,
The code is now safer—let’s all give a cheer!
🌱

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between ed01d9257104cf59d8330d96af77941b40494aa1 and d516036ee22ca8d875eb9629ae0c385069daf39a.

📒 Files selected for processing (2)

• packages/runtime-core/src/componentPublicInstance.ts (1 hunks)
• packages/vue/__tests__/index.spec.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

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

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

• warn (133-133)

🔇 Additional comments (1)

packages/vue/__tests__/index.spec.ts (1)

315-336: Good test coverage for the new warning functionality.

The test case effectively validates the warning behavior for undeclared template variables and addresses edison1105's request for e2e test coverage. The test structure is well-designed:

• Tests both event handler (handler) and interpolation (dddd) scenarios
• Includes a control case (message) that shouldn't trigger warnings
• Uses clear, descriptive assertions

Note: If the underlying implementation changes to address the broader concerns raised in previous reviews (false positives, rendering context validation), this test may need corresponding updates.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
  • Explain this complex logic.
  • 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. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• 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 src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

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

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

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

Documentation and Community

• 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.