mirror of https://github.com/sveltejs/svelte
feat: use state proxy ancestry for ownership validation (#11184)
* rename metadata.o to metadata.owners, tweak check_ownership implementation * track parent relationships * update * changeset * adjust test to reflect new semantics * prevent component using bind: with object it does not own * failing test * fix #11060 * add explanatory comment * don't accidentally narrow global ownership, fix has_owner method * widen ownership if assigning different state proxies to one another * don't set owners to null when parent exists * fix * only recurse into POJOs * handle cycles on context --------- Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com> Co-authored-by: Dominic Gannaway <dg@domgan.com>pull/11196/head
Rich Harris
1 year ago
committed by
GitHub
parent
77ed790fb3
commit
8fef412dbb
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
feat: use state proxy ancestry for ownership validation
|
||||
@ -0,0 +1,39 @@
|
||||
import { tick } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/** @type {typeof console.warn} */
|
||||
let warn;
|
||||
|
||||
/** @type {any[]} */
|
||||
let warnings = [];
|
||||
|
||||
export default test({
|
||||
html: `<button>clicks: 0</button>`,
|
||||
|
||||
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');
|
||||
btn?.click();
|
||||
await tick();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
|
||||
|
||||
assert.deepEqual(warnings, []);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
let { a = $bindable() } = $props();
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import Child from './child.svelte';
|
||||
import { global } from './state.svelte.js';
|
||||
global.value.count = 0;
|
||||
</script>
|
||||
|
||||
<!-- binding shouldn't accidentally narrow ownership when it's already global -->
|
||||
<Child bind:a={global.value} />
|
||||
|
||||
<button onclick={() => global.value.count++}>
|
||||
clicks: {global.value.count}
|
||||
</button>
|
||||
@ -0,0 +1 @@
|
||||
export const global = $state({ value: { count: 0 } });
|
||||
@ -0,0 +1,9 @@
|
||||
<script>
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
const foo = getContext('foo')
|
||||
</script>
|
||||
|
||||
<button onclick={() => {
|
||||
foo.person.name.last = 'T';
|
||||
}}>mutate</button>
|
||||
@ -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,17 @@
|
||||
<script>
|
||||
import { setContext } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
class Person {
|
||||
name = $state({
|
||||
first: 'Mr',
|
||||
last: 'Bean'
|
||||
});
|
||||
}
|
||||
|
||||
setContext('foo', {
|
||||
person: new Person()
|
||||
});
|
||||
</script>
|
||||
|
||||
<Child />
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
/** @type {{ object: { count: number }}} */
|
||||
let { object = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<button onclick={() => object.count += 1}>
|
||||
clicks: {object.count}
|
||||
</button>
|
||||
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Counter from './Counter.svelte';
|
||||
|
||||
/** @type {{ object: { count: number }}} */
|
||||
let { object } = $props();
|
||||
</script>
|
||||
|
||||
<Counter bind:object={object} />
|
||||
@ -0,0 +1,13 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `<button>clicks: 0</button>`,
|
||||
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
warnings: [
|
||||
'.../samples/non-local-mutation-with-binding-2/Intermediate.svelte passed a value to .../samples/non-local-mutation-with-binding-2/Counter.svelte with `bind:`, but the value is owned by .../samples/non-local-mutation-with-binding-2/main.svelte. Consider creating a binding between .../samples/non-local-mutation-with-binding-2/main.svelte and .../samples/non-local-mutation-with-binding-2/Intermediate.svelte'
|
||||
]
|
||||
});
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
import Intermediate from './Intermediate.svelte';
|
||||
|
||||
let object = $state({ count: 0 });
|
||||
</script>
|
||||
|
||||
<Intermediate object={object} />
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
/** @type {{ shared: { count: number }, notshared: { count: number } }} */
|
||||
let { shared = $bindable(), notshared } = $props();
|
||||
</script>
|
||||
|
||||
<button onclick={() => shared.count += 1}>
|
||||
clicks: {shared.count}
|
||||
</button>
|
||||
|
||||
<button onclick={() => notshared.count += 1}>
|
||||
clicks: {notshared.count}
|
||||
</button>
|
||||
@ -0,0 +1,53 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
|
||||
/** @type {typeof console.warn} */
|
||||
let warn;
|
||||
|
||||
/** @type {typeof console.trace} */
|
||||
let trace;
|
||||
|
||||
/** @type {any[]} */
|
||||
let warnings = [];
|
||||
|
||||
export default test({
|
||||
html: `<button>clicks: 0</button><button>clicks: 0</button>`,
|
||||
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
before_test: () => {
|
||||
warn = console.warn;
|
||||
trace = console.trace;
|
||||
|
||||
console.warn = (...args) => {
|
||||
warnings.push(...args);
|
||||
};
|
||||
|
||||
console.trace = () => {};
|
||||
},
|
||||
|
||||
after_test: () => {
|
||||
console.warn = warn;
|
||||
console.trace = trace;
|
||||
|
||||
warnings = [];
|
||||
},
|
||||
|
||||
async test({ assert, target }) {
|
||||
const [btn1, btn2] = target.querySelectorAll('button');
|
||||
|
||||
flushSync(() => btn1.click());
|
||||
assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button><button>clicks: 0</button>`);
|
||||
|
||||
assert.deepEqual(warnings, []);
|
||||
|
||||
flushSync(() => btn2.click());
|
||||
assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button><button>clicks: 1</button>`);
|
||||
|
||||
assert.deepEqual(warnings, [
|
||||
'.../samples/non-local-mutation-with-binding-3/Counter.svelte mutated a value owned by .../samples/non-local-mutation-with-binding-3/main.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead.'
|
||||
]);
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import Counter from './Counter.svelte';
|
||||
|
||||
let object = $state({
|
||||
shared: { count: 0 },
|
||||
notshared: { count: 0 }
|
||||
});
|
||||
</script>
|
||||
|
||||
<Counter
|
||||
bind:shared={object.shared}
|
||||
notshared={object.notshared}
|
||||
/>
|
||||
Loading…
Reference in new issue