mirror of https://github.com/sveltejs/svelte
Simon Holthausen
6 days ago
parent
e82d7494f7
commit
70bb532c0d
@ -0,0 +1,38 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
|
||||
const [a, b, pop] = target.querySelectorAll('button');
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['a+b 1']);
|
||||
logs.length = 0;
|
||||
|
||||
b.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['a+b 2', 'b 1']);
|
||||
logs.length = 0;
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
// At this point the two batches are merged, and no async effects should be rerun
|
||||
assert.deepEqual(logs, []);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>b</button>
|
||||
<button>pop</button>
|
||||
1 + 1 = 2 | 1
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
|
||||
const queue = [];
|
||||
|
||||
function push(from, v) {
|
||||
if (!v) return v;
|
||||
console.log(from + ' ' + v);
|
||||
return new Promise(r => queue.push(() => r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a</button>
|
||||
<button onclick={() => b++}>b</button>
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
{a} + {b} = {await push('a+b', a + b)} | {await push('b', b)}
|
||||
@ -0,0 +1,55 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [a, b, _, pop] = target.querySelectorAll('button');
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>b</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
0 0 bye
|
||||
`
|
||||
);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
// The later batch finishes first but should not commit; it overlaps with the earlier batch through a block.
|
||||
// If we were to commit this batch we would briefly see an if block's truthy branch, which is wrong considering
|
||||
// the "timeline applied in order" principle.
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>b</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
0 0 bye
|
||||
`
|
||||
);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>b</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
1 1 bye
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
|
||||
const queue = [];
|
||||
|
||||
function push(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(r => queue.push(() => r(v)));
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => a++}>a</button>
|
||||
<button onclick={() => b++}>b</button>
|
||||
<button onclick={() => queue.shift()?.()}>shift</button>
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
{await push(a)}
|
||||
{await push(b)}
|
||||
|
||||
{#if a < b}
|
||||
hello
|
||||
{:else}
|
||||
bye
|
||||
{/if}
|
||||
Loading…
Reference in new issue