(fix) sanitize leading invalid attribute chars (#863)

They are valid for Svelte, but invalid for JSX #862
sveltejs · Mar 9, 2021 · e79ee80 · e79ee80
1 parent af8af83
commit e79ee80
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/attribute.ts
@@ -105,6 +105,12 @@ export function handleAttribute(htmlx: string, str: MagicString, attr: Node, par
         }
 
         const equals = htmlx.lastIndexOf('=', attrVal.start);
+
+        const sanitizedName = sanitizeLeadingChars(attr.name);
+        if (sanitizedName !== attr.name) {
+            str.overwrite(attr.start, equals, sanitizedName);
+        }
+
         if (attrVal.type == 'Text') {
             const endsWithQuote =
                 htmlx.lastIndexOf('"', attrVal.end) === attrVal.end - 1 ||
@@ -166,3 +172,16 @@ export function handleAttribute(htmlx: string, str: MagicString, attr: Node, par
         str.appendLeft(attr.end, '`}');
     }
 }
+
+function sanitizeLeadingChars(attrName: string): string {
+    let sanitizedName = '';
+    for (let i = 0; i < attrName.length; i++) {
+        if (/[A-Za-z$_]/.test(attrName[i])) {
+            sanitizedName += attrName.substr(i);
+            return sanitizedName;
+        } else {
+            sanitizedName += '_';
+        }
+    }
+    return sanitizedName;
+}
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/expected.jsx
@@ -0,0 +1,2 @@
+<><Hello __custom-prop="foo"></Hello>
+<div __custom-prop="foo"></div></>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/input.svelte
@@ -0,0 +1,2 @@
+<Hello --custom-prop="foo"></Hello>
+<div --custom-prop="foo"></div>