fix: update blocks that reference deriveds with `$state.eager`

state-eager-derived-block
Rich Harris 18 hours ago
parent 61ce182d60
commit ce72abcc47

@ -0,0 +1,57 @@
import { tick } from 'svelte';
import { test } from '../../test';
export default test({
mode: ['client'],
compileOptions: {
dev: true
},
async test({ assert, target }) {
const [count, shift] = target.querySelectorAll('button');
shift.click();
await tick();
assert.htmlEqual(target.innerHTML, `<button>0</button><button>shift</button><p>0</p>`);
count.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`<button>1</button><button>shift</button><p>0</p><p>updating</p>`
);
count.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`<button>2</button><button>shift</button><p>0</p><p>updating</p>`
);
count.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`<button>3</button><button>shift</button><p>0</p><p>updating</p>`
);
shift.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`<button>3</button><button>shift</button><p>1</p><p>updating</p>`
);
shift.click();
await tick();
assert.htmlEqual(
target.innerHTML,
`<button>3</button><button>shift</button><p>2</p><p>updating</p>`
);
shift.click();
await tick();
assert.htmlEqual(target.innerHTML, `<button>3</button><button>shift</button><p>3</p>`);
}
});

@ -0,0 +1,25 @@
<script>
let count = $state(0);
let eager = $derived($state.eager(count));
let resolvers = [];
function push(value) {
const { promise, resolve } = Promise.withResolvers();
resolvers.push(() => resolve(value));
return promise;
}
</script>
<button onclick={() => count += 1}>{eager}</button>
<button onclick={() => resolvers.shift()?.()}>shift</button>
<svelte:boundary>
<p>{await push(count)}</p>
{#if count !== eager}
<p>updating</p>
{/if}
{#snippet pending()}{/snippet}
</svelte:boundary>
Loading…
Cancel
Save