fix(compiler-sfc): support ${configDir} in paths for TypeScript 5.5+

[edison1105]

close #13484

Summary by CodeRabbit

• New Features

  • Added support for the ${configDir} variable in TypeScript path mappings and include/exclude patterns when using TypeScript 5.5 or higher.

• Tests

  • Introduced a new test case to verify correct handling of ${configDir} in complex tsconfig setups with project references and path aliases.

[coderabbitai[bot]]

Walkthrough

A test was added validating TypeScript ${configDir} resolution with extended tsconfigs and project references. The resolver now conditionally substitutes ${configDir} in include/exclude and path patterns when TypeScript version is 5.5+ during multi-config resolution.

Changes

Cohort / File(s)	Change Summary
New test packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts	Added a test covering TS project references, extended tsconfigs, and ${configDir} usage in paths/includes.
Resolver logic packages/compiler-sfc/src/script/resolveType.ts	In multi-config resolution, detect TS major/minor, introduce getPattern(base, p) to substitute ${configDir} only for TS >= 5.5 and use it for include/exclude matching.

Sequence Diagram(s)

sequenceDiagram
    participant TestRunner
    participant SFCCompiler
    participant TSResolver
    participant FS

    TestRunner->>SFCCompiler: compile SFC with extended tsconfigs + ${configDir}
    SFCCompiler->>TSResolver: load tsconfig(s), request ts.versionMajorMinor
    TSResolver-->>SFCCompiler: ts version (major.minor) and merged config
    alt TS >= 5.5
        SFCCompiler->>FS: resolve patterns by substituting ${configDir} with config dir
    else TS < 5.5
        SFCCompiler->>FS: resolve patterns via joinPaths(base, pattern) (no ${configDir} substitution)
    end
    FS-->>SFCCompiler: resolved include/exclude file list
    SFCCompiler-->>TestRunner: resolved types and dependency list

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Correctly resolve ${configDir} in extended tsconfig files (paths/include) for Vue SFC type resolution (#13484)	✅

Out-of-scope changes

No out-of-scope functional changes detected.

Suggested reviewers

• Doctor-wu
• LittleSound

Poem

"I nibbled paths where configs hide,
${configDir} now fits inside.
Tests applaud with carrot cheer,
Types resolved — the coast is clear! 🐇"

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7588b4dacf309c1853937df3eebc995826ffee36 and 06b103730d80d98122cb9a30a480d15efeb35aaa.

📒 Files selected for processing (2)

• packages/compiler-sfc/__tests__/compileScript/resolveType.spec.ts (1 hunks)
• packages/compiler-sfc/src/script/resolveType.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• packages/compiler-sfc/tests/compileScript/resolveType.spec.ts
• packages/compiler-sfc/src/script/resolveType.ts

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

🧪 Generate unit tests

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch edison/feat/resolveConfigDir

---

🪧 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.
  • 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.
• 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 the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

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

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit 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

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• 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.

[github-actions[bot]]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB	38.4 kB	34.6 kB
vue.global.prod.js	159 kB	58.5 kB	52.1 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.5 kB	18.2 kB	16.7 kB
createApp	54.5 kB	21.2 kB	19.4 kB
createSSRApp	58.7 kB	22.9 kB	20.9 kB
defineCustomElement	59.5 kB	22.8 kB	20.8 kB
overall	68.5 kB	26.4 kB	24 kB

[pkg-pr-new[bot]]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 06b1037

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

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