fix: svelte:component evaluates props once (#8946)

Fixes #6634
pull/8955/head
Nguyen Tran 2 years ago committed by GitHub
parent 1d05020f10
commit 66593c62f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: ensure `svelte:component` evaluates props once

@ -436,11 +436,6 @@ export default class InlineComponentWrapper extends Wrapper {
b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`
);
}
if (updates.length) {
block.chunks.update.push(b`
${updates}
`);
}
const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
const update_mount_node = has_css_custom_properties
@ -481,6 +476,7 @@ export default class InlineComponentWrapper extends Wrapper {
${name} = null;
}
} else if (${switch_value}) {
${updates}
${updates.length > 0 && b`${name}.$set(${name_changes});`}
}
`);

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

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

@ -0,0 +1,28 @@
export default {
html: `
<p>value(1) = 1</p>
<button>Toggle Component</button>
`,
async test({ assert, component, window, target }) {
const button = target.querySelector('button');
await button.dispatchEvent(new window.Event('click'));
assert.htmlEqual(
target.innerHTML,
`
<p>value(2) = 2</p>
<button>Toggle Component</button>
`
);
assert.equal(component.n, 2);
await button.dispatchEvent(new window.Event('click'));
assert.htmlEqual(
target.innerHTML,
`
<p>value(1) = 3</p>
<button>Toggle Component</button>
`
);
assert.equal(component.n, 3);
}
};

@ -0,0 +1,12 @@
<script>
import Comp1 from './Comp1.svelte';
import Comp2 from './Comp2.svelte';
export let n = 0;
let view = { comp: Comp1, fn: () => ++n };
</script>
<svelte:component this={view.comp} value={view.fn()}/>
<button on:click={e => view.comp = view.comp === Comp1 ? Comp2 : Comp1}>Toggle Component</button>
Loading…
Cancel
Save