feat(html/svelte): key blocks

Author: ematipico

.changeset/light-toys-check.md

@@ -0,0 +1,12 @@
+---
+"@biomejs/biome": patch
+---
+
+Added support Svelte syntax `{#key}`. Biome now is able to parse and format the Svelte syntax [`{#key}`](https://svelte.dev/docs/svelte/key):
+
+```diff
+-{#key   expression} <div></div> {/key}
++{#key expression}
++  <div></div>
++{/key}
+```

crates/biome_html_factory/src/generated/node_factory.rs

@@ -754,6 +754,120 @@ impl IntoFormat<HtmlFormatContext> for biome_html_syntax::SvelteDebugBlock {
         )
     }
 }
+impl FormatRule<biome_html_syntax::SvelteKeyBlock>
+    for crate::svelte::auxiliary::key_block::FormatSvelteKeyBlock
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::SvelteKeyBlock,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::SvelteKeyBlock>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyBlock {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::SvelteKeyBlock,
+        crate::svelte::auxiliary::key_block::FormatSvelteKeyBlock,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_block::FormatSvelteKeyBlock::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyBlock {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::SvelteKeyBlock,
+        crate::svelte::auxiliary::key_block::FormatSvelteKeyBlock,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_block::FormatSvelteKeyBlock::default(),
+        )
+    }
+}
+impl FormatRule<biome_html_syntax::SvelteKeyClosingBlock>
+    for crate::svelte::auxiliary::key_closing_block::FormatSvelteKeyClosingBlock
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::SvelteKeyClosingBlock,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::SvelteKeyClosingBlock>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyClosingBlock {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::SvelteKeyClosingBlock,
+        crate::svelte::auxiliary::key_closing_block::FormatSvelteKeyClosingBlock,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_closing_block::FormatSvelteKeyClosingBlock::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyClosingBlock {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::SvelteKeyClosingBlock,
+        crate::svelte::auxiliary::key_closing_block::FormatSvelteKeyClosingBlock,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_closing_block::FormatSvelteKeyClosingBlock::default(),
+        )
+    }
+}
+impl FormatRule<biome_html_syntax::SvelteKeyOpeningBlock>
+    for crate::svelte::auxiliary::key_opening_block::FormatSvelteKeyOpeningBlock
+{
+    type Context = HtmlFormatContext;
+    #[inline(always)]
+    fn fmt(
+        &self,
+        node: &biome_html_syntax::SvelteKeyOpeningBlock,
+        f: &mut HtmlFormatter,
+    ) -> FormatResult<()> {
+        FormatNodeRule::<biome_html_syntax::SvelteKeyOpeningBlock>::fmt(self, node, f)
+    }
+}
+impl AsFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyOpeningBlock {
+    type Format<'a> = FormatRefWithRule<
+        'a,
+        biome_html_syntax::SvelteKeyOpeningBlock,
+        crate::svelte::auxiliary::key_opening_block::FormatSvelteKeyOpeningBlock,
+    >;
+    fn format(&self) -> Self::Format<'_> {
+        FormatRefWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_opening_block::FormatSvelteKeyOpeningBlock::default(),
+        )
+    }
+}
+impl IntoFormat<HtmlFormatContext> for biome_html_syntax::SvelteKeyOpeningBlock {
+    type Format = FormatOwnedWithRule<
+        biome_html_syntax::SvelteKeyOpeningBlock,
+        crate::svelte::auxiliary::key_opening_block::FormatSvelteKeyOpeningBlock,
+    >;
+    fn into_format(self) -> Self::Format {
+        FormatOwnedWithRule::new(
+            self,
+            crate::svelte::auxiliary::key_opening_block::FormatSvelteKeyOpeningBlock::default(),
+        )
+    }
+}
 impl FormatRule<biome_html_syntax::SvelteName>
     for crate::svelte::auxiliary::name::FormatSvelteName
 {

crates/biome_html_factory/src/generated/syntax_factory.rs

@@ -23,7 +23,7 @@ use tag::GroupMode;
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatHtmlElementList {
     layout: HtmlChildListLayout,
-    /// Whether or not the parent element that encapsulates this element list is whitespace sensitive.
+    /// Whether the parent element that encapsulates this element list is whitespace sensitive.
     is_element_whitespace_sensitive: bool,
 
     borrowed_tokens: BorrowedTokens,

crates/biome_html_formatter/src/generated.rs

@@ -10,6 +10,7 @@ impl FormatRule<AnySvelteBlock> for FormatAnySvelteBlock {
         match node {
             AnySvelteBlock::SvelteBogusBlock(node) => node.format().fmt(f),
             AnySvelteBlock::SvelteDebugBlock(node) => node.format().fmt(f),
+            AnySvelteBlock::SvelteKeyBlock(node) => node.format().fmt(f),
         }
     }
 }

crates/biome_html_formatter/src/html/lists/element_list.rs

@@ -0,0 +1,49 @@
+use crate::html::lists::element_list::{FormatChildrenResult, FormatHtmlElementList};
+use crate::prelude::*;
+use biome_formatter::{format_args, write};
+use biome_html_syntax::{SvelteKeyBlock, SvelteKeyBlockFields};
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatSvelteKeyBlock;
+impl FormatNodeRule<SvelteKeyBlock> for FormatSvelteKeyBlock {
+    fn fmt_fields(&self, node: &SvelteKeyBlock, f: &mut HtmlFormatter) -> FormatResult<()> {
+        let SvelteKeyBlockFields {
+            opening_block,
+            children,
+            closing_block,
+        } = node.as_fields();
+
+        write!(f, [opening_block.format(),])?;
+        // The order here is important. First, we must check if we can delegate the formatting
+        // of embedded nodes, then we check if we should format them verbatim.
+        let format_children = FormatHtmlElementList::default().fmt_children(&children, f)?;
+        let attr_group_id = f.group_id("element-attr-group-id");
+
+        match format_children {
+            FormatChildrenResult::ForceMultiline(multiline) => {
+                write!(f, [multiline])?;
+            }
+            FormatChildrenResult::BestFitting {
+                flat_children,
+                expanded_children,
+            } => {
+                let expanded_children = expanded_children.memoized();
+                write!(
+                    f,
+                    [
+                        // If the attribute group breaks, prettier always breaks the children as well.
+                        &if_group_breaks(&expanded_children).with_group_id(Some(attr_group_id)),
+                        // If the attribute group does NOT break, print whatever fits best for the children.
+                        &if_group_fits_on_line(&best_fitting![
+                            format_args![flat_children],
+                            format_args![expanded_children],
+                        ])
+                        .with_group_id(Some(attr_group_id)),
+                    ]
+                )?;
+            }
+        }
+
+        write!(f, [closing_block.format()])
+    }
+}

crates/biome_html_formatter/src/svelte/any/block.rs

@@ -0,0 +1,24 @@
+use crate::prelude::*;
+use biome_formatter::write;
+use biome_html_syntax::{SvelteKeyClosingBlock, SvelteKeyClosingBlockFields};
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatSvelteKeyClosingBlock;
+impl FormatNodeRule<SvelteKeyClosingBlock> for FormatSvelteKeyClosingBlock {
+    fn fmt_fields(&self, node: &SvelteKeyClosingBlock, f: &mut HtmlFormatter) -> FormatResult<()> {
+        let SvelteKeyClosingBlockFields {
+            key_token,
+            r_curly_token,
+            sv_curly_slash_token,
+        } = node.as_fields();
+
+        write!(
+            f,
+            [
+                sv_curly_slash_token.format(),
+                key_token.format(),
+                r_curly_token.format(),
+            ]
+        )
+    }
+}