mirror of https://github.com/sveltejs/svelte
fix: ensure deep mutation ownership widening (#11094)
Previously, ownership widening/removal was only done if the immediate object that was encountered was state. This isn't always the case. It also didn't take into account classes with state on it (which turn into getters). This change takes both these cases into account and now always traverses the given object deeply. fixes #11060pull/11096/head
parent
b1a8038f8b
commit
8578857332
@ -0,0 +1,5 @@
|
||||
---
|
||||
"svelte": patch
|
||||
---
|
||||
|
||||
fix: ensure deep mutation ownership widening
|
@ -0,0 +1,35 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/** @type {typeof console.warn} */
|
||||
let warn;
|
||||
|
||||
/** @type {any[]} */
|
||||
let warnings = [];
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
before_test: () => {
|
||||
warn = console.warn;
|
||||
|
||||
console.warn = (...args) => {
|
||||
warnings.push(...args);
|
||||
};
|
||||
},
|
||||
|
||||
after_test: () => {
|
||||
console.warn = warn;
|
||||
warnings = [];
|
||||
},
|
||||
|
||||
async test({ assert, target }) {
|
||||
const btn = target.querySelector('button');
|
||||
|
||||
await btn?.click();
|
||||
await tick();
|
||||
assert.deepEqual(warnings.length, 0);
|
||||
}
|
||||
});
|
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { setContext } from 'svelte';
|
||||
import Sub from './sub.svelte';
|
||||
|
||||
class Person1 {
|
||||
value = $state({ person: 'John', age: 33 })
|
||||
}
|
||||
const class_nested_state = $state(new Person1());
|
||||
|
||||
class Person2 {
|
||||
person = $state('John');
|
||||
age = $state(33);
|
||||
}
|
||||
const state_nested_class = $state({ value: new Person2() });
|
||||
|
||||
const nested_state = $state({ person: 'John', age: 33 });
|
||||
|
||||
setContext('foo', {
|
||||
nested_state,
|
||||
get class_nested_state() { return class_nested_state },
|
||||
get state_nested_class() { return state_nested_class }
|
||||
})
|
||||
</script>
|
||||
|
||||
<Sub {class_nested_state} {state_nested_class} {nested_state} />
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { getContext } from "svelte";
|
||||
|
||||
const foo = getContext('foo')
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
foo.class_nested_state.value.age++;
|
||||
foo.state_nested_class.value.age++;
|
||||
foo.nested_state.age++;
|
||||
}}>mutate</button>
|
Loading…
Reference in new issue