dx(compiler-core): warn for `:v-`

[skirtles-code]

This PR is closely related to my other PR, #7360. There is significant overlap between them and merging one will cause conflicts for the other.

This PR introduces a compiler warning when it encounters :v- at the start of an attribute name. e.g. :v-if, :v-for or :v-model. This is almost invariably an error, and a common mistake made by beginners.

Only the : shorthand is affected. If someone really wants to have a DOM attribute beginning with v- then they can use v-bind:v- instead. Beginners are unlikely to make the mistake of using v-bind:v-for, so I see no reason to prevent that.

The compiler currently doesn't use warnings, only errors. However, I felt an error would be too severe for the initial introduction of this check as it would prevent some applications from building. It could be seen as a breaking change, as there's nothing in the docs to suggest that this isn't allowed. In future, once people have had chance to fix the warnings, we could maybe increase the severity to make it an error.

The warnings should be visible in the console for anyone using the SFC Playground or a browser-based compiler. For a standard Vite setup, the warning won't be shown in the browser, it'll only appear in the terminal running Vite.

SFC Playground example

Screenshot of Vite:

[netlify[bot]]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	02d0bd5bb3e0e853e4de762e778c2bc7b52c2d87
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/639caf5f35b08200089373bd

[github-actions[bot]]

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 (+1 B)	52.3 kB (+25 B)

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

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #7359 will not alter performance

_{Comparing skirtles-code:colon-before-directive (949f7bf) with main (a6503e3)}

Summary

✅ 53 untouched benchmarks

[coderabbitai[bot]]

Walkthrough

A new warning detection mechanism is added to flag colon-prefixed directives with arguments starting with "v-", alongside corresponding error code enhancements and test infrastructure updates. Error codes are renumbered in DOM and SSR modules for alignment.

Changes

Cohort / File(s)	Summary
Warning Detection & Error Code packages/compiler-core/src/errors.ts, packages/compiler-core/src/parser.ts	Introduces X_COLON_BEFORE_DIRECTIVE error code and message; adds emitWarning() helper function and detection logic to warn when directive arguments start with "v-" in colon-prefixed directives during development.
Test Infrastructure Updates packages/compiler-core/__tests__/parse.spec.ts	Extends test harness with optional warnings field in test patterns; adds warning spies and assertion logic to verify warnings alongside errors; includes new test case for X_COLON_BEFORE_DIRECTIVE.
Error Code Realignment packages/compiler-dom/src/errors.ts, packages/compiler-ssr/src/errors.ts	Updates numeric enum values: X_V_HTML_NO_EXPRESSION (53 → 54) and X_SSR_UNSAFE_ATTR_NAME (65 → 66) for consistency.

Sequence Diagram

sequenceDiagram
    participant Parser
    participant Directive Handler
    participant Warning Handler
    participant onWarn Callback

    Parser->>Directive Handler: Parse directive argument
    Directive Handler->>Directive Handler: Check if colon-prefixed<br/>and arg starts with 'v-'
    alt Warning Condition Met
        Directive Handler->>Warning Handler: emitWarning(X_COLON_BEFORE_DIRECTIVE)
        Warning Handler->>onWarn Callback: Invoke with warning details
        onWarn Callback->>onWarn Callback: Collect warning
    end
    Directive Handler->>Parser: Continue parsing

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Verify enum value changes: Confirm that renumbered error codes (53→54, 65→66) don't conflict with existing or reserved codes and are properly propagated
• Test pattern validation: Review new test case for X_COLON_BEFORE_DIRECTIVE to ensure warning detection logic is correctly exercised
• Warning emission logic: Examine the directive argument parsing path in parser.ts to confirm the "v-" prefix detection is correctly positioned and doesn't affect normal parsing

Poem

🐰 A colon walks into a directive, looking quite mean,
But we spot its mischief with warnings pristine,
"v-" prefixed tricks won't hide anymore,
The parser now whispers of what came before! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a compiler warning for the :v- directive shorthand pattern, which is the primary objective across all modified files.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

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

---

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

[pkg-pr-new[bot]]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 8415f76