mirror of https://github.com/sveltejs/svelte
Paolo Ricciuti
4 months ago
committed by
GitHub
commit
c75ebe8b31
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: leave stale promises to wait for a later resolution, instead of rejecting
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: reapply context after transforming error during SSR
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
chore: remove unnecessary `increment_pending` calls
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: abort running obsolete async branches
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [increment, shift, middle] = target.querySelectorAll('button');
|
||||||
|
const [div] = target.querySelectorAll('div');
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
middle.click(); // resolve the second increment which will make the if block go away and the first batch discarded
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(div.innerHTML, '2 2');
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(div.innerHTML, '3 3');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
let a = $state(0);
|
||||||
|
|
||||||
|
const deferred = [];
|
||||||
|
|
||||||
|
function delay(value) {
|
||||||
|
if (!value) return value;
|
||||||
|
return new Promise((resolve) => deferred.push(() => resolve(value)));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{a} {await delay(a)}
|
||||||
|
{#if a < 2}
|
||||||
|
{await delay(a)}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button onclick={() => {a++;}}>a++</button>
|
||||||
|
<button onclick={() => deferred.shift()?.()}>shift</button>
|
||||||
|
<button onclick={() => deferred[2]()}>middle</button>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
// Tests that batch.#commit() does not null out a potentially new current_batch
|
||||||
|
export default test({
|
||||||
|
skip_initial_flushSync: true, // test that the initial batch is flushed without an explicit flushSync() call
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const [button] = target.querySelectorAll('button');
|
||||||
|
const [updates] = target.querySelectorAll('p');
|
||||||
|
|
||||||
|
assert.htmlEqual(updates.innerHTML, 'false');
|
||||||
|
|
||||||
|
button.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(updates.innerHTML, 'true');
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<script>
|
||||||
|
let count = $state(-1);
|
||||||
|
let payload = $state(false);
|
||||||
|
let updated = $state(false);
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
if (payload) {
|
||||||
|
updated = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
count = 0;
|
||||||
|
queueMicrotask(() => {
|
||||||
|
payload = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={update}>update</button>
|
||||||
|
|
||||||
|
<p>{updated}</p>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
{await new Promise(() => {})}
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>pending</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<script>
|
||||||
|
let { count } = $props();
|
||||||
|
let double = $derived(count * 2);
|
||||||
|
|
||||||
|
$effect.pre(() => console.log(count, double));
|
||||||
|
</script>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, logs, warnings }) {
|
||||||
|
const [increment, resolve] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
assert.deepEqual(logs, []);
|
||||||
|
|
||||||
|
resolve.click();
|
||||||
|
await tick();
|
||||||
|
assert.deepEqual(logs, []);
|
||||||
|
|
||||||
|
resolve.click();
|
||||||
|
await tick();
|
||||||
|
assert.deepEqual(logs, []);
|
||||||
|
|
||||||
|
resolve.click();
|
||||||
|
await tick();
|
||||||
|
assert.deepEqual(logs, [1, 2]);
|
||||||
|
|
||||||
|
// no await waterfall / inert derived warnings
|
||||||
|
assert.deepEqual(warnings, []);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<script>
|
||||||
|
import Child from "./Child.svelte";
|
||||||
|
let count = $state(0);
|
||||||
|
|
||||||
|
let deferreds = [];
|
||||||
|
|
||||||
|
function push(v) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
deferreds.push({ resolve: () => resolve(v), reject });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => count += 1}>increment</button>
|
||||||
|
<button onclick={() => deferreds.shift()?.resolve()}>resolve</button>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
{#if count % 2 === 0}
|
||||||
|
{@const double = count * 2}
|
||||||
|
<p>true</p>
|
||||||
|
{await push(count)} {double}
|
||||||
|
<Child count={await push(count)} />
|
||||||
|
{:else}
|
||||||
|
<p>false</p>
|
||||||
|
<Child count={await push(count)} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>loading...</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const [increment, hide, pop] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
pop.click();
|
||||||
|
await tick();
|
||||||
|
hide.click(); // hides the if block, which cancels the pending async inside, which means the batch can complete
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>increment</button> <button>hide</button> <button>pop</button> 1`
|
||||||
|
);
|
||||||
|
|
||||||
|
pop.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>increment</button> <button>hide</button> <button>pop</button> 1`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
let show = $state(true);
|
||||||
|
let count = $state(0);
|
||||||
|
|
||||||
|
const queue = [];
|
||||||
|
|
||||||
|
function push(value) {
|
||||||
|
if (!value) return value;
|
||||||
|
return new Promise(r => queue.push(() => r(value)));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => count += 1}>increment</button>
|
||||||
|
<button onclick={() => show = false}>hide</button>
|
||||||
|
<!-- pop() so that the outer one resolves first, not the one inside the if block -->
|
||||||
|
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||||
|
|
||||||
|
{await push(count)}
|
||||||
|
{#if show}
|
||||||
|
{await push(count)}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const [increment, shift] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>3</button><button>shift</button><p>1 = 1</p><p>fizz: true</p><p>buzz: true</p>`
|
||||||
|
);
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`<button>3</button><button>shift</button><p>3 = 3</p><p>fizz: true</p><p>buzz: false</p>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<script>
|
||||||
|
import { getAbortSignal } from 'svelte';
|
||||||
|
|
||||||
|
const queue = [];
|
||||||
|
|
||||||
|
let n = $state(1);
|
||||||
|
let fizz = $state(true);
|
||||||
|
let buzz = $state(true);
|
||||||
|
|
||||||
|
function increment() {
|
||||||
|
n++;
|
||||||
|
|
||||||
|
fizz = n % 3 === 0;
|
||||||
|
buzz = n % 5 === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function push(value) {
|
||||||
|
if (value === 1) return 1;
|
||||||
|
const d = Promise.withResolvers();
|
||||||
|
|
||||||
|
queue.push(() => d.resolve(value));
|
||||||
|
|
||||||
|
const signal = getAbortSignal();
|
||||||
|
signal.onabort = () => d.reject(signal.reason);
|
||||||
|
|
||||||
|
return d.promise;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={increment}>
|
||||||
|
{$state.eager(n)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button onclick={() => queue.shift()?.()}>shift</button>
|
||||||
|
|
||||||
|
<p>{n} = {await push(n)}</p>
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
<p>fizz: {fizz}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if true}
|
||||||
|
<p>buzz: {buzz}</p>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [button1, button2, pop, shift] = target.querySelectorAll('button');
|
||||||
|
const [p] = target.querySelectorAll('p');
|
||||||
|
|
||||||
|
button1.click();
|
||||||
|
await tick();
|
||||||
|
button2.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||||
|
|
||||||
|
pop.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||||
|
|
||||||
|
pop.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
pop.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script>
|
||||||
|
const queue1 = [];
|
||||||
|
const queue2 = [];
|
||||||
|
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state(0);
|
||||||
|
let c = $state(0);
|
||||||
|
let d = $state(0)
|
||||||
|
|
||||||
|
function push(value, where = 1) {
|
||||||
|
if (!value) return value;
|
||||||
|
return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => {a++;c++}}>a / c</button>
|
||||||
|
<button onclick={() => {b+=2;d++}}>b / d</button>
|
||||||
|
<button onclick={() => queue1.pop()?.()}>pop 1</button>
|
||||||
|
<button onclick={() => queue2.shift()?.()}>shift 2</button>
|
||||||
|
|
||||||
|
<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
const [button1, button2, shift_1, pop_1, shift_2] = target.querySelectorAll('button');
|
||||||
|
const [p] = target.querySelectorAll('p');
|
||||||
|
|
||||||
|
button1.click();
|
||||||
|
await tick();
|
||||||
|
button2.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||||
|
|
||||||
|
pop_1.click();
|
||||||
|
await tick();
|
||||||
|
shift_2.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `0 + 0 = 0 | 0 0`);
|
||||||
|
|
||||||
|
// Check that the first batch can still resolve before the second even if one of its async values
|
||||||
|
// is already superseeded (but the subsequent batch as a whole is still pending).
|
||||||
|
shift_1.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `1 + 0 = 1 | 1 0`);
|
||||||
|
|
||||||
|
shift_1.click();
|
||||||
|
await tick();
|
||||||
|
shift_2.click();
|
||||||
|
await tick();
|
||||||
|
assert.htmlEqual(p.innerHTML, `1 + 2 = 3 | 1 1`);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<script>
|
||||||
|
const queue1 = [];
|
||||||
|
const queue2 = [];
|
||||||
|
|
||||||
|
let a = $state(0);
|
||||||
|
let b = $state(0);
|
||||||
|
let c = $state(0);
|
||||||
|
let d = $state(0)
|
||||||
|
|
||||||
|
function push(value, where = 1) {
|
||||||
|
if (!value) return value;
|
||||||
|
return new Promise(r => (where === 1 ? queue1 : queue2).push(() => r(value)));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => {a++;c++}}>a / c</button>
|
||||||
|
<button onclick={() => {b+=2;d++}}>b / d</button>
|
||||||
|
<button onclick={() => queue1.shift()?.()}>shift 1</button>
|
||||||
|
<button onclick={() => queue1.pop()?.()}>pop 1</button>
|
||||||
|
<button onclick={() => queue2.shift()?.()}>shift 2</button>
|
||||||
|
|
||||||
|
<p>{a} + {b} = {await push(a + b)} | {await push(c, 2)} {await push(d, 2)}</p>
|
||||||
Loading…
Reference in new issue