mirror of https://github.com/sveltejs/svelte
fix: ensure effect_tracking correctly handles tracking reactions (#14005)
* fix: ensure effect_tracking correctly handles tracking reactions * fix: ensure effect_tracking correctly handles tracking reactionspull/14015/head
parent
777d059b10
commit
3876b302f3
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: ensure effect_tracking correctly handles tracking reactions
|
@ -0,0 +1,19 @@
|
|||||||
|
import { flushSync } from 'svelte';
|
||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
async test({ assert, target, logs }) {
|
||||||
|
let btn1 = target.querySelector('button');
|
||||||
|
|
||||||
|
btn1?.click();
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
btn1?.click();
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
btn1?.click();
|
||||||
|
flushSync();
|
||||||
|
|
||||||
|
assert.deepEqual(logs, ['light', 'dark', 'light']);
|
||||||
|
}
|
||||||
|
});
|
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import { store, themeState } from './theme.svelte.js';
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
const increment = () => {
|
||||||
|
store.update(() => ({ theme: ++i % 2 == 0 ? 'dark' : 'light' }));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button onclick={increment}>+</button>
|
||||||
|
|
||||||
|
{themeState.value.theme}
|
@ -0,0 +1,18 @@
|
|||||||
|
import { fromStore, writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const store = writable({ theme: 'dark' });
|
||||||
|
|
||||||
|
class ThemeState {
|
||||||
|
#storeState = fromStore(store);
|
||||||
|
value = $derived(this.#storeState.current);
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
$effect.root(() => {
|
||||||
|
$effect(() => {
|
||||||
|
console.log(this.value.theme);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const themeState = new ThemeState();
|
Loading…
Reference in new issue