dx(runtime-core): check current and parent components in formatComponentName

[skirtles-code]

formatComponentName() already checks the components option for both the current component and the parent component, searching for the component name. However, the current logic will only search the parent if the current component doesn't have a components option.

The following example intentionally logs a warning, but in the warning message the name Anonymous is used, rather than MyChild. If the redundant components: {} option is removed, the warning successfully identifies the name of the component.

https://jsfiddle.net/skirtle/abnvzju0/

This PR changes the logic in formatComponentName() so that the parent will still be checked even if the child has a components option of its own, assuming the component's name hasn't already been found.

The PR also includes:

• Tests for formatComponentName().
• A tweak to use formatComponentName() for a warning elsewhere in the same file.
• The instance.parent check has been moved so that it is only applied in the code branch that needs instance.parent.

Summary by CodeRabbit

• Bug Fixes

  • Enhanced component name resolution for more accurate error messages and diagnostic reporting across various component scenarios.

• Tests

  • Added comprehensive test coverage for component name formatting, including edge cases and multiple configuration scenarios.

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

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	103 kB	38.9 kB	35 kB
vue.global.prod.js	161 kB	58.8 kB	52.3 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.8 kB	18.3 kB	16.8 kB
createApp	55 kB	21.4 kB	19.6 kB
createSSRApp	59.3 kB	23.1 kB	21.1 kB
defineCustomElement	60.6 kB	23.1 kB	21.1 kB
overall	69.3 kB	26.6 kB	24.2 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 3230e0d

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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

[edison1105]

The failure of ecosystem-ci has nothing to do with this PR

[coderabbitai]

Walkthrough

This PR enhances component name inference in Vue's runtime-core by introducing comprehensive tests for the formatComponentName function and improving its implementation to handle name resolution more robustly, including relaxing null-checks and safely handling registry lookups.

Changes

Cohort / File(s)	Summary
Component Name Formatting Tests packages/runtime-core/__tests__/component.spec.ts	Adds comprehensive test suite for formatComponentName covering default names, name options, recursive components, parent inference, functional components, global components, and name precedence across various configurations
Component Runtime Implementation packages/runtime-core/src/component.ts	Improves formatComponentName calls in async setup warnings, relaxes null-checks on instance parameter to only require instance (not parent), and safely handles registry lookups by allowing null values

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Test file: Comprehensive coverage with multiple scenarios, but tests follow consistent patterns for a single function
• Implementation changes: Small focused edits, but require careful understanding of name resolution logic and null-check implications
• Areas requiring attention:
  • Registry lookup null-safety changes and their interaction with inferFromRegistry
  • Null-check relaxation on instance parameter and implications for parent-dependent name inference
  • Test coverage adequacy for new null-handling behavior

Poem

🐰 A rabbit hops with glee so bright,
Component names now shine just right!
From null-checks loose to registries deep,
Identity inference—a promise we keep!
Tests bloom in rows, a garden of care,
Naming precision floats through the air. 🎪

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: checking current and parent components in formatComponentName function to improve component name inference.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 5af3dd9 and 3230e0d.

📒 Files selected for processing (2)

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

🧰 Additional context used

🧬 Code graph analysis (1)

packages/runtime-core/__tests__/component.spec.ts (1)

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

• formatComponentName (1219-1253)

⏰ 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: test / e2e-test

🔇 Additional comments (3)

packages/runtime-core/src/component.ts (2)

900-900: LGTM! Good consistency improvement.

Using formatComponentName here ensures consistent component name resolution across all warning messages, including inference from parent registries and file-based names.

---

1232-1249: LGTM! This correctly fixes the parent registry lookup issue.

The refactored logic properly searches all three registries in order (child components → parent components → appContext components) rather than selecting just one registry. The key improvements are:

1. Relaxed null-check (line 1232): Enables name inference even without a parent instance.
2. Safe registry helper (lines 1234-1236): The inferFromRegistry helper correctly accepts undefined | null and handles them gracefully via the for...in loop.
3. Sequential search (lines 1244-1249): Each registry is searched independently, so a child with an empty components: {} no longer prevents checking the parent's registry.

This resolves the "Anonymous" display issue described in the PR objectives.

packages/runtime-core/__tests__/component.spec.ts (1)

1-157: LGTM! Excellent test coverage for formatComponentName.

This comprehensive test suite validates all the key scenarios:

• Parent registry lookup (lines 57-76) directly tests the fix for the "Anonymous" issue when a child has components: {}
• Name precedence (lines 117-156) confirms the correct resolution order: name option → __name → __file → child components → parent components → appContext components
• Edge cases like self-recursive components and functional components are well-covered

The tests properly exercise the refactored logic in component.ts and provide strong regression protection.

---

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

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