mirror of https://github.com/sveltejs/svelte
Rich Harris
2 months ago
commit
2792ac74c2
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: reapply context after transforming error during SSR
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: don't rebase just-created batches
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: flush eager effects in production
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: rethrow error of failed iterable after calling `return()`
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: account for proxified instance when updating `bind:this`
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ensure scheduled batch is flushed if not obsolete
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: resolve stale deriveds with latest value
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
chore: remove unnecessary `increment_pending` calls
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: allow `@debug` tags to reference awaited variables
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: re-run fallback props if dependencies update
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ignore comments when reading CSS values
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: wrap `Promise.all` in `save` during SSR
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ignore false-positive errors of `$inspect` dependencies
|
||||
@ -0,0 +1,4 @@
|
||||
|
||||
p.svelte-xyz {
|
||||
padding: 0 /* it's a comment */ 1em;
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<p>red</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
padding: 0 /* it's a comment */ 1em;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
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();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>clicks: 0 - 0 - 0</button> <button>shift</button> <p>true - true</p>`
|
||||
);
|
||||
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>clicks: 1 - 1 - 1</button> <button>shift</button> <p>false - false</p>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
|
||||
let count = $state(0);
|
||||
const delayedCount = $derived(await push(count));
|
||||
const derivedCount = $derived(count);
|
||||
|
||||
let resolvers = [];
|
||||
|
||||
function push(value) {
|
||||
if (!value) return value;
|
||||
const { promise, resolve } = Promise.withResolvers();
|
||||
resolvers.push(() => resolve(value));
|
||||
return promise;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count += 1}>
|
||||
clicks: {count} - {delayedCount} - {derivedCount}
|
||||
</button>
|
||||
<button onclick={() => resolvers.shift()?.()}>shift</button>
|
||||
|
||||
<p>{$state.eager(count) !== count} - {$state.eager(derivedCount) !== derivedCount}</p>
|
||||
@ -0,0 +1,31 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
test({ assert, raf, target, logs }) {
|
||||
let divs = target.querySelectorAll('div');
|
||||
divs.forEach((div) => {
|
||||
// @ts-expect-error
|
||||
div.getBoundingClientRect = function () {
|
||||
// @ts-expect-error
|
||||
const index = [...this.parentNode.children].indexOf(this);
|
||||
const top = index * 30;
|
||||
|
||||
return {
|
||||
left: 0,
|
||||
right: 100,
|
||||
top,
|
||||
bottom: top + 20
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
flushSync(() => btn.click());
|
||||
|
||||
raf.tick(1);
|
||||
assert.deepEqual(logs, []);
|
||||
raf.tick(100);
|
||||
assert.deepEqual(logs, []);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import { flip } from "svelte/animate";
|
||||
|
||||
let numbers = $state([0,1]);
|
||||
</script>
|
||||
|
||||
<button onclick={() => numbers.reverse()}>reverse</button>
|
||||
|
||||
{#each numbers as num (num)}
|
||||
<div
|
||||
onintrostart={() => console.log("intro start")}
|
||||
onoutrostart={() => console.log("outro start")}
|
||||
onintroend={() => console.log("intro end")}
|
||||
onoutroend={() => console.log("outro end")}
|
||||
animate:flip={{ duration: 100 }}
|
||||
>
|
||||
{num}
|
||||
</div>
|
||||
{/each}
|
||||
@ -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,18 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
mode: ['client', 'async-server'],
|
||||
|
||||
async test({ assert, logs }) {
|
||||
await tick();
|
||||
|
||||
assert.deepEqual(logs, [{ data: 'works' }]);
|
||||
},
|
||||
test_ssr({ assert, logs }) {
|
||||
assert.deepEqual(logs, [{ data: 'works' }]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,4 @@
|
||||
<svelte:boundary>
|
||||
{@const data = await Promise.resolve("works")}
|
||||
{@debug data}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,27 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
|
||||
// rescheduling an effect on the new batch that shouldn't run.
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [increment, resolve] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
// This resolve
|
||||
// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
|
||||
// - shouldn't result in #commit() rebasing the new batch
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
|
||||
// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,32 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
let double = $derived(count * 2);
|
||||
let count_mirror = $state(0);
|
||||
|
||||
const queued = [];
|
||||
function delay(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(resolve => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
{#if count}
|
||||
<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
|
||||
<!-- first $effect creates new batch ... -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
count_mirror = count;
|
||||
})
|
||||
})()}
|
||||
<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
console.log(double);
|
||||
})
|
||||
})()}
|
||||
{/if}
|
||||
@ -0,0 +1,25 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
|
||||
// rescheduling an effect on the new batch that shouldn't run.
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [increment, resolve] = target.querySelectorAll('button');
|
||||
assert.deepEqual(logs, ['delay 0']);
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['delay 0', 'delay 2']);
|
||||
|
||||
// This resolve should trigger the async effect only once
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
|
||||
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, ['delay 0', 'delay 2', 'effect run', 'delay 4']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { untrack } from "svelte";
|
||||
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
let c = $state(0);
|
||||
|
||||
const queued = [];
|
||||
function delay(v) {
|
||||
console.log('delay ' + v);
|
||||
if (!v) return v;
|
||||
return new Promise(resolve => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (b + c === 0 || b + c > 2) return;
|
||||
console.log('effect run')
|
||||
untrack(() => {
|
||||
b++;
|
||||
c++;
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => { a++; b++; }}>increment</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
{await delay(a + b + c)}
|
||||
@ -0,0 +1,31 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
|
||||
// rescheduling an effect on the new batch that shouldn't run.
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [increment, shift, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
// Resolve the blocking await which shouldn't result in the derived execution capturing
|
||||
// the new derived value on the new batch, but on the previous batch which is currently flushing
|
||||
pop.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
|
||||
// Resolve the non-blocking await which shouldn't result in #commit() rebasing the new batch
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
|
||||
// Resolve the new batch's await
|
||||
shift.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,37 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
let double = $derived(count * 2);
|
||||
let count_mirror = $state(0);
|
||||
|
||||
const queued = [];
|
||||
function delay(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(resolve => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)}</button>
|
||||
<button onclick={() => queued.shift()?.()}>shift</button>
|
||||
<button onclick={() => queued.pop()?.()}>pop</button>
|
||||
|
||||
{#if count}
|
||||
<svelte:boundary>
|
||||
{await delay(count)}
|
||||
{#snippet pending()}loading{/snippet}
|
||||
</svelte:boundary>
|
||||
<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
|
||||
<!-- first $effect creates new batch ... -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
count_mirror = count;
|
||||
})
|
||||
})()}
|
||||
<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
console.log(double);
|
||||
})
|
||||
})()}
|
||||
{/if}
|
||||
@ -0,0 +1,58 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that a newly created batch during an effect flush isn't rebased right away by the previous batch.#commit(),
|
||||
// rescheduling an effect on the new batch that shouldn't run.
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
await tick();
|
||||
const [increment, unrelated, resolve] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, []);
|
||||
|
||||
// This resolve
|
||||
// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
|
||||
// - shouldn't result in #commit() rebasing the new batch
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 0</button>
|
||||
<button>unrelated++</button>
|
||||
<button>resolve</button>
|
||||
`
|
||||
);
|
||||
|
||||
// This resolve
|
||||
// - shouldn't result in the derived execution capturing the new derived value on the new batch, but on the previous batch which is currently flushing
|
||||
// - shouldn't result in #commit() rebasing the new batch
|
||||
unrelated.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>count 1 | count_mirror 0 | count_mirror_d 0 | unrelated 1</button>
|
||||
<button>unrelated++</button>
|
||||
<button>resolve</button>
|
||||
`
|
||||
);
|
||||
|
||||
// As a result, this resolve shouldn't result in another execution of the effect depending on the derived
|
||||
resolve.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [2]);
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>count 1 | count_mirror 1 | count_mirror_d 2 | unrelated 1</button>
|
||||
<button>unrelated++</button>
|
||||
<button>resolve</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
<script>
|
||||
import { untrack } from "svelte";
|
||||
|
||||
let count = $state(0);
|
||||
let double = $derived(count * 2);
|
||||
let count_mirror = $state(0);
|
||||
let unrelated = $state(0);
|
||||
let count_mirror_d = $derived(count_mirror * 2);
|
||||
|
||||
const queued = [];
|
||||
function delay(v) {
|
||||
if (!v) return v;
|
||||
return new Promise(resolve => {
|
||||
queued.push(() => resolve(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => count++}>count {await delay(count)} | count_mirror {await delay(count_mirror)} | count_mirror_d {count_mirror_d} | unrelated {unrelated}</button>
|
||||
<button onclick={() => unrelated++}>unrelated++</button>
|
||||
<button onclick={() => queued.shift()?.()}>resolve</button>
|
||||
|
||||
{#if count}
|
||||
<!-- inside if block so effects are newly created and therefore added to batch.#new_effects -->
|
||||
<!-- first $effect creates new batch ... -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
count_mirror = count;
|
||||
untrack(() => count_mirror_d); // execute derived; should associate value with the right batch
|
||||
})
|
||||
})()}
|
||||
<!-- ... which second $effect shouldn't write to because the derived execution belongs to the previous batch -->
|
||||
{(() => {
|
||||
$effect(() => {
|
||||
console.log(double);
|
||||
})
|
||||
})()}
|
||||
{/if}
|
||||
@ -0,0 +1,24 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
import { normalise_trace_logs } from '../../../helpers.js';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
html: '<p>pending</p>',
|
||||
async test({ assert, target, warnings }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
'<h1>number -> number -> number -> return -> body failed -> ended</h1>'
|
||||
);
|
||||
|
||||
assert.deepEqual(normalise_trace_logs(warnings), [
|
||||
{
|
||||
log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
<script>
|
||||
let values = $state([0, 1, 2]);
|
||||
|
||||
async function get_result() {
|
||||
const logs = [];
|
||||
|
||||
const iterator = {
|
||||
index: 0,
|
||||
async next() {
|
||||
if (this.index > 2) { done: true }
|
||||
return { done: false, value: values[this.index++] };
|
||||
},
|
||||
async return() {
|
||||
logs.push('return');
|
||||
},
|
||||
[Symbol.asyncIterator]() {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
for await (const value of iterator) {
|
||||
logs.push('number');
|
||||
// Read reactive state after async iterator await.
|
||||
if (values.length === 3 && value === 2) {
|
||||
throw new Error('body failed');
|
||||
}
|
||||
}
|
||||
logs.push('done');
|
||||
} catch (error) {
|
||||
logs.push(error.message);
|
||||
}
|
||||
|
||||
logs.push('ended');
|
||||
return logs.join(' -> ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<h1>{await get_result()}</h1>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,21 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
import { normalise_trace_logs } from '../../../helpers.js';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
html: '<p>pending</p>',
|
||||
async test({ assert, target, warnings }) {
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<h1>number -> number -> next failed -> ended</h1>');
|
||||
|
||||
assert.deepEqual(normalise_trace_logs(warnings), [
|
||||
{
|
||||
log: 'Detected reactivity loss when reading `values[1]`. This happens when state is read in an async function after an earlier `await`'
|
||||
}
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,43 @@
|
||||
<script>
|
||||
let values = $state([0, 1, 2]);
|
||||
|
||||
async function get_result() {
|
||||
const logs = [];
|
||||
|
||||
const iterator = {
|
||||
index: 0,
|
||||
async next() {
|
||||
if (this.index > 1) throw new Error('next failed');
|
||||
return { done: false, value: values[this.index++] };
|
||||
},
|
||||
async return() {
|
||||
logs.push('return');
|
||||
},
|
||||
[Symbol.asyncIterator]() {
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
for await (const value of iterator) {
|
||||
logs.push('number');
|
||||
// Read reactive state after async iterator await.
|
||||
values.length === value;
|
||||
}
|
||||
logs.push('done');
|
||||
} catch (error) {
|
||||
logs.push(error.message);
|
||||
}
|
||||
|
||||
logs.push('ended');
|
||||
return logs.join(' -> ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<h1>{await get_result()}</h1>
|
||||
|
||||
{#snippet pending()}
|
||||
<p>pending</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,29 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
|
||||
const [increment, pop] = target.querySelectorAll('button');
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button><button>pop</button><p>0 0 0</p>`
|
||||
);
|
||||
|
||||
pop.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`<button>increment</button><button>pop</button><p>2 2 1</p>`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
let count = $state(0);
|
||||
let other = $state(0);
|
||||
|
||||
const queue = [];
|
||||
|
||||
function push(v) {
|
||||
if (v === 0) return v;
|
||||
|
||||
return new Promise((fulfil) => {
|
||||
queue.push(() => fulfil(v));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
if (count === 0) other++;
|
||||
count++;
|
||||
}}>increment</button>
|
||||
<button onclick={() => queue.pop()?.()}>pop</button>
|
||||
|
||||
<p>{await push(count)} {count} {other}</p>
|
||||
@ -0,0 +1,15 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Ensure that microtask timing doesn't influence whether or not a scheduled batch is flushed.
|
||||
// Timing can be such that the current_batch is reset before the scheduled flush runs, which
|
||||
// would cause the flush to skip without the fix.
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
|
||||
btn.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, '1 1');
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let a = $state(0);
|
||||
let b = $state(0);
|
||||
</script>
|
||||
|
||||
{#if a}
|
||||
{@const toShow = await a}
|
||||
{toShow}
|
||||
{b}
|
||||
{:else}
|
||||
<button
|
||||
onclick={async () => {
|
||||
a = 1;
|
||||
await 1;
|
||||
await 1; // two microtasks needed to get timing right to reproduce the bug
|
||||
b = 1;
|
||||
}}>click</button>
|
||||
{/if}
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
const props = $props();
|
||||
// svelte-ignore state_referenced_locally
|
||||
export const name = props.name;
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(logs, [
|
||||
{},
|
||||
{ 0: { name: 'Row 0' } },
|
||||
{ 0: { name: 'Row 0' }, 1: { name: 'Row 1' } }
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import Row from "./Component.svelte";
|
||||
|
||||
const nums = $state([]);
|
||||
const rows = $derived(nums.map(n => ({id: n, name: `Row ${n}` })));
|
||||
const refs = $state({});
|
||||
|
||||
$effect(() => {
|
||||
console.log({...refs});
|
||||
})
|
||||
</script>
|
||||
|
||||
<button onclick={() => nums.push(nums.length)}>Add</button>
|
||||
{#each rows as row (row.id)}
|
||||
<Row name={row.name} bind:this={refs[row.id]} />
|
||||
{/each}
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import { store } from "./store.svelte.js";
|
||||
|
||||
// This write marks the derived in main.svelte before it has reactions added to it.
|
||||
// This test checks that this does not cause the WAS_MARKED logic to incorrectly skip marking the derived subsequently.
|
||||
store.set("child-init-write", Math.random());
|
||||
</script>
|
||||
@ -0,0 +1,29 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [show, hide] = target.querySelectorAll('button');
|
||||
|
||||
hide.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>show</button>
|
||||
<button>hide</button>
|
||||
`
|
||||
);
|
||||
|
||||
show.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>show</button>
|
||||
<button>hide</button>
|
||||
<div>visible</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import Child from "./Child.svelte";
|
||||
import { store } from "./store.svelte.js";
|
||||
|
||||
const visible = $derived(store.get("visible"));
|
||||
const visible2 = $derived(visible);
|
||||
</script>
|
||||
|
||||
<button onclick={() => store.set("visible", true)}>show</button>
|
||||
<button onclick={() => store.set("visible", false)}>hide</button>
|
||||
{#if visible2}
|
||||
<Child />
|
||||
<div>visible</div>
|
||||
{/if}
|
||||
@ -0,0 +1,13 @@
|
||||
class RawStore {
|
||||
values = $state.raw({ visible: true });
|
||||
|
||||
get(key) {
|
||||
return this.values[key];
|
||||
}
|
||||
|
||||
set(key, value) {
|
||||
this.values = { ...this.values, [key]: value };
|
||||
}
|
||||
}
|
||||
|
||||
export const store = new RawStore();
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let {things} = $props();
|
||||
|
||||
$inspect(things);
|
||||
</script>
|
||||
|
||||
<ul>
|
||||
{#each things as thing}
|
||||
<li>thing {thing.id}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@ -0,0 +1,21 @@
|
||||
import { normalise_inspect_logs } from '../../../helpers';
|
||||
import { test } from '../../test';
|
||||
import { flushSync } from 'svelte';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
async test({ assert, target, errors, logs }) {
|
||||
const button = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
button?.click();
|
||||
});
|
||||
|
||||
assert.htmlEqual(target.innerHTML, '<button>clear</button>');
|
||||
assert.equal(errors.length, 0);
|
||||
assert.deepEqual(normalise_inspect_logs(logs), [[{ id: 1 }, { id: 2 }]]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import List from "./List.svelte"
|
||||
|
||||
let data = $state({things: [{id:1}, {id:2}]})
|
||||
|
||||
function reloadData() {
|
||||
data = null
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if data}
|
||||
<List things={data.things.map((t) => t)} />
|
||||
{/if}
|
||||
|
||||
<button onclick={() => reloadData()}>clear</button>
|
||||
@ -0,0 +1,19 @@
|
||||
import { flushSync, tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
accessors: false,
|
||||
test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
btn?.click();
|
||||
flushSync();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>greeting: Hola</p>
|
||||
<button>Change Language</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Sub from './sub.svelte';
|
||||
import { set_translation } from './translations.svelte.js';
|
||||
</script>
|
||||
|
||||
<Sub />
|
||||
|
||||
<button onclick={() => set_translation('Hola')}>
|
||||
Change Language
|
||||
</button>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { get_translation } from './translations.svelte.js';
|
||||
|
||||
const {
|
||||
p0 = get_translation()
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<p>greeting: {p0}</p>
|
||||
@ -0,0 +1,9 @@
|
||||
let greeting = $state('Hello');
|
||||
|
||||
export function get_translation() {
|
||||
return greeting;
|
||||
}
|
||||
|
||||
export function set_translation(value) {
|
||||
greeting = value;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
mode: ['async'],
|
||||
compileOptions: {
|
||||
dev: true
|
||||
}
|
||||
});
|
||||
@ -0,0 +1 @@
|
||||
<!--[--><img alt="test" src=""/><!--]-->
|
||||
@ -0,0 +1 @@
|
||||
<!--1410iyz--><!----><title>Async multiple attributes</title>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
const user = $derived(Promise.resolve({
|
||||
name: 'test',
|
||||
image: '',
|
||||
}))
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Async multiple attributes</title>
|
||||
</svelte:head>
|
||||
|
||||
<img
|
||||
alt={(await user).name}
|
||||
src={(await user).image}
|
||||
/>
|
||||
Loading…
Reference in new issue