From 11dc7dc38078f7b0acf1c3a876997e6ae84a169d Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sat, 24 Dec 2016 14:31:32 -0500
Subject: [PATCH] handle component directives at positions other than end
 (fixes #221)

---
 .../visitors/Component.js                     | 43 ++++++++++---------
 .../component-refs-and-attributes/Widget.html |  1 +
 .../_actual.html                              |  1 +
 .../_expected.html                            |  1 +
 .../component-refs-and-attributes/main.html   | 13 ++++++
 5 files changed, 39 insertions(+), 20 deletions(-)
 create mode 100644 test/server-side-rendering/component-refs-and-attributes/Widget.html
 create mode 100644 test/server-side-rendering/component-refs-and-attributes/_actual.html
 create mode 100644 test/server-side-rendering/component-refs-and-attributes/_expected.html
 create mode 100644 test/server-side-rendering/component-refs-and-attributes/main.html

diff --git a/src/generators/server-side-rendering/visitors/Component.js b/src/generators/server-side-rendering/visitors/Component.js
index 659aecdbf0c5..295a14a7c4da 100644
--- a/src/generators/server-side-rendering/visitors/Component.js
+++ b/src/generators/server-side-rendering/visitors/Component.js
@@ -8,29 +8,32 @@ export default {
 			}
 		}
 
-		const props = node.attributes.map( attribute => {
-			if ( attribute.type !== 'Attribute' ) return;
-
-			let value;
-
-			if ( attribute.value === true ) {
-				value = `true`;
-			} else if ( attribute.value.length === 0 ) {
-				value = `''`;
-			} else if ( attribute.value.length === 1 ) {
-				const chunk = attribute.value[0];
-				if ( chunk.type === 'Text' ) {
-					value = isNaN( parseFloat( chunk.data ) ) ? JSON.stringify( chunk.data ) : chunk.data;
+		const props = node.attributes
+			.map( attribute => {
+				if ( attribute.type !== 'Attribute' ) return;
+
+				let value;
+
+				if ( attribute.value === true ) {
+					value = `true`;
+				} else if ( attribute.value.length === 0 ) {
+					value = `''`;
+				} else if ( attribute.value.length === 1 ) {
+					const chunk = attribute.value[0];
+					if ( chunk.type === 'Text' ) {
+						value = isNaN( parseFloat( chunk.data ) ) ? JSON.stringify( chunk.data ) : chunk.data;
+					} else {
+						const { snippet } = generator.contextualise( chunk.expression );
+						value = snippet;
+					}
 				} else {
-					const { snippet } = generator.contextualise( chunk.expression );
-					value = snippet;
+					value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
 				}
-			} else {
-				value = '`' + attribute.value.map( stringify ).join( '' ) + '`';
-			}
 
-			return `${attribute.name}: ${value}`;
-		}).join( ', ' );
+				return `${attribute.name}: ${value}`;
+			})
+			.filter( Boolean )
+			.join( ', ' );
 
 		let open = `\${template.components.${node.name}.render({${props}}`;
 
diff --git a/test/server-side-rendering/component-refs-and-attributes/Widget.html b/test/server-side-rendering/component-refs-and-attributes/Widget.html
new file mode 100644
index 000000000000..f0d335dfc780
--- /dev/null
+++ b/test/server-side-rendering/component-refs-and-attributes/Widget.html
@@ -0,0 +1 @@
+<p>{{foo}}</p>
diff --git a/test/server-side-rendering/component-refs-and-attributes/_actual.html b/test/server-side-rendering/component-refs-and-attributes/_actual.html
new file mode 100644
index 000000000000..bc50561da119
--- /dev/null
+++ b/test/server-side-rendering/component-refs-and-attributes/_actual.html
@@ -0,0 +1 @@
+<div><p>42</p></div>
\ No newline at end of file
diff --git a/test/server-side-rendering/component-refs-and-attributes/_expected.html b/test/server-side-rendering/component-refs-and-attributes/_expected.html
new file mode 100644
index 000000000000..6e2823ce8f05
--- /dev/null
+++ b/test/server-side-rendering/component-refs-and-attributes/_expected.html
@@ -0,0 +1 @@
+<div><p>42</p></div>
diff --git a/test/server-side-rendering/component-refs-and-attributes/main.html b/test/server-side-rendering/component-refs-and-attributes/main.html
new file mode 100644
index 000000000000..b9b82910e3bc
--- /dev/null
+++ b/test/server-side-rendering/component-refs-and-attributes/main.html
@@ -0,0 +1,13 @@
+<div><Widget ref:widget foo='{{foo}}'/></div>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		components: { Widget },
+
+		data () {
+			return { foo: 42 }
+		}
+	};
+</script>