complex dynamic attributes

compiler/generate/index.js

@@ -133,25 +133,65 @@ export default function generate ( parsed, template ) {
 								}
 							}
 
-							else if ( attribute.value.length === 1 && attribute.value[0].type === 'Text' ) {
+							else if ( attribute.value.length === 1 ) {
-								// static attributes
+								const value = attribute.value[0];
-								const value = JSON.stringify( attribute.value[0].data );
+
+								let result = '';
+
+								if ( value.type === 'Text' ) {
+									// static attributes
+									result = JSON.stringify( value.data );
+
+									if ( metadata ) {
+										initStatements.push( deindent`
+											${name}.${metadata.propertyName} = ${result};
+										` );
+									} else {
+										initStatements.push( deindent`
+											${name}.setAttribute( '${attribute.name}', ${result} );
+										` );
+									}
+								}
+
+								else {
+									// dynamic – but potentially non-string – attributes
+									contextualise( value.expression );
+									result = `[✂${value.expression.start}-${value.expression.end}✂]`;
+
+									if ( metadata ) {
+										updateStatements.push( deindent`
+											${name}.${metadata.propertyName} = ${result};
+										` );
+									} else {
+										updateStatements.push( deindent`
+											${name}.setAttribute( '${attribute.name}', ${result} );
+										` );
+									}
+								}
+							}
+
+							else {
+								const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
+									attribute.value.map( chunk => {
+										if ( chunk.type === 'Text' ) {
+											return JSON.stringify( chunk.data );
+										} else {
+											contextualise( code, chunk.expression, current.contexts );
+											return `[✂${chunk.expression.start}-${chunk.expression.end}✂]`;
+										}
+									}).join( ' + ' )
+								);
 
 								if ( metadata ) {
-									initStatements.push( deindent`
+									updateStatements.push( deindent`
 										${name}.${metadata.propertyName} = ${value};
 									` );
 								} else {
-									initStatements.push( deindent`
+									updateStatements.push( deindent`
 										${name}.setAttribute( '${attribute.name}', ${value} );
 									` );
 								}
 							}
-
-							else {
-								// need to handle boolean and string attributes differently
-								throw new Error( 'TODO dynamic attributes' );
-							}
 						}
 
 						else if ( attribute.type === 'EventHandler' ) {

test/compiler/attribute-dynamic/_config.js

@@ -0,0 +1,14 @@
+import * as assert from 'assert';
+
+export default {
+	html: `<div style="color: red;">red</div>`,
+	test ( component, target ) {
+		const div = target.querySelector( 'div' );
+
+		assert.equal( div.style.color, 'red' );
+
+		component.set({ color: 'blue' });
+		assert.equal( target.innerHTML, `<div style="color: blue;">blue</div>` );
+		assert.equal( div.style.color, 'blue' );
+	}
+};

test/compiler/attribute-dynamic/main.svelte

@@ -0,0 +1,9 @@
+<div style='color: {{color}};'>{{color}}</div>
+
+<script>
+	export default {
+		data: () => ({
+			color: 'red'
+		})
+	};
+</script>