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