8000 fix: use `state` instead of `source` in reactive classes by paoloricciuti · Pull Request #16239 · sveltejs/svelte · GitHub
[go: up one dir, main page]

Skip to content

fix: use state instead of source in reactive classes #16239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jul 9, 2025
Prev Previous commit
Next Next commit
fix: use active_reaction as indication to use source or state
  • Loading branch information
paoloricciuti committed Jun 25, 2025
commit 2e69ed4f273af13c6c06e59281d3a086a0c6561f
54 changes: 25 additions & 29 deletions packages/svelte/src/reactivity/map.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @import { Source } from '#client' */
/** @import { Reaction, Source } from '#client' */
import { DEV } from 'esm-env';
import { set, source, state } from '../internal/client/reactivity/sources.js';
import { label, tag } from '../internal/client/dev/tracing.js';
import { get, push_reaction_value } from '../internal/client/runtime.js';
import { active_reaction, get, push_reaction_value } from '../internal/client/runtime.js';
import { increment } from './utils.js';

/**
Expand Down Expand Up @@ -56,13 +56,17 @@ export class SvelteMap extends Map {
#sources = new Map();
#version = state(0);
#size = state(0);
/**@type {Reaction | null} */
#initial_reaction = null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wondering if there are cases when map still lives, while the reaction could have been GCed and this would prevent it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I was wondering about that too...technically it shouldn't be the case because either there's no active reaction (it's outside of a derived/effect) or it's inside it but this means that when the derived/effect is no longer used the function should be GCd and everything inside it too...but I need to do a better check

Copy link
< 10000 span aria-label="This user has previously committed to the svelte repository." data-view-component="true" class="tooltipped tooltipped-n"> Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe this can become initial_reaction = WeakSet(active_reaction) and we can check with this.initial_reaction.has(active_reaction)?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for the sake of history, I've also discovered there is a WeakRef struct that could be alternative here. In case of any future issues might be a possible alternative implementation


/**
* @param {Iterable<readonly [K, V]> | null | undefined} [value]
*/
constructor(value) {
super();

this.#initial_reaction = active_reaction;

if (DEV) {
// If the value is invalid then the native exception will fire here
value = new Map(value);
Expand All @@ -79,17 +83,31 @@ export class SvelteMap extends Map {
}
}

/**
* If the active_reaction is the same as the reaction that created this SvelteMap,
* we use state so that it will not be a dependency of the reaction. Otherwise we
* use source so it will be.
*
* @template T
* @param {T} value
* @returns {Source<T>}
*/
#source(value) {
if (this.#initial_reaction === active_reaction) {
return state(value);
}
return source(value);
}

/** @param {K} key */
has(key) {
var sources = this.#sources;
var s = sources.get(key);
var is_new = false;

if (s === undefined) {
var ret = super.get(key);
if (ret !== undefined) {
s = source(0);
is_new = true;
s = this.#source(0);

if (DEV) {
tag(s, `SvelteMap get(${label(key)})`);
Expand All @@ -105,12 +123,6 @@ export class SvelteMap extends Map {
}

get(s);
if (is_new) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
return true;
}

Expand All @@ -127,13 +139,11 @@ export class SvelteMap extends Map {
get(key) {
var sources = this.#sources;
var s = sources.get(key);
var is_new = false;

if (s === undefined) {
var ret = super.get(key);
if (ret !== undefined) {
s = source(0);
is_new = true;
s = this.#source(0);

if (DEV) {
tag(s, `SvelteMap get(${label(key)})`);
Expand All @@ -149,12 +159,6 @@ export class SvelteMap extends Map {
}

get(s);
if (is_new) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
return super.get(key);
}

Expand Down Expand Up @@ -232,12 +236,10 @@ export class SvelteMap extends Map {
get(this.#version);

var sources = this.#sources;
var new_sources = new WeakSet();
if (this.#size.v !== sources.size) {
for (var key of super.keys()) {
if (!sources.has(key)) {
var s = source(0);
new_sources.add(s);
var s = this.#source(0);
if (DEV) {
tag(s, `SvelteMap get(${label(key)})`);
}
Expand All @@ -249,12 +251,6 @@ export class SvelteMap extends Map {

for ([, s] of this.#sources) {
get(s);
if (new_sources.has(s)) {
// if it's a new source we want to push to the reactions values
// AFTER we read it so that the effect depends on it but we don't
// trigger an unsafe mutation (since it was created within the derived)
push_reaction_value(s);
}
}
}

Expand Down
32 changes: 24 additions & 8 deletions packages/svelte/src/reactivity/set.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/** @import { Source } from '#client' */
/** @import { Reaction, Source } from '#client' */
import { DEV } from 'esm-env';
import { source, set, state } from '../internal/client/reactivity/sources.js';
import { label, tag } from '../internal/client/dev/tracing.js';
import { get, push_reaction_value } from '../internal/client/runtime.js';
import { active_reaction, get } from '../internal/client/runtime.js';
import { increment } from './utils.js';

var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
Expand Down Expand Up @@ -51,12 +51,17 @@ export class SvelteSet extends Set {
#version = state(0);
#size = state(0);

/**@type {Reaction | null}*/
#initial_reaction = null;

/**
* @param {Iterable<T> | null | undefined} [value]
*/
constructor(value) {
super();

this.#initial_reaction = active_reaction;

if (DEV) {
// If the value is invalid then the native exception will fire here
value = new Set(value);
Expand All @@ -75,6 +80,22 @@ export class SvelteSet extends Set {
if (!inited) this.#init();
}

/**
* If the active_reaction is the same as the reaction that created this SvelteMap,
* we use state so that it will not be a dependency of the reaction. Otherwise we
* use source so it will be.
*
* @template T
* @param {T} value
* @returns {Source<T>}
*/
#source(value) {
if (this.#initial_reaction === active_reaction) {
return state(value);
}
return source(value);
}

// We init as part of the first instance so that we can treeshake this class
#init() {
inited = true;
Expand Down Expand Up @@ -107,7 +128,6 @@ export class SvelteSet extends Set {
var has = super.has(value);
var sources = this.#sources;
var s = sources.get(value);
var is_new = false;

if (s === undefined) {
if (!has) {
Expand All @@ -117,8 +137,7 @@ export class SvelteSet extends Set {
return false;
}

s = source(true);
is_new = true;
s = this.#source(true);

if (DEV) {
tag(s, `SvelteSet has(${label(value)})`);
Expand All @@ -128,9 +147,6 @@ export class SvelteSet extends Set {
}

get(s);
if (is_new) {
push_reaction_value(s);
}
return has;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ export default test({
},

test({ assert, target }) {
const [button1, button2] = target.querySelectorAll('button');
const [button1, button2, button3, button4, button5, button6, button7, button8] =
target.querySelectorAll('button');

assert.throws(() => {
button1?.click();
Expand All @@ -19,5 +20,35 @@ export default test({
button2?.click();
flushSync();
});

assert.throws(() => {
button3?.click();
flushSync();
}, /state_unsafe_mutation/);

assert.doesNotThrow(() => {
button4?.click();
flushSync();
});

assert.throws(() => {
button5?.click();
flushSync();
}, /state_unsafe_mutation/);

assert.doesNotThrow(() => {
button6?.click();
flushSync();
});

assert.throws(() => {
button7?.click();
flushSync();
}, /state_unsafe_mutation/);

assert.doesNotThrow(() => {
button8?.click();
flushSync();
});
}
});
Original file line number Diff line number Diff line change
@@ -1,27 +1,101 @@
<script>
import { SvelteMap } from 'svelte/reactivity';

let visibleExternal = $state(false);
let external = new SvelteMap();
const throws = $derived.by(() => {
external.set(1, 1);
return external;
let outside_basic = $state(false);
let outside_basic_map = new SvelteMap();
const throw_basic = $derived.by(() => {
outside_basic_map.set(1, 1);
return outside_basic_map;
});

let visibleInternal = $state(false);
const works = $derived.by(() => {
let internal = new SvelteMap();
internal.set(1, 1);
return internal;
let inside_basic = $state(false);
const works_basic = $derived.by(() => {
let inside = new SvelteMap();
inside.set(1, 1);
return inside;
});

let outside_has = $state(false);
let outside_has_map = new SvelteMap([[1, 1]]);
const throw_has = $derived.by(() => {
outside_has_map.has(1);
outside_has_map.set(1, 2);
return outside_has_map;
});

let inside_has = $state(false);
const works_has = $derived.by(() => {
let inside = new SvelteMap([[1, 1]]);
inside.has(1);
inside.set(1, 1);
return inside;
});

let outside_get = $state(false);
let outside_get_map = new SvelteMap([[1, 1]]);
const throw_get = $derived.by(() => {
outside_get_map.get(1);
outside_get_map.set(1, 2);
return outside_get_map;
});

let inside_get = $state(false);
const works_get = $derived.by(() => {
let inside = new SvelteMap([[1, 1]]);
inside.get(1);
inside.set(1, 1);
return inside;
});

let outside_values = $state(false);
let outside_values_map = new SvelteMap([[1, 1]]);
const throw_values = $derived.by(() => {
outside_values_map.values(1);
outside_values_map.set(1, 2);
return outside_values_map;
});

let inside_values = $state(false);
const works_values = $derived.by(() => {
let inside = new SvelteMap([[1, 1]]);
inside.values();
inside.set(1, 1);
return inside;
});
</script>

<button onclick={() => (visibleExternal = true)}>external</button>
{#if visibleExternal}
{throws}
<button onclick={() => (outside_basic = true)}>external</button>
{#if outside_basic}
{throw_basic}
{/if}
<button onclick={() => (inside_basic = true)}>internal</button>
{#if inside_basic}
{works_basic}
{/if}

<button onclick={() => (outside_has = true)}>external</button>
{#if outside_has}
{throw_has}
{/if}
<button onclick={() => (visibleInternal = true)}>internal</button>
{#if visibleInternal}
{works}
<button onclick={() => (inside_has = true)}>internal</button>
{#if inside_has}
{works_has}
{/if}

<button onclick={() => (outside_get = true)}>external</button>
{#if outside_get}
{throw_get}
{/if}
<button onclick={() => (inside_get = true)}>internal</button>
{#if inside_get}
{works_get}
{/if}

<button onclick={() => (outside_values = true)}>external</button>
{#if outside_values}
{throw_values}
{/if}
<button onclick={() => (inside_values = true)}>internal</button>
{#if inside_values}
{works_values}
{/if}
Loading
0