fix 8282

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

@@ -448,7 +448,7 @@ 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});
+				${iterations}[#i] && ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
 			}
 		`);
 
@@ -542,7 +542,7 @@ 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});
+				${iterations}[#i] && ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
 			}
 		`);
 

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

@@ -114,7 +114,7 @@ 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);
+				each_blocks[i] && each_blocks[i].m(target, anchor);
 			}
 
 			insert_dev(target, t0, anchor);

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

@@ -108,7 +108,7 @@ 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);
+				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,7 @@ 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);
+				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,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				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,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < 5; i += 1) {
-				each_blocks[i].m(target, anchor);
+				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,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				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,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				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,7 @@ function create_fragment(ctx) {
 		},
 		m(target, anchor) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(target, anchor);
+				each_blocks[i] && each_blocks[i].m(target, anchor);
 			}
 
 			insert(target, each_1_anchor, anchor);

test/runtime/samples/each-blocks-nested-c/_config.js

@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<button>click</button>
+		<table>
+			<tr>
+				<td><span>1-a</span></td>
+				<td><span>1-b</span></td>
+				<td><span>1-c</span></td>
+			</tr>
+			<tr>
+				<td><span>2-a</span></td>
+				<td><span>2-b</span></td>
+				<td><span>2-c</span></td>
+			</tr>
+			<tr>
+				<td><span>3-a</span></td>
+				<td><span>3-b</span></td>
+				<td><span>3-c</span></td>
+			</tr>
+		</table>`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>click</button>
+			<table>
+			  <tr>
+				  <td><span>1-a</span></td>
+					<td><span>1-c</span></td>
+				</tr>
+				<tr>
+					<td><span>3-a</span></td>
+					<td><span>3-c</span></td>
+				</tr>
+				<tr>
+					<td><span>2-a</span></td>
+					<td><span>2-c</span></td>
+				</tr>
+			</table>
+		`);
+	}
+};

test/runtime/samples/each-blocks-nested-c/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Sub from './sub.svelte';
+
+	export let columns = ['a', 'b', 'c'];
+	export let rows = ['1', '2', '3'];
+
+	function onClick() {
+		columns = ['a', 'c'];
+		rows = ['1', '3',  '2'];
+	}
+</script>
+
+<button on:click={onClick}>click</button>
+
+<table>
+	{#each rows as row (row)}
+	<tr>
+		{#each columns as column}
+			<td>
+				<Sub {row} {column} />
+			</td>
+		{/each}
+	</tr>
+	{/each}
+</table>

test/runtime/samples/each-blocks-nested-c/sub.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let row;
+	export let column;
+</script>
+<span>{row}-{column}</span>

test/runtime/samples/each-blocks-nested-d/_config.js

@@ -0,0 +1,43 @@
+export default {
+	html: `
+		<button>click</button>
+		<table>
+			<tr>
+				<td><span>1-a</span></td>
+				<td><span>1-b</span></td>
+				<td><span>1-c</span></td>
+			</tr>
+			<tr>
+				<td><span>2-a</span></td>
+				<td><span>2-b</span></td>
+				<td><span>2-c</span></td>
+			</tr>
+			<tr>
+				<td><span>3-a</span></td>
+				<td><span>3-b</span></td>
+				<td><span>3-c</span></td>
+			</tr>
+		</table>`,
+	async test({ assert, target, window }) {
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>click</button>
+			<table>
+			  <tr>
+				  <td><span>1-a</span></td>
+					<td><span>1-c</span></td>
+				</tr>
+				<tr>
+					<td><span>3-a</span></td>
+					<td><span>3-c</span></td>
+				</tr>
+				<tr>
+					<td><span>2-a</span></td>
+					<td><span>2-c</span></td>
+				</tr>
+			</table>
+		`);
+	}
+};

test/runtime/samples/each-blocks-nested-d/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	import Sub from './sub.svelte';
+
+	export let columns = ['a', 'b', 'c'];
+	export let rows = ['1', '2', '3'];
+
+	function onClick() {
+		columns = ['a', 'c'];
+		rows = ['1', '3',  '2'];
+	}
+</script>
+
+<button on:click={onClick}>click</button>
+
+<table>
+	{#each rows as row}
+	<tr>
+		{#each columns as column}
+			<td>
+				<Sub {row} {column} />
+			</td>
+		{/each}
+	</tr>
+	{/each}
+</table>

test/runtime/samples/each-blocks-nested-d/sub.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let row;
+	export let column;
+</script>
+<span>{row}-{column}</span>