dynamic component data

compiler/generate/visitors/Element.js

@@ -20,12 +20,12 @@ export default {
 		if ( isComponent ) {
 			addComponentAttributes( generator, node, local );
 
-			if ( local.data.length ) {
+			if ( local.staticAttributes.length ) {
 				local.init.unshift( deindent`
 					var ${name} = new template.components.${node.name}({
 						target: ${generator.current.target},
 						data: {
-							${local.data.join( ',\n' )}
+							${local.staticAttributes.join( ',\n' )}
 						}
 					});
 				` );
@@ -37,6 +37,14 @@ export default {
 				` );
 			}
 
+			if ( local.dynamicAttributes.length ) {
+				local.update.push( deindent`
+					${name}.set({
+						${local.dynamicAttributes.join( ',\n' )}
+					});
+				` );
+			}
+
 			local.teardown.push( `${name}.teardown();` );
 		}
 

compiler/generate/visitors/attributes/addComponentAttributes.js

@@ -1,8 +1,8 @@
 import deindent from '../../utils/deindent.js';
 
 export default function addComponentAttributes ( generator, node, local ) {
-	const variables = [];
-	local.data = [];
+	local.staticAttributes = [];
+	local.dynamicAttributes = [];
 
 	node.attributes.forEach( attribute => {
 		if ( attribute.type === 'Attribute' ) {
@@ -17,24 +17,21 @@ export default function addComponentAttributes ( generator, node, local ) {
 				if ( value.type === 'Text' ) {
 					// static attributes
 					const result = isNaN( parseFloat( value.data ) ) ? JSON.stringify( value.data ) : value.data;
-					local.data.push( `${attribute.name}: ${result}` );
+					local.staticAttributes.push( `${attribute.name}: ${result}` );
 				}
 
 				else {
-					// dynamic – but potentially non-string – attributes
+					// simple dynamic attributes
 					generator.contextualise( value.expression );
 					const result = `[✂${value.expression.start}-${value.expression.end}✂]`;
 
-					throw new Error( 'TODO dynamic data' );
-					// local.update.push( deindent`
-					// 	${local.name}.setAttribute( '${attribute.name}', ${result} );
-					// ` );
+					// TODO only update attributes that have changed
+					local.dynamicAttributes.push( `${attribute.name}: ${result}` );
 				}
 			}
 
 			else {
-				throw new Error( 'TODO dynamic data' );
-
+				// complex dynamic attributes
 				const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
 					attribute.value.map( chunk => {
 						if ( chunk.type === 'Text' ) {
@@ -48,9 +45,8 @@ export default function addComponentAttributes ( generator, node, local ) {
 					}).join( ' + ' )
 				);
 
-				local.update.push( deindent`
-					${local.name}.setAttribute( '${attribute.name}', ${value} );
-				` );
+				// TODO only update attributes that have changed
+				local.dynamicAttributes.push( `${attribute.name}: ${value}` );
 			}
 		}
 

test/compiler/component-data-dynamic/Widget.html

@@ -0,0 +1,3 @@
+<p>foo: {{foo}}</p>
+<p>baz: {{baz}} ({{typeof baz}})</p>
+<p>qux: {{qux}}</p>

test/compiler/component-data-dynamic/_config.js

@@ -0,0 +1,19 @@
+import * as assert from 'assert';
+
+export default {
+	data: {
+		bar: 'lol',
+		x: 2,
+		compound: 'piece of'
+	},
+	html: `<div><p>foo: lol</p>\n<p>baz: 42 (number)</p>\n<p>qux: this is a piece of string</p></div>`,
+	test ( component, target ) {
+		component.set({
+			bar: 'wut',
+			x: 3,
+			compound: 'rather boring'
+		});
+
+		assert.equal( target.innerHTML, `<div><p>foo: wut</p>\n<p>baz: 43 (number)</p>\n<p>qux: this is a rather boring string</p></div>` );
+	}
+};

test/compiler/component-data-dynamic/main.html

@@ -0,0 +1,11 @@
+<div>
+	<Widget foo='{{bar}}' baz='{{40 + x}}' qux='this is a {{compound}} string'/>
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>