Merge pull request #297 from sveltejs/gh-290-a

[WIP] failing test for first bug in #290

src/generators/dom/visitors/Component.js

@@ -24,6 +24,36 @@ export default {
 
 		addComponentAttributes( generator, node, local );
 
+		if ( local.allUsedContexts.size ) {
+			const contextNames = [...local.allUsedContexts];
+
+			const initialProps = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `root: root`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${listName}: ${listName},\n${indexName}: ${indexName}`;
+			}).join( ',\n' );
+
+			const updates = contextNames.map( contextName => {
+				if ( contextName === 'root' ) return `${name}._context.root = root;`;
+
+				const listName = generator.current.listNames[ contextName ];
+				const indexName = generator.current.indexNames[ contextName ];
+
+				return `${name}._context.${listName} = ${listName};\n${name}._context.${indexName} = ${indexName};`;
+			}).join( '\n' );
+
+			local.init.addBlock( deindent`
+				${name}._context = {
+					${initialProps}
+				};
+			` );
+
+			local.update.addBlock( updates );
+		}
+
 		const componentInitProperties = [
 			`target: ${!isToplevel ? generator.current.target: 'null'}`,
 			'_root: component._root || component'

src/generators/dom/visitors/attributes/addComponentAttributes.js

@@ -94,12 +94,12 @@ export default function addComponentAttributes ( generator, node, local ) {
 
 			// TODO hoist event handlers? can do `this.__component.method(...)`
 			const declarations = [...usedContexts].map( name => {
-				if ( name === 'root' ) return 'var root = this.__svelte.root;';
+				if ( name === 'root' ) return 'var root = this._context.root;';
 
 				const listName = generator.current.listNames[ name ];
 				const indexName = generator.current.indexNames[ name ];
 
-				return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
+				return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
 			});
 
 			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;

test/generator/component-events-each/Widget.html

@@ -0,0 +1 @@
+<button on:click='fire("foo")'>click me</button>

test/generator/component-events-each/_config.js

@@ -0,0 +1,27 @@
+export default {
+	data: {
+		items: [ 'a', 'b', 'c' ]
+	},
+
+	html: `
+		<div><button>click me</button><button>click me</button><button>click me</button></div>
+	`,
+
+	test ( assert, component, target, window ) {
+		const buttons = target.querySelectorAll( 'button' );
+
+		const clicks = [];
+
+		component.on( 'foo', item => {
+			clicks.push( item );
+		});
+
+		const event = new window.MouseEvent( 'click' );
+
+		buttons[0].dispatchEvent( event );
+		buttons[2].dispatchEvent( event );
+
+		assert.deepEqual( clicks, [ 'a', 'c' ]);
+		component.teardown();
+	}
+};

test/generator/component-events-each/main.html

@@ -0,0 +1,19 @@
+<div>
+	{{#each items as item}}
+		<Widget on:foo='foo(item)'/>
+	{{/each}}
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+
+		methods: {
+			foo ( item ) {
+				this.fire( 'foo', item );
+			}
+		}
+	};
+</script>