mirror of https://github.com/sveltejs/svelte
fix: address unowned propagation signal issue (#9510)
* fix: address unowned propagation signal issue * Add commentspull/9492/head
parent
378093941d
commit
3b2e6eac9a
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: address unowned propagation signal issue
|
@ -0,0 +1,45 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
// The component context class instance gets shared between tests, strangely, causing hydration to fail?
|
||||
skip_if_hydrate: 'permanent',
|
||||
|
||||
async test({ assert, target, component }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1, 2]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(component.log, [0, 'class trigger false', 'local trigger false', 1, 2, 3]);
|
||||
|
||||
flushSync(() => {
|
||||
btn?.click();
|
||||
});
|
||||
|
||||
assert.deepEqual(component.log, [
|
||||
0,
|
||||
'class trigger false',
|
||||
'local trigger false',
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
'class trigger true',
|
||||
'local trigger true'
|
||||
]);
|
||||
}
|
||||
});
|
@ -0,0 +1,36 @@
|
||||
<script context="module">
|
||||
class SomeLogic {
|
||||
someValue = $state(0);
|
||||
isAboveThree = $derived(this.someValue > 3);
|
||||
trigger() {
|
||||
this.someValue++;
|
||||
}
|
||||
}
|
||||
|
||||
const someLogic = new SomeLogic();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const {log = []} = $props();
|
||||
|
||||
function increment() {
|
||||
someLogic.trigger();
|
||||
}
|
||||
|
||||
let localDerived = $derived(someLogic.someValue > 3);
|
||||
|
||||
$effect(() => {
|
||||
log.push(someLogic.someValue);
|
||||
});
|
||||
$effect(() => {
|
||||
log.push('class trigger ' + someLogic.isAboveThree)
|
||||
});
|
||||
$effect(() => {
|
||||
log.push('local trigger ' + localDerived)
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<button on:click={increment}>
|
||||
clicks: {someLogic.someValue}
|
||||
</button>
|
Loading…
Reference in new issue