feat(parse/html/vue): parse v-slot shorthand syntax (#8226)

Author: dyc3

.changeset/forty-falcons-pick.md

@@ -0,0 +1,5 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed [#8222](https://github.com/biomejs/biome/issues/8222): The HTML parser, with Vue directives enabled, can now parse `v-slot` shorthand syntax, e.g. `<template #foo>`.

crates/biome_html_factory/src/generated/node_factory.rs

@@ -1498,6 +1498,38 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::VueVOnShorthandDirecti
         FormatOwnedWithRule :: new (self , crate :: vue :: auxiliary :: v_on_shorthand_directive :: FormatVueVOnShorthandDirective :: default ())
     }
 }
+impl FormatRule<biome_html_syntax::VueVSlotShorthandDirective>
+    for crate::vue::auxiliary::v_slot_shorthand_directive::FormatVueVSlotShorthandDirective
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::VueVSlotShorthandDirective,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::VueVSlotShorthandDirective>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::VueVSlotShorthandDirective {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::VueVSlotShorthandDirective,
+        crate::vue::auxiliary::v_slot_shorthand_directive::FormatVueVSlotShorthandDirective,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule :: new (self , crate :: vue :: auxiliary :: v_slot_shorthand_directive :: FormatVueVSlotShorthandDirective :: default ())
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::VueVSlotShorthandDirective {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::VueVSlotShorthandDirective,
+        crate::vue::auxiliary::v_slot_shorthand_directive::FormatVueVSlotShorthandDirective,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule :: new (self , crate :: vue :: auxiliary :: v_slot_shorthand_directive :: FormatVueVSlotShorthandDirective :: default ())
+    }
+}
 impl AsFormat<HtmlFormatContext> for biome_html_syntax::HtmlAttributeList {
     type Format<'a> = FormatRefWithRule<
         'a,

crates/biome_html_factory/src/generated/syntax_factory.rs

@@ -12,6 +12,7 @@ impl FormatRule<AnyVueDirective> for FormatAnyVueDirective {
             AnyVueDirective::VueDirective(node) => node.format().fmt(f),
             AnyVueDirective::VueVBindShorthandDirective(node) => node.format().fmt(f),
             AnyVueDirective::VueVOnShorthandDirective(node) => node.format().fmt(f),
+            AnyVueDirective::VueVSlotShorthandDirective(node) => node.format().fmt(f),
         }
     }
 }

crates/biome_html_formatter/src/generated.rs

@@ -7,3 +7,4 @@ pub(crate) mod modifier;
 pub(crate) mod static_argument;
 pub(crate) mod v_bind_shorthand_directive;
 pub(crate) mod v_on_shorthand_directive;
+pub(crate) mod v_slot_shorthand_directive;

crates/biome_html_formatter/src/vue/any/directive.rs

@@ -0,0 +1,30 @@
+use crate::prelude::*;
+use biome_formatter::write;
+use biome_html_syntax::{VueVSlotShorthandDirective, VueVSlotShorthandDirectiveFields};
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatVueVSlotShorthandDirective;
+impl FormatNodeRule<VueVSlotShorthandDirective> for FormatVueVSlotShorthandDirective {
+    fn fmt_fields(
+        &self,
+        node: &VueVSlotShorthandDirective,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        let VueVSlotShorthandDirectiveFields {
+            hash_token,
+            arg,
+            modifiers,
+            initializer,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                hash_token.format(),
+                arg.format(),
+                modifiers.format(),
+                initializer.format()
+            ]
+        )
+    }
+}

crates/biome_html_formatter/src/vue/auxiliary/mod.rs

@@ -141,6 +141,7 @@ impl<'src> HtmlLexer<'src> {
             b'.' => self.consume_byte(T![.]),
             b'[' => self.consume_byte(T!['[']),
             b']' => self.consume_byte(T![']']),
+            b'#' => self.consume_byte(T![#]),
 
             b'\'' | b'"' => self.consume_string_literal(current),
             _ if self.current_kind == T![<] && is_tag_name_byte(current) => {

crates/biome_html_formatter/src/vue/auxiliary/v_slot_shorthand_directive.rs

@@ -12,6 +12,7 @@ use crate::syntax::svelte::{
 };
 use crate::syntax::vue::{
     parse_vue_directive, parse_vue_v_bind_shorthand_directive, parse_vue_v_on_shorthand_directive,
+    parse_vue_v_slot_shorthand_directive,
 };
 use crate::token_source::{
     HtmlEmbeddedLanguage, HtmlLexContext, HtmlReLexContext, TextExpressionKind,
@@ -369,6 +370,11 @@ fn parse_attribute(p: &mut HtmlParser) -> ParsedSyntax {
             parse_vue_v_on_shorthand_directive,
             |p, m| disabled_vue(p, m.range(p)),
         ),
+        T![#] => HtmlSyntaxFeatures::Vue.parse_exclusive_syntax(
+            p,
+            parse_vue_v_slot_shorthand_directive,
+            |p, m| disabled_vue(p, m.range(p)),
+        ),
         T!['{'] => SingleTextExpressions.parse_exclusive_syntax(
             p,
             |p| parse_single_text_expression(p, HtmlLexContext::InsideTag),
@@ -398,8 +404,14 @@ fn parse_attribute(p: &mut HtmlParser) -> ParsedSyntax {
 }
 
 fn is_at_attribute_start(p: &mut HtmlParser) -> bool {
-    p.at_ts(token_set![HTML_LITERAL, T!["{{"], T!['{'], T![:], T![@]])
-        || (SingleTextExpressions.is_supported(p) && p.at(T!["{@"]))
+    p.at_ts(token_set![
+        HTML_LITERAL,
+        T!["{{"],
+        T!['{'],
+        T![:],
+        T![@],
+        T![#],
+    ]) || (SingleTextExpressions.is_supported(p) && p.at(T!["{@"]))
 }
 
 fn parse_literal(p: &mut HtmlParser, kind: HtmlSyntaxKind) -> ParsedSyntax {

crates/biome_html_parser/src/lexer/mod.rs

@@ -82,6 +82,35 @@ pub(crate) fn parse_vue_v_on_shorthand_directive(p: &mut HtmlParser) -> ParsedSy
     Present(m.complete(p, VUE_V_ON_SHORTHAND_DIRECTIVE))
 }
 
+pub(crate) fn parse_vue_v_slot_shorthand_directive(p: &mut HtmlParser) -> ParsedSyntax {
+    if !p.at(T![#]) {
+        return Absent;
+    }
+
+    let m = p.start();
+
+    let pos = p.source().position();
+    p.bump_with_context(T![#], HtmlLexContext::InsideTagVue);
+    // is there any trivia after the hash and before argument?
+    if let Some(last_trivia) = p.source().trivia_list.last()
+        && pos < last_trivia.text_range().start()
+    {
+        // `# slot="5"` is not valid syntax
+        // but we want to recover gracefully
+        p.error(expected_vue_directive_argument(p, last_trivia.text_range()));
+        return Present(m.complete(p, VUE_BOGUS_DIRECTIVE));
+    }
+    parse_vue_dynamic_argument(p)
+        .or_else(|| parse_vue_static_argument(p))
+        .ok();
+    VueModifierList.parse_list(p);
+    if p.at(T![=]) {
+        parse_attribute_initializer(p).ok();
+    }
+
+    Present(m.complete(p, VUE_V_SLOT_SHORTHAND_DIRECTIVE))
+}
+
 fn parse_vue_directive_argument(p: &mut HtmlParser) -> ParsedSyntax {
     if !p.at(T![:]) {
         return Absent;