From 88f2fcfbb5392282daf06e0f700d77c5ccfcb455 Mon Sep 17 00:00:00 2001 From: Peter Maatman <blackwolf12333@gmail.com> Date: Sun, 29 Sep 2019 16:26:45 +0200 Subject: [PATCH 1/6] tests: add test that exposes #3634 --- .../reactive-compound-operator/_config.js | 27 +++++++++++++++++++ .../reactive-compound-operator/main.svelte | 8 ++++++ 2 files changed, 35 insertions(+) create mode 100644 test/runtime/samples/reactive-compound-operator/_config.js create mode 100644 test/runtime/samples/reactive-compound-operator/main.svelte diff --git a/test/runtime/samples/reactive-compound-operator/_config.js b/test/runtime/samples/reactive-compound-operator/_config.js new file mode 100644 index 000000000000..7b16676410b2 --- /dev/null +++ b/test/runtime/samples/reactive-compound-operator/_config.js @@ -0,0 +1,27 @@ +export default { + html: ` + <button>+1</button> + <p>count:0</p> + `, + + async test({ assert, component, target, window }) { + const click = new window.MouseEvent('click'); + const button = target.querySelector('button'); + + await button.dispatchEvent(click); + + assert.equal(component.x, 2); + assert.htmlEqual(target.innerHTML, ` + <button>+1</button> + <p>count:2</p> + `); + + await button.dispatchEvent(click); + + assert.equal(component.x, 6); + assert.htmlEqual(target.innerHTML, ` + <button>+1</button> + <p>count:6</p> + `); + } +}; diff --git a/test/runtime/samples/reactive-compound-operator/main.svelte b/test/runtime/samples/reactive-compound-operator/main.svelte new file mode 100644 index 000000000000..611dde7176f6 --- /dev/null +++ b/test/runtime/samples/reactive-compound-operator/main.svelte @@ -0,0 +1,8 @@ +<script> + export let x = 0; + + $: x *= 2; +</script> + +<button on:click='{() => x += 1}'>+1</button> +<p>count:{x}</p> From d57204bc6ffcd7c94219dd6db7418f9568fefb56 Mon Sep 17 00:00:00 2001 From: Peter Maatman <blackwolf12333@gmail.com> Date: Sun, 29 Sep 2019 17:06:30 +0200 Subject: [PATCH 2/6] Fix #3634: Add left hand side of compound assignment as dependency Compound assignments ('x += y', 'x *= y', etc) should have the left-hand side of the assignment as a dependency. --- src/compiler/compile/Component.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index fa8665ffde50..54d86689fd3f 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -46,6 +46,9 @@ childKeys.EachBlock = childKeys.IfBlock = ['children', 'else']; childKeys.Attribute = ['value']; childKeys.ExportNamedDeclaration = ['declaration', 'specifiers']; +// There is no datatype that describes only the compound operators so we create this list here +const compoundAssignmentOperators = ["+=" , "-=" ,"*=", "/=" ,"%=" ,"**=", "<<=" ,">>=", ">>>=", "|=" ,"^=" ,"&="]; + function remove_node( code: MagicString, start: number, @@ -1265,10 +1268,18 @@ export default class Component { } if (node.type === 'AssignmentExpression') { - extract_identifiers(get_object(node.left)).forEach(node => { + const left = get_object(node.left); + + extract_identifiers(left).forEach(node => { assignee_nodes.add(node); assignees.add(node.name); }); + + + + if (compoundAssignmentOperators.findIndex(op => op === node.operator) !== -1) { + dependencies.add(left.name); + } } else if (node.type === 'UpdateExpression') { const identifier = get_object(node.argument); assignees.add(identifier.name); From 1998739524c8c9992068ab701f182141a0c8ee58 Mon Sep 17 00:00:00 2001 From: Peter Maatman <blackwolf12333@gmail.com> Date: Sun, 29 Sep 2019 19:28:00 +0200 Subject: [PATCH 3/6] tests: add tests for update expression --- .../reactive-update-expression/_config.js | 29 +++++++++++++++++++ .../reactive-update-expression/main.svelte | 12 ++++++++ 2 files changed, 41 insertions(+) create mode 100644 test/runtime/samples/reactive-update-expression/_config.js create mode 100644 test/runtime/samples/reactive-update-expression/main.svelte diff --git a/test/runtime/samples/reactive-update-expression/_config.js b/test/runtime/samples/reactive-update-expression/_config.js new file mode 100644 index 000000000000..c90da8255e3b --- /dev/null +++ b/test/runtime/samples/reactive-update-expression/_config.js @@ -0,0 +1,29 @@ +export default { + html: ` + <button>+1</button> + <p>count:1</p> + `, + + async test({ assert, component, target, window }) { + const click = new window.MouseEvent('click'); + const button = target.querySelector('button'); + + assert.equal(component.x, 1); + + await button.dispatchEvent(click); + + assert.equal(component.x, 3); + assert.htmlEqual(target.innerHTML, ` + <button>+1</button> + <p>count:3</p> + `); + + await button.dispatchEvent(click); + + assert.equal(component.x, 5); + assert.htmlEqual(target.innerHTML, ` + <button>+1</button> + <p>count:5</p> + `); + } +}; diff --git a/test/runtime/samples/reactive-update-expression/main.svelte b/test/runtime/samples/reactive-update-expression/main.svelte new file mode 100644 index 000000000000..887d7a57e86c --- /dev/null +++ b/test/runtime/samples/reactive-update-expression/main.svelte @@ -0,0 +1,12 @@ +<script> + export let x = 0; + + $: x++; + + function onClick() { + x += 1; + } +</script> + +<button on:click='{() => x += 1}'>+1</button> +<p>count:{x}</p> From 253615fed545a74212910033ff1603db1ad8468a Mon Sep 17 00:00:00 2001 From: Conduitry <git@chor.date> Date: Fri, 4 Oct 2019 08:17:53 -0400 Subject: [PATCH 4/6] tidy tests --- .../samples/reactive-compound-operator/_config.js | 4 ++-- .../samples/reactive-compound-operator/main.svelte | 4 ++-- .../samples/reactive-update-expression/_config.js | 4 ++-- .../samples/reactive-update-expression/main.svelte | 10 +++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/test/runtime/samples/reactive-compound-operator/_config.js b/test/runtime/samples/reactive-compound-operator/_config.js index 7b16676410b2..94a726f403b8 100644 --- a/test/runtime/samples/reactive-compound-operator/_config.js +++ b/test/runtime/samples/reactive-compound-operator/_config.js @@ -13,7 +13,7 @@ export default { assert.equal(component.x, 2); assert.htmlEqual(target.innerHTML, ` <button>+1</button> - <p>count:2</p> + <p>count: 2</p> `); await button.dispatchEvent(click); @@ -21,7 +21,7 @@ export default { assert.equal(component.x, 6); assert.htmlEqual(target.innerHTML, ` <button>+1</button> - <p>count:6</p> + <p>count: 6</p> `); } }; diff --git a/test/runtime/samples/reactive-compound-operator/main.svelte b/test/runtime/samples/reactive-compound-operator/main.svelte index 611dde7176f6..52654aed59df 100644 --- a/test/runtime/samples/reactive-compound-operator/main.svelte +++ b/test/runtime/samples/reactive-compound-operator/main.svelte @@ -1,8 +1,8 @@ <script> export let x = 0; - $: x *= 2; + $: x *= 2; </script> <button on:click='{() => x += 1}'>+1</button> -<p>count:{x}</p> +<p>count: {x}</p> diff --git a/test/runtime/samples/reactive-update-expression/_config.js b/test/runtime/samples/reactive-update-expression/_config.js index c90da8255e3b..1355e165a44d 100644 --- a/test/runtime/samples/reactive-update-expression/_config.js +++ b/test/runtime/samples/reactive-update-expression/_config.js @@ -15,7 +15,7 @@ export default { assert.equal(component.x, 3); assert.htmlEqual(target.innerHTML, ` <button>+1</button> - <p>count:3</p> + <p>count: 3</p> `); await button.dispatchEvent(click); @@ -23,7 +23,7 @@ export default { assert.equal(component.x, 5); assert.htmlEqual(target.innerHTML, ` <button>+1</button> - <p>count:5</p> + <p>count: 5</p> `); } }; diff --git a/test/runtime/samples/reactive-update-expression/main.svelte b/test/runtime/samples/reactive-update-expression/main.svelte index 887d7a57e86c..0e0b45ddd684 100644 --- a/test/runtime/samples/reactive-update-expression/main.svelte +++ b/test/runtime/samples/reactive-update-expression/main.svelte @@ -1,12 +1,12 @@ <script> export let x = 0; - $: x++; + $: x++; - function onClick() { - x += 1; - } + function onClick() { + x += 1; + } </script> <button on:click='{() => x += 1}'>+1</button> -<p>count:{x}</p> +<p>count: {x}</p> From 5f1b3c1b54e902f794d643e1a830497ad80a3554 Mon Sep 17 00:00:00 2001 From: Conduitry <git@chor.date> Date: Fri, 4 Oct 2019 08:20:27 -0400 Subject: [PATCH 5/6] tidy assignment operator check --- src/compiler/compile/Component.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 54d86689fd3f..423186e4f393 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -46,9 +46,6 @@ childKeys.EachBlock = childKeys.IfBlock = ['children', 'else']; childKeys.Attribute = ['value']; childKeys.ExportNamedDeclaration = ['declaration', 'specifiers']; -// There is no datatype that describes only the compound operators so we create this list here -const compoundAssignmentOperators = ["+=" , "-=" ,"*=", "/=" ,"%=" ,"**=", "<<=" ,">>=", ">>>=", "|=" ,"^=" ,"&="]; - function remove_node( code: MagicString, start: number, @@ -1275,9 +1272,7 @@ export default class Component { assignees.add(node.name); }); - - - if (compoundAssignmentOperators.findIndex(op => op === node.operator) !== -1) { + if (node.operator !== '=') { dependencies.add(left.name); } } else if (node.type === 'UpdateExpression') { From 46af4917a79f00859ab97392c930edefd9a2725d Mon Sep 17 00:00:00 2001 From: Conduitry <git@chor.date> Date: Fri, 4 Oct 2019 08:29:53 -0400 Subject: [PATCH 6/6] oops --- test/runtime/samples/reactive-compound-operator/_config.js | 2 +- test/runtime/samples/reactive-update-expression/_config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/test/runtime/samples/reactive-compound-operator/_config.js b/test/runtime/samples/reactive-compound-operator/_config.js index 94a726f403b8..dd59fbbf0a70 100644 --- a/test/runtime/samples/reactive-compound-operator/_config.js +++ b/test/runtime/samples/reactive-compound-operator/_config.js @@ -1,7 +1,7 @@ export default { html: ` <button>+1</button> - <p>count:0</p> + <p>count: 0</p> `, async test({ assert, component, target, window }) { diff --git a/test/runtime/samples/reactive-update-expression/_config.js b/test/runtime/samples/reactive-update-expression/_config.js index 1355e165a44d..111460f7dd82 100644 --- a/test/runtime/samples/reactive-update-expression/_config.js +++ b/test/runtime/samples/reactive-update-expression/_config.js @@ -1,7 +1,7 @@ export default { html: ` <button>+1</button> - <p>count:1</p> + <p>count: 1</p> `, async test({ assert, component, target, window }) {