From 0da242edf54c35952b42fef90859d4858bfc6499 Mon Sep 17 00:00:00 2001
From: 4eb0da <garret.rus@gmail.com>
Date: Tue, 3 May 2022 19:04:57 +0300
Subject: [PATCH] [fix] check each_blocks is empty on mount

---
 .../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                                | 39 +++++++++++++++++++
 .../main.svelte                               | 37 ++++++++++++++++++
 .../Child.svelte                              | 21 ++++++++++
 .../InnerChild.svelte                         | 14 +++++++
 .../_config.js                                | 39 +++++++++++++++++++
 .../main.svelte                               | 37 ++++++++++++++++++
 17 files changed, 253 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 db7929e51b..0d3ad1a702 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 3377d35018..e6bddbb686 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 518897c237..f12fe23cb9 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..97ea7670ad
--- /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..8ef7d6fac6
--- /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..3cec1a2d6b
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-remount-keyed/_config.js
@@ -0,0 +1,39 @@
+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 }) {
+		await component.done;
+		assert.equal(component.getCounter(), 13);
+	}
+};
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..fd48176696
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-remount-keyed/main.svelte
@@ -0,0 +1,37 @@
+<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];
+    let instances = [];
+    let count = 3;
+
+    let increment = () => {
+		++updateCounter;
+    };
+
+    onMount(() => {
+        console.log(instances);
+
+        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..6b01368e24
--- /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..8ef7d6fac6
--- /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..3cec1a2d6b
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-remount-unkeyed/_config.js
@@ -0,0 +1,39 @@
+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 }) {
+		await component.done;
+		assert.equal(component.getCounter(), 13);
+	}
+};
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..fd48176696
--- /dev/null
+++ b/test/runtime/samples/component-binding-each-remount-unkeyed/main.svelte
@@ -0,0 +1,37 @@
+<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];
+    let instances = [];
+    let count = 3;
+
+    let increment = () => {
+		++updateCounter;
+    };
+
+    onMount(() => {
+        console.log(instances);
+
+        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}