diff --git a/.changeset/lemon-llamas-reflect.md b/.changeset/lemon-llamas-reflect.md new file mode 100644 index 0000000000..c858403bd4 --- /dev/null +++ b/.changeset/lemon-llamas-reflect.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: ensure resume effects are scheduled in topological order diff --git a/.changeset/sour-pots-wonder.md b/.changeset/sour-pots-wonder.md new file mode 100644 index 0000000000..3c8fce5f06 --- /dev/null +++ b/.changeset/sour-pots-wonder.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: remove listener on `bind_current_time` teardown diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/media.js b/packages/svelte/src/internal/client/dom/elements/bindings/media.js index 444a1b3439..4893426d55 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/media.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/media.js @@ -52,7 +52,10 @@ export function bind_current_time(media, get, set = get) { } }); - teardown(() => cancelAnimationFrame(raf_id)); + teardown(() => { + cancelAnimationFrame(raf_id); + media.removeEventListener('timeupdate', callback); + }); } /** diff --git a/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js new file mode 100644 index 0000000000..29dc5e8d7f --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/_config.js @@ -0,0 +1,26 @@ +import { flushSync } from 'svelte'; +import { ok, test } from '../../test'; + +export default test({ + async test({ assert, target, logs }) { + const audio = target.querySelector('audio'); + const btn = target.querySelector('button'); + + ok(audio); + + flushSync(() => { + audio.currentTime = 10; + audio.dispatchEvent(new Event('timeupdate')); + }); + assert.deepEqual(logs, ['event']); + + flushSync(() => { + btn?.click(); + }); + flushSync(() => { + audio.currentTime = 20; + audio.dispatchEvent(new Event('timeupdate')); + }); + assert.deepEqual(logs, ['event']); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte new file mode 100644 index 0000000000..40c215378e --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-current-time-remove-listener/main.svelte @@ -0,0 +1,12 @@ + + + +{#if show} + +{/if} \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js new file mode 100644 index 0000000000..a0e29ec8ff --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-each-4/_config.js @@ -0,0 +1,35 @@ +import { flushSync } from '../../../../src/index-client.js'; +import { test } from '../../test'; + +export default test({ + async test({ assert, raf, target, logs }) { + assert.htmlEqual( + target.innerHTML, + '
1
2
3
' + ); + + const btn1 = target.querySelector('button'); + btn1?.click(); + flushSync(); + raf.tick(250); + + assert.htmlEqual( + target.innerHTML, + '
1
2
3
' + ); + + logs.length = 0; + + await Promise.resolve(); + + flushSync(); + raf.tick(500); + + assert.htmlEqual( + target.innerHTML, + '
3
4
' + ); + + assert.deepEqual(logs, ['$effect.pre', '$effect.pre', '$effect', '$effect']); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte new file mode 100644 index 0000000000..d399bee691 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-each-4/main.svelte @@ -0,0 +1,39 @@ + + + + +{#if toggle} +
+ {#each items as item (item)} + {(() => { + $effect(() => { + items; + console.log('$effect'); + }); + + $effect.pre(() => { + items; + console.log('$effect.pre'); + }); + })()} +
{item}
+ {/each} +
+{/if}