Revert "fix: lazily create sources for Set (#11946)" (#11966)

This reverts commit 48fa658.

Author: Rich-Harris

.changeset/thin-spoons-float.md

@@ -47,7 +47,6 @@ 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);
@@ -87,30 +86,14 @@ 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;
 		var res = super.add(value);
 		var s = sources.get(value);
 
 		if (s === undefined) {
+			sources.set(value, source(true));
 			set(this.#size, super.size);
 			increment(this.#version);
 		} else {
@@ -151,19 +134,16 @@ 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/src/reactivity/set.js

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

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