diff --git a/.changeset/thin-spoons-float.md b/.changeset/thin-spoons-float.md deleted file mode 100644 index 087db3f7b..000000000 --- a/.changeset/thin-spoons-float.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'svelte': patch ---- - -fix: create sources on read for Set diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js index 3170d0e41..98d941a07 100644 --- a/packages/svelte/src/reactivity/set.js +++ b/packages/svelte/src/reactivity/set.js @@ -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,23 +86,6 @@ 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; @@ -111,6 +93,7 @@ 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 { @@ -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(); } diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-set/_config.js b/packages/svelte/tests/runtime-runes/samples/reactive-set/_config.js index baf2e3df3..b2284071b 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-set/_config.js +++ b/packages/svelte/tests/runtime-runes/samples/reactive-set/_config.js @@ -1,28 +1,50 @@ import { flushSync } from '../../../../src/index-client'; -import { ok, test } from '../../test'; +import { test } from '../../test'; export default test({ - html: `

1

0
`, + html: ``, 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, `

0

`); + flushSync(() => { + btn?.click(); + }); - flushSync(() => btn2?.click()); - assert.htmlEqual(output.innerHTML, `

1

1
`); + assert.htmlEqual( + target.innerHTML, + `
1
` + ); - flushSync(() => btn2?.click()); - flushSync(() => btn2?.click()); - assert.htmlEqual(output.innerHTML, `

3

1
2
3
`); + flushSync(() => { + btn?.click(); + }); - flushSync(() => btn3?.click()); - assert.htmlEqual(output.innerHTML, `

2

1
2
`); + flushSync(() => { + btn?.click(); + }); - flushSync(() => btn4?.click()); - assert.htmlEqual(output.innerHTML, `

0

`); + assert.htmlEqual( + target.innerHTML, + `
1
2
3
` + ); + + flushSync(() => { + btn2?.click(); + }); + + assert.htmlEqual( + target.innerHTML, + `
1
2
` + ); + + flushSync(() => { + btn3?.click(); + }); + + assert.htmlEqual( + target.innerHTML, + `` + ); } }); diff --git a/packages/svelte/tests/runtime-runes/samples/reactive-set/main.svelte b/packages/svelte/tests/runtime-runes/samples/reactive-set/main.svelte index 1272d28eb..523335ced 100644 --- a/packages/svelte/tests/runtime-runes/samples/reactive-set/main.svelte +++ b/packages/svelte/tests/runtime-runes/samples/reactive-set/main.svelte @@ -1,18 +1,21 @@ - - - - + -
-

{state.size}

+ - {#each state as item} -
{item}
- {/each} -
+ + +{#each state as item} +
{item}
+{/each}