fix: svelte:element with dynamic this and spread attributes throws er…

…ror (sveltejs#9112) fixes sveltejs#9092 --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
kelvinsjk · Oct 19, 2023 · 4af97ce · 4af97ce
1 parent d0c2de8
commit 4af97ce
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/khaki-wolves-dream.md b/.changeset/khaki-wolves-dream.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle `svelte:element` with dynamic this and spread attributes
diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
@@ -990,7 +990,8 @@ export default class ElementWrapper extends Wrapper {
 		const static_attributes = [];
 		this.attributes.forEach((attr) => {
 			if (attr instanceof SpreadAttributeWrapper) {
-				static_attributes.push({ type: 'SpreadElement', argument: attr.node.expression.node });
+				const snippet = { type: 'SpreadElement', argument: attr.node.expression.manipulate(block) };
+				static_attributes.push(snippet);
 			} else {
 				const name = attr.property_name || attr.name;
 				static_attributes.push(p`${name}: ${attr.get_value(block)}`);

diff --git a/packages/svelte/test/js/samples/svelte-element/expected.js b/packages/svelte/test/js/samples/svelte-element/expected.js
@@ -21,7 +21,7 @@ function create_dynamic_element_3(ctx) {
 	return {
 		c() {
 			svelte_element = element(static_value);
-			set_dynamic_element_data(static_value)(svelte_element, { static_value, ...static_obj });
+			set_dynamic_element_data(static_value)(svelte_element, { static_value, .../*static_obj*/ ctx[2] });
 			toggle_class(svelte_element, "foo", static_value);
 		},
 		m(target, anchor) {
@@ -43,7 +43,7 @@ function create_dynamic_element_2(ctx) {
 	return {
 		c() {
 			svelte_element = element(/*dynamic_value*/ ctx[0]);
-			set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, { static_value, ...static_obj });
+			set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, { static_value, .../*static_obj*/ ctx[2] });
 			toggle_class(svelte_element, "foo", static_value);
 		},
 		m(target, anchor) {

diff --git a/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/_config.js b/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/_config.js
@@ -0,0 +1,3 @@
+export default {
+	html: '<div id="element" class="element-handler">this is div</div>'
+};
diff --git a/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/main.svelte b/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/main.svelte
@@ -0,0 +1,7 @@
+<script>
+let props = {
+    id: "element",
+    class: "element-handler"
+}
+</script>
+<svelte:element this={"div"} {...props}>this is div</svelte:element>