diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index 7c8a339d0086..3e0673eae3ce 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts @@ -344,7 +344,18 @@ function get_event_handler( if (context) { const { object, property, store, snippet } = context; - lhs = replace_object(lhs, snippet); + + if (snippet.type === 'CallExpression' && + lhs.type === 'MemberExpression' && + snippet.callee.type === 'Identifier' && + snippet.callee.name === '@object_without_properties' && + snippet.arguments.length > 0 && + snippet.arguments[0].type === 'MemberExpression') { + lhs.object = snippet.arguments[0]; + } else { + lhs = replace_object(lhs, snippet); + } + contextual_dependencies.add(object.name); contextual_dependencies.add(property.name); contextual_dependencies.delete(name); diff --git a/test/runtime/samples/each-block-destructured-object-rest-binding/_config.js b/test/runtime/samples/each-block-destructured-object-rest-binding/_config.js new file mode 100644 index 000000000000..a16a366804ea --- /dev/null +++ b/test/runtime/samples/each-block-destructured-object-rest-binding/_config.js @@ -0,0 +1,63 @@ +export default { + props: { + arr: [{p: 'foo', val: 'val1', id: 'id-1'}, {p: 'bar', val: 'val2', id: 'id-2'}] + }, + + html: ` + + {"val":"val1","id":"id-1"} +
+ + {"val":"val2","id":"id-2"} +
+ `, + + ssrHtml: ` + + {"val":"val1","id":"id-1"} +
+ + {"val":"val2","id":"id-2"} +
+ `, + + async test({ assert, component, target, window }) { + const inputs = target.querySelectorAll('input'); + + inputs[0].value = 'val3'; + await inputs[0].dispatchEvent(new window.Event('input')); + + const { arr } = component; + + assert.deepEqual(arr, [ + {p: 'foo', val: 'val3', id: 'id-1'}, + {p: 'bar', val: 'val2', id: 'id-2'} + ]); + + assert.htmlEqual(target.innerHTML, ` + + {"val":"val3","id":"id-1"} +
+ + {"val":"val2","id":"id-2"} +
+ `); + + inputs[1].value = 'val4'; + await inputs[1].dispatchEvent(new window.Event('input')); + + assert.deepEqual(arr, [ + {p: 'foo', val: 'val3', id: 'id-1'}, + {p: 'bar', val: 'val4', id: 'id-2'} + ]); + + assert.htmlEqual(target.innerHTML, ` + + {"val":"val3","id":"id-1"} +
+ + {"val":"val4","id":"id-2"} +
+ `); + } +}; diff --git a/test/runtime/samples/each-block-destructured-object-rest-binding/main.svelte b/test/runtime/samples/each-block-destructured-object-rest-binding/main.svelte new file mode 100644 index 000000000000..bb0ce5ec70ac --- /dev/null +++ b/test/runtime/samples/each-block-destructured-object-rest-binding/main.svelte @@ -0,0 +1,9 @@ + + +{#each arr as {p, ...rest} (rest.id)} + + {JSON.stringify(rest)} +
+{/each}