Repository: sveltejs/svelte (JavaScript)
Date: 2017-10-18 14:45:34+00:00
Task type: Bug Fix

Issue:
Updates to destructuring each block arrays not rendered
[Branch with failing test.](https://github.com/sveltejs/svelte/tree/destructure-each-updates)

I'm going to have to poke around some more with this. Representing the destructured array as additional contexts is convenient, but Svelte needs to know when to update those values.

cc @jacobmischka


Issue discussion:

Solution patch:
diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts
--- a/src/generators/dom/preprocess.ts
+++ b/src/generators/dom/preprocess.ts
@@ -229,12 +229,6 @@ const preprocessors = {
 		const contexts = new Map(block.contexts);
 		contexts.set(node.context, context);
 
-		if (node.destructuredContexts) {
-			for (const i = 0; i < node.destructuredContexts.length; i++) {
-				contexts.set(node.destructuredContexts[i], `${context}[${i}]`);
-			}
-		}
-
 		const indexes = new Map(block.indexes);
 		if (node.index) indexes.set(node.index, node.context);
 
@@ -244,6 +238,13 @@ const preprocessors = {
 		const contextDependencies = new Map(block.contextDependencies);
 		contextDependencies.set(node.context, dependencies);
 
+		if (node.destructuredContexts) {
+			for (const i = 0; i < node.destructuredContexts.length; i++) {
+				contexts.set(node.destructuredContexts[i], `${context}[${i}]`);
+				contextDependencies.set(node.destructuredContexts[i], dependencies);
+			}
+		}
+
 		node._block = block.child({
 			comment: createDebuggingComment(node, generator),
 			name: generator.getUniqueName('create_each_block'),
diff --git a/src/generators/server-side-rendering/visitors/EachBlock.ts b/src/generators/server-side-rendering/visitors/EachBlock.ts
--- a/src/generators/server-side-rendering/visitors/EachBlock.ts
+++ b/src/generators/server-side-rendering/visitors/EachBlock.ts
@@ -18,18 +18,19 @@ export default function visitEachBlock(
 	const contexts = new Map(block.contexts);
 	contexts.set(node.context, node.context);
 
-	if (node.destructuredContexts) {
-		for (const i = 0; i < node.destructuredContexts.length; i++) {
-			contexts.set(node.destructuredContexts[i], `${node.context}[${i}]`);
-		}
-	}
-
 	const indexes = new Map(block.indexes);
 	if (node.index) indexes.set(node.index, node.context);
 
 	const contextDependencies = new Map(block.contextDependencies);
 	contextDependencies.set(node.context, dependencies);
 
+	if (node.destructuredContexts) {
+		for (const i = 0; i < node.destructuredContexts.length; i++) {
+			contexts.set(node.destructuredContexts[i], `${node.context}[${i}]`);
+			contextDependencies.set(node.destructuredContexts[i], dependencies);
+		}
+	}
+
 	const childBlock = block.child({
 		contexts,
 		indexes,


Test patch:
diff --git a/test/runtime/samples/each-block-destructured-array/_config.js b/test/runtime/samples/each-block-destructured-array/_config.js
--- a/test/runtime/samples/each-block-destructured-array/_config.js
+++ b/test/runtime/samples/each-block-destructured-array/_config.js
@@ -9,5 +9,12 @@ export default {
 	html: `
 		<p>raccoon: hands</p>
 		<p>eagle: wings</p>
-	`
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ animalPawsEntries: [['foo', 'bar']] });
+		assert.htmlEqual( target.innerHTML, `
+			<p>foo: bar</p>
+		`);
+	},
 };