@depup/svelte 5.53.3-depup.0

package/src/reactivity/create-subscriber.js

@@ -0,0 +1,95 @@
+import { get, tick, untrack } from '../internal/client/runtime.js';
+import { effect_tracking, render_effect } from '../internal/client/reactivity/effects.js';
+import { source, increment } from '../internal/client/reactivity/sources.js';
+import { tag } from '../internal/client/dev/tracing.js';
+import { DEV } from 'esm-env';
+import { queue_micro_task } from '../internal/client/dom/task.js';
+
+/**
+ * Returns a `subscribe` function that integrates external event-based systems with Svelte's reactivity.
+ * It's particularly useful for integrating with web APIs like `MediaQuery`, `IntersectionObserver`, or `WebSocket`.
+ *
+ * If `subscribe` is called inside an effect (including indirectly, for example inside a getter),
+ * the `start` callback will be called with an `update` function. Whenever `update` is called, the effect re-runs.
+ *
+ * If `start` returns a cleanup function, it will be called when the effect is destroyed.
+ *
+ * If `subscribe` is called in multiple effects, `start` will only be called once as long as the effects
+ * are active, and the returned teardown function will only be called when all effects are destroyed.
+ *
+ * It's best understood with an example. Here's an implementation of [`MediaQuery`](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery):
+ *
+ * ```js
+ * import { createSubscriber } from 'svelte/reactivity';
+ * import { on } from 'svelte/events';
+ *
+ * export class MediaQuery {
+ * 	#query;
+ * 	#subscribe;
+ *
+ * 	constructor(query) {
+ * 		this.#query = window.matchMedia(`(${query})`);
+ *
+ * 		this.#subscribe = createSubscriber((update) => {
+ * 			// when the `change` event occurs, re-run any effects that read `this.current`
+ * 			const off = on(this.#query, 'change', update);
+ *
+ * 			// stop listening when all the effects are destroyed
+ * 			return () => off();
+ * 		});
+ * 	}
+ *
+ * 	get current() {
+ * 		// This makes the getter reactive, if read in an effect
+ * 		this.#subscribe();
+ *
+ * 		// Return the current state of the query, whether or not we're in an effect
+ * 		return this.#query.matches;
+ * 	}
+ * }
+ * ```
+ * @param {(update: () => void) => (() => void) | void} start
+ * @since 5.7.0
+ */
+export function createSubscriber(start) {
+	let subscribers = 0;
+	let version = source(0);
+	/** @type {(() => void) | void} */
+	let stop;
+
+	if (DEV) {
+		tag(version, 'createSubscriber version');
+	}
+
+	return () => {
+		if (effect_tracking()) {
+			get(version);
+
+			render_effect(() => {
+				if (subscribers === 0) {
+					stop = untrack(() => start(() => increment(version)));
+				}
+
+				subscribers += 1;
+
+				return () => {
+					queue_micro_task(() => {
+						// Only count down after a microtask, else we would reach 0 before our own render effect reruns,
+						// but reach 1 again when the tick callback of the prior teardown runs. That would mean we
+						// re-subcribe unnecessarily and create a memory leak because the old subscription is never cleaned up.
+						subscribers -= 1;
+
+						if (subscribers === 0) {
+							stop?.();
+							stop = undefined;
+							// Increment the version to ensure any dependent deriveds are marked dirty when the subscription is picked up again later.
+							// If we didn't do this then the comparison of write versions would determine that the derived has a later version than
+							// the subscriber, and it would not be re-run.
+							increment(version);
+						}
+					});
+				};
+			});
+		}
+	};
+}

package/src/reactivity/date.js

@@ -0,0 +1,118 @@
+/** @import { Source } from '#client' */
+import { derived } from '../internal/client/index.js';
+import { set, state } 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 { DEV } from 'esm-env';
+
+var inited = false;
+
+/**
+ * A reactive version of the built-in [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object.
+ * Reading the date (whether with methods like `date.getTime()` or `date.toString()`, or via things like [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat))
+ * in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated when the value of the date changes.
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteDate } from 'svelte/reactivity';
+ *
+ * 	const date = new SvelteDate();
+ *
+ * 	const formatter = new Intl.DateTimeFormat(undefined, {
+ * 	  hour: 'numeric',
+ * 	  minute: 'numeric',
+ * 	  second: 'numeric'
+ * 	});
+ *
+ * 	$effect(() => {
+ * 		const interval = setInterval(() => {
+ * 			date.setTime(Date.now());
+ * 		}, 1000);
+ *
+ * 		return () => {
+ * 			clearInterval(interval);
+ * 		};
+ * 	});
+ * </script>
+ *
+ * <p>The time is {formatter.format(date)}</p>
+ * ```
+ */
+export class SvelteDate extends Date {
+	#time = state(super.getTime());
+
+	/** @type {Map<keyof Date, Source<unknown>>} */
+	#deriveds = new Map();
+
+	#reaction = active_reaction;
+
+	/** @param {any[]} params */
+	constructor(...params) {
+		// @ts-ignore
+		super(...params);
+
+		if (DEV) {
+			tag(this.#time, 'SvelteDate.#time');
+		}
+
+		if (!inited) this.#init();
+	}
+
+	#init() {
+		inited = true;
+
+		var proto = SvelteDate.prototype;
+		var date_proto = Date.prototype;
+
+		var methods = /** @type {Array<keyof Date & string>} */ (
+			Object.getOwnPropertyNames(date_proto)
+		);
+
+		for (const method of methods) {
+			if (method.startsWith('get') || method.startsWith('to') || method === 'valueOf') {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// don't memoize if there are arguments
+					// @ts-ignore
+					if (args.length > 0) {
+						get(this.#time);
+						// @ts-ignore
+						return date_proto[method].apply(this, args);
+					}
+
+					var d = this.#deriveds.get(method);
+
+					if (d === undefined) {
+						// lazily create the derived, but as though it were being
+						// created at the same time as the class instance
+						const reaction = active_reaction;
+						set_active_reaction(this.#reaction);
+
+						d = derived(() => {
+							get(this.#time);
+							// @ts-ignore
+							return date_proto[method].apply(this, args);
+						});
+
+						this.#deriveds.set(method, d);
+
+						set_active_reaction(reaction);
+					}
+
+					return get(d);
+				};
+			}
+
+			if (method.startsWith('set')) {
+				// @ts-ignore
+				proto[method] = function (...args) {
+					// @ts-ignore
+					var result = date_proto[method].apply(this, args);
+					set(this.#time, date_proto.getTime.call(this));
+					return result;
+				};
+			}
+		}
+	}
+}

package/src/reactivity/index-client.js

@@ -0,0 +1,7 @@
+export { SvelteDate } from './date.js';
+export { SvelteSet } from './set.js';
+export { SvelteMap } from './map.js';
+export { SvelteURL } from './url.js';
+export { SvelteURLSearchParams } from './url-search-params.js';
+export { MediaQuery } from './media-query.js';
+export { createSubscriber } from './create-subscriber.js';

package/src/reactivity/index-server.js

@@ -0,0 +1,23 @@
+export const SvelteDate = globalThis.Date;
+export const SvelteSet = globalThis.Set;
+export const SvelteMap = globalThis.Map;
+export const SvelteURL = globalThis.URL;
+export const SvelteURLSearchParams = globalThis.URLSearchParams;
+
+export class MediaQuery {
+	current;
+	/**
+	 * @param {string} query
+	 * @param {boolean} [matches]
+	 */
+	constructor(query, matches = false) {
+		this.current = matches;
+	}
+}
+
+/**
+ * @param {any} _
+ */
+export function createSubscriber(_) {
+	return () => {};
+}

package/src/reactivity/map.js

@@ -0,0 +1,273 @@
+/** @import { Source } from '#client' */
+import { DEV } from 'esm-env';
+import { set, source, state, increment } from '../internal/client/reactivity/sources.js';
+import { label, tag } from '../internal/client/dev/tracing.js';
+import { get, update_version } from '../internal/client/runtime.js';
+
+/**
+ * A reactive version of the built-in [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object.
+ * Reading contents of the map (by iterating, or by reading `map.size` or calling `map.get(...)` or `map.has(...)` as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived)
+ * will cause it to be re-evaluated as necessary when the map is updated.
+ *
+ * Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
+ *
+ * ```svelte
+ * <script>
+ * 	import { SvelteMap } from 'svelte/reactivity';
+ * 	import { result } from './game.js';
+ *
+ * 	let board = new SvelteMap();
+ * 	let player = $state('x');
+ * 	let winner = $derived(result(board));
+ *
+ * 	function reset() {
+ * 		player = 'x';
+ * 		board.clear();
+ * 	}
+ * </script>
+ *
+ * <div class="board">
+ * 	{#each Array(9), i}
+ * 		<button
+ * 			disabled={board.has(i) || winner}
+ * 			onclick={() => {
+ * 				board.set(i, player);
+ * 				player = player === 'x' ? 'o' : 'x';
+ * 			}}
+ * 		>{board.get(i)}</button>
+ * 	{/each}
+ * </div>
+ *
+ * {#if winner}
+ * 	<p>{winner} wins!</p>
+ * 	<button onclick={reset}>reset</button>
+ * {:else}
+ * 	<p>{player} is next</p>
+ * {/if}
+ * ```
+ *
+ * @template K
+ * @template V
+ * @extends {Map<K, V>}
+ */
+export class SvelteMap extends Map {
+	/** @type {Map<K, Source<number>>} */
+	#sources = new Map();
+	#version = state(0);
+	#size = state(0);
+	#update_version = update_version || -1;
+
+	/**
+	 * @param {Iterable<readonly [K, V]> | null | undefined} [value]
+	 */
+	constructor(value) {
+		super();
+
+		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) {
+				super.set(key, v);
+			}
+			this.#size.v = super.size;
+		}
+	}
+
+	/**
+	 * If the source is being created inside the same reaction as the SvelteMap instance,
+	 * 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) {
+		return update_version === this.#update_version ? state(value) : source(value);
+	}
+
+	/** @param {K} key */
+	has(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s === undefined) {
+			var ret = super.get(key);
+			if (ret !== undefined) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
+				sources.set(key, s);
+			} else {
+				// We should always track the version in case
+				// the Set ever gets this value in the future.
+				get(this.#version);
+				return false;
+			}
+		}
+
+		get(s);
+		return true;
+	}
+
+	/**
+	 * @param {(value: V, key: K, map: Map<K, V>) => void} callbackfn
+	 * @param {any} [this_arg]
+	 */
+	forEach(callbackfn, this_arg) {
+		this.#read_all();
+		super.forEach(callbackfn, this_arg);
+	}
+
+	/** @param {K} key */
+	get(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+
+		if (s === undefined) {
+			var ret = super.get(key);
+			if (ret !== undefined) {
+				s = this.#source(0);
+
+				if (DEV) {
+					tag(s, `SvelteMap get(${label(key)})`);
+				}
+
+				sources.set(key, s);
+			} else {
+				// We should always track the version in case
+				// the Set ever gets this value in the future.
+				get(this.#version);
+				return undefined;
+			}
+		}
+
+		get(s);
+		return super.get(key);
+	}
+
+	/**
+	 * @param {K} key
+	 * @param {V} value
+	 * */
+	set(key, value) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+		var prev_res = super.get(key);
+		var res = super.set(key, value);
+		var version = this.#version;
+
+		if (s === undefined) {
+			s = this.#source(0);
+
+			if (DEV) {
+				tag(s, `SvelteMap get(${label(key)})`);
+			}
+
+			sources.set(key, s);
+			set(this.#size, super.size);
+			increment(version);
+		} else if (prev_res !== value) {
+			increment(s);
+
+			// if not every reaction of s is a reaction of version we need to also include version
+			var v_reactions = version.reactions === null ? null : new Set(version.reactions);
+			var needs_version_increase =
+				v_reactions === null ||
+				!s.reactions?.every((r) =>
+					/** @type {NonNullable<typeof v_reactions>} */ (v_reactions).has(r)
+				);
+			if (needs_version_increase) {
+				increment(version);
+			}
+		}
+
+		return res;
+	}
+
+	/** @param {K} key */
+	delete(key) {
+		var sources = this.#sources;
+		var s = sources.get(key);
+		var res = super.delete(key);
+
+		if (s !== undefined) {
+			sources.delete(key);
+			set(this.#size, super.size);
+			set(s, -1);
+			increment(this.#version);
+		}
+
+		return res;
+	}
+
+	clear() {
+		if (super.size === 0) {
+			return;
+		}
+		// Clear first, so we get nice console.log outputs with $inspect
+		super.clear();
+		var sources = this.#sources;
+		set(this.#size, 0);
+		for (var s of sources.values()) {
+			set(s, -1);
+		}
+		increment(this.#version);
+		sources.clear();
+	}
+
+	#read_all() {
+		get(this.#version);
+
+		var sources = this.#sources;
+		if (this.#size.v !== sources.size) {
+			for (var key of super.keys()) {
+				if (!sources.has(key)) {
+					var s = this.#source(0);
+					if (DEV) {
+						tag(s, `SvelteMap get(${label(key)})`);
+					}
+
+					sources.set(key, s);
+				}
+			}
+		}
+
+		for ([, s] of this.#sources) {
+			get(s);
+		}
+	}
+
+	keys() {
+		get(this.#version);
+		return super.keys();
+	}
+
+	values() {
+		this.#read_all();
+		return super.values();
+	}
+
+	entries() {
+		this.#read_all();
+		return super.entries();
+	}
+
+	[Symbol.iterator]() {
+		return this.entries();
+	}
+
+	get size() {
+		get(this.#size);
+		return super.size;
+	}
+}

package/src/reactivity/media-query.js

@@ -0,0 +1,55 @@
+import { on } from '../events/index.js';
+import { ReactiveValue } from './reactive-value.js';
+
+const parenthesis_regex = /\(.+\)/;
+
+// these keywords are valid media queries but they need to be without parenthesis
+//
+// eg: new MediaQuery('screen')
+//
+// however because of the auto-parenthesis logic in the constructor since there's no parenthesis
+// in the media query they'll be surrounded by parenthesis
+//
+// however we can check if the media query is only composed of these keywords
+// and skip the auto-parenthesis
+//
+// https://github.com/sveltejs/svelte/issues/15930
+const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
+
+/**
+ * Creates a media query and provides a `current` property that reflects whether or not it matches.
+ *
+ * Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration.
+ * If you can use the media query in CSS to achieve the same effect, do that.
+ *
+ * ```svelte
+ * <script>
+ * 	import { MediaQuery } from 'svelte/reactivity';
+ *
+ * 	const large = new MediaQuery('min-width: 800px');
+ * </script>
+ *
+ * <h1>{large.current ? 'large screen' : 'small screen'}</h1>
+ * ```
+ * @extends {ReactiveValue<boolean>}
+ * @since 5.7.0
+ */
+export class MediaQuery extends ReactiveValue {
+	/**
+	 * @param {string} query A media query string
+	 * @param {boolean} [fallback] Fallback value for the server
+	 */
+	constructor(query, fallback) {
+		let final_query =
+			parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+				? query
+				: `(${query})`;
+		const q = window.matchMedia(final_query);
+		super(
+			() => q.matches,
+			(update) => on(q, 'change', update)
+		);
+	}
+}

package/src/reactivity/reactive-value.js

@@ -0,0 +1,24 @@
+import { createSubscriber } from './create-subscriber.js';
+
+/**
+ * @template T
+ */
+export class ReactiveValue {
+	#fn;
+	#subscribe;
+
+	/**
+	 *
+	 * @param {() => T} fn
+	 * @param {(update: () => void) => void} onsubscribe
+	 */
+	constructor(fn, onsubscribe) {
+		this.#fn = fn;
+		this.#subscribe = createSubscriber(onsubscribe);
+	}
+
+	get current() {
+		this.#subscribe();
+		return this.#fn();
+	}
+}