fix: increment version when creating new source in Map.get or Map.has (#11913)

Closes #11909

Author: paoloricciuti

.changeset/cold-beans-tease.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: increment version when creating new source in Map.get or Map.has

packages/svelte/src/reactivity/map.js

@@ -45,6 +45,7 @@ export class ReactiveMap extends Map {
 			if (ret !== undefined) {
 				s = source(Symbol());
 				sources.set(key, s);
+				this.#increment_version();
 			} else {
 				// We should always track the version in case
 				// the Set ever gets this value in the future.
@@ -77,6 +78,7 @@ export class ReactiveMap extends Map {
 			if (ret !== undefined) {
 				s = source(Symbol());
 				sources.set(key, s);
+				this.#increment_version();
 			} else {
 				// We should always track the version in case
 				// the Set ever gets this value in the future.

packages/svelte/tests/runtime-runes/samples/reactive-map/_config.js

@@ -2,49 +2,67 @@ import { flushSync } from '../../../../src/index-client';
 import { test } from '../../test';
 
 export default test({
-	html: `<button>add</button><button>delete</button><button>clear</button>`,
+	html: `<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:0</div>`,
 
 	test({ assert, target }) {
-		const [btn, btn2, btn3] = target.querySelectorAll('button');
+		const [btn, btn2, btn3, btn4, btn5] = target.querySelectorAll('button');
 
 		flushSync(() => {
 			btn?.click();
 		});
 
 		assert.htmlEqual(
 			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div>`
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:1</div>`
 		);
 
 		flushSync(() => {
-			btn?.click();
+			btn2?.click();
 		});
 
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:0</div>`
+		);
+
 		flushSync(() => {
-			btn?.click();
+			btn3?.click();
 		});
 
 		assert.htmlEqual(
 			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div><div>2:2</div><div>3:3</div>`
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:0</div><div>2:2</div>`
 		);
 
 		flushSync(() => {
-			btn2?.click();
+			btn3?.click();
+		});
+
+		flushSync(() => {
+			btn3?.click();
 		});
 
 		assert.htmlEqual(
 			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button><div>1:1</div><div>2:2</div>`
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:0</div><div>2:2</div><div>3:3</div><div>4:4</div>`
 		);
 
 		flushSync(() => {
-			btn3?.click();
+			btn4?.click();
+		});
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button><div>0:0</div><div>2:2</div><div>3:3</div>`
+		);
+
+		flushSync(() => {
+			btn5?.click();
 		});
 
 		assert.htmlEqual(
 			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button>`
+			`<button>set if</button><button>set if 1</button><button>add</button><button>delete</button><button>clear</button>`
 		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/reactive-map/main.svelte

@@ -1,20 +1,46 @@
 <script>
-	import {Map} from 'svelte/reactivity';
+	import { Map } from 'svelte/reactivity';
 
-	let state = new Map();
+	let state = new Map([[0, 0]]);
 </script>
 
-<button onclick={() => {
-	state.set(state.size + 1, state.size + 1);
-}}>add</button>
+<button
+	onclick={() => {
+		if (state.has(0)) {
+			state.set(0, 1);
+		}
+	}}
+>
+	set if
+</button>
 
-<button onclick={() => {
-	state.delete(state.size);
-}}>delete</button>
+<button
+	onclick={() => {
+		if (state.get(0) === 1) {
+			state.set(0, 0);
+		}
+	}}
+>
+	set if 1
+</button>
 
-<button onclick={() => {
-	state.clear();
-}}>clear</button>
+<button
+	onclick={() => {
+		state.set(state.size + 1, state.size + 1);
+	}}>add</button
+>
+
+<button
+	onclick={() => {
+		state.delete(state.size);
+	}}>delete</button
+>
+
+<button
+	onclick={() => {
+		state.clear();
+	}}>clear</button
+>
 
 {#each state as [key, value]}
 	<div>{key}:{value}</div>