fix: ensure HMR doesn't mess with anchor nodes (#12242)

The refactoring in #12215 didn't take HMR into account. As a result, the anchor was passed to the HMR block, which was subsequently cleaned up on destroy - but the anchor could be shared with other components and therefore needs to stay in the dom. Passing `null` instead solves the problem.
Fixes #12228
Fixes #12230
Fixes #12233
pull/12232/head
Simon H 6 months ago committed by GitHub
parent 434e1adda6
commit 0d8330703d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: ensure HMR doesn't mess with anchor nodes

@ -18,7 +18,7 @@ export function hmr(source) {
/** @type {import("#client").Effect} */ /** @type {import("#client").Effect} */
let effect; let effect;
block(anchor, 0, () => { block(null, 0, () => {
const component = get(source); const component = get(source);
if (effect) { if (effect) {

@ -0,0 +1,17 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
mode: ['client'],
compileOptions: {
hmr: true,
dev: true
},
test({ target, assert }) {
assert.htmlEqual(target.innerHTML, `<button>switch</button> A`);
target.querySelector('button')?.click();
flushSync();
assert.htmlEqual(target.innerHTML, `<button>switch</button> B`);
}
});

@ -0,0 +1,9 @@
<script>
import A from './A.svelte';
import B from './B.svelte';
let component = $state(A);
</script>
<button onclick={() => (component = B)}>switch</button>
<svelte:component this={component} />
Loading…
Cancel
Save