feat(compiler-core): consider component import names for resolving setup component references #13624
Conversation
…tup component references
WalkthroughThe changes introduce a new mechanism for tracking "known components" in the Vue compiler's transformation and code generation stages. This includes adding a Changes
Sequence Diagram(s)sequenceDiagram
participant SFCCompiler as SFC Compiler
participant ScriptCompile as compileScript
participant Transform as createTransformContext
participant TemplateCompile as compileTemplate
SFCCompiler->>ScriptCompile: Compile <script setup>
ScriptCompile->>ScriptCompile: Identify user imports
ScriptCompile->>ScriptCompile: Add known components to knownComponents set
ScriptCompile->>TemplateCompile: Pass knownComponents in compilerOptions
TemplateCompile->>Transform: createTransformContext(knownComponents)
Transform->>Transform: Provide knownComponents to transform context
TemplateCompile->>TemplateCompile: Use resolveSetupReference with isComponent flag
TemplateCompile->>TemplateCompile: Prefer knownComponents for component tags
Assessment against linked issues
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/compiler-core/src/transforms/transformElement.ts (1)
334-350: Excellent component prioritization logic with minor optimization opportunity.The implementation correctly prioritizes known components when
isComponentis true by checking each name variant against theknownComponentsset before falling back to the original binding resolution.Consider using optional chaining for cleaner code:
- isKnownComponent: - context.knownComponents && context.knownComponents.has(name), + isKnownComponent: context.knownComponents?.has(name),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
packages/compiler-core/src/codegen.ts(1 hunks)packages/compiler-core/src/options.ts(1 hunks)packages/compiler-core/src/transform.ts(2 hunks)packages/compiler-core/src/transforms/transformElement.ts(3 hunks)packages/compiler-sfc/__tests__/compileScript.spec.ts(1 hunks)packages/compiler-sfc/src/compileScript.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/compiler-sfc/__tests__/compileScript.spec.ts (1)
packages/compiler-sfc/__tests__/utils.ts (1)
assertCode(27-42)
packages/compiler-core/src/codegen.ts (1)
packages/compiler-core/src/options.ts (1)
CodegenOptions(311-353)
🪛 Biome (1.9.4)
packages/compiler-core/src/transforms/transformElement.ts
[error] 338-338: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ 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). (3)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
🔇 Additional comments (10)
packages/compiler-core/src/options.ts (1)
202-207: LGTM! Clean interface addition with clear documentation.The new
knownComponentsproperty is well-designed with appropriate typing and clear documentation explaining its purpose for component reference disambiguation.packages/compiler-core/src/codegen.ts (1)
123-126: LGTM! Consistent exclusion of optional property.The exclusion of
knownComponentsfrom theRequired<CodegenOptions>type follows the established pattern for other optional properties likebindingMetadataandinline.packages/compiler-sfc/__tests__/compileScript.spec.ts (1)
409-433: LGTM! Comprehensive test case for component casing disambiguation.This test effectively validates the new feature by:
- Testing different casing styles (PascalCase, camelCase) for imported components
- Including conflicting local variables with similar names but different casing
- Verifying correct component resolution in the generated
_createVNodecalls- Following established testing patterns with
assertCode()validationThe test provides good coverage for the component reference disambiguation functionality.
packages/compiler-core/src/transform.ts (2)
146-146: LGTM! Clean parameter addition with backward compatibility.The addition of the
knownComponentsparameter with a default emptySet<string>()maintains backward compatibility while enabling the new component disambiguation feature.
175-175: LGTM! Proper propagation to transform context.The
knownComponentsproperty is correctly propagated to theTransformContextobject, following the established pattern for other options.packages/compiler-sfc/src/compileScript.ts (2)
729-744: LGTM! Well-structured known components tracking.The logic correctly identifies known Vue components from user imports by checking for namespace imports, default imports from .vue files, and Vue package imports. The binding metadata assignment is also appropriate - known components get
SETUP_CONSTwhile potentially reactive imports getSETUP_MAYBE_REF.
888-888: Good integration with template compiler.Passing the
knownComponentsset to the template compiler options enables the enhanced component resolution in the template transformation phase.packages/compiler-core/src/transforms/transformElement.ts (3)
322-326: Function signature enhancement enables component prioritization.The addition of the
isComponentparameter allows the function to differentiate between component and directive resolution contexts, enabling more precise binding resolution.
289-289: Appropriate component resolution context.Correctly passing
trueforisComponentin component resolution scenarios enables the new prioritization logic for known components.Also applies to: 295-295
899-899: Correct directive resolution context.Passing
falseforisComponentin directive resolution maintains the original behavior since directives shouldn't prioritize component bindings.
close #9303
If the issue above is not considered a bug then this can be considered a breaking change, though a worthwhile one in my opinion.
Verified that the SFC playground example from the issue works as expected:
Summary by CodeRabbit
New Features
Bug Fixes
Tests
<script setup>.