mirror of https://github.com/sveltejs/svelte
fix: execute uninitialized derived even if it's destroyed (#18228)
Turns out there are a few unavoidable cases where we have to execute the derived even if we otherwise wouldn't, because of its lazy nature. Fixes #18139pull/18239/head
parent
eb10a70cf1
commit
1e899cba35
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: execute uninitialized derived even if it's destroyed
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
// Not read before the outro, by which time the derived is destroyed
|
||||
let duration = $derived(10);
|
||||
</script>
|
||||
|
||||
<div in:fly={{ duration: 10 }} out:fly={{ duration }}>
|
||||
hello
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { raf } from '../../../animation-helpers';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [fly_in, fly_out] = target.querySelectorAll('button');
|
||||
|
||||
fly_in.click();
|
||||
flushSync();
|
||||
raf.tick(25);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
<div style="">hello</div>
|
||||
`
|
||||
);
|
||||
|
||||
fly_out.click();
|
||||
flushSync();
|
||||
raf.tick(50);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>fly in</button>
|
||||
<button>fly out</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
let show = $state(false);
|
||||
</script>
|
||||
|
||||
<button onclick={() => (show = true)}>fly in</button>
|
||||
<button onclick={() => (show = false)}>fly out</button>
|
||||
|
||||
{#if show}
|
||||
<Child />
|
||||
{/if}
|
||||
Loading…
Reference in new issue