Merge pull request #1309 from sveltejs/gh-1306

ensure correct order of DOM insertions with neighbouring keyed each blocks

Author: Rich-Harris

src/generators/nodes/EachBlock.ts

@@ -298,7 +298,7 @@ export default class EachBlock extends Node {
 		block.builders.update.addBlock(deindent`
 			var ${each_block_value} = ${snippet};
 
-			${blocks} = @updateKeyedEach(${blocks}, #component, changed, "${this.key}", ${dynamic ? '1' : '0'}, ${each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", function(#i) {
+			${blocks} = @updateKeyedEach(${blocks}, #component, changed, "${this.key}", ${dynamic ? '1' : '0'}, ${each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, function(#i) {
 				return @assign(@assign({}, state), {
 					${this.contextProps.join(',\n')}
 				});

src/shared/keyed-each.js

@@ -10,7 +10,7 @@ export function outroAndDestroyBlock(block, lookup) {
 	});
 }
 
-export function updateKeyedEach(old_blocks, component, changed, key_prop, dynamic, list, lookup, node, has_outro, create_each_block, intro_method, get_context) {
+export function updateKeyedEach(old_blocks, component, changed, key_prop, dynamic, list, lookup, node, has_outro, create_each_block, intro_method, next, get_context) {
 	var o = old_blocks.length;
 	var n = list.length;
 
@@ -39,16 +39,15 @@ export function updateKeyedEach(old_blocks, component, changed, key_prop, dynami
 		if (key in old_indexes) deltas[key] = Math.abs(i - old_indexes[key]);
 	}
 
-	var next = null;
-
 	var will_move = {};
 	var did_move = {};
 
 	var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
 
 	function insert(block) {
-		block[intro_method](node, next && next.first);
-		next = lookup[block.key] = block;
+		block[intro_method](node, next);
+		lookup[block.key] = block;
+		next = block.first;
 		n--;
 	}
 
@@ -60,7 +59,7 @@ export function updateKeyedEach(old_blocks, component, changed, key_prop, dynami
 
 		if (new_block === old_block) {
 			// do nothing
-			next = new_block;
+			next = new_block.first;
 			o--;
 			n--;
 		}

test/runtime/samples/each-block-keyed-siblings/_config.js

@@ -0,0 +1,22 @@
+export default {
+	data: {
+		ones: [{ text: '1' }],
+		twos: [{ text: '2' }],
+	},
+
+	html: `
+		<div>1</div>
+		<div>2</div>
+	`,
+
+	test(assert, component, target) {
+		component.set({
+			ones: [{ text: '11' }]
+		});
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>11</div>
+			<div>2</div>
+		`);
+	},
+};

test/runtime/samples/each-block-keyed-siblings/main.html

@@ -0,0 +1,7 @@
+{{#each ones as one @text}}
+	<div>{{one.text}}</div>
+{{/each}}
+
+{{#each twos as two @text}}
+	<div>{{two.text}}</div>
+{{/each}}