mirror of https://github.com/sveltejs/svelte
parent
de2097595e
commit
9d9647dd92
@ -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 and does not connect the batch
|
||||||
|
// to the (pending) batch that wrote it, unlike a regular read, which has to wait for it
|
||||||
|
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>`);
|
||||||
|
|
||||||
|
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