From 9edd2df0d36c302feec36ba2851268def850389c Mon Sep 17 00:00:00 2001
From: 4eb0da <4eb0da@users.noreply.github.com>
Date: Mon, 27 Feb 2023 15:36:57 +0300
Subject: [PATCH] fix: check each_blocks is empty on mount (#7505)

fixes #8282
---
 .../compile/render_dom/wrappers/EachBlock.ts  |  8 ++-
 .../debug-foo-bar-baz-things/expected.js      |  4 +-
 test/js/samples/debug-foo/expected.js         |  4 +-
 .../samples/debug-no-dependencies/expected.js |  4 +-
 .../samples/deconflict-builtins/expected.js   |  4 +-
 .../each-block-array-literal/expected.js      |  4 +-
 .../each-block-changed-check/expected.js      |  6 ++-
 .../each-block-keyed-animated/expected.js     |  4 +-
 test/js/samples/each-block-keyed/expected.js  |  4 +-
 .../Child.svelte                              | 21 ++++++++
 .../InnerChild.svelte                         | 14 +++++
 .../_config.js                                | 53 +++++++++++++++++++
 .../main.svelte                               | 35 ++++++++++++
 .../Child.svelte                              | 21 ++++++++
 .../InnerChild.svelte                         | 14 +++++
 .../_config.js                                | 53 +++++++++++++++++++
 .../main.svelte                               | 35 ++++++++++++
 17 files changed, 277 insertions(+), 11 deletions(-)
 create mode 100644 test/runtime/samples/component-binding-each-remount-keyed/Child.svelte
 create mode 100644 test/runtime/samples/component-binding-each-remount-keyed/InnerChild.svelte
 create mode 100644 test/runtime/samples/component-binding-each-remount-keyed/_config.js
 create mode 100644 test/runtime/samples/component-binding-each-remount-keyed/main.svelte
 create mode 100644 test/runtime/samples/component-binding-each-remount-unkeyed/Child.svelte
 create mode 100644 test/runtime/samples/component-binding-each-remount-unkeyed/InnerChild.svelte
 create mode 100644 test/runtime/samples/component-binding-each-remount-unkeyed/_config.js
 create mode 100644 test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index 0c49c38028..1032f4c6e3 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/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});
+				}
 			}
 		`);
 
diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js
index 02be04c26e..0b0a41abe2 100644
--- a/test/js/samples/debug-foo-bar-baz-things/expected.js
+++ b/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);
diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js
index 84dedb0a91..637a229a97 100644
--- a/test/js/samples/debug-foo/expected.js
+++ b/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);
diff --git a/test/js/samples/debug-no-dependencies/expected.js b/test/js/samples/debug-no-dependencies/expected.js
index 8107b890a6..e9e4d34a11 100644
--- a/test/js/samples/debug-no-dependencies/expected.js
+++ b/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);
diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js
index 8c9bb83b5b..7e5263e8b3 100644
--- a/test/js/samples/deconflict-builtins/expected.js
+++ b/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);
diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js
index bb5a04e952..575cf1bba7 100644
--- a/test/js/samples/each-block-array-literal/expected.js
+++ b/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);
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
index e91f77ecd8..9e69dffd54 100644
--- a/test/js/samples/each-block-changed-check/expected.js
+++ b/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);
@@ -170,4 +172,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;
\ No newline at end of file
diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js
index 6f7c22a086..7edfa77b18 100644
--- a/test/js/samples/each-block-keyed-animated/expected.js
+++ b/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);
diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js
index a275697d8e..a6357cbf77 100644
--- a/test/js/samples/each-block-keyed/expected.js
+++ b/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);
diff --git a/test/runtime/samples/component-binding-each-remount-keyed/Child.svelte b/test/runtime/samples/component-binding-each-remount-keyed/Child.svelte
new file mode 100644
index 0000000000..e6cbf9d1d0
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/component-binding-each-remount-keyed/InnerChild.svelte b/test/runtime/samples/component-binding-each-remount-keyed/InnerChild.svelte
new file mode 100644
index 0000000000..f0b5d57a82
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-remount-keyed/_config.js b/test/runtime/samples/component-binding-each-remount-keyed/_config.js
new file mode 100644
index 0000000000..181c1bce8b
--- /dev/null
+++ b/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>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-each-remount-keyed/main.svelte b/test/runtime/samples/component-binding-each-remount-keyed/main.svelte
new file mode 100644
index 0000000000..7f4c448d8f
--- /dev/null
+++ b/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}
diff --git a/test/runtime/samples/component-binding-each-remount-unkeyed/Child.svelte b/test/runtime/samples/component-binding-each-remount-unkeyed/Child.svelte
new file mode 100644
index 0000000000..8b7edc10f4
--- /dev/null
+++ b/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>
diff --git a/test/runtime/samples/component-binding-each-remount-unkeyed/InnerChild.svelte b/test/runtime/samples/component-binding-each-remount-unkeyed/InnerChild.svelte
new file mode 100644
index 0000000000..f0b5d57a82
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-each-remount-unkeyed/_config.js b/test/runtime/samples/component-binding-each-remount-unkeyed/_config.js
new file mode 100644
index 0000000000..181c1bce8b
--- /dev/null
+++ b/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>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte b/test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte
new file mode 100644
index 0000000000..7f4c448d8f
--- /dev/null
+++ b/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}