Skip to content

Commit

Permalink
fix: properly update svelte:component props when there are spread p…
Browse files Browse the repository at this point in the history
…rops (#10604)

fixes #10602
  • Loading branch information
konstantinov90 authored Feb 22, 2024
1 parent 314c3d4 commit 055e7a8
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .changeset/popular-wombats-try.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'svelte': patch
---

fix: properly update `svelte:component` props when there are spread props
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}
]));
}
`;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
`,

Expand All @@ -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>
`
);
Expand All @@ -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>
`
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 055e7a8

Please sign in to comment.