diff --git a/src/generators/dom/visitors/Component.js b/src/generators/dom/visitors/Component.js index 05ea49fad1..46ba6d4aa1 100644 --- a/src/generators/dom/visitors/Component.js +++ b/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' diff --git a/src/generators/dom/visitors/attributes/addComponentAttributes.js b/src/generators/dom/visitors/attributes/addComponentAttributes.js index e3471c6d37..4b05faffac 100644 --- a/src/generators/dom/visitors/attributes/addComponentAttributes.js +++ b/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}✂];`; diff --git a/test/generator/component-events-each/Widget.html b/test/generator/component-events-each/Widget.html new file mode 100644 index 0000000000..ad81b51f15 --- /dev/null +++ b/test/generator/component-events-each/Widget.html @@ -0,0 +1 @@ + diff --git a/test/generator/component-events-each/_config.js b/test/generator/component-events-each/_config.js new file mode 100644 index 0000000000..25635556a0 --- /dev/null +++ b/test/generator/component-events-each/_config.js @@ -0,0 +1,27 @@ +export default { + data: { + items: [ 'a', 'b', 'c' ] + }, + + html: ` +
+ `, + + 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(); + } +}; diff --git a/test/generator/component-events-each/main.html b/test/generator/component-events-each/main.html new file mode 100644 index 0000000000..e429f3f303 --- /dev/null +++ b/test/generator/component-events-each/main.html @@ -0,0 +1,19 @@ +
+ {{#each items as item}} + + {{/each}} +
+ +