From 228dd4d9d74f99d820366d0e3f009ba2946e3d05 Mon Sep 17 00:00:00 2001 From: Teo Date: Wed, 20 Sep 2023 11:02:18 +0300 Subject: [PATCH] fix: svelte:element with dynamic this and spread attributes throws error (#9112) fixes #9092 --------- Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com> Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --- .changeset/khaki-wolves-dream.md | 5 +++++ .../compiler/compile/render_dom/wrappers/Element/index.js | 3 ++- packages/svelte/test/js/samples/svelte-element/expected.js | 4 ++-- .../samples/dynamic-element-spread-attributes/_config.js | 3 +++ .../samples/dynamic-element-spread-attributes/main.svelte | 7 +++++++ 5 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 .changeset/khaki-wolves-dream.md create mode 100644 packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/_config.js create mode 100644 packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/main.svelte diff --git a/.changeset/khaki-wolves-dream.md b/.changeset/khaki-wolves-dream.md new file mode 100644 index 000000000000..278162f56a1f --- /dev/null +++ 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 index bf87a2ec388f..9c54884807ee 100644 --- 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 index d54451e1b53a..8744ade5b1fa 100644 --- 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 new file mode 100644 index 000000000000..2ab9f47c008c --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/_config.js @@ -0,0 +1,3 @@ +export default { + html: '
this is 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 new file mode 100644 index 000000000000..b2ab251dfa20 --- /dev/null +++ b/packages/svelte/test/runtime/samples/dynamic-element-spread-attributes/main.svelte @@ -0,0 +1,7 @@ + +this is div