fix: preserve event attribute casing in svelte 5 (#2347)

#2345
sveltejs · Apr 25, 2024 · d9e8948 · d9e8948
1 parent 957b8d6
commit d9e8948
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/index.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/index.ts
@@ -179,6 +179,7 @@ export function convertHtmlxToJsx(
                             node as Attribute,
                             parent,
                             options.preserveAttributeCase,
+                            options.svelte5Plus,
                             element
                         );
                         break;
@@ -189,7 +190,14 @@ export function convertHtmlxToJsx(
                         handleEventHandler(str, node as BaseDirective, element);
                         break;
                     case 'Let':
-                        handleLet(str, node, parent, options.preserveAttributeCase, element);
+                        handleLet(
+                            str,
+                            node,
+                            parent,
+                            options.preserveAttributeCase,
+                            options.svelte5Plus,
+                            element
+                        );
                         break;
                     case 'Text':
                         handleText(str, node as Text, parent);

diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts
@@ -55,6 +55,7 @@ export function handleAttribute(
     attr: Attribute,
     parent: BaseNode,
     preserveCase: boolean,
+    svelte5Plus: boolean,
     element: Element | InlineComponent
 ): void {
     if (
@@ -112,7 +113,8 @@ export function handleAttribute(
         if (
             !preserveCase &&
             !svgAttributes.find((x) => x == name) &&
-            !(element instanceof Element && element.tagName.includes('-'))
+            !(element instanceof Element && element.tagName.includes('-')) &&
+            !(svelte5Plus && name.startsWith('on'))
         ) {
             return name.toLowerCase();
         } else {

diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Let.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Let.ts
@@ -15,6 +15,7 @@ export function handleLet(
     node: BaseNode,
     parent: BaseNode,
     preserveCase: boolean,
+    svelte5Plus: boolean,
     element: Element | InlineComponent
 ): void {
     if (element instanceof InlineComponent) {
@@ -47,6 +48,7 @@ export function handleLet(
                 },
                 parent,
                 preserveCase,
+                svelte5Plus,
                 element
             );
         }