fix(format/html): add space before />

.changeset/rotten-pans-ring.md

@@ -0,0 +1,10 @@
+---
+"@biomejs/biome": patch
+---
+
+Fixed an issue with the HTML formatter where it wouldn't add a space before the `/>` in self closing elements. This brings the HTML formatter more in line with Prettier.
+
+```diff
+-<Component/>
++<Component />
+```

crates/biome_html_formatter/src/html/auxiliary/self_closing_element.rs

@@ -56,9 +56,9 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
                     // To resolve this, these tokens either need to be passed to or deferred to sibling text elements when
                     // whitespace sensitivity would require it.
                     if slash_token.is_some() {
-                        write!(f, [slash_token.format()])?;
+                        write!(f, [if_group_fits_on_line(&space()), slash_token.format()])?;
                     } else {
-                        write!(f, [token("/")])?;
+                        write!(f, [if_group_fits_on_line(&space()), token("/")])?;
                     }
                 }
                 // We remove the slash only from void elements
@@ -67,6 +67,10 @@ impl FormatNodeRule<HtmlSelfClosingElement> for FormatHtmlSelfClosingElement {
                         write!(f, [format_removed(slash_token)])?;
                     }
                 } else {
+                    if slash_token.is_some() {
+                        // only add a space before the slash if it exists.
+                        write!(f, [space()])?;
+                    }
                     write!(f, [slash_token.format()])?;
                 }
 

crates/biome_html_formatter/tests/specs/html/component-frameworks/astro-component-casing.astro.snap

@@ -42,8 +42,8 @@ import Button from './Button.astro';
 import TextInput from './TextInput.astro';
 ---
 
-<Button label="test button"/>
-<TextInput placeholder="enter text"/>
+<Button label="test button" />
+<TextInput placeholder="enter text" />
 <button>native button</button>
 <input type="text">
 ```

crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte

@@ -0,0 +1,6 @@
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>

crates/biome_html_formatter/tests/specs/html/component-frameworks/large-self-closing.svelte.snap

@@ -0,0 +1,43 @@
+---
+source: crates/biome_formatter_test/src/snapshot_builder.rs
+info: component-frameworks/large-self-closing.svelte
+---
+# Input
+
+```svelte
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>
+
+```
+
+
+=============================
+
+# Outputs
+
+## Output 1
+
+-----
+Indent style: Tab
+Indent width: 2
+Line ending: LF
+Line width: 80
+Attribute Position: Auto
+Bracket same line: false
+Whitespace sensitivity: css
+Indent script and style: false
+Self close void elements: never
+-----
+
+```svelte
+<Button
+	label="test button"
+	variant="primary"
+	size="lg"
+	class="text-2xl bg-amber-600 font-bold"
+/>
+```

crates/biome_html_formatter/tests/specs/html/component-frameworks/svelte-component-casing.svelte.snap

@@ -46,9 +46,9 @@ Self close void elements: never
   import Select from './Select.svelte';
 </script>
 
-<Button label="test button"/>
-<TextInput placeholder="enter text"/>
-<Select options={['a', 'b']}/>
+<Button label="test button" />
+<TextInput placeholder="enter text" />
+<Select options={['a', 'b']} />
 <button>native button</button>
 <input type="text">
 <select>

crates/biome_html_formatter/tests/specs/html/component-frameworks/vue-component-casing.vue.snap

@@ -44,8 +44,8 @@ import TextInput from './TextInput.vue';
 </script>
 
 <template>
-	<Button label="test button"/>
-	<TextInput placeholder="enter text"/>
+	<Button label="test button" />
+	<TextInput placeholder="enter text" />
 	<button>native button</button>
 </template>
 ```

crates/biome_html_formatter/tests/specs/html/svelte/await_dynamic_import.svelte.snap

@@ -32,6 +32,6 @@ Self close void elements: never
 
 ```svelte
 {#await import('./Component.svelte') then { default: Component }}
-	<Component/>
+	<Component />
 {/await}
 ```

crates/biome_html_formatter/tests/specs/html/vue/event-with-colon.vue.snap

@@ -29,5 +29,5 @@ Self close void elements: never
 -----
 
 ```vue
-<Foo @update:modelValue="onUpdate"/>
+<Foo @update:modelValue="onUpdate" />
 ```

crates/biome_html_formatter/tests/specs/html/vue/issue-8174.vue.snap

@@ -30,6 +30,6 @@ Self close void elements: never
 -----
 
 ```vue
-<Component v-if="operation" :property="123"/>
-<Component v-else :property="123"/>
+<Component v-if="operation" :property="123" />
+<Component v-else :property="123" />
 ```