From 007aee1f12a759b37f9e61f5a8c8672fc679c0c7 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sat, 8 Jul 2017 11:50:10 -0400
Subject: [PATCH] use anchor comments to preserve order in keyed each blocks
 with components (fixes #700)

---
 src/generators/dom/visitors/EachBlock.ts      |  2 +-
 .../each-block-keyed-unshift/Nested.html      |  1 +
 .../each-block-keyed-unshift/_config.js       | 24 +++++++++++++++++++
 .../each-block-keyed-unshift/main.html        | 13 ++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/Nested.html
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-unshift/main.html

diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index a4baec1795..7b232b6ef2 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -163,7 +163,7 @@ function keyed(
 	block.addVariable(head);
 	block.addVariable(last);
 
-	if (node.children[0] && node.children[0].type === 'Element') {
+	if (node.children[0] && node.children[0].type === 'Element' && !generator.components.has(node.children[0].name)) {
 		// TODO or text/tag/raw
 		node._block.first = node.children[0]._state.parentNode; // TODO this is highly confusing
 	} else {
diff --git a/test/runtime/samples/each-block-keyed-unshift/Nested.html b/test/runtime/samples/each-block-keyed-unshift/Nested.html
new file mode 100644
index 0000000000..53ccc03d4a
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/Nested.html
@@ -0,0 +1 @@
+<p>{{title}}</p>
\ No newline at end of file
diff --git a/test/runtime/samples/each-block-keyed-unshift/_config.js b/test/runtime/samples/each-block-keyed-unshift/_config.js
new file mode 100644
index 0000000000..23e659c622
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/_config.js
@@ -0,0 +1,24 @@
+export default {
+	data: {
+		titles: [{ name: 'b' }, { name: 'c' }]
+	},
+
+	html: `
+		<p>b</p>
+		<p>c</p>
+	`,
+
+	test (assert, component, target) {
+		component.set({
+			titles: [{ name: 'a' }, { name: 'b' }, { name: 'c' }]
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+		`);
+
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-unshift/main.html b/test/runtime/samples/each-block-keyed-unshift/main.html
new file mode 100644
index 0000000000..854e77ae6f
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-unshift/main.html
@@ -0,0 +1,13 @@
+{{#each titles as title @name}}
+	<Nested title="{{title.name}}"/>
+{{/each}}
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		}
+	};
+</script>
\ No newline at end of file