Add destructured context container to usedContexts

Fixes #1139

src/generators/Generator.ts

@@ -244,13 +244,20 @@ export default class Generator {
 					} else if (contexts.has(name)) {
 						const contextName = contexts.get(name);
 						if (contextName !== name) {
-							// this is true for 'reserved' names like `state` and `component`
+							// this is true for 'reserved' names like `state` and `component`,
+							// also destructured contexts
 							code.overwrite(
 								node.start,
 								node.start + name.length,
 								contextName,
 								{ storeName: true, contentOnly: false }
 							);
+
+							const destructuredName = contextName.replace(/\[\d+\]/, '');
+							if (destructuredName !== contextName) {
+								// so that hoisting the context works correctly
+								usedContexts.add(destructuredName);
+							}
 						}
 
 						usedContexts.add(name);
@@ -774,7 +781,6 @@ export default class Generator {
 					if (node.destructuredContexts) {
 						for (let i = 0; i < node.destructuredContexts.length; i += 1) {
 							const name = node.destructuredContexts[i];
-							const value = `${node.context}[${i}]`;
 
 							contextDependencies.set(name, node.metadata.dependencies);
 						}

test/runtime/samples/event-handler-custom-each-destructured/_config.js

@@ -0,0 +1,32 @@
+export default {
+	html: `
+		<button>0: foo</button>
+		<button>1: bar</button>
+		<button>2: baz</button>
+
+		<p>first: </p>
+		<p>second: </p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'click' );
+
+		const buttons = target.querySelectorAll( 'button' );
+
+		buttons[1].dispatchEvent( event );
+
+		assert.htmlEqual( target.innerHTML, `
+			<button>0: foo</button>
+			<button>1: bar</button>
+			<button>2: baz</button>
+
+			<p>first: 1</p>
+			<p>second: bar</p>
+		` );
+
+		assert.equal( component.get( 'first' ), '1' );
+		assert.equal( component.get( 'second' ), 'bar' );
+
+		component.destroy();
+	}
+};

test/runtime/samples/event-handler-custom-each-destructured/main.html

@@ -0,0 +1,36 @@
+{{#each items as [item0, item1]}}
+	<button on:tap='set({ first: item0, second: item1 })'>
+		{{item0}}: {{item1}}
+	</button>
+{{/each}}
+
+<p>first: {{first}}</p>
+<p>second: {{second}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			x: 0,
+			y: 0,
+			first: '',
+			second: '',
+			items: [ [0, 'foo'], [1, 'bar'], [2, 'baz'] ]
+		}),
+
+		events: {
+			tap ( node, callback ) {
+				function clickHandler ( event ) {
+					callback();
+				}
+
+				node.addEventListener( 'click', clickHandler, false );
+
+				return {
+					teardown () {
+						node.addEventListener( 'click', clickHandler, false );
+					}
+				};
+			}
+		}
+	};
+</script>