Add tests to deal with bind:this with 'lazily-evaluated' iterables

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

@@ -114,7 +114,10 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*comments, elapsed, time*/ 7) {
-				each_value = ensure_array_like(/*comments*/ ctx[0]);
+				if (dirty & /*comments*/ 1) {
+					each_value = ensure_array_like(/*comments*/ ctx[0]);
+				}
+
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
@@ -171,4 +174,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;

packages/svelte/test/runtime/samples/each-block-bind-this-1/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `
+		<p>0</p><p>1</p><p>2</p>
+	`,
+
+	async test({ assert, window, component, target }) {
+		const pArray = target.querySelectorAll('p');
+		assert.equal(component.bindings[0], pArray[0]);
+		assert.equal(component.bindings[1], pArray[1]);
+		assert.equal(component.bindings[2], pArray[2]);
+	}
+};

packages/svelte/test/runtime/samples/each-block-bind-this-1/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let arrFunc = () => {
+		return [{ value: 0 }, { value: 1 }, { value: 2 }];
+	};
+	export let bindings = [];
+</script>
+
+{#each arrFunc() as obj}
+	<p bind:this={bindings[obj.value]}>{obj.value}</p>
+{/each}

packages/svelte/test/runtime/samples/each-block-bind-this-2/_config.js

@@ -0,0 +1,19 @@
+export default {
+	html: `
+		<button>Flip</button><p>1</p>
+	`,
+
+	async test({ assert, window, component, target }) {
+		const p1 = target.querySelector('p');
+		assert.equal(component.bindings[1], p1);
+
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+
+		await button.dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, '<button>Flip</button><p>2</p>');
+
+		const p2 = target.querySelector('p');
+		assert.equal(component.bindings[2], p2);
+	}
+};

packages/svelte/test/runtime/samples/each-block-bind-this-2/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let flip = true;
+	let arrFunc = () => {
+		flip = !flip;
+		if (!flip) {
+			return [{ value: 1 }];
+		} else {
+			return [{ value: 2 }];
+		}
+	};
+	export let bindings = {};
+</script>
+
+<button
+	on:click={() => {
+		arrFunc = arrFunc;
+	}}>Flip</button
+>
+{#each arrFunc() as { value }}
+	<p bind:this={bindings[value]}>{value}</p>
+{/each}

packages/svelte/test/runtime/samples/each-block-bind-this-3/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `
+    <p>10</p><p>20</p><p>30</p>
+	`,
+
+	async test({ assert, window, component, target }) {
+		const pArray = target.querySelectorAll('p');
+		assert.equal(component.bindings[10], pArray[0]);
+		assert.equal(component.bindings[20], pArray[1]);
+		assert.equal(component.bindings[30], pArray[2]);
+	}
+};

packages/svelte/test/runtime/samples/each-block-bind-this-3/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	export let bindings = {};
+</script>
+
+{#each [{ outer: [10] }, { outer: [20] }, { outer: [30] }] as { outer } }
+	<p bind:this={bindings[outer[0]]}>{outer[0]}</p>
+{/each}

packages/svelte/test/runtime/samples/each-block-bind-this-4/_config.js

@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<button>Flip</button><p>1</p><p>2</p>
+	`,
+
+	async test({ assert, window, component, target }) {
+		const pArray1 = target.querySelectorAll('p');
+		assert.equal(component.bindings['hello'], pArray1[0]);
+		assert.equal(component.bindings['goodbye'], pArray1[1]);
+
+		const button = target.querySelector('button');
+		const event = new window.MouseEvent('click');
+		await button.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, '<button>Flip</button><p>-1</p><p>-2</p>');
+
+		const pArray2 = target.querySelectorAll('p');
+		assert.equal(component.bindings['olleh'], pArray2[0]);
+		assert.equal(component.bindings['eybdoog'], pArray2[1]);
+		assert.equal(component.bindings['hello'], null);
+		assert.equal(component.bindings['goodbye'], null);
+	}
+};

packages/svelte/test/runtime/samples/each-block-bind-this-4/main.svelte

@@ -0,0 +1,25 @@
+<script>
+	let flip = true;
+	let arrIterable = {
+    *[Symbol.iterator]() { 
+		  flip = !flip;
+		  if (!flip) {
+        yield [{ key: 'hello' }, { value: 1 }];
+        yield [{ key: 'goodbye' }, { value: 2 }];
+		  } else {
+        yield [{ key: 'olleh' }, { value: -1 }];
+        yield [{ key: 'eybdoog' }, { value: -2 }];
+		  }
+    }
+	};
+	export let bindings = {};
+</script>
+
+<button
+	on:click={() => {
+		arrIterable = arrIterable;
+	}}>Flip</button
+>
+{#each arrIterable as [key, value]}
+	<p bind:this={bindings[key.key]}>{value.value}</p>
+{/each}

packages/svelte/test/runtime/samples/each-block-bind-this-5/_config.js

@@ -0,0 +1,12 @@
+export default {
+	html: `
+    <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p>
+	`,
+
+	async test({ assert, window, component, target }) {
+		const pArray = target.querySelectorAll('p');
+    for (let i = 0; i <= 9; i++) {
+		  assert.equal(component.bindings[i], pArray[i]);
+    }
+	}
+};

packages/svelte/test/runtime/samples/each-block-bind-this-5/main.svelte

@@ -0,0 +1,14 @@
+<script>
+	const set = new Set();
+  set.add(new Set([...'0123'].map(i => ([i]))));
+  set.add(new Set([...'456'].map(i => ([i]))));
+  set.add(new Set([...'789'].map(i => ([i]))));
+
+  export let bindings = [];
+</script>
+
+{#each set as newSet}
+  {#each newSet as piece}
+    <p bind:this={bindings[piece[0]]}>{piece[0]}</p>
+  {/each}
+{/each}