diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index a3d1492281..cc02c171ed 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -300,7 +300,9 @@ export default class InlineComponentWrapper extends Wrapper { updates.push(b` if (!${updating} && ${changed(Array.from(binding.expression.dependencies))}) { + ${updating} = true; ${name_changes}.${binding.name} = ${snippet}; + @add_flush_callback(() => ${updating} = false); } `); @@ -337,8 +339,6 @@ export default class InlineComponentWrapper extends Wrapper { block.chunks.init.push(b` function ${id}(${value}) { #ctx.${id}.call(null, ${value}, #ctx); - ${updating} = true; - @add_flush_callback(() => ${updating} = false); } `); @@ -347,8 +347,6 @@ export default class InlineComponentWrapper extends Wrapper { block.chunks.init.push(b` function ${id}(${value}) { #ctx.${id}.call(null, ${value}); - ${updating} = true; - @add_flush_callback(() => ${updating} = false); } `); } diff --git a/test/runtime/samples/component-binding-reactive-statement/Button.svelte b/test/runtime/samples/component-binding-reactive-statement/Button.svelte new file mode 100644 index 0000000000..289ec42fab --- /dev/null +++ b/test/runtime/samples/component-binding-reactive-statement/Button.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/test/runtime/samples/component-binding-reactive-statement/_config.js b/test/runtime/samples/component-binding-reactive-statement/_config.js new file mode 100644 index 0000000000..49342d0645 --- /dev/null +++ b/test/runtime/samples/component-binding-reactive-statement/_config.js @@ -0,0 +1,38 @@ +export default { + html: ` + + + `, + + async test({ assert, component, target, window }) { + const event = new window.MouseEvent('click'); + + const buttons = target.querySelectorAll('button'); + + await buttons[0].dispatchEvent(event); + assert.htmlEqual(target.innerHTML, ` + + + `); + + await buttons[1].dispatchEvent(event); + assert.htmlEqual(target.innerHTML, ` + + + `); + + // reactive update, reset to 2 + await buttons[0].dispatchEvent(event); + assert.htmlEqual(target.innerHTML, ` + + + `); + + // bound to main, reset to 2 + await buttons[1].dispatchEvent(event); + assert.htmlEqual(target.innerHTML, ` + + + `); + } +}; diff --git a/test/runtime/samples/component-binding-reactive-statement/main.svelte b/test/runtime/samples/component-binding-reactive-statement/main.svelte new file mode 100644 index 0000000000..4253c6127e --- /dev/null +++ b/test/runtime/samples/component-binding-reactive-statement/main.svelte @@ -0,0 +1,19 @@ + + + + +