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