import deindent from '../utils/deindent.js'; import addComponentAttributes from './attributes/addComponentAttributes.js'; import addElementAttributes from './attributes/addElementAttributes.js'; export default { enter ( generator, node ) { const isComponent = node.name in generator.components; const name = generator.current.counter( isComponent ? `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` : node.name ); const local = { name, namespace: name === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace, isComponent, allUsedContexts: new Set(), init: [], update: [], teardown: [] }; if ( isComponent ) { addComponentAttributes( generator, node, local ); if ( local.staticAttributes.length ) { local.init.unshift( deindent` var ${name} = new template.components.${node.name}({ target: ${generator.current.target}, data: { ${local.staticAttributes.join( ',\n' )} } }); ` ); } else { local.init.unshift( deindent` var ${name} = new template.components.${node.name}({ target: ${generator.current.target} }); ` ); } if ( local.dynamicAttributes.length ) { const updates = local.dynamicAttributes.map( attribute => { return deindent` if ( ${attribute.dependencies.map( dependency => `'${dependency}' in changed` ).join( '||' )} ) ${name}_changes.${attribute.name} = ${attribute.value}; `; }); local.update.push( deindent` var ${name}_changes = {}; ${updates.join( '\n' )} if ( Object.keys( ${name}_changes ).length ) ${name}.set( ${name}_changes ); ` ); } local.teardown.push( `${name}.teardown();` ); } else { addElementAttributes( generator, node, local ); if ( local.allUsedContexts.size ) { local.init.push( deindent` ${name}.__svelte = {}; ` ); const declarations = [...local.allUsedContexts].map( contextName => { if ( contextName === 'root' ) return `${name}.__svelte.root = root;`; const listName = generator.current.listNames[ contextName ]; const indexName = generator.current.indexNames[ contextName ]; return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`; }).join( '\n' ); local.update.push( declarations ); } let render = local.namespace ? `var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` : `var ${name} = document.createElement( '${node.name}' );`; if ( generator.cssId && !generator.current.elementDepth ) { render += `\n${name}.setAttribute( '${generator.cssId}', '' );`; } local.init.unshift( render ); local.teardown.push( `${name}.parentNode.removeChild( ${name} );` ); } // special case – bound