mirror of https://github.com/sveltejs/svelte
fix: enable bound store props in runes mode components (#13887)
* fix: enable bound store props in runes mode components * add some JSDoc, since it could be a headscratcher for future us * make it clear that this is specifically about bindings * skip intermediate value * tweak other names too --------- Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/13895/head
parent
4cf2d4a904
commit
771b1e8905
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
fix: enable bound store props in runes mode components
|
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
let { form = $bindable() } = $props();
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<input type="number" bind:value={form.count} />
|
||||
</p>
|
@ -0,0 +1,25 @@
|
||||
import { flushSync } from 'svelte';
|
||||
import { test } from '../../test';
|
||||
import { ok } from 'assert';
|
||||
|
||||
export default test({
|
||||
compileOptions: {
|
||||
dev: true
|
||||
},
|
||||
|
||||
html: `<p><input type="number"></p>\n{"count":0}`,
|
||||
ssrHtml: `<p><input type="number" value="0"></p>\n{"count":0}`,
|
||||
|
||||
test({ assert, target }) {
|
||||
const input = target.querySelector('input');
|
||||
ok(input);
|
||||
const inputEvent = new window.InputEvent('input');
|
||||
|
||||
input.value = '10';
|
||||
input.dispatchEvent(inputEvent);
|
||||
|
||||
flushSync();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `<p><input type="number"></p>\n{"count":10}`);
|
||||
}
|
||||
});
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let form = writable({
|
||||
count: 0
|
||||
});
|
||||
</script>
|
||||
|
||||
<Child bind:form={$form} />
|
||||
{JSON.stringify($form)}
|
Loading…
Reference in new issue