mirror of https://github.com/sveltejs/svelte
Rich Harris
1 week ago
commit
489cc444de
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: ensure deriveds values are correct across batches
|
||||
@ -0,0 +1,19 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
async test({ assert, target }) {
|
||||
const button = /** @type {HTMLElement} */ (target.querySelector('button'));
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 0, count2: 0</p>`);
|
||||
button.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 1, count2: 1</p>`);
|
||||
button.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>go</button><p>count1: 2, count2: 1</p>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
let count1 = $state(0);
|
||||
let count2 = $state(0);
|
||||
let cache = $state({});
|
||||
|
||||
function go() {
|
||||
count1++;
|
||||
const value = cache.value ??= get_value();
|
||||
}
|
||||
|
||||
function get_value() {
|
||||
count2++;
|
||||
return 42;
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={go}>go</button>
|
||||
<p>count1: {count1}, count2: {count2}</p>
|
||||
@ -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,16 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
|
||||
btn.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [10]);
|
||||
|
||||
btn.click();
|
||||
await tick();
|
||||
assert.deepEqual(logs, [10, 10]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { fork } from 'svelte';
|
||||
|
||||
let s = $state(1);
|
||||
let d = $derived(s * 10);
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={() => {
|
||||
const f = fork(() => {
|
||||
// d has not been read yet, so this write happens with an uninitialized old value
|
||||
s = 2;
|
||||
d = 99;
|
||||
});
|
||||
|
||||
f.discard();
|
||||
console.log(d);
|
||||
}}
|
||||
>
|
||||
test
|
||||
</button>
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
let { data } = $props();
|
||||
|
||||
const processed = $derived(data.toUpperCase());
|
||||
|
||||
export function getProcessed() {
|
||||
return processed;
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
|
||||
btn.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>clear</button>
|
||||
<p></p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import Inner from './Inner.svelte';
|
||||
|
||||
let value = $state('hello');
|
||||
|
||||
let innerComp = $state();
|
||||
|
||||
// Reads Inner's derived value from outside the {#if} block, keeping it
|
||||
// connected in the reactive graph even after the branch is destroyed.
|
||||
const externalView = $derived(innerComp?.getProcessed() ?? '');
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
{@const result = value}
|
||||
<Inner data={result} bind:this={innerComp} />
|
||||
{/if}
|
||||
|
||||
<button onclick={() => (value = undefined)}>clear</button>
|
||||
<p>{externalView}</p>
|
||||
@ -0,0 +1,12 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [btn] = target.querySelectorAll('button');
|
||||
|
||||
btn.click();
|
||||
await tick();
|
||||
assert.htmlEqual(target.innerHTML, `<button>clear</button>`);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let value = $state('hello');
|
||||
let elements = {};
|
||||
</script>
|
||||
|
||||
{#if value}
|
||||
<span bind:this={elements[value.toUpperCase()]}>{value}</span>
|
||||
{/if}
|
||||
|
||||
<button onclick={() => (value = undefined)}>clear</button>
|
||||
@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
$effect(() => {
|
||||
console.log('hello from child');
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,7 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, logs }) {
|
||||
assert.deepEqual(logs, ['hello from child']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Child from './Child.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:boundary>
|
||||
<Child />
|
||||
|
||||
{#snippet pending()}
|
||||
<p>Loading...</p>
|
||||
{/snippet}
|
||||
</svelte:boundary>
|
||||
@ -0,0 +1,32 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, compileOptions }) {
|
||||
const [toggle, increment] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => increment.click());
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>toggle</button>
|
||||
<button>count: 1</button>
|
||||
<p>show: false</p>
|
||||
`
|
||||
);
|
||||
|
||||
assert.throws(() => {
|
||||
flushSync(() => toggle.click());
|
||||
}, /NonExistent is not defined/);
|
||||
|
||||
flushSync(() => increment.click());
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>toggle</button>
|
||||
<button>count: 2</button>
|
||||
<p>show: ${compileOptions.experimental?.async ? 'false' : 'true'}</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
let show = $state(false);
|
||||
let count = $state(0);
|
||||
</script>
|
||||
|
||||
<button onclick={() => show = !show}>toggle</button>
|
||||
<button onclick={() => count += 1}>count: {count}</button>
|
||||
|
||||
<p>show: {show}</p>
|
||||
|
||||
{#if show}
|
||||
<NonExistent />
|
||||
{/if}
|
||||
@ -0,0 +1,46 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target, logs }) {
|
||||
const [open, close, increment] = target.querySelectorAll('button');
|
||||
|
||||
open.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>0</button>
|
||||
<div>open (width: 42)</div>
|
||||
`
|
||||
);
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>1</button>
|
||||
<div>open (width: 42)</div>
|
||||
`
|
||||
);
|
||||
|
||||
close.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>1</button>
|
||||
<div>closed</div>
|
||||
`
|
||||
);
|
||||
|
||||
assert.deepEqual(logs, ['effect ran']);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,37 @@
|
||||
<script module>
|
||||
let active = $state(false);
|
||||
let panelWidth = $state(null);
|
||||
|
||||
const store = {
|
||||
get active() { return active; },
|
||||
open() { active = true; },
|
||||
close() { active = false; },
|
||||
// This getter lazily writes $state on first read
|
||||
get panelWidth() {
|
||||
if (panelWidth === null) panelWidth = 42;
|
||||
|
||||
$effect(() => {
|
||||
console.log('effect ran');
|
||||
});
|
||||
|
||||
return panelWidth;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let counter = $state(0);
|
||||
</script>
|
||||
|
||||
<button onclick={() => store.open()}>Open</button>
|
||||
<button onclick={() => store.close()}>Close</button>
|
||||
<button onclick={() => counter++}>{counter}</button>
|
||||
|
||||
<div>
|
||||
{#if store.active}
|
||||
open (width: {store.panelWidth})
|
||||
{:else}
|
||||
closed
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
const [open, close, increment] = target.querySelectorAll('button');
|
||||
|
||||
open.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>0</button>
|
||||
<div>open (width: 42)</div>
|
||||
`
|
||||
);
|
||||
|
||||
increment.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>1</button>
|
||||
<div>open (width: 42)</div>
|
||||
`
|
||||
);
|
||||
|
||||
close.click();
|
||||
await tick();
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<button>Open</button>
|
||||
<button>Close</button>
|
||||
<button>1</button>
|
||||
<div>closed</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
<script module>
|
||||
let active = $state(false);
|
||||
let panelWidth = $state(null);
|
||||
|
||||
const store = {
|
||||
get active() { return active; },
|
||||
open() { active = true; },
|
||||
close() { active = false; },
|
||||
// This getter lazily writes $state on first read
|
||||
get panelWidth() {
|
||||
if (panelWidth === null) panelWidth = 42;
|
||||
return panelWidth;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let counter = $state(0);
|
||||
</script>
|
||||
|
||||
<button onclick={() => store.open()}>Open</button>
|
||||
<button onclick={() => store.close()}>Close</button>
|
||||
<button onclick={() => counter++}>{counter}</button>
|
||||
|
||||
<div>
|
||||
{#if store.active}
|
||||
open (width: {store.panelWidth})
|
||||
{:else}
|
||||
closed
|
||||
{/if}
|
||||
</div>
|
||||
Loading…
Reference in new issue