fix: use state instead of source in reactive classes

Author: paoloricciuti

packages/svelte/src/motion/spring.js

@@ -5,7 +5,7 @@ import { writable } from '../store/shared/index.js';
 import { loop } from '../internal/client/loop.js';
 import { raf } from '../internal/client/timing.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { render_effect } from '../internal/client/reactivity/effects.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get } from '../internal/client/runtime.js';
@@ -170,9 +170,9 @@ export function spring(value, opts = {}) {
  * @since 5.8.0
  */
 export class Spring {
-	#stiffness = source(0.15);
-	#damping = source(0.8);
-	#precision = source(0.01);
+	#stiffness = state(0.15);
+	#damping = state(0.8);
+	#precision = state(0.01);
 
 	#current;
 	#target;
@@ -194,8 +194,8 @@ export class Spring {
 	 * @param {SpringOpts} [options]
 	 */
 	constructor(value, options = {}) {
-		this.#current = DEV ? tag(source(value), 'Spring.current') : source(value);
-		this.#target = DEV ? tag(source(value), 'Spring.target') : source(value);
+		this.#current = DEV ? tag(state(value), 'Spring.current') : state(value);
+		this.#target = DEV ? tag(state(value), 'Spring.target') : state(value);
 
 		if (typeof options.stiffness === 'number') this.#stiffness.v = clamp(options.stiffness, 0, 1);
 		if (typeof options.damping === 'number') this.#damping.v = clamp(options.damping, 0, 1);

packages/svelte/src/motion/tweened.js

@@ -6,7 +6,7 @@ import { raf } from '../internal/client/timing.js';
 import { loop } from '../internal/client/loop.js';
 import { linear } from '../easing/index.js';
 import { is_date } from './utils.js';
-import { set, source } from '../internal/client/reactivity/sources.js';
+import { set, state } from '../internal/client/reactivity/sources.js';
 import { tag } from '../internal/client/dev/tracing.js';
 import { get, render_effect } from 'svelte/internal/client';
 import { DEV } from 'esm-env';
@@ -191,8 +191,8 @@ export class Tween {
 	 * @param {TweenedOptions<T>} options
 	 */
 	constructor(value, options = {}) {
-		this.#current = source(value);
-		this.#target = source(value);
+		this.#current = state(value);
+		this.#target = state(value);
 		this.#defaults = options;
 
 		if (DEV) {

packages/svelte/src/reactivity/map.js

@@ -2,7 +2,7 @@
 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 } from '../internal/client/runtime.js';
+import { get, push_reaction_value } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
 /**
@@ -83,11 +83,13 @@ export class SvelteMap extends Map {
 	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;
 
 				if (DEV) {
 					tag(s, `SvelteMap get(${label(key)})`);
@@ -103,6 +105,12 @@ 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;
 	}
 
@@ -119,11 +127,13 @@ 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;
 
 				if (DEV) {
 					tag(s, `SvelteMap get(${label(key)})`);
@@ -139,6 +149,12 @@ 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);
 	}
 
@@ -154,7 +170,7 @@ export class SvelteMap extends Map {
 		var version = this.#version;
 
 		if (s === undefined) {
-			s = source(0);
+			s = state(0);
 
 			if (DEV) {
 				tag(s, `SvelteMap get(${label(key)})`);
@@ -216,11 +232,12 @@ 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);
 					if (DEV) {
 						tag(s, `SvelteMap get(${label(key)})`);
 					}
@@ -232,6 +249,12 @@ 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);
+			}
 		}
 	}
 

packages/svelte/src/reactivity/set.js

@@ -2,7 +2,7 @@
 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 } from '../internal/client/runtime.js';
+import { get, push_reaction_value } from '../internal/client/runtime.js';
 import { increment } from './utils.js';
 
 var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
@@ -107,6 +107,7 @@ 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) {
@@ -117,6 +118,7 @@ export class SvelteSet extends Set {
 			}
 
 			s = source(true);
+			is_new = true;
 
 			if (DEV) {
 				tag(s, `SvelteSet has(${label(value)})`);
@@ -126,6 +128,9 @@ export class SvelteSet extends Set {
 		}
 
 		get(s);
+		if (is_new) {
+			push_reaction_value(s);
+		}
 		return has;
 	}