fix: lazily create sources for Set (#11946)

* fix: create sources for initial values of Set

* fix: create sources lazily on Set

* fix: avoid creating sources if sizes are the same

* chore: add test for size of Set

* create iterator lazily

* tidy up test

* oops

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/thin-spoons-float.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: create sources on read for Set

packages/svelte/src/reactivity/set.js

@@ -47,6 +47,7 @@ export class ReactiveSet extends Set {
 		for (const method of read_methods) {
 			// @ts-ignore
 			proto[method] = function (...v) {
+				this.#read_all();
 				get(this.#version);
 				// @ts-ignore
 				return set_proto[method].apply(this, v);
@@ -86,6 +87,23 @@ export class ReactiveSet extends Set {
 		return super.has(value);
 	}
 
+	#read_all() {
+		var sources = this.#sources;
+
+		if (sources.size !== super.size) {
+			for (let value of super.values()) {
+				var s = sources.get(value);
+
+				if (s === undefined) {
+					s = source(true);
+					sources.set(value, s);
+				}
+
+				get(s);
+			}
+		}
+	}
+
 	/** @param {T} value */
 	add(value) {
 		var sources = this.#sources;
@@ -93,7 +111,6 @@ export class ReactiveSet extends Set {
 		var s = sources.get(value);
 
 		if (s === undefined) {
-			sources.set(value, source(true));
 			set(this.#size, super.size);
 			increment(this.#version);
 		} else {
@@ -134,16 +151,19 @@ export class ReactiveSet extends Set {
 	}
 
 	keys() {
+		this.#read_all();
 		get(this.#version);
 		return super.keys();
 	}
 
 	values() {
+		this.#read_all();
 		get(this.#version);
 		return super.values();
 	}
 
 	entries() {
+		this.#read_all();
 		get(this.#version);
 		return super.entries();
 	}

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

@@ -1,50 +1,28 @@
 import { flushSync } from '../../../../src/index-client';
-import { test } from '../../test';
+import { ok, test } from '../../test';
 
 export default test({
-	html: `<button>add</button><button>delete</button><button>clear</button>`,
+	html: `<button>delete initial</button><button>add</button><button>delete</button><button>clear</button><div id="output"><p>1</p><div>0</div></div>`,
 
 	test({ assert, target }) {
-		const [btn, btn2, btn3] = target.querySelectorAll('button');
+		const [btn, btn2, btn3, btn4] = target.querySelectorAll('button');
+		const output = target.querySelector('#output');
+		ok(output);
 
-		flushSync(() => {
+		flushSync(() => btn?.click());
-			btn?.click();
+		assert.htmlEqual(output.innerHTML, `<p>0</p>`);
-		});
 
-		assert.htmlEqual(
+		flushSync(() => btn2?.click());
-			target.innerHTML,
+		assert.htmlEqual(output.innerHTML, `<p>1</p><div>1</div>`);
-			`<button>add</button><button>delete</button><button>clear</button><div>1</div>`
-		);
 
-		flushSync(() => {
+		flushSync(() => btn2?.click());
-			btn?.click();
+		flushSync(() => btn2?.click());
-		});
+		assert.htmlEqual(output.innerHTML, `<p>3</p><div>1</div><div>2</div><div>3</div>`);
 
-		flushSync(() => {
+		flushSync(() => btn3?.click());
-			btn?.click();
+		assert.htmlEqual(output.innerHTML, `<p>2</p><div>1</div><div>2</div>`);
-		});
 
-		assert.htmlEqual(
+		flushSync(() => btn4?.click());
-			target.innerHTML,
+		assert.htmlEqual(output.innerHTML, `<p>0</p>`);
-			`<button>add</button><button>delete</button><button>clear</button><div>1</div><div>2</div><div>3</div>`
-		);
-
-		flushSync(() => {
-			btn2?.click();
-		});
-
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button><div>1</div><div>2</div>`
-		);
-
-		flushSync(() => {
-			btn3?.click();
-		});
-
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>add</button><button>delete</button><button>clear</button>`
-		);
 	}
 });

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

@@ -1,21 +1,18 @@
 <script>
-	import {Set} from 'svelte/reactivity';
+	import { Set } from 'svelte/reactivity';
 
-	let state = new Set();
+	let state = new Set([0]);
 </script>
 
-<button onclick={() => {
+<button onclick={() => state.delete(0)}>delete initial</button>
-	state.add(state.size + 1);
+<button onclick={() => state.add(state.size + 1)}>add</button>
-}}>add</button>
+<button onclick={() => state.delete(state.size)}>delete</button>
+<button onclick={() => state.clear()}>clear</button>
 
-<button onclick={() => {
+<div id="output">
-	state.delete(state.size);
+	<p>{state.size}</p>
-}}>delete</button>
 
-<button onclick={() => {
+	{#each state as item}
-	state.clear();
+		<div>{item}</div>
-}}>clear</button>
+	{/each}
-
+</div>
-{#each state as item}
-	<div>{item}</div>
-{/each}