tag `svelte/reactivity`, `svelte/motion` sources in DEV

packages/svelte/src/motion/spring.js

@@ -4,7 +4,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 { is_date, tag_if_necessary } from './utils.js';
 import { set, source } from '../internal/client/reactivity/sources.js';
 import { render_effect } from '../internal/client/reactivity/effects.js';
 import { get } from '../internal/client/runtime.js';
@@ -168,12 +168,12 @@ export function spring(value, opts = {}) {
  * @since 5.8.0
  */
 export class Spring {
-	#stiffness = source(0.15);
+	#stiffness = tag_if_necessary(source(0.15), 'Spring.stiffness');
-	#damping = source(0.8);
+	#damping = tag_if_necessary(source(0.8), 'Spring.damping');
-	#precision = source(0.01);
+	#precision = tag_if_necessary(source(0.01), 'Spring.precision');
 
-	#current = source(/** @type {T} */ (undefined));
+	#current = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Spring.current');
-	#target = source(/** @type {T} */ (undefined));
+	#target = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Spring.target');
 
 	#last_value = /** @type {T} */ (undefined);
 	#last_time = 0;

packages/svelte/src/motion/tweened.js

@@ -5,7 +5,7 @@ import { writable } from '../store/shared/index.js';
 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 { is_date, tag_if_necessary } from './utils.js';
 import { set, source } from '../internal/client/reactivity/sources.js';
 import { get, render_effect } from 'svelte/internal/client';
 
@@ -175,8 +175,8 @@ export function tweened(value, defaults = {}) {
  * @since 5.8.0
  */
 export class Tween {
-	#current = source(/** @type {T} */ (undefined));
+	#current = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Tween.current');
-	#target = source(/** @type {T} */ (undefined));
+	#target = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Tween.target');
 
 	/** @type {TweenedOptions<T>} */
 	#defaults;

packages/svelte/src/motion/utils.js

@@ -1,3 +1,6 @@
+import { DEV } from "esm-env";
+import { tag } from "../internal/client/dev/tracing.js";
+
 /**
  * @param {any} obj
  * @returns {obj is Date}
@@ -5,3 +8,17 @@
 export function is_date(obj) {
 	return Object.prototype.toString.call(obj) === '[object Date]';
 }
+
+
+/**
+ * @template {import("#client").Source<any>} T
+ * @param {T} source
+ * @param {string} name
+ * @returns {T}
+ */
+export function tag_if_necessary(source, name) {
+	if (DEV) {
+		return /** @type {T} */ (tag(source, name));
+	}
+	return source;
+}

packages/svelte/src/reactivity/create-subscriber.js

@@ -1,7 +1,7 @@
 import { get, tick, untrack } from '../internal/client/runtime.js';
 import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
 import { source } from '../internal/client/reactivity/sources.js';
-import { increment } from './utils.js';
+import { increment, tag_if_necessary } from './utils.js';
 
 /**
  * Returns a `subscribe` function that, if called in an effect (including expressions in the template),
@@ -47,7 +47,7 @@ import { increment } from './utils.js';
  */
 export function createSubscriber(start) {
 	let subscribers = 0;
-	let version = source(0);
+	let version = tag_if_necessary(source(0), 'createSubscriber version');
 	/** @type {(() => void) | void} */
 	let stop;
 

packages/svelte/src/reactivity/date.js

@@ -2,6 +2,7 @@
 import { derived } from '../internal/client/index.js';
 import { source, set } from '../internal/client/reactivity/sources.js';
 import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js';
+import { tag_if_necessary } from './utils.js';
 
 var inited = false;
 
@@ -38,7 +39,7 @@ var inited = false;
  * ```
  */
 export class SvelteDate extends Date {
-	#time = source(super.getTime());
+	#time = tag_if_necessary(source(super.getTime()), 'SvelteDate.#time');
 
 	/** @type {Map<keyof Date, Source<unknown>>} */
 	#deriveds = new Map();

packages/svelte/src/reactivity/map.js

@@ -2,7 +2,7 @@
 import { DEV } from 'esm-env';
 import { set, source } from '../internal/client/reactivity/sources.js';
 import { get } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
+import { increment, tag_if_necessary } from './utils.js';
 
 /**
  * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
@@ -53,8 +53,8 @@ import { increment } from './utils.js';
 export class SvelteMap extends Map {
 	/** @type {Map<K, Source<number>>} */
 	#sources = new Map();
-	#version = source(0);
+	#version = tag_if_necessary(source(0), 'SvelteMap version');
-	#size = source(0);
+	#size = tag_if_necessary(source(0), 'SvelteMap.size');
 
 	/**
 	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
@@ -81,7 +81,10 @@ export class SvelteMap extends Map {
 		if (s === undefined) {
 			var ret = super.get(key);
 			if (ret !== undefined) {
-				s = source(0);
+				s = tag_if_necessary(
+					source(0),
+					`SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`
+				);
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -112,7 +115,10 @@ export class SvelteMap extends Map {
 		if (s === undefined) {
 			var ret = super.get(key);
 			if (ret !== undefined) {
-				s = source(0);
+				s = tag_if_necessary(
+					source(0),
+					`SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`
+				);
 				sources.set(key, s);
 			} else {
 				// We should always track the version in case
@@ -138,7 +144,13 @@ export class SvelteMap extends Map {
 		var version = this.#version;
 
 		if (s === undefined) {
-			sources.set(key, source(0));
+			sources.set(
+				key,
+				tag_if_necessary(
+					source(0),
+					`SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`
+				)
+			);
 			set(this.#size, super.size);
 			increment(version);
 		} else if (prev_res !== value) {
@@ -197,7 +209,13 @@ export class SvelteMap extends Map {
 		if (this.#size.v !== sources.size) {
 			for (var key of super.keys()) {
 				if (!sources.has(key)) {
-					sources.set(key, source(0));
+					sources.set(
+						key,
+						tag_if_necessary(
+							source(0),
+							`SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`
+						)
+					);
 				}
 			}
 		}

packages/svelte/src/reactivity/set.js

@@ -2,7 +2,7 @@
 import { DEV } from 'esm-env';
 import { source, set } from '../internal/client/reactivity/sources.js';
 import { get } from '../internal/client/runtime.js';
-import { increment } from './utils.js';
+import { increment, tag_if_necessary } from './utils.js';
 
 var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf'];
 var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union'];
@@ -47,8 +47,8 @@ var inited = false;
 export class SvelteSet extends Set {
 	/** @type {Map<T, Source<boolean>>} */
 	#sources = new Map();
-	#version = source(0);
+	#version = tag_if_necessary(source(0), 'SvelteSet version');
-	#size = source(0);
+	#size = tag_if_necessary(source(0), 'SvelteSet.size');
 
 	/**
 	 * @param {Iterable<T> | null | undefined} [value]
@@ -110,7 +110,10 @@ export class SvelteSet extends Set {
 				return false;
 			}
 
-			s = source(true);
+			s = tag_if_necessary(
+				source(true),
+				`SvelteSet Entry [${typeof value === 'symbol' ? `Symbol(${value.description})` : value}]`
+			);
 			sources.set(value, s);
 		}
 

packages/svelte/src/reactivity/url-search-params.js

@@ -1,7 +1,7 @@
 import { source } from '../internal/client/reactivity/sources.js';
 import { get } from '../internal/client/runtime.js';
 import { get_current_url } from './url.js';
-import { increment } from './utils.js';
+import { increment, tag_if_necessary } from './utils.js';
 
 export const REPLACE = Symbol();
 
@@ -32,7 +32,7 @@ export const REPLACE = Symbol();
  * ```
  */
 export class SvelteURLSearchParams extends URLSearchParams {
-	#version = source(0);
+	#version = tag_if_necessary(source(0), 'SvelteURLSearchParams version');
 	#url = get_current_url();
 
 	#updating = false;

packages/svelte/src/reactivity/url.js

@@ -1,6 +1,7 @@
 import { source, set } from '../internal/client/reactivity/sources.js';
 import { get } from '../internal/client/runtime.js';
 import { REPLACE, SvelteURLSearchParams } from './url-search-params.js';
+import { tag_if_necessary } from './utils.js';
 
 /** @type {SvelteURL | null} */
 let current_url = null;
@@ -38,14 +39,14 @@ export function get_current_url() {
  * ```
  */
 export class SvelteURL extends URL {
-	#protocol = source(super.protocol);
+	#protocol = tag_if_necessary(source(super.protocol), 'SvelteURL.protocol');
-	#username = source(super.username);
+	#username = tag_if_necessary(source(super.username), 'SvelteURL.username');
-	#password = source(super.password);
+	#password = tag_if_necessary(source(super.password), 'SvelteURL.password');
-	#hostname = source(super.hostname);
+	#hostname = tag_if_necessary(source(super.hostname), 'SvelteURL.hostname');
-	#port = source(super.port);
+	#port = tag_if_necessary(source(super.port), 'SvelteURL.port');
-	#pathname = source(super.pathname);
+	#pathname = tag_if_necessary(source(super.pathname), 'SvelteURL.pathname');
-	#hash = source(super.hash);
+	#hash = tag_if_necessary(source(super.hash), 'SvelteURL.hash');
-	#search = source(super.search);
+	#search = tag_if_necessary(source(super.search), 'SvelteURL.search');
 	#searchParams;
 
 	/**

packages/svelte/src/reactivity/utils.js

@@ -1,7 +1,22 @@
 /** @import { Source } from '#client' */
+import { DEV } from 'esm-env';
 import { set } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/index.js';
 
 /** @param {Source<number>} source */
 export function increment(source) {
 	set(source, source.v + 1);
 }
+
+/**
+ * @template {Source<any>} T
+ * @param {T} source
+ * @param {string} name
+ * @returns {T}
+ */
+export function tag_if_necessary(source, name) {
+	if (DEV) {
+		return /** @type {T} */ (tag(source, name));
+	}
+	return source;
+}

packages/svelte/src/reactivity/window/index.js

@@ -3,6 +3,7 @@ import { on } from '../../events/index.js';
 import { ReactiveValue } from '../reactive-value.js';
 import { get } from '../../internal/client/index.js';
 import { set, source } from '../../internal/client/reactivity/sources.js';
+import { tag_if_necessary } from '../utils.js';
 
 /**
  * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`.
@@ -128,7 +129,10 @@ export const online = new ReactiveValue(
  * @since 5.11.0
  */
 export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio {
-	#dpr = source(BROWSER ? window.devicePixelRatio : undefined);
+	#dpr = tag_if_necessary(
+		source(BROWSER ? window.devicePixelRatio : undefined),
+		'window.devicePixelRatio'
+	);
 
 	#update() {
 		const off = on(