mirror of https://github.com/sveltejs/svelte
fix: recurse into `$derived` for ownership validation (#15166)
- `$derived` can contain `$state` declarations so we cannot ignore them, so this reverts #14533 - instead, we add equality checks to not do this expensive work unnecessarily - this also adds a render effect similar to the class ownership addition when it detects a getter on a POJO during ownership addition fixes #15164pull/15274/head
parent
afae274587
commit
a3e49b6110
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: recurse into `$derived` for ownership validation
|
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { linked3 = $bindable(), linked4 = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<p>Binding</p>
|
||||
<button onclick={() => linked3.count++}>Increment Linked 1 ({linked3.count})</button>
|
||||
<button onclick={() => linked4.count++}>Increment Linked 2 ({linked4.count})</button>
|
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
const linked1 = getContext('linked1');
|
||||
const linked2 = getContext('linked2');
|
||||
</script>
|
||||
|
||||
<p>Context</p>
|
||||
<button onclick={() => linked1.linked.current.count++}
|
||||
>Increment Linked 1 ({linked1.linked.current.count})</button
|
||||
>
|
||||
<button onclick={() => linked2.linked.current.count++}
|
||||
>Increment Linked 2 ({linked2.linked.current.count})</button
|
||||
>
|
@ -0,0 +1,34 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
// Tests that ownership is widened with $derived (on class or on its own) that contains $state
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
test({ assert, target, warnings }) {
|
||||
const [root, counter_context1, counter_context2, counter_binding1, counter_binding2] =
|
||||
target.querySelectorAll('button');
|
||||
|
||||
counter_context1.click();
|
||||
counter_context2.click();
|
||||
counter_binding1.click();
|
||||
counter_binding2.click();
|
||||
flushSync();
|
||||
|
||||
assert.equal(warnings.length, 0);
|
||||
|
||||
root.click();
|
||||
flushSync();
|
||||
counter_context1.click();
|
||||
counter_context2.click();
|
||||
counter_binding1.click();
|
||||
counter_binding2.click();
|
||||
flushSync();
|
||||
|
||||
assert.equal(warnings.length, 0);
|
||||
},
|
||||
|
||||
warnings: []
|
||||
});
|
@ -0,0 +1,46 @@
|
||||
<script>
|
||||
import CounterBinding from './CounterBinding.svelte';
|
||||
import CounterContext from './CounterContext.svelte';
|
||||
import { setContext } from 'svelte';
|
||||
|
||||
let counter = $state({ count: 0 });
|
||||
|
||||
class Linked {
|
||||
#getter;
|
||||
linked = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(this.#getter()) });
|
||||
return state;
|
||||
});
|
||||
|
||||
constructor(fn) {
|
||||
this.#getter = fn;
|
||||
}
|
||||
}
|
||||
|
||||
const linked1 = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(counter) });
|
||||
return state;
|
||||
});
|
||||
const linked2 = new Linked(() => counter);
|
||||
|
||||
setContext('linked1', {
|
||||
get linked() {
|
||||
return linked1;
|
||||
}
|
||||
});
|
||||
setContext('linked2', linked2);
|
||||
|
||||
const linked3 = $derived.by(() => {
|
||||
const state = $state({ current: $state.snapshot(counter) });
|
||||
return state;
|
||||
});
|
||||
const linked4 = new Linked(() => counter);
|
||||
</script>
|
||||
|
||||
<p>Parent</p>
|
||||
<button onclick={() => counter.count++}>
|
||||
Increment Original ({counter.count})
|
||||
</button>
|
||||
|
||||
<CounterContext />
|
||||
<CounterBinding bind:linked3={linked3.current} bind:linked4={linked4.linked.current} />
|
Loading…
Reference in new issue