await derived in module

aaa
Rich Harris 8 months ago
parent 3dd1d30d90
commit 7907d1d04a

@ -0,0 +1,20 @@
<script>
import { create_derived } from './state.svelte.js';
let { promise, num } = $props();
let derived = await create_derived(
() => promise,
() => num
);
$effect(() => {
console.log(`$effect ${derived.value} ${num}`);
});
$effect.pre(() => {
console.log(`$effect.pre ${derived.value} ${num}`);
});
</script>
<p>{derived.value}{console.log(`template ${derived.value} ${num}`)}</p>

@ -0,0 +1,65 @@
import { flushSync, tick } from 'svelte';
import { deferred } from '../../../../src/internal/shared/utils.js';
import { test } from '../../test';
/** @type {ReturnType<typeof deferred>} */
let d;
export default test({
html: `<p>pending</p>`,
get props() {
d = deferred();
return {
promise: d.promise,
num: 1
};
},
async test({ assert, target, component, logs }) {
d.resolve(42);
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
flushSync();
await tick();
assert.htmlEqual(target.innerHTML, '<p>42</p>');
component.num = 2;
await Promise.resolve();
await Promise.resolve();
await Promise.resolve();
await tick();
assert.htmlEqual(target.innerHTML, '<p>84</p>');
d = deferred();
component.promise = d.promise;
await tick();
assert.htmlEqual(target.innerHTML, '<p>pending</p>');
d.resolve(43);
await Promise.resolve();
await Promise.resolve();
await tick();
assert.htmlEqual(target.innerHTML, '<p>86</p>');
assert.deepEqual(logs, [
'outside boundary 1',
'$effect.pre 42 1',
'template 42 1',
'$effect 42 1',
'outside boundary 2',
'$effect.pre 84 2',
'template 84 2',
'$effect 84 2',
'$effect.pre 86 2',
'template 86 2',
'$effect 86 2'
]);
}
});

@ -0,0 +1,15 @@
<script>
import Child from './Child.svelte';
let { promise, num } = $props();
</script>
<svelte:boundary>
<Child {promise} {num} />
{#snippet pending()}
<p>pending</p>
{/snippet}
</svelte:boundary>
{console.log(`outside boundary ${num}`)}

@ -0,0 +1,9 @@
export async function create_derived(get_promise, get_num) {
let value = $derived((await get_promise()) * get_num());
return {
get value() {
return value;
}
};
}
Loading…
Cancel
Save