svelte/compiler/generate/visitors/Element.js

import deindent from '../utils/deindent.js';
import addComponentAttributes from './attributes/addComponentAttributes.js';
import addElementAttributes from './attributes/addElementAttributes.js';
import counter from '../utils/counter.js';

export default {
	enter ( generator, node ) {
		const hasChildren = node.children.length > 0;
		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: [],
			mount: [],
			update: [],
			detach: [],
			teardown: []
		};

		const isToplevel = generator.current.localElementDepth === 0;

		if ( isComponent ) {
			generator.hasComponents = true;

			addComponentAttributes( generator, node, local );

			const componentInitProperties = [
				`target: ${!isToplevel ? generator.current.target: 'null'}`,
				'root: component.root || component'
			];
			// Component has children
			if ( hasChildren ) {
				const yieldName = `render${name}YieldFragment`;

				// {{YIELD STUFF}}
				generator.push({
					useAnchor: true,
					name: generator.current.counter(yieldName),
					target: 'target',
					localElementDepth: 0,

					initStatements: [],
					mountStatements: [],
					updateStatements: [],
					detachStatements: [],
					teardownStatements: [],

					counter: counter()
				});

				node.children.forEach( generator.visit );
				generator.addRenderer( generator.current );
				generator.pop();

				// Don't render children twice
				node.children = [];

				generator.current.initStatements.push(`var ${name}_yieldFragment = ${yieldName}( root, component );`);
				generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`);

				componentInitProperties.push(`yield: ${name}_yieldFragment`);
			}

			const statements = [];

			if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
				const initialProps = local.staticAttributes
					.concat( local.dynamicAttributes )
					.map( attribute => `${attribute.name}: ${attribute.value}` );

				if ( initialProps.length ) {
					statements.push( deindent`
						var ${name}_initialData = {
							${initialProps.join( ',\n' )}
						};
					` );
				} else {
					statements.push( `var ${name}_initialData = {};` );
				}

				if ( local.bindings.length ) {
					const bindings = local.bindings.map( binding => {
						const parts = binding.value.split( '.' );
						const tail = parts.pop();
						return `if ( '${tail}' in ${parts.join( '.' )} ) ${name}_initialData.${binding.name} = ${binding.value};`;
					});

					statements.push( bindings.join( '\n' ) );
				}
				componentInitProperties.push(`data: ${name}_initialData`);
			}

			local.init.unshift( deindent`
				${statements.join( '\n\n' )}

				var ${name} = new template.components.${node.name}({
					${componentInitProperties.join(',\n')}
				});
			` );


			if ( isToplevel ) {
				local.mount.unshift( `${name}.mount( target, anchor );` );
			}

			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( ${isToplevel ? 'detach' : 'false'} );` );
		}

		else {
			addElementAttributes( 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}.__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.init.push( deindent`
					${name}.__svelte = {
						${initialProps}
					};
				` );

				local.update.push( updates );
			}

			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 );
			if ( isToplevel ) {
				local.detach.push( `${name}.parentNode.removeChild( ${name} );` );
			}
		}

		// special case – bound <option> without a value attribute
		if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { // TODO check it's bound
			// const dynamic = node.children.length > 1 || node.children[0].type !== 'Text';
			// TODO do this in init for static values... have to do it in `leave`, because they don't exist yet
			local.update.push( `${name}.__value = ${name}.textContent` );
		}

		generator.current.initStatements.push( local.init.join( '\n' ) );
		if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) );
		if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) );
		generator.current.detachStatements.push( local.detach.join( '\n' ) );
		generator.current.teardownStatements.push( local.teardown.join( '\n' ) );

		generator.push({
			isComponent,
			namespace: local.namespace,
			target: name,
			parent: generator.current,
			elementDepth: generator.current.elementDepth + 1,
			localElementDepth: generator.current.localElementDepth + 1
		});
	},

	leave ( generator ) {
		const name = generator.current.target;
		const isComponent = generator.current.isComponent;

		generator.pop();

		if ( isComponent ) return;

		generator.createMountStatement( name );
	}
};