From f069ca7e570a87c917ac0027dc93ffab43b2cb5b Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Sun, 10 Aug 2025 00:48:06 +0200 Subject: [PATCH 1/2] Fix builtin custom elements check when transforming attributes --- .../svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts | 2 +- packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts | 10 ++++++++++ .../custom-element-builtin-attribute/expectedv2.js | 1 + .../custom-element-builtin-attribute/input.svelte | 1 + 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts index 8a4221b88..3f44c6a05 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Attribute.ts @@ -113,7 +113,7 @@ export function handleAttribute( if ( !preserveCase && !svgAttributes.find((x) => x == name) && - !(element instanceof Element && element.tagName.includes('-')) && + !(element instanceof Element && element.isCustomElement()) && !(svelte5Plus && name.startsWith('on')) ) { return name.toLowerCase(); diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts index bd8947c64..d8dfdef5e 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts @@ -255,6 +255,16 @@ export class Element { } } + isCustomElement(): boolean { + if (this.tagName.includes('-')) { + return true; + } + if (this.node.attributes?.find((a: BaseNode) => a.name === 'is')?.value[0]?.data.includes('-')) { + return true; + } + return false; + } + private getStartTransformation(): TransformationArray { const createElement = `${this.typingsNamespace}.createElement`; const addActions = () => { diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js new file mode 100644 index 000000000..615ef7551 --- /dev/null +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/expectedv2.js @@ -0,0 +1 @@ + { svelteHTML.createElement("div", { "is":`custom-element`,"camelCase":`true`,"kebab-case":`true`,"PascalCase":`true`,"snake_case":`true`,});} diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte new file mode 100644 index 000000000..f5f7b1b8d --- /dev/null +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/custom-element-builtin-attribute/input.svelte @@ -0,0 +1 @@ +
From f9496faa10f19338ff1a773d5b09c6d883e1bbbc Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Wed, 13 Aug 2025 10:13:41 +0200 Subject: [PATCH 2/2] Fix lint issue --- packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts index d8dfdef5e..84ba4bb9b 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/Element.ts @@ -259,7 +259,11 @@ export class Element { if (this.tagName.includes('-')) { return true; } - if (this.node.attributes?.find((a: BaseNode) => a.name === 'is')?.value[0]?.data.includes('-')) { + if ( + this.node.attributes + ?.find((a: BaseNode) => a.name === 'is') + ?.value[0]?.data.includes('-') + ) { return true; } return false;