support static data and refs on components

compiler/generate/visitors/Element.js

@@ -20,11 +20,22 @@ export default {
 		if ( isComponent ) {
 			addComponentAttributes( generator, node, local );
 
-			local.init.unshift( deindent`
-				var ${name} = new template.components.${node.name}({
-					target: ${generator.current.target}
-				});
-			` );
+			if ( local.data.length ) {
+				local.init.unshift( deindent`
+					var ${name} = new template.components.${node.name}({
+						target: ${generator.current.target},
+						data: {
+							${local.data.join( ',\n' )}
+						}
+					});
+				` );
+			} else {
+				local.init.unshift( deindent`
+					var ${name} = new template.components.${node.name}({
+						target: ${generator.current.target}
+					});
+				` );
+			}
 
 			local.teardown.push( `${name}.teardown();` );
 		}

compiler/generate/visitors/attributes/addComponentAttributes.js

@@ -1,41 +1,40 @@
 import deindent from '../../utils/deindent.js';
 
 export default function addComponentAttributes ( generator, node, local ) {
+	const variables = [];
+	local.data = [];
+
 	node.attributes.forEach( attribute => {
 		if ( attribute.type === 'Attribute' ) {
 			if ( attribute.value === true ) {
 				// attributes without values, e.g. <textarea readonly>
-				local.init.push( deindent`
-					${local.name}.setAttribute( '${attribute.name}', true );
-				` );
+				local.data.push( `${attribute.name}: true` );
 			}
 
 			else if ( attribute.value.length === 1 ) {
 				const value = attribute.value[0];
 
-				let result = '';
-
 				if ( value.type === 'Text' ) {
 					// static attributes
-					result = JSON.stringify( value.data );
-
-					local.init.push( deindent`
-						${local.name}.setAttribute( '${attribute.name}', ${result} );
-					` );
+					const result = isNaN( parseFloat( value.data ) ) ? JSON.stringify( value.data ) : value.data;
+					local.data.push( `${attribute.name}: ${result}` );
 				}
 
 				else {
 					// dynamic – but potentially non-string – attributes
 					generator.contextualise( value.expression );
-					result = `[✂${value.expression.start}-${value.expression.end}✂]`;
+					const result = `[✂${value.expression.start}-${value.expression.end}✂]`;
 
-					local.update.push( deindent`
-						${local.name}.setAttribute( '${attribute.name}', ${result} );
-					` );
+					throw new Error( 'TODO dynamic data' );
+					// local.update.push( deindent`
+					// 	${local.name}.setAttribute( '${attribute.name}', ${result} );
+					// ` );
 				}
 			}
 
 			else {
+				throw new Error( 'TODO dynamic data' );
+
 				const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
 					attribute.value.map( chunk => {
 						if ( chunk.type === 'Text' ) {

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

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

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

@@ -0,0 +1,3 @@
+export default {
+	html: '<div><p>foo: bar</p>\n<p>baz: 42 (number)</p></div>'
+};

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

@@ -0,0 +1,11 @@
+<div>
+	<Widget foo='bar' baz='42'/>
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>

test/compiler/component-ref/Widget.html

@@ -0,0 +1 @@
+<p>i am a widget</p>

test/compiler/component-ref/_config.js

@@ -0,0 +1,10 @@
+import * as assert from 'assert';
+import Widget from './Widget.html';
+
+export default {
+	html: '<div><p>i am a widget</p></div>',
+	test ( component ) {
+		const widget = component.refs.widget;
+		assert.ok( widget instanceof Widget );
+	}
+};

test/compiler/component-ref/main.html

@@ -0,0 +1,11 @@
+<div>
+	<Widget ref:widget/>
+</div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget }
+	};
+</script>