mirror of https://github.com/sveltejs/svelte
Paolo Ricciuti
4 months ago
committed by
GitHub
commit
b7179abf61
@ -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: 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: 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: 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,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,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,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;
|
||||
}
|
||||
Loading…
Reference in new issue