From d3776c1723c17736198e0bc96c2fb75c69b0756f Mon Sep 17 00:00:00 2001 From: Tensorworker <178221229+tensorworkerr@users.noreply.github.com> Date: Wed, 21 Jan 2026 18:40:08 -0500 Subject: [PATCH] fix: handle non-string values in svelte:element this attribute (#17499) * fix: handle non-string values in svelte:element this attribute * chore: add changeset * fix(review): throw error in DEV for invalid svelte:element tag, ignore in PROD * chore: remove unused expected.html from test * fix(review): refine validate.js logic * fix(review): use else if (string) logic in server/index.js * fix(review): swap validation order in compiler, revert runtime changes * test: move reproduction to runtime-legacy per review * Apply suggestion from @7nik --------- Co-authored-by: tensorworker Co-authored-by: 7nik --- .changeset/clever-cats-dance.md | 5 +++++ .../client/visitors/SvelteElement.js | 2 +- .../server/visitors/SvelteElement.js | 2 +- .../_config.js | 17 +++++++++++++++++ .../main.svelte | 5 +++++ 5 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 .changeset/clever-cats-dance.md create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js create mode 100644 packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte diff --git a/.changeset/clever-cats-dance.md b/.changeset/clever-cats-dance.md new file mode 100644 index 0000000000..3322608095 --- /dev/null +++ b/.changeset/clever-cats-dance.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: handle non-string values in `svelte:element` `this` attribute diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js index cfa79b73ca..c8192cf00a 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js @@ -117,10 +117,10 @@ export function SvelteElement(node, context) { ); if (dev) { + statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag))); if (node.fragment.nodes.length > 0) { statements.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag))); } - statements.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag))); } const location = dev && locator(node.start); diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js index 6fc1ca5dfc..1ac15893f2 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js @@ -29,10 +29,10 @@ export function SvelteElement(node, context) { tag = b.id(tag_id); } + context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag)))); if (node.fragment.nodes.length > 0) { context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag)))); } - context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', b.thunk(tag)))); } const state = { diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js new file mode 100644 index 0000000000..b0dcaa8fdc --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/_config.js @@ -0,0 +1,17 @@ +import { test } from '../../test'; + +export default test({ + mode: ['client', 'server'], + + compileOptions: { + dev: true + }, + + get props() { + return { tag: true }; + }, + + error: + 'svelte_element_invalid_this_value\n' + + 'The `this` prop on `` must be a string, if defined' +}); diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte new file mode 100644 index 0000000000..cc6736a497 --- /dev/null +++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-invalid-this-content/main.svelte @@ -0,0 +1,5 @@ + + +content