svelte/compiler/generate/visitors/attributes/addComponentAttributes.js

import deindent from '../../utils/deindent.js';

export default function addComponentAttributes ( generator, node, local ) {
	local.staticAttributes = [];
	local.dynamicAttributes = [];

	node.attributes.forEach( attribute => {
		if ( attribute.type === 'Attribute' ) {
			if ( attribute.value === true ) {
				// attributes without values, e.g. <textarea readonly>
				local.data.push( `${attribute.name}: true` );
			}

			else if ( attribute.value.length === 1 ) {
				const value = attribute.value[0];

				if ( value.type === 'Text' ) {
					// static attributes
					const result = isNaN( parseFloat( value.data ) ) ? JSON.stringify( value.data ) : value.data;
					local.staticAttributes.push( `${attribute.name}: ${result}` );
				}

				else {
					// simple dynamic attributes
					generator.contextualise( value.expression );
					const result = `[✂${value.expression.start}-${value.expression.end}✂]`;

					// TODO only update attributes that have changed
					local.dynamicAttributes.push( `${attribute.name}: ${result}` );
				}
			}

			else {
				// complex dynamic attributes
				const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
					attribute.value.map( chunk => {
						if ( chunk.type === 'Text' ) {
							return JSON.stringify( chunk.data );
						} else {
							generator.addSourcemapLocations( chunk.expression );

							generator.contextualise( chunk.expression );
							return `( [✂${chunk.expression.start}-${chunk.expression.end}✂] )`;
						}
					}).join( ' + ' )
				);

				// TODO only update attributes that have changed
				local.dynamicAttributes.push( `${attribute.name}: ${value}` );
			}
		}

		else if ( attribute.type === 'EventHandler' ) {
			// TODO verify that it's a valid callee (i.e. built-in or declared method)
			generator.addSourcemapLocations( attribute.expression );
			generator.code.insertRight( attribute.expression.start, 'component.' );

			const usedContexts = new Set();
			attribute.expression.arguments.forEach( arg => {
				const contexts = generator.contextualise( arg, true, true );

				contexts.forEach( context => {
					usedContexts.add( context );
					local.allUsedContexts.add( context );
				});
			});

			// TODO hoist event handlers? can do `this.__component.method(...)`
			const declarations = [...usedContexts].map( name => {
				if ( name === 'root' ) return 'var root = this.__svelte.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}]`;
			});

			const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;

			local.init.push( deindent`
				${local.name}.on( '${attribute.name}', function ( event ) {
					${handlerBody}
				});
			` );
		}

		else if ( attribute.type === 'Binding' ) {
			throw new Error( 'TODO component bindings' );
		}

		else if ( attribute.type === 'Ref' ) {
			generator.usesRefs = true;

			local.init.push( deindent`
				component.refs.${attribute.name} = ${local.name};
			` );

			local.teardown.push( deindent`
				component.refs.${attribute.name} = null;
			` );
		}

		else {
			throw new Error( `Not implemented: ${attribute.type}` );
		}
	});
}