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
6 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