fix(parse/html/vue): parse dynamic slot directives that contain quotes

.changeset/fair-ligers-smell.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8710](https://github.com/biomejs/biome/issues/8710): Biome now parses Vue dynamic slot shorthand arguments that use template literals in `[]`.

crates/biome_html_parser/src/lexer/mod.rs

@@ -155,6 +155,42 @@ impl<'src> HtmlLexer<'src> {
         }
     }
 
+    /// Consume a token in the [HtmlLexContext::VueDirectiveArgument] context.
+    fn consume_token_vue_directive_argument(&mut self) -> HtmlSyntaxKind {
+        let start = self.text_position();
+        let mut brackets_stack = 0;
+        let mut quotes_seen = QuotesSeen::new();
+
+        while let Some(byte) = self.current_byte() {
+            quotes_seen.check_byte(byte);
+            let char = biome_unicode_table::lookup_byte(byte);
+            use biome_unicode_table::Dispatch::*;
+
+            if quotes_seen.is_empty() {
+                match char {
+                    BTO => {
+                        brackets_stack += 1;
+                    }
+                    BTC => {
+                        if brackets_stack == 0 {
+                            break;
+                        }
+                        brackets_stack -= 1;
+                    }
+                    _ => {}
+                }
+            }
+
+            self.advance_byte_or_char(byte);
+        }
+
+        if self.text_position() != start {
+            HTML_LITERAL
+        } else {
+            ERROR_TOKEN
+        }
+    }
+
     /// Consume a token in the [HtmlLexContext::Regular] context.
     fn consume_token(&mut self, current: u8) -> HtmlSyntaxKind {
         match current {
@@ -1078,6 +1114,9 @@ impl<'src> Lexer<'src> for HtmlLexer<'src> {
                     HtmlLexContext::Regular => self.consume_token(current),
                     HtmlLexContext::InsideTag => self.consume_token_inside_tag(current),
                     HtmlLexContext::InsideTagVue => self.consume_token_inside_tag_vue(current),
+                    HtmlLexContext::VueDirectiveArgument => {
+                        self.consume_token_vue_directive_argument()
+                    }
                     HtmlLexContext::AttributeValue => self.consume_token_attribute_value(current),
                     HtmlLexContext::Doctype => self.consume_token_doctype(current),
                     HtmlLexContext::EmbeddedLanguage(lang) => {

crates/biome_html_parser/src/syntax/vue.rs

@@ -161,7 +161,7 @@ fn parse_vue_dynamic_argument(p: &mut HtmlParser) -> ParsedSyntax {
 
     let m = p.start();
 
-    p.bump_with_context(T!['['], HtmlLexContext::InsideTagVue);
+    p.bump_with_context(T!['['], HtmlLexContext::VueDirectiveArgument);
     p.expect_with_context(HTML_LITERAL, HtmlLexContext::InsideTagVue);
     p.expect_with_context(T![']'], HtmlLexContext::InsideTagVue);
 

crates/biome_html_parser/src/token_source.rs

@@ -29,6 +29,8 @@ pub(crate) enum HtmlLexContext {
     InsideTag,
     /// Like [InsideTag], but with Vue-specific tokens enabled.
     InsideTagVue,
+    /// Lexes Vue directive arguments inside `[]`.
+    VueDirectiveArgument,
     /// When the parser encounters a `=` token (the beginning of the attribute initializer clause), it switches to this context.
     ///
     /// This is because attribute values can start and end with a `"` or `'` character, or be unquoted, and the lexer needs to know to start lexing a string literal.

crates/biome_html_parser/tests/html_specs/ok/vue/dynamic-slot-arg.vue

@@ -0,0 +1,23 @@
+<template
+  v-for="episode in episodes"
+  #[`${episode.id}-cell`]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>
+
+<template
+  v-for="episode in episodes"
+  v-slot:[`${episode.id}-cell`]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>
+
+<template
+  v-for="episode in episodes"
+  #[episode.id]="{ row }"
+  :key="episode.id"
+>
+  ...
+</template>