fix: check each_blocks is empty on mount (#7505)

fixes #8282

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

@@ -448,7 +448,9 @@ export default class EachBlockWrapper extends Wrapper {
 
 		block.chunks.mount.push(b`
 			for (let #i = 0; #i < ${view_length}; #i += 1) {
-				${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+				if (${iterations}[#i]) {
+					${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+				}
 			}
 		`);
 
@@ -542,7 +544,9 @@ export default class EachBlockWrapper extends Wrapper {
 
 		block.chunks.mount.push(b`
 			for (let #i = 0; #i < ${view_length}; #i += 1) {
-				${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+				if (${iterations}[#i]) {
+					${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
+				}
 			}
 		`);
 

test/js/samples/debug-foo-bar-baz-things/expected.js

@@ -114,7 +114,9 @@ function create_fragment(ctx) {
 		},
 		m: function mount(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert_dev(target, t0, anchor);

test/js/samples/debug-foo/expected.js

@@ -108,7 +108,9 @@ function create_fragment(ctx) {
 		},
 		m: function mount(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert_dev(target, t0, anchor);

test/js/samples/debug-no-dependencies/expected.js

@@ -86,7 +86,9 @@ function create_fragment(ctx) {
 		},
 		m: function mount(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert_dev(target, each_1_anchor, anchor);

test/js/samples/deconflict-builtins/expected.js

@@ -63,7 +63,9 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, each_1_anchor, anchor);

test/js/samples/each-block-array-literal/expected.js

@@ -63,7 +63,9 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < 5; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, each_1_anchor, anchor);

test/js/samples/each-block-changed-check/expected.js

@@ -104,7 +104,9 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, t0, anchor);

test/js/samples/each-block-keyed-animated/expected.js

@@ -87,7 +87,9 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, each_1_anchor, anchor);

test/js/samples/each-block-keyed/expected.js

@@ -72,7 +72,9 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				if (each_blocks[i]) {
+					each_blocks[i].m(target, anchor);
+				}
 			}
 
 			insert(target, each_1_anchor, anchor);

test/runtime/samples/component-binding-each-remount-keyed/Child.svelte

@@ -0,0 +1,21 @@
+<script>
+	import InnerChild from './InnerChild.svelte';
+
+	export let id = 1;
+	export let count;
+	export let increment;
+
+	let list;
+	$: {
+		list = [];
+		for (let i = 0; i < count; ++i) {
+			list.push(i);
+		}
+	}
+</script>
+
+<div data-id={id}>
+	{#each list as item (item)}
+		<InnerChild val={item} {increment} />
+	{/each}
+</div>

test/runtime/samples/component-binding-each-remount-keyed/InnerChild.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let val = 1;
+	export let increment;
+
+	afterUpdate(() => {
+		increment();
+	});
+</script>
+
+<inner>
+	{val}
+</inner>

test/runtime/samples/component-binding-each-remount-keyed/_config.js

@@ -0,0 +1,53 @@
+export default {
+	html: `
+		<div data-id="1">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+		<div data-id="2">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+		<div data-id="3">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div data-id="1">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+		<div data-id="2">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+		<div data-id="3">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.done;
+		assert.equal(component.getCounter(), 13);
+		assert.htmlEqual(target.innerHTML, `
+			<div data-id="3">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+			<div data-id="2">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+			<div data-id="1">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+		`);
+	}
+};

test/runtime/samples/component-binding-each-remount-keyed/main.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { onMount } from 'svelte';
+	import Child from './Child.svelte';
+
+	let updateCounter = 0;
+	let promiseResolve;
+	export const done = new Promise(resolve => {
+		promiseResolve = resolve;
+	});
+	export const getCounter = () => {
+		return updateCounter;
+	};
+
+	let vals = [1, 2, 3];
+	const instances = [];
+	let count = 3;
+
+	const increment = () => {
+		++updateCounter;
+	};
+
+	onMount(() => {
+		count = 2;
+
+		setTimeout(() => {
+			vals = vals.reverse();
+
+			setTimeout(promiseResolve);
+		});
+	});
+</script>
+
+{#each vals as val, index (val)}
+	<Child bind:this={instances[index]} id={val} {count} {increment} />
+{/each}

test/runtime/samples/component-binding-each-remount-unkeyed/Child.svelte

@@ -0,0 +1,21 @@
+<script>
+	import InnerChild from './InnerChild.svelte';
+
+	export let id = 1;
+	export let count;
+	export let increment;
+
+	let list;
+	$: {
+		list = [];
+		for (let i = 0; i < count; ++i) {
+			list.push(i);
+		}
+	}
+</script>
+
+<div data-id={id}>
+	{#each list as item}
+		<InnerChild val={item} {increment} />
+	{/each}
+</div>

test/runtime/samples/component-binding-each-remount-unkeyed/InnerChild.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { afterUpdate } from 'svelte';
+
+	export let val = 1;
+	export let increment;
+
+	afterUpdate(() => {
+		increment();
+	});
+</script>
+
+<inner>
+	{val}
+</inner>

test/runtime/samples/component-binding-each-remount-unkeyed/_config.js

@@ -0,0 +1,53 @@
+export default {
+	html: `
+		<div data-id="1">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+		<div data-id="2">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+		<div data-id="3">
+			<inner>0</inner>
+			<inner>1</inner>
+		</div>
+	`,
+
+	ssrHtml: `
+		<div data-id="1">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+		<div data-id="2">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+		<div data-id="3">
+			<inner>0</inner>
+			<inner>1</inner>
+			<inner>2</inner>
+		</div>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.done;
+		assert.equal(component.getCounter(), 13);
+		assert.htmlEqual(target.innerHTML, `
+			<div data-id="3">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+			<div data-id="2">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+			<div data-id="1">
+				<inner>0</inner>
+				<inner>1</inner>
+			</div>
+		`);
+	}
+};

test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { onMount } from 'svelte';
+	import Child from './Child.svelte';
+
+	let updateCounter = 0;
+	let promiseResolve;
+	export const done = new Promise(resolve => {
+		promiseResolve = resolve;
+	});
+	export const getCounter = () => {
+		return updateCounter;
+	};
+
+	let vals = [1, 2, 3];
+	const instances = [];
+	let count = 3;
+
+	const increment = () => {
+		++updateCounter;
+	};
+
+	onMount(() => {
+		count = 2;
+
+		setTimeout(() => {
+			vals = vals.reverse();
+
+			setTimeout(promiseResolve);
+		});
+	});
+</script>
+
+{#each vals as val, index (val)}
+	<Child bind:this={instances[index]} id={val} {count} {increment} />
+{/each}