From 8148a7a33444805320923e4c4e071f62dee3df6c Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 28 Aug 2020 07:25:33 +0800
Subject: [PATCH] each binding with store props (#5289)

---
 CHANGELOG.md                                  |  1 +
 src/compiler/compile/render_dom/Block.ts      | 27 ++++++++-----------
 .../compile/render_dom/wrappers/EachBlock.ts  |  8 +++---
 .../store-each-binding-deep/_config.js        | 14 ++++++++++
 .../store-each-binding-deep/main.svelte       | 11 ++++++++
 5 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 test/runtime/samples/store-each-binding-deep/_config.js
 create mode 100644 test/runtime/samples/store-each-binding-deep/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c4ca12b51..0ccfeff273 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 * Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
 * Fix using `<svelte:component>` in `{:catch}` ([#5259](https://github.com/sveltejs/svelte/issues/5259))
 * Fix setting one-way bound `<input>` `value` to `undefined` when it has spread attributes ([#5270](https://github.com/sveltejs/svelte/issues/5270))
+* Fix deep two-way bindings inside an `{#each}` involving a store ([#5286](https://github.com/sveltejs/svelte/issues/5286))
 
 ## 3.24.1
 
diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 3f10114f45..1562635d07 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -4,6 +4,15 @@ import { b, x } from 'code-red';
 import { Node, Identifier, ArrayPattern } from 'estree';
 import { is_head } from './wrappers/shared/is_head';
 
+export interface Bindings {
+	object: Identifier;
+	property: Identifier;
+	snippet: Node;
+	store: string;
+	tail: Node;
+	modifier: (node: Node) => Node;
+}
+
 export interface BlockOptions {
 	parent?: Block;
 	name: Identifier;
@@ -11,14 +20,7 @@ export interface BlockOptions {
 	renderer?: Renderer;
 	comment?: string;
 	key?: Identifier;
-	bindings?: Map<string, {
-		object: Identifier;
-		property: Identifier;
-		snippet: Node;
-		store: string;
-		tail: Node;
-		modifier: (node: Node) => Node;
-	}>;
+	bindings?: Map<string, Bindings>;
 	dependencies?: Set<string>;
 }
 
@@ -36,14 +38,7 @@ export default class Block {
 
 	dependencies: Set<string> = new Set();
 
-	bindings: Map<string, {
-		object: Identifier;
-		property: Identifier;
-		snippet: Node;
-		store: string;
-		tail: Node;
-		modifier: (node: Node) => Node;
-	}>;
+	bindings: Map<string, Bindings>;
 
 	chunks: {
 		declarations: Array<Node | Node[]>;
diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 126b114487..2513ea1adc 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -7,6 +7,7 @@ import FragmentWrapper from './Fragment';
 import { b, x } from 'code-red';
 import ElseBlock from '../../nodes/ElseBlock';
 import { Identifier, Node } from 'estree';
+import get_object from '../../utils/get_object';
 
 export class ElseBlockWrapper extends Wrapper {
 	node: ElseBlock;
@@ -139,11 +140,8 @@ export default class EachBlockWrapper extends Wrapper {
 			view_length: fixed_length === null ? x`${iterations}.length` : fixed_length
 		};
 
-		const store =
-			node.expression.node.type === 'Identifier' &&
-			node.expression.node.name[0] === '$'
-				? node.expression.node.name.slice(1)
-				: null;
+		const object = get_object(node.expression.node);
+		const store = object.type === 'Identifier' && object.name[0] === '$' ? object.name.slice(1) : null;
 
 		node.contexts.forEach(prop => {
 			this.block.bindings.set(prop.key.name, {
diff --git a/test/runtime/samples/store-each-binding-deep/_config.js b/test/runtime/samples/store-each-binding-deep/_config.js
new file mode 100644
index 0000000000..70776940dd
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-deep/_config.js
@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/store-each-binding-deep/main.svelte b/test/runtime/samples/store-each-binding-deep/main.svelte
new file mode 100644
index 0000000000..8f1cabf5b8
--- /dev/null
+++ b/test/runtime/samples/store-each-binding-deep/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	let itemStore = writable({prop: {things: [{name: "item store"}]}});
+</script>
+
+{#each $itemStore.prop.things as thing }
+	<input bind:value={thing.name} >
+{/each}
+
+<p>{$itemStore.prop.things[0].name}</p>
\ No newline at end of file