mirror of https://github.com/sveltejs/svelte
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
parent
4473857264
commit
a841a29407
@ -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…
Reference in new issue