feat: inspect map without adding new data source

Author: tanhauhau

packages/svelte/src/reactivity/map.js

@@ -13,7 +13,6 @@ export class ReactiveMap extends Map {
 	/** @type {Map<K, import('#client').Source<V>>} */
 	#sources = new Map();
 	#version = source(0);
-	#inspect_version = source(0);
 	#size = source(0);
 
 	/**
@@ -40,9 +39,6 @@ export class ReactiveMap extends Map {
 	#increment_version() {
 		set(this.#version, this.#version.v + 1);
 	}
-	#increment_inspect_version() {
-		set(this.#inspect_version, this.#inspect_version.v + 1);
-	}
 
 	/** @param {K} key */
 	has(key) {
@@ -97,11 +93,8 @@ export class ReactiveMap extends Map {
 			sources.set(key, source(value));
 			set(this.#size, sources.size);
 			this.#increment_version();
-			this.#increment_inspect_version();
 		} else {
-			const old_version = s.version;
 			set(s, value);
-			if (s.version !== old_version) this.#increment_inspect_version();
 		}
 
 		return super.set(key, value);
@@ -117,7 +110,6 @@ export class ReactiveMap extends Map {
 			set(this.#size, sources.size);
 			set(s, /** @type {V} */ (UNINITIALIZED));
 			this.#increment_version();
-			this.#increment_inspect_version();
 		}
 
 		return super.delete(key);
@@ -132,7 +124,6 @@ export class ReactiveMap extends Map {
 				set(s, /** @type {V} */ (UNINITIALIZED));
 			}
 			this.#increment_version();
-			this.#increment_inspect_version();
 		}
 
 		sources.clear();
@@ -167,6 +158,12 @@ export class ReactiveMap extends Map {
 	}
 
 	[INSPECT_SYMBOL]() {
-		get(this.#inspect_version);
+		// changes could either introduced by
+		// - modifying the value, or
+		// - add / remove entries to the map
+		for (const [, source] of this.#sources) {
+			get(source);
+		}
+		get(this.#size);
 	}
 }

packages/svelte/tests/runtime-runes/samples/inspect-reactivity/_config.js

@@ -20,7 +20,7 @@ export default test({
 		]);
 		log.length = 0;
 
-		b1.click(); // map.set('key', 'value')
+		flushSync(() => b1.click()); // map.set('key', 'value')
 
 		in1.value = 'name';
 		in2.value = 'Svelte';
@@ -54,23 +54,23 @@ export default test({
 		]);
 		log.length = 0;
 
-		b2.click(); // set.add('name');
+		flushSync(() => b2.click()); // set.add('name');
 
 		in1.value = 'Svelte';
 		in1.dispatchEvent(new window.Event('input', { bubbles: true }));
-		b2.click(); // set.add('Svelte');
+		flushSync(() => b2.click()); // set.add('Svelte');
 
-		b2.click(); // set.add('Svelte');
+		flushSync(() => b2.click()); // set.add('Svelte');
 
 		assert.deepEqual(log, [
 			{ label: 'set', type: 'update', values: ['name'] },
 			{ label: 'set', type: 'update', values: ['name', 'Svelte'] }
 		]);
 		log.length = 0;
 
-		b3.click(); // date.minutes++
-		b3.click(); // date.minutes++
-		b3.click(); // date.minutes++
+		flushSync(() => b3.click()); // date.minutes++
+		flushSync(() => b3.click()); // date.minutes++
+		flushSync(() => b3.click()); // date.minutes++
 
 		assert.deepEqual(log, [
 			{ label: 'date', type: 'update', values: 1712966460000 },