mirror of https://github.com/sveltejs/svelte
fix: clear batch between runs (alternative approach) (#17424)
* fix: clear batch between runs * changeset * add comment and note-to-self * associate effects with boundaries, albeit clumsily * remove unused async_body * dry out * fix * simplify * clarify * tweak * unused * unused * add an explanatory commentpull/17431/head
Rich Harris
8 months ago
committed by
GitHub
parent
1482ae8726
commit
41e8643814
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: clear batch between runs
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
/** @import { Derived, Effect, Value } from '#client' */
|
||||||
|
import { CLEAN, DERIVED, DIRTY, MAYBE_DIRTY, WAS_MARKED } from '#client/constants';
|
||||||
|
import { set_signal_status } from '../runtime.js';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Value[] | null} deps
|
||||||
|
*/
|
||||||
|
function clear_marked(deps) {
|
||||||
|
if (deps === null) return;
|
||||||
|
|
||||||
|
for (const dep of deps) {
|
||||||
|
if ((dep.f & DERIVED) === 0 || (dep.f & WAS_MARKED) === 0) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
dep.f ^= WAS_MARKED;
|
||||||
|
|
||||||
|
clear_marked(/** @type {Derived} */ (dep).deps);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Effect} effect
|
||||||
|
* @param {Set<Effect>} dirty_effects
|
||||||
|
* @param {Set<Effect>} maybe_dirty_effects
|
||||||
|
*/
|
||||||
|
export function defer_effect(effect, dirty_effects, maybe_dirty_effects) {
|
||||||
|
if ((effect.f & DIRTY) !== 0) {
|
||||||
|
dirty_effects.add(effect);
|
||||||
|
} else if ((effect.f & MAYBE_DIRTY) !== 0) {
|
||||||
|
maybe_dirty_effects.add(effect);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Since we're not executing these effects now, we need to clear any WAS_MARKED flags
|
||||||
|
// so that other batches can correctly reach these effects during their own traversal
|
||||||
|
clear_marked(effect.deps);
|
||||||
|
|
||||||
|
// mark as clean so they get scheduled if they depend on pending async state
|
||||||
|
set_signal_status(effect, CLEAN);
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let { x, y, deferred } = $props();
|
||||||
|
|
||||||
|
y = await deferred.promise;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>x: {x}</p>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>Loading...</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<p>y: {y}</p>
|
||||||
|
</svelte:boundary>
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import { tick } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<button>x</button>
|
||||||
|
<button>y</button>
|
||||||
|
<p>loading...</p>
|
||||||
|
`,
|
||||||
|
|
||||||
|
async test({ assert, target }) {
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
const [button1, button2] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
button1.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
button2.click();
|
||||||
|
await tick();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<button>x</button>
|
||||||
|
<button>y</button>
|
||||||
|
<p>x: x2</p>
|
||||||
|
<p>y: y2</p>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
import Child from './Child.svelte';
|
||||||
|
|
||||||
|
let x = $state('x1');
|
||||||
|
let y = $state('y1');
|
||||||
|
|
||||||
|
const deferred = Promise.withResolvers();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={() => x = 'x2'}>x</button>
|
||||||
|
<button onclick={() => deferred.resolve('y2')}>y</button>
|
||||||
|
|
||||||
|
<svelte:boundary>
|
||||||
|
<Child {x} {y} {deferred} />
|
||||||
|
|
||||||
|
{#snippet pending()}
|
||||||
|
<p>loading...</p>
|
||||||
|
{/snippet}
|
||||||
|
</svelte:boundary>
|
||||||
Loading…
Reference in new issue