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

dyc3 · 2025-11-24T14:44:19Z

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 · 2025-11-24T14:44:23Z

🦋 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 · 2025-11-24T14:47:35Z

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.

…xes (#8242)

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

4b94b57

github-actions bot added A-Parser Area: parser L-HTML Language: HTML and super languages labels Nov 24, 2025

coderabbitai bot reviewed Nov 24, 2025

View reviewed changes

ematipico approved these changes Dec 7, 2025

View reviewed changes

dyc3 merged commit 9694e37 into main Dec 7, 2025
13 checks passed

dyc3 deleted the dyc3/invalid-vue-shorthands branch December 7, 2025 22:34

github-actions bot mentioned this pull request Dec 7, 2025

ci: release #8286

Merged

ematipico pushed a commit that referenced this pull request Dec 8, 2025

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

64f7186

…xes (#8242)

ematipico pushed a commit that referenced this pull request Dec 8, 2025

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

ed0c0c9

…xes (#8242)

This was referenced Dec 15, 2025

ci: release #8467

Merged

ci: release #8469

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

dyc3 commented Nov 24, 2025

Uh oh!

changeset-bot bot commented Nov 24, 2025

Uh oh!

coderabbitai bot commented Nov 24, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

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

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

Conversation

dyc3 commented Nov 24, 2025

Summary

Test Plan

Docs

Uh oh!

changeset-bot bot commented Nov 24, 2025

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Nov 24, 2025

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants