Fix template literal attributes on components (#918)

* add test

* fix

* add test case

* chore: changeset

.changeset/perfect-falcons-build.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fixes an issue where components with template literal attributes were printed with the name of the attribute as value.

internal/printer/printer.go

@@ -352,7 +352,7 @@ func (p *printer) printAttributesToObject(n *astro.Node) {
 			p.addSourceMapping(a.KeyLoc)
 			p.printf(`"%s"`, strings.TrimSpace(a.Key))
 			p.print(":")
-			p.print("`" + strings.TrimSpace(a.Key) + "`")
+			p.print("`" + strings.TrimSpace(a.Val) + "`")
 		}
 	}
 	p.print("}")

internal/printer/printer_test.go

@@ -2732,6 +2732,20 @@ const items = ["Dog", "Cat", "Platipus"];
 				code: `${$$renderComponent($$result,'Fragment',Fragment,{},{"default": () => $$render` + BACKTICK + `${` + BACKTICK + `${content}` + BACKTICK + `}` + BACKTICK + `,})}`,
 			},
 		},
+		{
+			name:   "template literal attribute on component",
+			source: `<Component class=` + BACKTICK + `red` + BACKTICK + ` />`,
+			want: want{
+				code: `${$$renderComponent($$result,'Component',Component,{"class":` + BACKTICK + `red` + BACKTICK + `})}`,
+			},
+		},
+		{
+			name:   "template literal attribute with variable on component",
+			source: `<Component class=` + BACKTICK + `${color}` + BACKTICK + ` />`,
+			want: want{
+				code: `${$$renderComponent($$result,'Component',Component,{"class":` + BACKTICK + `${color}` + BACKTICK + `})}`,
+			},
+		},
 		{
 			name:   "define:vars on style",
 			source: "<style>h1{color:green;}</style><style define:vars={{color:'green'}}>h1{color:var(--color)}</style><h1>testing</h1>",