each binding with store props (sveltejs#5289)

Author: tanhauhau

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
 

src/compiler/compile/render_dom/Block.ts

@@ -4,21 +4,23 @@ 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;
 	type: string;
 	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[]>;

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, {

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>
+		`);
+	}
+};

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>