Skip to content

Commit

Permalink
add updating guard to binding callback
Browse files Browse the repository at this point in the history
  • Loading branch information
tanhauhau committed Jul 10, 2020
1 parent d19bcef commit 0a76f66
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 3 deletions.
13 changes: 10 additions & 3 deletions src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -359,18 +359,25 @@ export default class InlineComponentWrapper extends Wrapper {
args.push(renderer.reference(name));
});


block.chunks.init.push(b`
function ${id}(#value) {
${callee}.call(null, #value, ${args});
if (!${updating}) {
${updating} = true;
${callee}.call(null, #value, ${args});
@add_flush_callback(() => ${updating} = false);
}
}
`);

block.maintain_context = true; // TODO put this somewhere more logical
} else {
block.chunks.init.push(b`
function ${id}(#value) {
${callee}.call(null, #value);
if (!${updating}) {
${updating} = true;
${callee}.call(null, #value);
@add_flush_callback(() => ${updating} = false);
}
}
`);
}
Expand Down
5 changes: 5 additions & 0 deletions test/runtime/samples/component-binding-store/Input.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script>
export let value = '';
</script>

<input bind:value />
61 changes: 61 additions & 0 deletions test/runtime/samples/component-binding-store/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
export default {
html: `
<input />
<input />
<div></div>
`,

async test({ assert, component, target, window }) {
let count = 0;
component.callback = () => {
count++;
};

const [input1, input2] = target.querySelectorAll("input");

input1.value = "1";
await input1.dispatchEvent(new window.Event("input"));

assert.htmlEqual(
target.innerHTML,
`
<input />
<input />
<div>1</div>
`
);
assert.equal(input1.value, "1");
assert.equal(input2.value, "1");
assert.equal(count, 1);

input2.value = "123";
await input2.dispatchEvent(new window.Event("input"));

assert.htmlEqual(
target.innerHTML,
`
<input />
<input />
<div>123</div>
`
);
assert.equal(input1.value, "123");
assert.equal(input2.value, "123");
assert.equal(count, 2);

input1.value = "456";
await input1.dispatchEvent(new window.Event("input"));

assert.htmlEqual(
target.innerHTML,
`
<input />
<input />
<div>456</div>
`
);
assert.equal(input1.value, "456");
assert.equal(input2.value, "456");
assert.equal(count, 3);
},
};
18 changes: 18 additions & 0 deletions test/runtime/samples/component-binding-store/main.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<script>
import { writable } from 'svelte/store';
import Input from './Input.svelte';
let value = writable({ value: '' });
export let callback = () => {};
value.subscribe(() => {
callback();
})
</script>

<input bind:value={$value.value} />

<Input bind:value={$value.value}/>

<div>{$value.value}</div>

0 comments on commit 0a76f66

Please sign in to comment.