Fix multiline attribute values on components (#1135)

* Fix multiline attribute values on components

Escape newlines in quoted attribute values when printing component props
to avoid 'Unterminated string literal' errors from esbuild.

Fixes #1047

* Update .changeset/fix-multiline-attribute.md

Co-authored-by: Emanuele Stoppa <[email protected]>

* Remove unrelated whitespace changes in printer_test.go

---------

Co-authored-by: Emanuele Stoppa <[email protected]>

Author: matthewp

.changeset/fix-multiline-attribute.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/compiler": patch
+---
+
+Fixes the "Unterminated string literal" error when using multiline attribute values on components.

internal/printer/__printer_js__/multiline_class_attribute_on_component.snap

@@ -0,0 +1,43 @@
+
+[TestPrinter/multiline_class_attribute_on_component - 1]
+## Input
+
+```
+<Component class="some-class
+  another-class
+  third-class">content</Component>
+```
+
+## Output
+
+```js
+import {
+  Fragment,
+  render as $$render,
+  createAstro as $$createAstro,
+  createComponent as $$createComponent,
+  renderComponent as $$renderComponent,
+  renderHead as $$renderHead,
+  maybeRenderHead as $$maybeRenderHead,
+  unescapeHTML as $$unescapeHTML,
+  renderSlot as $$renderSlot,
+  mergeSlots as $$mergeSlots,
+  addAttribute as $$addAttribute,
+  spreadAttributes as $$spreadAttributes,
+  defineStyleVars as $$defineStyleVars,
+  defineScriptVars as $$defineScriptVars,
+  renderTransition as $$renderTransition,
+  createTransitionScope as $$createTransitionScope,
+  renderScript as $$renderScript,
+  createMetadata as $$createMetadata
+} from "http://localhost:3000/";
+
+export const $$metadata = $$createMetadata(import.meta.url, { modules: [], hydratedComponents: [], clientOnlyComponents: [], hydrationDirectives: new Set([]), hoisted: [] });
+
+const $$Component = $$createComponent(($$result, $$props, $$slots) => {
+
+return $$render`${$$renderComponent($$result,'Component',Component,{"class":"some-class\n  another-class\n  third-class"},{"default": () => $$render`content`,})}`;
+}, undefined, undefined);
+export default $$Component;
+```
+---

internal/printer/printer.go

@@ -412,7 +412,7 @@ func (p *printer) printAttributesToObject(n *astro.Node) {
 			p.printf(`"%s"`, a.Key)
 			p.print(":")
 			p.addSourceMapping(a.ValLoc)
-			p.print(`"` + escapeDoubleQuote(a.Val) + `"`)
+			p.print(`"` + escapeDoubleQuote(escapeNewlines(a.Val)) + `"`)
 		case astro.EmptyAttribute:
 			p.addSourceMapping(a.KeyLoc)
 			p.printf(`"%s"`, a.Key)

internal/printer/printer_test.go

@@ -2083,6 +2083,10 @@ import Analytics from '../components/Analytics.astro';
 <title>{title}</title>
 <meta name="description" content="a description" />`,
 		},
+		{
+			name:   "multiline class attribute on component",
+			source: "<Component class=\"some-class\n  another-class\n  third-class\">content</Component>",
+		},
 	}
 	for _, tt := range tests {
 		if tt.only {

internal/printer/utils.go

@@ -94,6 +94,12 @@ func escapeDoubleQuote(str string) string {
 	return strings.Replace(str, `"`, "\\\"", -1)
 }
 
+func escapeNewlines(str string) string {
+	str = strings.Replace(str, "\n", `\n`, -1)
+	str = strings.Replace(str, "\r", `\r`, -1)
+	return str
+}
+
 func encodeDoubleQuote(str string) string {
 	return strings.Replace(str, `"`, """, -1)
 }