use anchor comments to preserve order in keyed each blocks with components

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 {

test/runtime/samples/each-block-keyed-unshift/Nested.html

@@ -0,0 +1 @@
+<p>{{title}}</p>

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();
+	}
+};

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>