mirror of https://github.com/sveltejs/svelte
Run them only once the batch is committed. Strictly speaking this is a breaking change in async mode, but it's experimental so it's fine. As a consequence add a new `reveal` method to batch which collects these not-yet-run effects and schedules them in its own batch, too, in case it commits first. This should also help for our "fork only branches" case later. Extracted from #18880defer-render-effects
Simon Holthausen
1 day ago
parent
40bb08482f
commit
d3df5e861f
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
breaking(experimental-async): run render/pre effects created during traversal alongside existing render effects, in tree order
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let { count } = $props();
|
||||
|
||||
$effect(() => {
|
||||
console.log(`effect ${count}`);
|
||||
});
|
||||
</script>
|
||||
|
||||
<span>child {count}</span>
|
||||
@ -0,0 +1,49 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
const buttons = `<button>a</button><button>b</button><button>shift</button><button>inc</button>`;
|
||||
|
||||
// Branches (if block, each item, each fallback) created by a pending batch contain effects
|
||||
// (render effects and `$effect`s) that are deferred until that batch commits. If an unrelated
|
||||
// batch selects the same branches and commits first, those effects must run, too
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [a, b, shift, inc] = target.querySelectorAll('button');
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><span>item 1</span>`);
|
||||
|
||||
// pending batch creates the branches offscreen
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><span>item 1</span>`);
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
// unrelated batch selects the same branches and commits first
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`${buttons}<p>0</p><span>child 0</span><span>item 1 0</span><span>fallback 0</span>`
|
||||
);
|
||||
assert.deepEqual(logs, ['effect 0']);
|
||||
|
||||
// TODO ideally the `$effect` wouldn't re-run once the pending batch commits,
|
||||
// since nothing it depends on was changed by that batch
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`${buttons}<p>1</p><span>child 0</span><span>item 1 0</span><span>fallback 0</span>`
|
||||
);
|
||||
assert.deepEqual(logs, ['effect 0', 'effect 0']);
|
||||
|
||||
inc.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`${buttons}<p>1</p><span>child 1</span><span>item 1 1</span><span>fallback 1</span>`
|
||||
);
|
||||
assert.deepEqual(logs, ['effect 0', 'effect 0', 'effect 1']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let a = $state(false);
|
||||
let b = $state(false);
|
||||
let count = $state(0);
|
||||
let x = $state(0);
|
||||
|
||||
let resolvers = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
return new Promise((r) => resolvers.push(() => r(v)));
|
||||
}
|
||||
|
||||
// `b || a` rather than `a || b`, so that the pending batch (which sets `a`) doesn't
|
||||
// short-circuit and the blocks also depend on `b`, which is set by the unrelated batch
|
||||
let items = $derived(b || a ? [1] : []);
|
||||
let empty = $derived(b || a ? [] : [1]);
|
||||
</script>
|
||||
|
||||
<button onclick={() => { a = true; x++; }}>a</button>
|
||||
<button onclick={() => (b = true)}>b</button>
|
||||
<button onclick={() => resolvers.shift()?.()}>shift</button>
|
||||
<button onclick={() => count++}>inc</button>
|
||||
|
||||
<p>{await push(x)}</p>
|
||||
|
||||
{#if b || a}
|
||||
<Child {count} />
|
||||
{/if}
|
||||
|
||||
{#each items as item (item)}
|
||||
<span>item {item} {count}</span>
|
||||
{/each}
|
||||
|
||||
{#each empty as item (item)}
|
||||
<span>item {item}</span>
|
||||
{:else}
|
||||
<span>fallback {count}</span>
|
||||
{/each}
|
||||
@ -0,0 +1,32 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['client', 'hydrate'],
|
||||
|
||||
test({ assert, target, logs }) {
|
||||
const input = /** @type {HTMLInputElement} */ (target.querySelector('input'));
|
||||
|
||||
assert.deepEqual(logs, ['a', 'hello', 'c', 'hello']);
|
||||
logs.length = 0;
|
||||
|
||||
input.value = 'hello!';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
flushSync();
|
||||
assert.deepEqual(logs, ['a', 'hello!', 'c', 'hello!']);
|
||||
logs.length = 0;
|
||||
|
||||
input.value = 'hello!!';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
flushSync();
|
||||
assert.deepEqual(logs, ['a', 'hello!!', 'b', 'hello!!', 'c', 'hello!!']);
|
||||
logs.length = 0;
|
||||
|
||||
input.value = 'hello!!!';
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
flushSync();
|
||||
assert.deepEqual(logs, ['a', 'hello!!!', 'b', 'hello!!!', 'c', 'hello!!!']);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<input /><p>hello!!!</p><p>hello!!!</p><p>hello!!!</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let message = $state('hello');
|
||||
|
||||
function log(value, label) {
|
||||
console.log(label, value);
|
||||
return value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<input bind:value={message} />
|
||||
|
||||
{#if true}
|
||||
<p>{log(message, 'a')}</p>
|
||||
{/if}
|
||||
|
||||
{#if message.length > 6}
|
||||
<p>{log(message, 'b')}</p>
|
||||
{/if}
|
||||
|
||||
{#if true}
|
||||
<p>{log(message, 'c')}</p>
|
||||
{/if}
|
||||
Loading…
Reference in new issue