mirror of https://github.com/sveltejs/svelte
paoloricciuti
4 months ago
commit
f35e12cf0e
@ -1,5 +0,0 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: discard batches made obsolete by commit
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: defer batch resolution until earlier intersecting batches have committed
|
||||
@ -0,0 +1,29 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [a, b, resolve] = target.querySelectorAll('button');
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
b.click();
|
||||
await tick();
|
||||
resolve.click();
|
||||
await tick();
|
||||
resolve.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>a</button>
|
||||
<button>b</button>
|
||||
<button>resolve</button>
|
||||
hi
|
||||
1
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let a_b = $derived(a * b);
|
||||
|
||||
const queued = [];
|
||||
|
||||
function push(value) {
|
||||
if (!value) return value;
|
||||
return new Promise(resolve => {
|
||||
queued.push(() => resolve(value));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a++)}>a</button>
|
||||
<button onclick={() => (b++)}>b</button>
|
||||
<button onclick={() => (queued.shift()?.())}>resolve</button>
|
||||
<!-- a_b called in a block effect before being called in an async effect -->
|
||||
{#if a_b}hi{/if}
|
||||
{await push(a_b)}
|
||||
@ -0,0 +1,32 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const spam = /** @type {HTMLButtonElement} */ (target.querySelector('button.spam'));
|
||||
const resolve = /** @type {HTMLButtonElement} */ (target.querySelector('button.resolve'));
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
spam.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
for (let i = 0; i < 5; i += 1) {
|
||||
resolve.click();
|
||||
await tick();
|
||||
}
|
||||
|
||||
assert.equal(target.querySelectorAll('div').length, 1);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button class="spam">Spam</button>
|
||||
<button class="resolve">Resolve</button>
|
||||
<div>5</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,28 @@
|
||||
<script>
|
||||
let value = $state({ id: '0' });
|
||||
const resolvers = [];
|
||||
|
||||
function wait() {
|
||||
const promise = Promise.withResolvers();
|
||||
resolvers.push(promise.resolve);
|
||||
return promise.promise;
|
||||
}
|
||||
|
||||
function spam() {
|
||||
value.id = `${Number(value.id) + 1}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="spam" onclick={spam}>Spam</button>
|
||||
<button class="resolve" onclick={() => resolvers.shift()?.()}>Resolve</button>
|
||||
|
||||
<svelte:boundary>
|
||||
{#each [value.id] as s (s)}
|
||||
{await wait()}
|
||||
<div>{s}</div>
|
||||
{/each}
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -1,102 +0,0 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip: true,
|
||||
async test({ assert, target }) {
|
||||
const [add, shift] = target.querySelectorAll('button');
|
||||
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
|
||||
// TODO pending count / number of pushes is off
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<p>pending=6 values.length=1 values=[1]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<p>pending=4 values.length=2 values=[1,2]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<p>pending=2 values.length=3 values=[1,2,3]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<p>pending=0 values.length=4 values=[1,2,3,4]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [a, b] = target.querySelectorAll('button');
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>a 0</button><button>b 0</button><p>hello</p>`);
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>a 0</button><button>b 0</button><p>hello</p>`);
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>a 2</button><button>b 0</button><p>hello</p>`);
|
||||
|
||||
a.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>a 2</button><button>b 0</button><p>hello</p>`);
|
||||
|
||||
// if we don't skip over the never-resolving promise in the `else` block, we will never update
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>a 3</button><button>b 1</button><p>hello</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let show = $state(true);
|
||||
</script>
|
||||
|
||||
<button onclick={() => (a++, show = !show)}>a {a}</button>
|
||||
<button onclick={() => (b++, show = !show)}>b {b}</button>
|
||||
|
||||
{#if show}
|
||||
<p>hello</p>
|
||||
{:else}
|
||||
{await new Promise(() => {})}
|
||||
{/if}
|
||||
@ -0,0 +1,10 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
ssrHtml: 'works',
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, 'works');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
const test = async () => "test";
|
||||
await test();
|
||||
$inspect("inspect after await shouldnt break builds");
|
||||
</script>
|
||||
|
||||
works
|
||||
@ -0,0 +1,9 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, 'aaa 1');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let name = $derived(await new Promise((a) => a('aaa')));
|
||||
function use() {
|
||||
return () => 1;
|
||||
}
|
||||
const aa = use();
|
||||
</script>
|
||||
|
||||
{name}
|
||||
{aa()}
|
||||
@ -0,0 +1,30 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
const [a_b, b, resolve] = target.querySelectorAll('button');
|
||||
|
||||
a_b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>a_b 0_0</button> <button>b 0</button> <button>resolve</button> 0'
|
||||
);
|
||||
|
||||
b.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>a_b 0_0</button> <button>b 0</button> <button>resolve</button> 0'
|
||||
);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<button>a_b 1_2</button> <button>b 2</button> <button>resolve</button> 1'
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,17 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let deferreds = [];
|
||||
|
||||
function push(value) {
|
||||
if (!value) return value;
|
||||
return new Promise(resolve => {
|
||||
deferreds.push(() => resolve(value));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {a++;b++}}>a_b {a}_{b}</button>
|
||||
<button onclick={() => (b++)}>b {b}</button>
|
||||
<button onclick={() => (deferreds.shift()?.())}>resolve</button>
|
||||
{await push(a)}
|
||||
@ -0,0 +1,205 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [add, shift, pop] = target.querySelectorAll('button');
|
||||
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=6 values.length=1 values=[1]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=4 values.length=2 values=[1,2]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=2 values.length=3 values=[1,2,3]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=0 values.length=4 values=[1,2,3,4]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
add.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=8 values.length=4 values=[1,2,3,4]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
// pop should have no effect until earlier promises have also resolved
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=6 values.length=4 values=[1,2,3,4]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>add</button>
|
||||
<button>shift</button>
|
||||
<button>pop</button>
|
||||
<p>pending=0 values.length=8 values=[1,2,3,4,5,6,7,8]</p>
|
||||
<div>not keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div>8</div>
|
||||
</div>
|
||||
<div>keyed:
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div>8</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let { src } = $props();
|
||||
</script>
|
||||
|
||||
<img {src} />
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<a href="/">
|
||||
{@render children()}
|
||||
</a>
|
||||
@ -0,0 +1,14 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['hydrate'],
|
||||
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<a href="/"><div>card</div> <img src="https://svelte.dev" /></a>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import Image from "./Image.svelte";
|
||||
import Link from "./Link.svelte";
|
||||
|
||||
let url = $derived(await 'https://svelte.dev');
|
||||
</script>
|
||||
|
||||
<Link>
|
||||
<div>card</div>
|
||||
<Image src={url} />
|
||||
</Link>
|
||||
Loading…
Reference in new issue