chore: bring over passing async-eager tests (#19011)

more tests from #18880 that already pass on `main`. On that branch,
there are four new tests that use `$state.eager`:

1. async-eager-batch-no-merge
2. async-eager-new-in-earlier-batch
3. async-eager-read-new-dependency
4. async-state-eager-not-connected

1 describes undesirable behaviour (see
https://github.com/sveltejs/svelte/pull/18880#discussion_r4271899616).
The other three already pass on `main` — the changes to the
implementation on #18880 (the `is_eager` stuff) are counteracting other
things that changed on that branch.

Of those, this brings over 2 and 4. 3 is unnecessary — the
`$state.eager` in 3 isn't doing anything (`show` doesn't have any async
dependents).
pull/18955/merge
Rich Harris 3 days ago committed by GitHub
parent 4473857264
commit a841a29407
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,33 @@
import { tick } from 'svelte';
import { test } from '../../test';
// The eager expression is created while the earlier batch is processed, in whose view `x` is
// still 0. It reads the real (latest) value nonetheless, so it should not be re-run later on
export default test({
async test({ assert, target, logs }) {
await tick();
const [a, x, shift] = target.querySelectorAll('button');
a.click();
await tick();
x.click();
await tick();
assert.deepEqual(logs, []);
shift.click();
await tick();
assert.htmlEqual(
target.innerHTML,
'<button>a</button><button>x</button><button>shift</button><p>1</p><span>0</span>'
);
assert.deepEqual(logs, [1]);
shift.click();
await tick();
assert.htmlEqual(
target.innerHTML,
'<button>a</button><button>x</button><button>shift</button><p>1</p><span>1</span>'
);
assert.deepEqual(logs, [1]);
}
});

@ -0,0 +1,26 @@
<script>
let a = $state(0);
let x = $state(0);
const queued = [];
function delay(v) {
if (!v) return v;
return new Promise((r) => queued.push(() => r(v)));
}
function log(v) {
console.log(v);
return v;
}
</script>
<button onclick={() => a++}>a</button>
<button onclick={() => x++}>x</button>
<button onclick={() => queued.shift()?.()}>shift</button>
{#if await delay(a)}
<p>{$state.eager(log(x))}</p>
{/if}
<span>{await delay(x)}</span>

@ -0,0 +1,34 @@
import { tick } from 'svelte';
import { test } from '../../test';
const buttons = `
<button>count</button>
<button>eager</button>
<button>plain</button>
<button>shift</button>
`;
// Reading a value via `$state.eager` sees the latest value, unlike a regular read, which
// sees the value from before the (pending) batch wrote it until that batch commits
export default test({
async test({ assert, target }) {
await tick();
const [count, eager, plain, shift] = target.querySelectorAll('button');
count.click();
await tick();
assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p>`);
eager.click();
await tick();
assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><span>1</span>`);
plain.click();
await tick();
assert.htmlEqual(target.innerHTML, `${buttons}<p>0</p><span>1</span><b>0</b>`);
shift.click();
await tick();
assert.htmlEqual(target.innerHTML, `${buttons}<p>1</p><span>1</span><b>1</b>`);
}
});

@ -0,0 +1,27 @@
<script>
let count = $state(0);
let eager = $state(false);
let plain = $state(false);
const deferred = [];
function delay(value) {
if (!value) return value;
return new Promise((resolve) => deferred.push(() => resolve(value)));
}
</script>
<button onclick={() => count++}>count</button>
<button onclick={() => (eager = true)}>eager</button>
<button onclick={() => (plain = true)}>plain</button>
<button onclick={() => deferred.shift()?.()}>shift</button>
<p>{await delay(count)}</p>
{#if eager}
<span>{$state.eager(count)}</span>
{/if}
{#if plain}
<b>{count}</b>
{/if}
Loading…
Cancel
Save