Skip to content

Commit

Permalink
fix: handle component binding mutation
Browse files Browse the repository at this point in the history
  • Loading branch information
dummdidumm committed Mar 13, 2024
1 parent 2cb78ac commit 8a7e540
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 1 deletion.
5 changes: 5 additions & 0 deletions .changeset/witty-readers-provide.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"svelte": patch
---

fix: handle component binding mutation
5 changes: 4 additions & 1 deletion packages/svelte/src/internal/client/reactivity/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -175,10 +175,13 @@ export function prop(props, key, flags, initial) {
// intermediate mode — prop is written to, but the parent component had
// `bind:foo` which means we can just call `$$props.foo = value` directly
if (setter) {
return function (/** @type {V} */ value) {
return function (/** @type {V} */ value, mutation = false) {
if (arguments.length === 1) {
/** @type {Function} */ (setter)(value);
return value;
} else if (mutation) {
/** @type {Function} */ (setter)(getter());
return value;
} else {
return getter();
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script>
export let value;
</script>

<input bind:value={value.name}>
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { ok, test } from '../../test';

export default test({
html: `
<input>
<p>foo</p>
`,

ssrHtml: `
<input value=foo>
<p>foo</p>
`,

async test({ assert, component, target, window }) {
const event = new window.MouseEvent('input');
const input = target.querySelector('input');
ok(input);

input.value = 'blah';
await input.dispatchEvent(event);
await Promise.resolve();

assert.deepEqual(component.deep, { name: 'blah' });
assert.htmlEqual(
target.innerHTML,
`
<input>
<p>blah</p>
`
);
}
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script>
import Widget from './Widget.svelte';
export let deep = {
name: 'foo'
};
</script>

<Widget bind:value={deep}/>

<p>{deep.name}</p>

0 comments on commit 8a7e540

Please sign in to comment.