fix: ensure each key validation occurs for updates (#12836)

* fix: ensure each key validation occurs for updates

* fix: ensure each key validation occurs for updates

.changeset/tame-dodos-float.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure each key validation occurs for updates

packages/svelte/src/internal/client/validate.js

@@ -45,8 +45,9 @@ export function validate_dynamic_component(component_fn) {
  * @returns {void}
  */
 export function validate_each_keys(collection, key_fn) {
+	render_effect(() => {
 		const keys = new Map();
-	const maybe_array = untrack(() => collection());
+		const maybe_array = collection();
 		const array = is_array(maybe_array)
 			? maybe_array
 			: maybe_array == null
@@ -67,6 +68,7 @@ export function validate_each_keys(collection, key_fn) {
 			}
 			keys.set(key, i);
 		}
+	});
 }
 
 /**

packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, /each_key_duplicate/);
+	}
+});

packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	let data = [
+		[0, 0],
+		[0, 4],
+		[1, 4],
+	];
+
+	function add() {
+		const n = [0, 0]
+		data.push(n);
+		data = data;
+	}
+</script>
+
+<button onclick={add}>add</button>
+
+<ul>
+		{#each data as d (d.join(""))}
+			<li> {d}</li>
+		{/each}
+</ul>