TSX: improve self-closing tag handling (#581)

* fix(tsx): improve self-closing tag behavior and mappings

* chore: add changeset

Co-authored-by: Nate Moore <[email protected]>

Author: natemoo-re

.changeset/loud-pigs-fold.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+TSX: Improve self-closing tag behavior and mappings

internal/printer/print-to-tsx.go

@@ -388,7 +388,6 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s>>`, props.Ident)
 	for i := 0; i < len(p.sourcetext[tmpLoc:]); i++ {
 		c := p.sourcetext[endLoc : endLoc+1][0]
 		if c == '/' && p.sourcetext[endLoc+1:][0] == '>' {
-			p.addSourceMapping(loc.Loc{Start: endLoc})
 			isSelfClosing = true
 			break
 		} else if c == '>' {
@@ -404,9 +403,12 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s>>`, props.Ident)
 		p.print("/>")
 		return
 	}
-	if isSelfClosing && len(n.Attr) > 0 {
+	if isSelfClosing && n.FirstChild == nil {
+		p.addSourceMapping(loc.Loc{Start: endLoc - 1})
 		p.print(" ")
 		p.addSourceMapping(loc.Loc{Start: endLoc})
+		p.print("/>")
+		return
 	}
 	p.print(">")
 

packages/compiler/test/tsx/basic.ts

@@ -165,7 +165,7 @@ export default function __AstroComponent_(_props: Record<string, any>): any {}`;
 test('spread object', async () => {
   const input = `<DocSearch {...{ lang, labels: { modal, placeholder } }} client:only="preact" />`;
   const output = `<Fragment>
-<DocSearch {...{ lang, labels: { modal, placeholder } }} client:only="preact" ></DocSearch>
+<DocSearch {...{ lang, labels: { modal, placeholder } }} client:only="preact" />
 </Fragment>
 export default function __AstroComponent_(_props: Record<string, any>): any {}`;
   const { code } = await convertToTSX(input, { sourcemap: 'external' });

packages/compiler/test/tsx/props.ts

@@ -248,7 +248,7 @@ import SvelteOptionalProps from './SvelteOptionalProps.svelte';
 import SvelteOptionalProps from './SvelteOptionalProps.svelte';
 
 <Fragment>
-<SvelteOptionalProps></SvelteOptionalProps>
+<SvelteOptionalProps />
 
 </Fragment>
 export default function __AstroComponent_(_props: Record<string, any>): any {}`;