diff --git a/.changeset/silly-shrimps-fold.md b/.changeset/silly-shrimps-fold.md new file mode 100644 index 000000000000..de4818199d5d --- /dev/null +++ b/.changeset/silly-shrimps-fold.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: svelte:element with dynamic this and spread attributes throws error 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 b8a09b91af4c..23666aeaf59f 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 @@ -37,6 +37,7 @@ import { import create_debugging_comment from '../shared/create_debugging_comment.js'; import { push_array } from '../../../../utils/push_array.js'; import CommentWrapper from '../Comment.js'; +import flatten_reference from '../../../../compile/utils/flatten_reference.js'; const regex_contains_radio_or_checkbox_or_file = /radio|checkbox|file/; const regex_contains_radio_or_checkbox_or_range_or_file = /radio|checkbox|range|file/; @@ -990,7 +991,9 @@ 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 { name } = flatten_reference(attr.node.expression.node); + const snippet = { type: 'SpreadElement', argument: attr.node.expression.manipulate(block) }; + static_attributes.push(p`${name}: {${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..ed50e770ed6d 100644 --- a/packages/svelte/test/js/samples/svelte-element/expected.js +++ b/packages/svelte/test/js/samples/svelte-element/expected.js @@ -21,7 +21,12 @@ 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: { .../*static_obj*/ ctx[2] } + }); + toggle_class(svelte_element, "foo", static_value); }, m(target, anchor) { @@ -43,7 +48,12 @@ 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: { .../*static_obj*/ ctx[2] } + }); + toggle_class(svelte_element, "foo", static_value); }, m(target, anchor) {