Skip to content

refactor(runtime-core): check props rather than propsOptions[0] #13514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

skirtles-code
Copy link
Contributor

@skirtles-code skirtles-code commented Jun 23, 2025

This is minor refactoring of the logic for handling props in PublicInstanceProxyHandlers.get and PublicInstanceProxyHandlers.has, switching it from checking propsOptions[0] to checking props. The new version is simpler and leads to a smaller build.

In Vue 3.0, props could be missing from the props object. Props were only included if they were passed in by the parent or had a default value. The logic in PublicInstanceProxyHandlers couldn't rely on checking props, so it checked propsOptions[0] instead.

That changed in 3.1.0. See #3288 for more details, but props now contains all the props.

Some other notes about what I changed and why...

  • The code for set hasn't been changed as that was already using props.
  • I did consider adding a check for EMPTY_OBJ (as used for other sources of properties, e.g. data), but props won't be an EMPTY_OBJ by the time this code runs, even for components that don't declare any props.
  • propsOptions is populated before props, so there is potentially a timing issue introduced by this change. However, in practice, the only user-facing 'hook' that runs between the population of those two objects is the default function for a prop. The default function doesn't have access to the relevant proxy, so it could only encounter a problem if it called getCurrentInstance().proxy (which it shouldn't be doing anyway) and then did some very strange things with it. I don't think this is a realistic case.
  • I've also removed an adjacent comment that seems to be referring to a much older implementation and is no longer relevant.
  • The existing tests all pass, but I don't think they're actually testing this specific aspect. I did try to add some extra tests, but it's quite difficult to test because dev builds expose all props via ctx (see exposePropsOnRenderContext in the same file). Even if the logic for props is wrong it still 'works' because they're accessed via ctx instead. If the logic were wrong it would likely only fail in a production build.

Summary by CodeRabbit

  • Refactor
    • Simplified property access logic for component instances, improving maintainability without affecting user-facing behavior.

Copy link

coderabbitai bot commented Jun 23, 2025

Walkthrough

The update simplifies property access logic in the component public instance proxy by removing an intermediate variable and directly checking for property existence in the component's props object. The core behavior and structure of property resolution remain unchanged, with no modifications to public or exported APIs.

Changes

File(s) Change Summary
packages/runtime-core/src/componentPublicInstance.ts Removed use of normalizedProps variable; now directly checks property existence in props.

Poem

In the warren of code, a path once split,
Now hops direct—no middle bit!
No props detour, no extra check,
Just straight to the field—what the heck!
The code runs lean, the logic clear,
A bunny’s hop brings springtime 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 5f8314c and e7b0d93.

📒 Files selected for processing (1)
  • packages/runtime-core/src/componentPublicInstance.ts (2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/runtime-core/src/componentPublicInstance.ts (1)
packages/shared/src/general.ts (2)
  • hasOwn (34-37)
  • EMPTY_OBJ (3-5)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: Redirect rules
  • GitHub Check: Header rules
  • GitHub Check: Pages changed
🔇 Additional comments (2)
packages/runtime-core/src/componentPublicInstance.ts (2)

453-453: LGTM: Simplified props access improves clarity and performance

The direct check of hasOwn(props, key) is cleaner than the previous approach using propsOptions[0]. Since Vue 3.1.0, the props object includes all props, making this direct access reliable and more efficient.


572-572: LGTM: Consistent props handling across proxy handlers

The changes bring the has handler in line with the simplified approach, directly accessing and checking props. This creates consistency with both the updated get handler and the existing set handler (line 545), which already uses hasOwn(instance.props, key).

Also applies to: 580-580

✨ 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
🪧 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.

Copy link

pkg-pr-new bot commented Jun 23, 2025

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: e7b0d93

Copy link

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 101 kB (-53 B) 38.3 kB (-15 B) 34.5 kB (+25 B)
vue.global.prod.js 159 kB (-53 B) 58.5 kB (-14 B) 52 kB (+20 B)

Usages

Name Size Gzip Brotli
createApp (CAPI only) 46.5 kB (-53 B) 18.2 kB (-17 B) 16.6 kB (-11 B)
createApp 54.4 kB (-53 B) 21.2 kB (-17 B) 19.4 kB (+4 B)
createSSRApp 58.6 kB (-53 B) 22.9 kB (-26 B) 20.9 kB (-10 B)
defineCustomElement 59.4 kB (-53 B) 22.7 kB (-17 B) 20.8 kB (-15 B)
overall 68.5 kB (-53 B) 26.3 kB (-14 B) 24 kB (-53 B)

@jh-leong
Copy link
Member

/ecosystem-ci run

@vue-bot
Copy link
Contributor

vue-bot commented Jun 23, 2025

📝 Ran ecosystem CI: Open

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

@edison1105 edison1105 added ready to merge The PR is ready to be merged. 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. labels Jun 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready to merge The PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants