mirror of https://github.com/sveltejs/svelte
allow rest props on $props.bindable() and add related dev time validation, closes #10711
parent
84e2dd3130
commit
1d818380dd
@ -1,9 +0,0 @@
|
|||||||
import { test } from '../../test';
|
|
||||||
|
|
||||||
export default test({
|
|
||||||
error: {
|
|
||||||
code: 'invalid-props-rest-element',
|
|
||||||
message: 'Cannot use ...rest parameter with $props.bindable()',
|
|
||||||
position: [53, 62]
|
|
||||||
}
|
|
||||||
});
|
|
@ -1,4 +0,0 @@
|
|||||||
<script>
|
|
||||||
let { foo, ...ok } = $props();
|
|
||||||
let { bar, ...not_ok } = $props.bindable();
|
|
||||||
</script>
|
|
@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
let { ...rest } = $props.bindable();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button on:click={() => rest.count++}>{rest.count}</button>
|
@ -0,0 +1,49 @@
|
|||||||
|
import { test } from '../../test';
|
||||||
|
|
||||||
|
let failed_too_soon = true;
|
||||||
|
|
||||||
|
export default test({
|
||||||
|
html: `
|
||||||
|
<p>0 0 0</p>
|
||||||
|
<button>0</button>
|
||||||
|
<button>0</button>
|
||||||
|
<button>0</button>
|
||||||
|
`,
|
||||||
|
|
||||||
|
before_test() {
|
||||||
|
failed_too_soon = true;
|
||||||
|
},
|
||||||
|
async test({ assert, target }) {
|
||||||
|
const [b1, b2, b3] = target.querySelectorAll('button');
|
||||||
|
|
||||||
|
b1.click();
|
||||||
|
b2.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
|
||||||
|
assert.htmlEqual(
|
||||||
|
target.innerHTML,
|
||||||
|
`
|
||||||
|
<p>1 1 0</p>
|
||||||
|
<button>1</button>
|
||||||
|
<button>1</button>
|
||||||
|
<button>0</button>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
failed_too_soon = false;
|
||||||
|
|
||||||
|
b3.click();
|
||||||
|
await Promise.resolve();
|
||||||
|
},
|
||||||
|
test_ssr() {
|
||||||
|
failed_too_soon = false;
|
||||||
|
},
|
||||||
|
after_test() {
|
||||||
|
if (failed_too_soon) {
|
||||||
|
throw new Error('Test failed too soon');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
runtime_error:
|
||||||
|
"Cannot write to property 'count' of rest element of $props.bindable(). It is readonly because it was not declared using bind: on the consumer component."
|
||||||
|
});
|
@ -0,0 +1,13 @@
|
|||||||
|
<script>
|
||||||
|
import Counter from './Counter.svelte';
|
||||||
|
|
||||||
|
let bound = $state(0);
|
||||||
|
let bound_nested = $state({count: 0});
|
||||||
|
let unbound = $state(0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<p>{bound} {bound_nested.count} {unbound}</p>
|
||||||
|
|
||||||
|
<Counter bind:count={bound} />
|
||||||
|
<Counter bind:count={bound_nested.count} />
|
||||||
|
<Counter count={unbound} />
|
Loading…
Reference in new issue