fix(parse/html/vue): emit diagnostics for invalid vue shorthand syntaxes

[dyc3]

Summary

Previously, the HTML parser would eagerly accept trivia in vue shorthand syntaxes (:foo, @click). This makes it so we explicitly reject trivia if it appears after the : or @.

I'll admit the fix feels a bit hacky. In the future, we should make better utilities to let us reject trivia in these spots easier.

Follow up to #8226 (comment)

Test Plan

Snapshot tests

Docs

[changeset-bot]

🦋 Changeset detected

Latest commit: 4b94b57

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@biomejs/biome	Patch
@biomejs/cli-win32-x64	Patch
@biomejs/cli-win32-arm64	Patch
@biomejs/cli-darwin-x64	Patch
@biomejs/cli-darwin-arm64	Patch
@biomejs/cli-linux-x64	Patch
@biomejs/cli-linux-arm64	Patch
@biomejs/cli-linux-x64-musl	Patch
@biomejs/cli-linux-arm64-musl	Patch
@biomejs/wasm-web	Patch
@biomejs/wasm-bundler	Patch
@biomejs/wasm-nodejs	Patch
@biomejs/backend-jsonrpc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Walkthrough

This patch updates @biomejs/biome to fix a bug in the HTML parser's Vue directive handling. The change adds trivia validation to the parse_vue_v_on_shorthand_directive and parse_vue_directive_argument functions to detect and flag invalid shorthand syntax (e.g., <Foo : foo="5" /> or <Foo @ click="handleClick" /> with spaces after separators). When invalid whitespace is detected, the parser now emits an error and returns a bogus directive node for graceful recovery. Two new test files validate this error handling behaviour.

Possibly related PRs

• fix(parse/html/vue): reject whitespace before vue directive arguments #8178: Adds similar trivia checks to Vue directive separators (colon and @) to validate proper whitespace handling in Vue template parsing.

Suggested labels

A-Parser, A-Diagnostic, L-HTML

Suggested reviewers

• ematipico

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: emitting diagnostics for invalid Vue shorthand syntaxes in the HTML parser.
Description check	✅ Passed	The description is directly related to the changeset, explaining the motivation (rejecting trivia after : or @ in Vue shorthand), acknowledging implementation concerns, and linking to related discussion.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch dyc3/invalid-vue-shorthands

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

crates/biome_html_parser/src/syntax/vue.rs (1)

131-141: Trivia validation works, though note the pattern duplication.

The logic correctly rejects invalid spacing after :. Since you've mentioned this feels "hacky", you might consider extracting the position-capture-and-trivia-check pattern into a helper function in future—it now appears three times (lines 76–83, 105–112, 134–141).

Example helper signature:

fn has_trivia_after_bump(p: &HtmlParser, pos_before_bump: usize) -> Option<TextRange> {
    p.source().trivia_list.last()
        .filter(|trivia| pos_before_bump < trivia.text_range().start())
        .map(|trivia| trivia.text_range())
}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f19b52 and 4b94b57.

⛔ Files ignored due to path filters (2)

• crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue.snap is excluded by !**/*.snap and included by **
• crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue.snap is excluded by !**/*.snap and included by **

📒 Files selected for processing (4)

• .changeset/loose-bikes-attend.md (1 hunks)
• crates/biome_html_parser/src/syntax/vue.rs (2 hunks)
• crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue (1 hunks)
• crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-08-05T14:43:29.581Z

Learnt from: dyc3
Repo: biomejs/biome PR: 7081
File: packages/@biomejs/biome/configuration_schema.json:7765-7781
Timestamp: 2025-08-05T14:43:29.581Z
Learning: The file `packages/biomejs/biome/configuration_schema.json` is auto-generated and should not be manually edited or reviewed for schema issues; any changes should be made at the code generation source.

Applied to files:

• .changeset/loose-bikes-attend.md

🧬 Code graph analysis (1)

crates/biome_html_parser/src/syntax/vue.rs (1)

crates/biome_html_parser/src/syntax/parse_error.rs (1)

• expected_vue_directive_argument (112-114)

⏰ 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). (9)

• GitHub Check: Test Node.js API
• GitHub Check: Check Dependencies
• GitHub Check: Lint project (depot-ubuntu-24.04-arm-16)
• GitHub Check: Lint project (depot-windows-2022)
• GitHub Check: Documentation
• GitHub Check: Test (depot-windows-2022-16)
• GitHub Check: Test (depot-ubuntu-24.04-arm-16)
• GitHub Check: End-to-end tests
• GitHub Check: autofix

🔇 Additional comments (4)

.changeset/loose-bikes-attend.md (1)

1-5: LGTM!

Clear documentation of the bug fix with a helpful example.

crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-bind-shorthand.vue (1)

1-1: LGTM!

Good negative test case for invalid v-bind shorthand syntax.

crates/biome_html_parser/tests/html_specs/error/vue/invalid-v-on-shorthand.vue (1)

1-1: LGTM!

Good negative test case for invalid v-on shorthand syntax.

crates/biome_html_parser/src/syntax/vue.rs (1)

73-83: LGTM!

The trivia detection logic correctly identifies and rejects invalid spacing after @. The graceful recovery to VUE_BOGUS_DIRECTIVE is appropriate.