From bbdd96058ca2439cfcec3aa81e675449fb3b75f9 Mon Sep 17 00:00:00 2001 From: Tan Li Hau Date: Sun, 13 Sep 2020 12:01:53 +0800 Subject: [PATCH 1/3] fix destructuring to get multiple stores --- src/compiler/compile/Component.ts | 10 +++------- src/compiler/compile/render_dom/Renderer.ts | 6 ++++-- src/compiler/compile/render_dom/invalidate.ts | 20 +++++++++++-------- .../_config.js | 3 +++ .../main.svelte | 16 +++++++++++++++ .../main.svelte | 3 +++ .../main.svelte | 5 +++++ .../samples/store-resubscribe-c/_config.js | 3 +++ .../samples/store-resubscribe-c/main.svelte | 16 +++++++++++++++ 9 files changed, 65 insertions(+), 17 deletions(-) create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js create mode 100644 test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte create mode 100644 test/runtime/samples/store-resubscribe-c/_config.js create mode 100644 test/runtime/samples/store-resubscribe-c/main.svelte diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index ed2b10e40432..078ecb8869b2 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -947,12 +947,6 @@ export default class Component { const variable = component.var_lookup.get(name); if (variable.export_name && variable.writable) { - const insert = variable.subscribable - ? get_insert(variable) - : null; - - parent[key].splice(index + 1, 0, insert); - declarator.id = { type: 'ObjectPattern', properties: [{ @@ -973,7 +967,9 @@ export default class Component { }; declarator.init = x`$$props`; - } else if (variable.subscribable) { + } + + if (variable.subscribable && declarator.init) { const insert = get_insert(variable); parent[key].splice(index + 1, 0, ...insert); } diff --git a/src/compiler/compile/render_dom/Renderer.ts b/src/compiler/compile/render_dom/Renderer.ts index 6fc026de230e..0990281d912a 100644 --- a/src/compiler/compile/render_dom/Renderer.ts +++ b/src/compiler/compile/render_dom/Renderer.ts @@ -166,12 +166,14 @@ export default class Renderer { return member; } - invalidate(name: string, value?) { + invalidate(name: string, value?, main_execution_context: boolean = false) { const variable = this.component.var_lookup.get(name); const member = this.context_lookup.get(name); if (variable && (variable.subscribable && (variable.reassigned || variable.export_name))) { - return x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`; + return main_execution_context + ? x`${`$$subscribe_${name}`}(${value || name})` + : x`${`$$subscribe_${name}`}($$invalidate(${member.index}, ${value || name}))`; } if (name[0] === '$' && name[1] !== '$') { diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts index 28e4f37e3fd1..c7d9759ccd0a 100644 --- a/src/compiler/compile/render_dom/invalidate.ts +++ b/src/compiler/compile/render_dom/invalidate.ts @@ -31,10 +31,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: function get_invalidated(variable: Var, node?: Expression) { if (main_execution_context && !variable.subscribable && variable.name[0] !== '$') { - return node || x`${variable.name}`; + return node; } - - return renderer.invalidate(variable.name); + return renderer.invalidate(variable.name, undefined, main_execution_context); } if (head) { @@ -44,12 +43,15 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: return get_invalidated(head, node); } else { const is_store_value = head.name[0] === '$' && head.name[1] !== '$'; - const extra_args = tail.map(variable => get_invalidated(variable)); + const extra_args = tail.map(variable => get_invalidated(variable)).filter(Boolean); const pass_value = ( - extra_args.length > 0 || - (node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') || - (node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier')) + !main_execution_context && + ( + extra_args.length > 0 || + (node.type === 'AssignmentExpression' && node.left.type !== 'Identifier') || + (node.type === 'UpdateExpression' && (!node.prefix || node.argument.type !== 'Identifier')) + ) ); if (pass_value) { @@ -63,7 +65,9 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: ? x`@set_store_value(${head.name.slice(1)}, ${node}, ${extra_args})` : !main_execution_context ? x`$$invalidate(${renderer.context_lookup.get(head.name).index}, ${node}, ${extra_args})` - : node; + : extra_args.length + ? [node, ...extra_args] + : node; if (head.subscribable && head.reassigned) { const subscribe = `$$subscribe_${head.name}`; diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js new file mode 100644 index 000000000000..e74cea70fe3c --- /dev/null +++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/_config.js @@ -0,0 +1,3 @@ +export default { + html: `

2 2 xxx 5 6

` +}; \ No newline at end of file diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte new file mode 100644 index 000000000000..d1d0ce04b17a --- /dev/null +++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte @@ -0,0 +1,16 @@ + + +

{foo} {$eid} {u.name} {v} {$w}

diff --git a/test/runtime/samples/reactive-assignment-in-declaration/main.svelte b/test/runtime/samples/reactive-assignment-in-declaration/main.svelte index 8aa05964ddb5..edac4427bb08 100644 --- a/test/runtime/samples/reactive-assignment-in-declaration/main.svelte +++ b/test/runtime/samples/reactive-assignment-in-declaration/main.svelte @@ -1,6 +1,9 @@

{foo} {bar}

diff --git a/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte index 1c24f364ac2b..9621c17fd0f2 100644 --- a/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte +++ b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte @@ -4,6 +4,11 @@ for (let bar = (foo1 = 0); bar < 5; bar += 1) { foo2 = foo1; } + function a() { + for (let bar = (foo1 = 0); bar < 5; bar += 1) { + foo2 = foo1; + } + }

{foo1} {foo2}

diff --git a/test/runtime/samples/store-resubscribe-c/_config.js b/test/runtime/samples/store-resubscribe-c/_config.js new file mode 100644 index 000000000000..80b4fa702d64 --- /dev/null +++ b/test/runtime/samples/store-resubscribe-c/_config.js @@ -0,0 +1,3 @@ +export default { + html: `31 42` +}; diff --git a/test/runtime/samples/store-resubscribe-c/main.svelte b/test/runtime/samples/store-resubscribe-c/main.svelte new file mode 100644 index 000000000000..5b0434cbd121 --- /dev/null +++ b/test/runtime/samples/store-resubscribe-c/main.svelte @@ -0,0 +1,16 @@ + + +{$store1} +{$store2} From 9c13282f8f316bdf6fadad3064c017b01a88e4a0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 15 Sep 2020 08:56:58 -0400 Subject: [PATCH 2/3] formatting --- .../main.svelte | 18 ++++++++--------- .../main.svelte | 20 +++++++++---------- .../samples/store-resubscribe-c/main.svelte | 6 +++--- 3 files changed, 22 insertions(+), 22 deletions(-) diff --git a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte index d1d0ce04b17a..5ad442e1dad8 100644 --- a/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte +++ b/test/runtime/samples/reactive-assignment-in-complex-declaration-with-store/main.svelte @@ -1,16 +1,16 @@

{foo} {$eid} {u.name} {v} {$w}

diff --git a/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte index 9621c17fd0f2..b007f6fe8b89 100644 --- a/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte +++ b/test/runtime/samples/reactive-assignment-in-for-loop-head/main.svelte @@ -1,14 +1,14 @@

{foo1} {foo2}

diff --git a/test/runtime/samples/store-resubscribe-c/main.svelte b/test/runtime/samples/store-resubscribe-c/main.svelte index 5b0434cbd121..c52a5402bd28 100644 --- a/test/runtime/samples/store-resubscribe-c/main.svelte +++ b/test/runtime/samples/store-resubscribe-c/main.svelte @@ -2,13 +2,13 @@ import { writable } from 'svelte/store'; const context = { store1: writable(31), - store2: writable(42), - } + store2: writable(42) + }; let store1; let store2; ({ store1, - store2, + store2 } = context); From 91e2b5245706c98ae1f7005aaef4fceb68e4f8a0 Mon Sep 17 00:00:00 2001 From: Conduitry Date: Tue, 15 Sep 2020 08:58:18 -0400 Subject: [PATCH 3/3] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ffb19d3c32..2c9922a0866a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * Fix specificity of certain styles involving a child selector ([#4795](https://github.com/sveltejs/svelte/issues/4795)) * Fix transitions that are parameterised with stores ([#5244](https://github.com/sveltejs/svelte/issues/5244)) * Fix scoping of styles involving child selector and `*` ([#5370](https://github.com/sveltejs/svelte/issues/5370)) +* Fix destructuring which reassigns stores ([#5388](https://github.com/sveltejs/svelte/issues/5388)) ## 3.25.0