Merge pull request #3106 from sveltejs/gh-3035

remove components without props from each block

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -444,14 +444,26 @@ export default class EachBlockWrapper extends Wrapper {
 						${iterations}[#i].m(${update_mount_node}, ${anchor});
 					}
 				`
-				: deindent`
-					${iterations}[#i] = ${create_each_block}(child_ctx);
-					${iterations}[#i].c();
-					${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`}
-					${iterations}[#i].m(${update_mount_node}, ${anchor});
-				`;
+				: has_transitions
+					? deindent`
+						if (${iterations}[#i]) {
+							@transition_in(${this.vars.iterations}[#i], 1);
+						} else {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							@transition_in(${this.vars.iterations}[#i], 1);
+							${iterations}[#i].m(${update_mount_node}, ${anchor});
+						}
+					`
+					: deindent`
+						if (!${iterations}[#i]) {
+							${iterations}[#i] = ${create_each_block}(child_ctx);
+							${iterations}[#i].c();
+							${iterations}[#i].m(${update_mount_node}, ${anchor});
+						}
+					`;
 
-			const start = this.block.has_update_method ? '0' : `${view_length}`;
+			const start = this.block.has_update_method ? '0' : `#old_length`;
 
 			let remove_old_blocks;
 
@@ -465,12 +477,12 @@ export default class EachBlockWrapper extends Wrapper {
 				`);
 				remove_old_blocks = deindent`
 					@group_outros();
-					for (; #i < ${view_length}; #i += 1) ${out}(#i);
+					for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) ${out}(#i);
 					@check_outros();
 				`;
 			} else {
 				remove_old_blocks = deindent`
-					for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) {
+					for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) {
 						${iterations}[#i].d(1);
 					}
 					${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`}
@@ -478,6 +490,7 @@ export default class EachBlockWrapper extends Wrapper {
 			}
 
 			const update = deindent`
+				${!this.block.has_update_method && `const #old_length = ${this.vars.each_block_value}.length;`}
 				${this.vars.each_block_value} = ${snippet};
 
 				for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {

test/runtime/samples/each-block-component-no-props/Child.svelte

@@ -0,0 +1 @@
+<p>hello</p>

test/runtime/samples/each-block-component-no-props/_config.js

@@ -0,0 +1,16 @@
+export default {
+	html: `
+		<p>hello</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, ``);
+
+		await component.add();
+		assert.htmlEqual(target.innerHTML, `<p>hello</p>`);
+
+		await component.remove();
+		assert.htmlEqual(target.innerHTML, ``);
+	}
+};

test/runtime/samples/each-block-component-no-props/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Child from './Child.svelte';
+
+	let items = [1];
+
+	export function add() {
+		items = [1];
+	}
+
+	export function remove() {
+		items = [];
+	}
+</script>
+
+{#each items as item}
+	<Child/>
+{/each}