fix: prevent error with escape sequence in attribute (#2968)

Fixes #2964

Author: jasonlyu123

.changeset/ready-parents-brake.md

@@ -0,0 +1,7 @@
+---
+'svelte2tsx': patch
+'svelte-language-server': patch
+'svelte-check': patch
+---
+
+fix: prevent error with escape sequence in attribute

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts

@@ -203,12 +203,12 @@ export function handleAttribute(
             if (!needsNumberConversion) {
                 attributeValue.push(quote);
             }
-            if (includesTemplateLiteralQuote && attrVal.data.split('\n').length > 1) {
-                // Multiline attribute value text which can't be wrapped in a template literal
-                // -> ensure it's still a valid transformation by transforming the actual line break
-                str.overwrite(attrVal.start, attrVal.end, attrVal.data.split('\n').join('\\n'), {
-                    contentOnly: true
-                });
+            const escapedValue = tryEscapeAttributeValue(
+                attrVal.data,
+                !includesTemplateLiteralQuote
+            );
+            if (escapedValue !== null) {
+                str.overwrite(attrVal.start, attrVal.end, escapedValue, { contentOnly: true });
             }
             attributeValue.push([attrVal.start, attrVal.end]);
             if (!needsNumberConversion) {
@@ -248,3 +248,14 @@ export function handleAttribute(
 function attributeValueIsOfType(value: true | BaseNode[], type: string): value is [BaseNode] {
     return value !== true && value.length == 1 && value[0].type == type;
 }
+
+function tryEscapeAttributeValue(str: string, useTemplateLiteral: boolean): string | null {
+    // Multiline attribute value text which can't be wrapped in a template literal
+    // -> ensure it's still a valid transformation by transforming the actual line break
+    // \ is not a valid escape in HTML, but it could be part of the attribute value and would break the generated code
+    if (!str.includes('\\') && (useTemplateLiteral || !str.includes('\n'))) {
+        return null;
+    }
+
+    return JSON.stringify(str).slice(1, -1);
+}

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-value-escape/expectedv2.js

@@ -0,0 +1,6 @@
+ { svelteHTML.createElement("div", { "class":`a\\00a0`,}); }
+ { svelteHTML.createElement("div", { "class":`a\\xz`,}); }
+ { svelteHTML.createElement("div", { "class":`a\\uz`,}); }
+ { svelteHTML.createElement("div", { "class":`a\\`,}); }
+
+ { svelteHTML.createElement("div", { "class":`\\x0000`,}); }

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-value-escape/input.svelte

@@ -0,0 +1,6 @@
+<div class="a\00a0"></div>
+<div class="a\xz"></div>
+<div class="a\uz"></div>
+<div class="a\"></div>
+
+<div class="\x0000"></div>