mirror of https://github.com/sveltejs/svelte
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…
Reference in new issue