diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js index bdf408732f6a..37a4e5800446 100644 --- a/src/generators/dom/visitors/Element/Element.js +++ b/src/generators/dom/visitors/Element/Element.js @@ -46,7 +46,7 @@ export default function visitElement ( generator, block, state, node ) { block.builders.create.addLine( `${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );` ); } - function visitAttributes () { + function visitAttributesAndAddProps () { let intro; let outro; @@ -63,6 +63,37 @@ export default function visitElement ( generator, block, state, node ) { }); if ( intro || outro ) addTransitions( generator, block, childState, node, intro, outro ); + + if ( childState.allUsedContexts.length || childState.usesComponent ) { + const initialProps = []; + const updates = []; + + if ( childState.usesComponent ) { + initialProps.push( `component: ${block.component}` ); + } + + childState.allUsedContexts.forEach( contextName => { + if ( contextName === 'state' ) return; + + const listName = block.listNames.get( contextName ); + const indexName = block.indexNames.get( contextName ); + + initialProps.push( `${listName}: ${listName},\n${indexName}: ${indexName}` ); + updates.push( `${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};` ); + }); + + if ( initialProps.length ) { + block.builders.create.addBlock( deindent` + ${name}._svelte = { + ${initialProps.join( ',\n' )} + }; + ` ); + } + + if ( updates.length ) { + block.builders.update.addBlock( updates.join( '\n' ) ); + } + } } if ( !state.parentNode ) { @@ -74,7 +105,7 @@ export default function visitElement ( generator, block, state, node ) { if ( node.name !== 'select' ) { // + + + +{{/each}} + +