From 8a416a8bbed62e92bd1c2c6abb1f97927b8bb103 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 10 Jun 2025 13:31:43 -0400 Subject: [PATCH] replace tag_if_necessary with conditional tagging --- packages/svelte/src/motion/spring.js | 25 +++++-- packages/svelte/src/motion/tweened.js | 16 +++-- packages/svelte/src/motion/utils.js | 17 ----- .../src/reactivity/create-subscriber.js | 10 ++- packages/svelte/src/reactivity/date.js | 10 ++- packages/svelte/src/reactivity/map.js | 70 +++++++++++-------- packages/svelte/src/reactivity/set.js | 27 ++++--- .../src/reactivity/url-search-params.js | 6 +- packages/svelte/src/reactivity/url.js | 30 +++++--- packages/svelte/src/reactivity/utils.js | 15 ---- .../svelte/src/reactivity/window/index.js | 13 ++-- 11 files changed, 138 insertions(+), 101 deletions(-) diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js index da34d5a4f4..0f3bc6fb9f 100644 --- a/packages/svelte/src/motion/spring.js +++ b/packages/svelte/src/motion/spring.js @@ -4,11 +4,13 @@ import { writable } from '../store/shared/index.js'; import { loop } from '../internal/client/loop.js'; import { raf } from '../internal/client/timing.js'; -import { is_date, tag_if_necessary } from './utils.js'; +import { is_date } from './utils.js'; import { set, source } 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'; import { deferred, noop } from '../internal/shared/utils.js'; +import { DEV } from 'esm-env'; /** * @template T @@ -168,12 +170,12 @@ export function spring(value, opts = {}) { * @since 5.8.0 */ export class Spring { - #stiffness = tag_if_necessary(source(0.15), 'Spring.stiffness'); - #damping = tag_if_necessary(source(0.8), 'Spring.damping'); - #precision = tag_if_necessary(source(0.01), 'Spring.precision'); + #stiffness = source(0.15); + #damping = source(0.8); + #precision = source(0.01); - #current = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Spring.current'); - #target = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Spring.target'); + #current; + #target; #last_value = /** @type {T} */ (undefined); #last_time = 0; @@ -192,11 +194,20 @@ export class Spring { * @param {SpringOpts} [options] */ constructor(value, options = {}) { - this.#current.v = this.#target.v = value; + this.#current = DEV ? tag(source(value), 'Spring.current') : source(value); + this.#target = DEV ? tag(source(value), 'Spring.target') : source(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); if (typeof options.precision === 'number') this.#precision.v = options.precision; + + if (DEV) { + tag(this.#stiffness, 'Spring.stiffness'); + tag(this.#damping, 'Spring.damping'); + tag(this.#precision, 'Spring.precision'); + tag(this.#current, 'Spring.current'); + tag(this.#target, 'Spring.target'); + } } /** diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js index 6b871e50e5..09bd06c325 100644 --- a/packages/svelte/src/motion/tweened.js +++ b/packages/svelte/src/motion/tweened.js @@ -5,9 +5,11 @@ 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, tag_if_necessary } from './utils.js'; +import { is_date } from './utils.js'; import { set, source } 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'; /** * @template T @@ -175,8 +177,8 @@ export function tweened(value, defaults = {}) { * @since 5.8.0 */ export class Tween { - #current = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Tween.current'); - #target = tag_if_necessary(source(/** @type {T} */ (undefined)), 'Tween.target'); + #current; + #target; /** @type {TweenedOptions} */ #defaults; @@ -189,8 +191,14 @@ export class Tween { * @param {TweenedOptions} options */ constructor(value, options = {}) { - this.#current.v = this.#target.v = value; + this.#current = source(value); + this.#target = source(value); this.#defaults = options; + + if (DEV) { + tag(this.#current, 'Tween.current'); + tag(this.#target, 'Tween.target'); + } } /** diff --git a/packages/svelte/src/motion/utils.js b/packages/svelte/src/motion/utils.js index 5c7e072b86..62342dc7b2 100644 --- a/packages/svelte/src/motion/utils.js +++ b/packages/svelte/src/motion/utils.js @@ -1,7 +1,3 @@ -/** @import { Source } from '#client' */ -import { DEV } from 'esm-env'; -import { tag } from '../internal/client/dev/tracing.js'; - /** * @param {any} obj * @returns {obj is Date} @@ -9,16 +5,3 @@ import { tag } from '../internal/client/dev/tracing.js'; export function is_date(obj) { return Object.prototype.toString.call(obj) === '[object Date]'; } - -/** - * @template {Source} 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; -} diff --git a/packages/svelte/src/reactivity/create-subscriber.js b/packages/svelte/src/reactivity/create-subscriber.js index dd50955128..491ffb45cb 100644 --- a/packages/svelte/src/reactivity/create-subscriber.js +++ b/packages/svelte/src/reactivity/create-subscriber.js @@ -1,7 +1,9 @@ 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, tag_if_necessary } from './utils.js'; +import { tag } from '../internal/client/dev/tracing.js'; +import { increment } from './utils.js'; +import { DEV } from 'esm-env'; /** * Returns a `subscribe` function that, if called in an effect (including expressions in the template), @@ -47,10 +49,14 @@ import { increment, tag_if_necessary } from './utils.js'; */ export function createSubscriber(start) { let subscribers = 0; - let version = tag_if_necessary(source(0), 'createSubscriber version'); + let version = source(0); /** @type {(() => void) | void} */ let stop; + if (DEV) { + tag(version, 'createSubscriber version'); + } + return () => { if (effect_tracking()) { get(version); diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js index 27bacc9478..4176f0ceec 100644 --- a/packages/svelte/src/reactivity/date.js +++ b/packages/svelte/src/reactivity/date.js @@ -1,8 +1,9 @@ /** @import { Source } from '#client' */ import { derived } from '../internal/client/index.js'; import { source, set } from '../internal/client/reactivity/sources.js'; +import { tag } from '../internal/client/dev/tracing.js'; import { active_reaction, get, set_active_reaction } from '../internal/client/runtime.js'; -import { tag_if_necessary } from './utils.js'; +import { DEV } from 'esm-env'; var inited = false; @@ -39,7 +40,7 @@ var inited = false; * ``` */ export class SvelteDate extends Date { - #time = tag_if_necessary(source(super.getTime()), 'SvelteDate.#time'); + #time = source(super.getTime()); /** @type {Map>} */ #deriveds = new Map(); @@ -50,6 +51,11 @@ export class SvelteDate extends Date { constructor(...params) { // @ts-ignore super(...params); + + if (DEV) { + tag(this.#time, 'SvelteDate.#time'); + } + if (!inited) this.#init(); } diff --git a/packages/svelte/src/reactivity/map.js b/packages/svelte/src/reactivity/map.js index a3b1fb0588..bfa03e1a8b 100644 --- a/packages/svelte/src/reactivity/map.js +++ b/packages/svelte/src/reactivity/map.js @@ -1,8 +1,9 @@ /** @import { Source } from '#client' */ import { DEV } from 'esm-env'; import { set, source } from '../internal/client/reactivity/sources.js'; +import { tag } from '../internal/client/dev/tracing.js'; import { get } from '../internal/client/runtime.js'; -import { increment, tag_if_necessary } from './utils.js'; +import { increment } 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 +54,8 @@ import { increment, tag_if_necessary } from './utils.js'; export class SvelteMap extends Map { /** @type {Map>} */ #sources = new Map(); - #version = tag_if_necessary(source(0), 'SvelteMap version'); - #size = tag_if_necessary(source(0), 'SvelteMap.size'); + #version = source(0); + #size = source(0); /** * @param {Iterable | null | undefined} [value] @@ -62,8 +63,13 @@ export class SvelteMap extends Map { constructor(value) { super(); - // If the value is invalid then the native exception will fire here - if (DEV) value = new Map(value); + if (DEV) { + // If the value is invalid then the native exception will fire here + value = new Map(value); + + tag(this.#version, 'SvelteMap version'); + tag(this.#size, 'SvelteMap.size'); + } if (value) { for (var [key, v] of value) { @@ -81,10 +87,13 @@ export class SvelteMap extends Map { if (s === undefined) { var ret = super.get(key); if (ret !== undefined) { - s = tag_if_necessary( - source(0), - `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]` - ); + s = source(0); + + if (DEV) { + var label = `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`; + tag(s, label); + } + sources.set(key, s); } else { // We should always track the version in case @@ -115,10 +124,13 @@ export class SvelteMap extends Map { if (s === undefined) { var ret = super.get(key); if (ret !== undefined) { - s = tag_if_necessary( - source(0), - `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]` - ); + s = source(0); + + if (DEV) { + var label = `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`; + tag(s, label); + } + sources.set(key, s); } else { // We should always track the version in case @@ -144,13 +156,14 @@ export class SvelteMap extends Map { var version = this.#version; if (s === undefined) { - sources.set( - key, - tag_if_necessary( - source(0), - `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]` - ) - ); + s = source(0); + + if (DEV) { + var label = `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`; + tag(s, label); + } + + sources.set(key, s); set(this.#size, super.size); increment(version); } else if (prev_res !== value) { @@ -209,18 +222,19 @@ export class SvelteMap extends Map { if (this.#size.v !== sources.size) { for (var key of super.keys()) { if (!sources.has(key)) { - sources.set( - key, - tag_if_necessary( - source(0), - `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]` - ) - ); + var s = source(0); + + if (DEV) { + var label = `SvelteMap Entry [${typeof key === 'symbol' ? `Symbol(${key.description})` : key}]`; + tag(s, label); + } + + sources.set(key, s); } } } - for (var [, s] of this.#sources) { + for ([, s] of this.#sources) { get(s); } } diff --git a/packages/svelte/src/reactivity/set.js b/packages/svelte/src/reactivity/set.js index 0d044d71ca..30d5d272f9 100644 --- a/packages/svelte/src/reactivity/set.js +++ b/packages/svelte/src/reactivity/set.js @@ -1,8 +1,9 @@ /** @import { Source } from '#client' */ import { DEV } from 'esm-env'; import { source, set } from '../internal/client/reactivity/sources.js'; +import { tag } from '../internal/client/dev/tracing.js'; import { get } from '../internal/client/runtime.js'; -import { increment, tag_if_necessary } from './utils.js'; +import { increment } from './utils.js'; var read_methods = ['forEach', 'isDisjointFrom', 'isSubsetOf', 'isSupersetOf']; var set_like_methods = ['difference', 'intersection', 'symmetricDifference', 'union']; @@ -47,8 +48,8 @@ var inited = false; export class SvelteSet extends Set { /** @type {Map>} */ #sources = new Map(); - #version = tag_if_necessary(source(0), 'SvelteSet version'); - #size = tag_if_necessary(source(0), 'SvelteSet.size'); + #version = source(0); + #size = source(0); /** * @param {Iterable | null | undefined} [value] @@ -56,8 +57,13 @@ export class SvelteSet extends Set { constructor(value) { super(); - // If the value is invalid then the native exception will fire here - if (DEV) value = new Set(value); + if (DEV) { + // If the value is invalid then the native exception will fire here + value = new Set(value); + + tag(this.#version, 'SvelteSet version'); + tag(this.#size, 'SvelteSet.size'); + } if (value) { for (var element of value) { @@ -110,10 +116,13 @@ export class SvelteSet extends Set { return false; } - s = tag_if_necessary( - source(true), - `SvelteSet Entry [${typeof value === 'symbol' ? `Symbol(${value.description})` : value}]` - ); + s = source(true); + + if (DEV) { + var label = `SvelteSet Entry [${typeof value === 'symbol' ? `Symbol(${value.description})` : value}]`; + tag(s, label); + } + sources.set(value, s); } diff --git a/packages/svelte/src/reactivity/url-search-params.js b/packages/svelte/src/reactivity/url-search-params.js index 95f59b3941..c77ff9c822 100644 --- a/packages/svelte/src/reactivity/url-search-params.js +++ b/packages/svelte/src/reactivity/url-search-params.js @@ -1,7 +1,9 @@ +import { DEV } from 'esm-env'; import { source } from '../internal/client/reactivity/sources.js'; +import { tag } from '../internal/client/dev/tracing.js'; import { get } from '../internal/client/runtime.js'; import { get_current_url } from './url.js'; -import { increment, tag_if_necessary } from './utils.js'; +import { increment } from './utils.js'; export const REPLACE = Symbol(); @@ -32,7 +34,7 @@ export const REPLACE = Symbol(); * ``` */ export class SvelteURLSearchParams extends URLSearchParams { - #version = tag_if_necessary(source(0), 'SvelteURLSearchParams version'); + #version = DEV ? tag(source(0), 'SvelteURLSearchParams version') : source(0); #url = get_current_url(); #updating = false; diff --git a/packages/svelte/src/reactivity/url.js b/packages/svelte/src/reactivity/url.js index b77e14e26f..56732a0402 100644 --- a/packages/svelte/src/reactivity/url.js +++ b/packages/svelte/src/reactivity/url.js @@ -1,7 +1,8 @@ +import { DEV } from 'esm-env'; import { source, set } from '../internal/client/reactivity/sources.js'; +import { tag } from '../internal/client/dev/tracing.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; @@ -39,14 +40,14 @@ export function get_current_url() { * ``` */ export class SvelteURL extends URL { - #protocol = tag_if_necessary(source(super.protocol), 'SvelteURL.protocol'); - #username = tag_if_necessary(source(super.username), 'SvelteURL.username'); - #password = tag_if_necessary(source(super.password), 'SvelteURL.password'); - #hostname = tag_if_necessary(source(super.hostname), 'SvelteURL.hostname'); - #port = tag_if_necessary(source(super.port), 'SvelteURL.port'); - #pathname = tag_if_necessary(source(super.pathname), 'SvelteURL.pathname'); - #hash = tag_if_necessary(source(super.hash), 'SvelteURL.hash'); - #search = tag_if_necessary(source(super.search), 'SvelteURL.search'); + #protocol = source(super.protocol); + #username = source(super.username); + #password = source(super.password); + #hostname = source(super.hostname); + #port = source(super.port); + #pathname = source(super.pathname); + #hash = source(super.hash); + #search = source(super.search); #searchParams; /** @@ -57,6 +58,17 @@ export class SvelteURL extends URL { url = new URL(url, base); super(url); + if (DEV) { + tag(this.#protocol, 'SvelteURL.protocol'); + tag(this.#username, 'SvelteURL.username'); + tag(this.#password, 'SvelteURL.password'); + tag(this.#hostname, 'SvelteURL.hostname'); + tag(this.#port, 'SvelteURL.port'); + tag(this.#pathname, 'SvelteURL.pathname'); + tag(this.#hash, 'SvelteURL.hash'); + tag(this.#search, 'SvelteURL.search'); + } + current_url = this; this.#searchParams = new SvelteURLSearchParams(url.searchParams); current_url = null; diff --git a/packages/svelte/src/reactivity/utils.js b/packages/svelte/src/reactivity/utils.js index 0de4916e07..cd55e0e0ba 100644 --- a/packages/svelte/src/reactivity/utils.js +++ b/packages/svelte/src/reactivity/utils.js @@ -1,22 +1,7 @@ /** @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} source */ export function increment(source) { set(source, source.v + 1); } - -/** - * @template {Source} 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; -} diff --git a/packages/svelte/src/reactivity/window/index.js b/packages/svelte/src/reactivity/window/index.js index 26f9fde6bd..d4fcf29e4e 100644 --- a/packages/svelte/src/reactivity/window/index.js +++ b/packages/svelte/src/reactivity/window/index.js @@ -1,9 +1,9 @@ -import { BROWSER } from 'esm-env'; +import { BROWSER, DEV } from 'esm-env'; 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'; +import { tag } from '../../internal/client/dev/tracing.js'; /** * `scrollX.current` is a reactive view of `window.scrollX`. On the server it is `undefined`. @@ -129,10 +129,7 @@ export const online = new ReactiveValue( * @since 5.11.0 */ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio { - #dpr = tag_if_necessary( - source(BROWSER ? window.devicePixelRatio : undefined), - 'window.devicePixelRatio' - ); + #dpr = source(BROWSER ? window.devicePixelRatio : undefined); #update() { const off = on( @@ -151,6 +148,10 @@ export const devicePixelRatio = /* @__PURE__ */ new (class DevicePixelRatio { if (BROWSER) { this.#update(); } + + if (DEV) { + tag(this.#dpr, 'window.devicePixelRatio'); + } } get current() {