TSX: fix spread attribute printing/mapping (#580)

* fix(tsx): spread attribute mapping

* chore: add changeset

* fix(tsx): print spread with high fidelity

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

Author: natemoo-re

.changeset/pretty-houses-promise.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fix spread attribute mappings

internal/printer/print-to-tsx.go

@@ -240,12 +240,12 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s>>`, props.Ident)
 			continue
 		}
 		offset := 1
-		if a.Type != astro.ShorthandAttribute {
+		if a.Type != astro.ShorthandAttribute && a.Type != astro.SpreadAttribute {
 			p.addSourceMapping(loc.Loc{Start: a.KeyLoc.Start - offset})
 		}
 		p.print(" ")
 		eqStart := a.KeyLoc.Start + strings.IndexRune(p.sourcetext[a.KeyLoc.Start:], '=')
-		if a.Type != astro.ShorthandAttribute {
+		if a.Type != astro.ShorthandAttribute && a.Type != astro.SpreadAttribute {
 			p.addSourceMapping(a.KeyLoc)
 		}
 		if a.Namespace != "" {
@@ -282,13 +282,14 @@ declare const Astro: Readonly<import('astro').AstroGlobal<%s>>`, props.Ident)
 			p.print(`}`)
 			endLoc = eqStart + len(a.Val) + 2
 		case astro.SpreadAttribute:
-			p.print(a.Key)
-			p.addSourceMapping(loc.Loc{Start: eqStart})
-			p.print(`=`)
-			p.addSourceMapping(loc.Loc{Start: eqStart + 1})
-			p.addSourceMapping(a.ValLoc)
-			p.print(fmt.Sprintf(`{...%s}`, a.Val))
-			endLoc = a.ValLoc.Start + len(a.Val) + 2
+			p.addSourceMapping(loc.Loc{Start: a.KeyLoc.Start - 4})
+			p.print("{")
+			p.addSourceMapping(loc.Loc{Start: a.KeyLoc.Start - 3})
+			p.print("...")
+			p.printTextWithSourcemap(a.Key, a.KeyLoc)
+			p.addSourceMapping(loc.Loc{Start: a.KeyLoc.Start + len(a.Key)})
+			p.print("}")
+			endLoc = a.KeyLoc.Start + len(a.Key) + 1
 		case astro.ShorthandAttribute:
 			withoutComments, _ := removeComments(a.Key)
 			if len(withoutComments) == 0 {

packages/compiler/test/tsx/basic.ts

@@ -162,4 +162,14 @@ export default function __AstroComponent_(_props: Record<string, any>): any {}`;
   assert.snapshot(code, output, `expected code to match snapshot`);
 });
 
+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>
+</Fragment>
+export default function __AstroComponent_(_props: Record<string, any>): any {}`;
+  const { code } = await convertToTSX(input, { sourcemap: 'external' });
+  assert.snapshot(code, output, `expected code to match snapshot`);
+});
+
 test.run();