Format custom elements & components as block elements with htmlWhitespaceSensitivity: ignore (#448)

Author: nylexar-sudo

.changeset/slimy-plums-learn.md

@@ -0,0 +1,5 @@
+---
+"prettier-plugin-astro": patch
+---
+
+Format custom elements & components as block elements with htmlWhitespaceSensitivity: ignore

src/printer/utils.ts

@@ -31,11 +31,20 @@ export function isInlineElement(path: AstPath, opts: ParserOptions, node: anyNod
 }
 
 export function isBlockElement(node: anyNode, opts: ParserOptions): boolean {
+	if (!node) {
+		return false;
+	}
+
+	// All tags (element, custom-element, component, fragment) are considered
+	// block elements when htmlWhitespaceSensitivity is set to "ignore".
+	if (opts.htmlWhitespaceSensitivity === 'ignore') {
+		return true;
+	}
+
 	return (
-		node &&
 		node.type === 'element' &&
 		opts.htmlWhitespaceSensitivity !== 'strict' &&
-		(opts.htmlWhitespaceSensitivity === 'ignore' || blockElements.includes(node.name as TagName))
+		blockElements.includes(node.name as TagName)
 	);
 }
 

test/fixtures/options/option-html-whitespace-sensitivity-ignore-component/input.astro

@@ -0,0 +1,8 @@
+---
+import Link from "@/components/link.astro";
+---
+
+<ul>
+    <li><a href="https://github.com/withastro/prettier-plugin-astro">Prettier Plugin for Astro (using HTML element)</a></li>
+    <li><Link href="https://github.com/withastro/prettier-plugin-astro">Prettier Plugin for Astro (using component)</Link></li>
+</ul>

test/fixtures/options/option-html-whitespace-sensitivity-ignore-component/options.json

@@ -0,0 +1,4 @@
+{
+  "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "ignore"
+}

test/fixtures/options/option-html-whitespace-sensitivity-ignore-component/output.astro

@@ -0,0 +1,16 @@
+---
+import Link from "@/components/link.astro";
+---
+
+<ul>
+  <li>
+    <a href="https://github.com/withastro/prettier-plugin-astro">
+      Prettier Plugin for Astro (using HTML element)
+    </a>
+  </li>
+  <li>
+    <Link href="https://github.com/withastro/prettier-plugin-astro">
+      Prettier Plugin for Astro (using component)
+    </Link>
+  </li>
+</ul>

test/tests/options.test.ts

@@ -185,6 +185,11 @@ test(
 	files,
 	'options/option-html-whitespace-sensitivity-ignore',
 );
+test(
+	'Can format components with prettier "htmlWhitespaceSensitivity: ignore" option',
+	files,
+	'options/option-html-whitespace-sensitivity-ignore-component',
+);
 
 // https://prettier.io/docs/en/options.html#single-attribute-per-line
 test(