mirror of https://github.com/sveltejs/svelte
feat: forking (#17004)
* chore: run boundary async effects in the context of the current batch * WIP * reinstate kludge * fix test * WIP * WIP * WIP * remove kludge * restore batch_values after commit * make private * tidy up * fix tests * update test * reset #dirty_effects and #maybe_dirty_effects * add test * WIP * add test, fix block resolution * bring async-effect-after-await test from defer-effects-in-pending-boundary branch * avoid reawakening committed batches * changeset * cheat * better API * regenerate * slightly better approach * lint * revert this whatever it is * add test * Update feature description for fork API * error if missing experimental flag * rename inspect effects to eager effects, run them in prod * regenerate * Apply suggestions from code review Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * tidy up * add some minimal prose. probably don't need to go super deep here as it's not really meant for non-framework authors * bit more detail * add a fork_timing error, regenerate * unused * add note * add fork_discarded error * require users to discard forks * add docs * regenerate * tweak docs * fix leak * fix * preload on focusin as well * missed a spot * reduce nesting --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>pull/16688/merge
Rich Harris
3 weeks ago
committed by
GitHub
parent
7434f21ed4
commit
c08ecba1b7
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"svelte": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: experimental `fork` API
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, raf }) {
|
||||||
|
const [shift, increment, commit] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<button>commit</button>
|
||||||
|
<p>count: 0</p>
|
||||||
|
<p>eager: 0</p>
|
||||||
|
<p>even</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
// nothing updates until commit
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<button>commit</button>
|
||||||
|
<p>count: 0</p>
|
||||||
|
<p>eager: 0</p>
|
||||||
|
<p>even</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
commit.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
// nothing updates until commit
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<button>commit</button>
|
||||||
|
<p>count: 1</p>
|
||||||
|
<p>eager: 1</p>
|
||||||
|
<p>odd</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
increment.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
commit.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
// eager state updates on commit
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<button>commit</button>
|
||||||
|
<p>count: 1</p>
|
||||||
|
<p>eager: 2</p>
|
||||||
|
<p>odd</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
shift.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>shift</button>
|
||||||
|
<button>increment</button>
|
||||||
|
<button>commit</button>
|
||||||
|
<p>count: 2</p>
|
||||||
|
<p>eager: 2</p>
|
||||||
|
<p>even</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
<script>
|
||||||
|
import { fork } from 'svelte';
|
||||||
|
|
||||||
|
let count = $state(0);
|
||||||
|
|
||||||
|
const resolvers = [];
|
||||||
|
let f = null;
|
||||||
|
|
||||||
|
function push(value) {
|
||||||
|
const { promise, resolve } = Promise.withResolvers();
|
||||||
|
resolvers.push(() => resolve(value));
|
||||||
|
return promise;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => resolvers.shift()?.()}>shift</button>
|
||||||
|
<button onclick={async () => {
|
||||||
|
f = await fork(() => {
|
||||||
|
count += 1;
|
||||||
|
});
|
||||||
|
}}>increment</button>
|
||||||
|
<button onclick={() => f?.commit()}>commit</button>
|
||||||
|
|
||||||
|
<p>count: {count}</p>
|
||||||
|
<p>eager: {$state.eager(count)}</p>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
{#if await push(count) % 2 === 0}
|
||||||
|
<p>even</p>
|
||||||
|
{:else}
|
||||||
|
<p>odd</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>loading...</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
||||||
Loading…
Reference in new issue