fix: properly update `svelte:component` props when there are spread props (#10604)

fixes #10602
pull/10607/head
konstantinov90 2 years ago committed by GitHub
parent 314c3d4af9
commit 055e7a8739
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: properly update `svelte:component` props when there are spread props

@ -277,14 +277,13 @@ export default class InlineComponentWrapper extends Wrapper {
// statements will become switch_props function body
// rewrite last statement, add props update logic
statements[statements.length - 1] = b`
for (let #i = 0; #i < ${levels}.length; #i += 1) {
${props} = @assign(${props}, ${levels}[#i]);
}
if (#dirty !== undefined && ${condition}) {
${props} = @get_spread_update(${levels}, [
${props} = @assign(${props}, @get_spread_update(${levels}, [
${changes}
]);
} else {
for (let #i = 0; #i < ${levels}.length; #i += 1) {
${props} = @assign(${props}, ${levels}[#i]);
}
]));
}
`;
}

@ -1,5 +1,9 @@
<script>
export let value;
export let foo;
export let cb;
</script>
<p>value(1) = {value}</p>
<p>foo={foo}</p>
<p>typeof cb={typeof cb}</p>

@ -1,5 +1,9 @@
<script>
export let value;
export let foo;
export let cb;
</script>
<p>value(2) = {value}</p>
<p>foo={foo}</p>
<p>typeof cb={typeof cb}</p>

@ -1,6 +1,8 @@
export default {
html: `
<p>value(1) = 1</p>
<p>foo=bar</p>
<p>typeof cb=function</p>
<button>Toggle Component</button>
`,
@ -11,6 +13,8 @@ export default {
target.innerHTML,
`
<p>value(2) = 2</p>
<p>foo=bar</p>
<p>typeof cb=function</p>
<button>Toggle Component</button>
`
);
@ -19,6 +23,8 @@ export default {
target.innerHTML,
`
<p>value(1) = 1</p>
<p>foo=bar</p>
<p>typeof cb=function</p>
<button>Toggle Component</button>
`
);

@ -5,8 +5,10 @@
let view = Comp1;
$: props = view === Comp1 ? { value: 1 } : { value: 2 };
const bar = "bar";
function cb() {}
</script>
<svelte:component this={view} {...props} />
<svelte:component this={view} {...props} foo={bar} {cb} />
<button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>

Loading…
Cancel
Save