fix: restore batch along with effect context (#16668)

Fixes https://github.com/sveltejs/svelte/issues/16596
Fixes https://github.com/sveltejs/kit/issues/14124
pull/16672/head
Rich Harris 2 weeks ago committed by GitHub
parent 57fed6a267
commit 7105736828
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: restore batch along with effect context

@ -73,11 +73,13 @@ function capture() {
var previous_effect = active_effect;
var previous_reaction = active_reaction;
var previous_component_context = component_context;
var previous_batch = current_batch;
return function restore() {
set_active_effect(previous_effect);
set_active_reaction(previous_reaction);
set_component_context(previous_component_context);
previous_batch?.activate();
if (DEV) {
set_from_async_derived(null);
@ -176,8 +178,8 @@ export function unset_context() {
* @param {() => Promise<void>} fn
*/
export async function async_body(fn) {
const unsuspend = suspend();
const active = /** @type {Effect} */ (active_effect);
var unsuspend = suspend();
var active = /** @type {Effect} */ (active_effect);
try {
await fn();

@ -76,8 +76,8 @@ let queued_root_effects = [];
let last_scheduled_effect = null;
let is_flushing = false;
let is_flushing_sync = false;
export class Batch {
/**
* The current values of any sources that are updated in this batch
@ -678,6 +678,8 @@ export function suspend() {
if (!pending) {
batch.activate();
batch.decrement();
} else {
batch.deactivate();
}
unset_context();

@ -0,0 +1,7 @@
<script lang="ts">
import { resolve } from './main.svelte';
const bar = await new Promise((r) => resolve.push(() => r('bar')));
</script>
<p>bar: {bar}</p>

@ -0,0 +1,10 @@
<script lang="ts">
import { resolve } from './main.svelte';
import Bar from './Bar.svelte';
const foo = await new Promise((r) => resolve.push(() => r('foo')));
</script>
<p>foo: {foo}</p>
<Bar/>

@ -0,0 +1,42 @@
import { tick } from 'svelte';
import { test } from '../../test';
export default test({
async test({ assert, target }) {
const [show, resolve] = target.querySelectorAll('button');
show.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>pending...</p>
`
);
resolve.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>pending...</p>
`
);
resolve.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>foo: foo</p>
<p>bar: bar</p>
`
);
}
});

@ -0,0 +1,31 @@
<script module>
export let resolve = [];
</script>
<script>
import Foo from './Foo.svelte';
let show = $state(false);
</script>
<button onclick={() => show = true}>
show
</button>
<button onclick={() => resolve.shift()()}>
resolve
</button>
<svelte:boundary>
{#if show}
<Foo/>
{/if}
{#if $effect.pending()}
<p>pending...</p>
{/if}
{#snippet pending()}
<p>initializing...</p>
{/snippet}
</svelte:boundary>

@ -29,6 +29,7 @@ export default test({
<button>c</button>
<button>ok</button>
<p>c</p>
<p>b or c</p>
`
);
@ -46,6 +47,7 @@ export default test({
<button>c</button>
<button>ok</button>
<p>b</p>
<p>b or c</p>
`
);
}

@ -33,6 +33,10 @@
<p>c</p>
{/if}
{#if route === 'b' || route === 'c'}
<p>b or c</p>
{/if}
{#snippet pending()}
<p>pending...</p>
{/snippet}

@ -0,0 +1,8 @@
<script lang="ts">
import { resolve } from './main.svelte';
const foo = $derived(await new Promise((r) => resolve.push(() => r('foo'))));
const bar = $derived(await new Promise((r) => resolve.push(() => r('bar'))));
</script>
<p>{foo} {bar}</p>

@ -0,0 +1,41 @@
import { tick } from 'svelte';
import { test } from '../../test';
export default test({
async test({ assert, target }) {
const [show, resolve] = target.querySelectorAll('button');
show.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>pending...</p>
`
);
resolve.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>pending...</p>
`
);
resolve.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`
<button>show</button>
<button>resolve</button>
<p>foo bar</p>
`
);
}
});

@ -0,0 +1,31 @@
<script module>
export let resolve = [];
</script>
<script>
import Foo from './Foo.svelte';
let show = $state(false);
</script>
<button onclick={() => show = true}>
show
</button>
<button onclick={() => resolve.shift()()}>
resolve
</button>
<svelte:boundary>
{#if show}
<Foo/>
{/if}
{#if $effect.pending()}
<p>pending...</p>
{/if}
{#snippet pending()}
<p>initializing...</p>
{/snippet}
</svelte:boundary>
Loading…
Cancel
Save